feat: ingredients knowledge panels

lib/ProductOpener/KnowledgePanels.pm

@@ -273,6 +273,8 @@ sub create_knowledge_panels ($product_ref, $target_lc, $target_cc, $options_ref,
 Helper function to allow to enter multiline strings in JSON templates.
 The function converts the multiline string into a single line string.
 
+New lines are converted to \n, and quotes " and \ are escaped if not escaped already.
+
 =cut
 
 sub convert_multiline_string_to_singleline ($line) {
@@ -287,6 +289,30 @@ sub convert_multiline_string_to_singleline ($line) {
 	return '"' . $line . '"';
 }
 
+=head2 convert_multiline_string_to_singleline_without_line_breaks_and_extra_spaces($line)
+
+Helper function to allow to enter multiline strings in JSON templates.
+The function converts the multiline string into a single line string.
+
+Line breaks are converted to spaces, and multiple spaces are converted to a single space.
+
+This function is useful in templates where we use IF statements etc. to generate a single value like a title.
+
+=cut
+
+sub convert_multiline_string_to_singleline_without_line_breaks_and_extra_spaces ($line) {
+
+	# Escape " and \ unless they have been escaped already
+	# negative look behind to not convert \n to \\n or \" to \\" or \\ to \\\\
+	$line =~ s/(?<!\\)("|\\)/\\$1/g;
+
+	$line =~ s/\s+/ /g;
+	$line =~ s/^\s+//;
+	$line =~ s/\s+$//;
+
+	return '"' . $line . '"';
+}
+
 =head2 create_panel_from_json_template ( $panel_id, $panel_template, $panel_data_ref, $product_ref, $target_lc, $target_cc, $options_ref )
 
 Creates a knowledge panel from a JSON template.
@@ -301,6 +327,8 @@ Some special features that are not included in the JSON format are supported:
 - The multiline strings will be converted to a single string.
 - Quotes " are automatically escaped unless they are already escaped
 
+Using two backticks at the start and end of the string removes line breaks and extra spaces.
+
 3. Comments can be included by starting a line with //
 - Comments will be removed in the resulting JSON, they are only intended to make the source template easier to understand.
 
@@ -386,6 +414,8 @@ sub create_panel_from_json_template ($panel_id, $panel_template, $panel_data_ref
 
 		# Also escape quotes " to \"
 
+		$panel_json
+			=~ s/\`\`([^\`]*)\`\`/convert_multiline_string_to_singleline_without_line_breaks_and_extra_spaces($1)/seg;
 		$panel_json =~ s/\`([^\`]*)\`/convert_multiline_string_to_singleline($1)/seg;
 
 		# Remove trailing commas at the end of a string delimited by quotes

lib/ProductOpener/KnowledgePanelsIngredients.pm

@@ -77,11 +77,13 @@ sub create_ingredients_list_panel ($product_ref, $target_lc, $target_cc, $option
 	if ((defined $product_ref->{ingredients_tags}) and (scalar @{$product_ref->{ingredients_tags}} > 0)) {
 
 		my $ingredient_i = 0;    # sequence number for ingredients
+								 # creates each individual panels for each ingredient
 		my @ingredients_panels_ids
 			= create_ingredients_panels_recursive($product_ref, \$ingredient_i, 0, $product_ref->{ingredients},
 			$target_lc, $target_cc, $options_ref);
 		my $ingredients_list_panel_data_ref = {ingredients_panels_ids => \@ingredients_panels_ids};
 
+		# create the panel that reference ingredients panels
 		create_panel_from_json_template(
 			"ingredients_list",
 			"api/knowledge-panels/health/ingredients/ingredients_list.tt.json",

scss/_product-page.scss

@@ -118,6 +118,10 @@ $decalTop:48px;
     }
 }
 
+li.accordion-navigation.accordion-navigation-inactive:after {
+    display: none;
+}
+
 // align dropdown only on manages images accordion
 #manage_images_accordion .accordion-navigation {
     &:after {

templates/api/knowledge-panels/health/ingredients/ingredient.tt.json

@@ -4,24 +4,33 @@
         "health"
     ],
     "size": "small",
-    [% IF panel.ingredient_description OR panel.wikipedia_abstract %]
-    "expanded": false,
-    [% ELSE %]
-    "expanded": false,
-    [% END %]
     "title_element": {
-        // Note: the app displays line feeds as line feeds...
-        "title": `        [% dash = "-" %]        [% dash.repeat(panel.level) %]        [% display_taxonomy_tag_name("ingredients", panel.ingredient_id) %]        [% IF panel.ingredient.percent.defined %]            ([% round(panel.ingredient.percent) %]%)        [% ELSIF panel.ingredient.percent_estimate.defined %]            ([% round(panel.ingredient.percent_estimate) %]% [% lang("estimate") %])        [% END %]        `,
+        // double backticks: convert to a single line without newlines and extra spaces
+        "title": ``
+        [% dash = "—" %]
+        [% dash.repeat(panel.level) %]
+
+        [% display_taxonomy_tag_name("ingredients", panel.ingredient_id) %][% sep %]:
+        [% IF panel.ingredient.percent.defined %]
+            [% sprintf("%.1f", panel.ingredient.percent) %]%
+        [% ELSIF panel.ingredient.percent_estimate.defined %]
+            [% IF panel.ingredient.percent_estimate < 2 %]
+                < 2% ([% lang("estimate") %])
+            [% ELSE %]
+                [% sprintf("%.1f", panel.ingredient.percent_estimate) %]% ([% lang("estimate") %])
+            [% END %]
+        [% END %]
+        ``,
     },        
     "elements": [
-        [% IF panel.ingredient_description -%]
+        [% IF panel.ingredient_description %]
         {
             "element_type": "text",
             "text_element": {
                 "html": `[% panel.ingredient_description %]`
             }
         }
-        [% ELSIF panel.wikipedia_abstract -%]
+        [% ELSIF panel.wikipedia_abstract %]
         {
             "element_type": "text",
             "text_element": {

templates/api/knowledge-panels/health/ingredients/ingredients.tt.json

@@ -56,7 +56,7 @@
             },
         },
         [% END %]       
-        [% IF 1 %]
+        [% IF product.ingredients_n.defined && product.ingredients_n > 0 %]
         {
             "element_type": "panel",
             "panel_element": {

templates/web/panels/panel.tt.html

@@ -21,6 +21,7 @@
 
     panel             = panels.$panel_id;
     is_card_or_inline = (panel.type == "card") OR (panel.type == "inline");
+    has_elements      = panel.elements.defined AND panel.elements.size > 0;
     wrapper_name      = is_card_or_inline ? "wrapper_for_card_or_inline" : "wrapper_for_other_types";   %]
 
 	<!-- start templates/[% template.name %] - panel_id: [% panel_id %] -->
@@ -92,10 +93,10 @@ <h3 class="panel_title_[% panel.type %]">[% panel.title_element.title %]</h3>
         style="margin-top:0.5rem;margin-bottom:1.5rem;"
     [% END %]
 >
-<li class="accordion-navigation">
+<li class="accordion-navigation[% IF ! has_elements %] accordion-navigation-inactive[% END %]">
 
     [% IF panel.title_element.defined %]
-        <a href="#panel_[% panel_id | replace(':','-') %]_content" [% ~%]
+        <[% IF has_elements %]a[% ELSE %]div[% END %] href="#panel_[% panel_id | replace(':','-') %]_content" [% ~%]
            class="panel_title[% IF panel.title_element.type == "grade" %] grade_[% panel.title_element.grade %][% END %]"
             [% IF panel.size == "small" %]
                 style="padding:0.1rem;padding-left:1rem;"
@@ -130,7 +131,7 @@ <h3 class="panel_title_[% panel.type %]">[% panel.title_element.title %]</h3>
                 <span [% IF panel.size == "small" %]style="font-size:0.9rem;"[% END %]>[% panel.title_element.subtitle %]</span>
             [% END %]
             <hr class="floatclear">
-        </a>
+        </[% IF has_elements %]a[% ELSE %]div[% END %]>
     [% END %]
 [% content %]
 </li>

tests/integration/expected_test_results/api_v2_product_read/get-fields-all-knowledge-panels.json

@@ -1359,6 +1359,50 @@
                "problem"
             ]
          },
+         "ingredient_1" : {
+            "elements" : [],
+            "level" : "info",
+            "size" : "small",
+            "title_element" : {
+               "title" : "Apple: 62.5% (estimate)"
+            },
+            "topics" : [
+               "health"
+            ]
+         },
+         "ingredient_2" : {
+            "elements" : [],
+            "level" : "info",
+            "size" : "small",
+            "title_element" : {
+               "title" : "Milk: 18.8% (estimate)"
+            },
+            "topics" : [
+               "health"
+            ]
+         },
+         "ingredient_3" : {
+            "elements" : [],
+            "level" : "info",
+            "size" : "small",
+            "title_element" : {
+               "title" : "Egg: 9.4% (estimate)"
+            },
+            "topics" : [
+               "health"
+            ]
+         },
+         "ingredient_4" : {
+            "elements" : [],
+            "level" : "info",
+            "size" : "small",
+            "title_element" : {
+               "title" : "Palm oil: 9.4% (estimate)"
+            },
+            "topics" : [
+               "health"
+            ]
+         },
          "ingredients" : {
             "elements" : [
                {
@@ -1377,6 +1421,12 @@
                   "text_element" : {
                      "html" : "<strong>Allergens:</strong> \n                    Apple, Eggs, Milk\n                "
                   }
+               },
+               {
+                  "element_type" : "panel",
+                  "panel_element" : {
+                     "panel_id" : "ingredients_list"
+                  }
                }
             ],
             "evaluation" : "unknown",
@@ -1529,6 +1579,42 @@
                "health"
             ]
          },
+         "ingredients_list" : {
+            "elements" : [
+               {
+                  "element_type" : "panel",
+                  "panel_element" : {
+                     "panel_id" : "ingredient_1"
+                  }
+               },
+               {
+                  "element_type" : "panel",
+                  "panel_element" : {
+                     "panel_id" : "ingredient_2"
+                  }
+               },
+               {
+                  "element_type" : "panel",
+                  "panel_element" : {
+                     "panel_id" : "ingredient_3"
+                  }
+               },
+               {
+                  "element_type" : "panel",
+                  "panel_element" : {
+                     "panel_id" : "ingredient_4"
+                  }
+               }
+            ],
+            "expanded" : true,
+            "level" : "info",
+            "title_element" : {
+               "title" : "Ingredient information"
+            },
+            "topics" : [
+               "health"
+            ]
+         },
          "nova" : {
             "elements" : [
                {

tests/integration/expected_test_results/api_v2_product_read/get-fields-attribute-groups-all-knowledge-panels.json

@@ -2015,6 +2015,50 @@
                "problem"
             ]
          },
+         "ingredient_1" : {
+            "elements" : [],
+            "level" : "info",
+            "size" : "small",
+            "title_element" : {
+               "title" : "Apple: 62.5% (estimate)"
+            },
+            "topics" : [
+               "health"
+            ]
+         },
+         "ingredient_2" : {
+            "elements" : [],
+            "level" : "info",
+            "size" : "small",
+            "title_element" : {
+               "title" : "Milk: 18.8% (estimate)"
+            },
+            "topics" : [
+               "health"
+            ]
+         },
+         "ingredient_3" : {
+            "elements" : [],
+            "level" : "info",
+            "size" : "small",
+            "title_element" : {
+               "title" : "Egg: 9.4% (estimate)"
+            },
+            "topics" : [
+               "health"
+            ]
+         },
+         "ingredient_4" : {
+            "elements" : [],
+            "level" : "info",
+            "size" : "small",
+            "title_element" : {
+               "title" : "Palm oil: 9.4% (estimate)"
+            },
+            "topics" : [
+               "health"
+            ]
+         },
          "ingredients" : {
             "elements" : [
                {
@@ -2033,6 +2077,12 @@
                   "text_element" : {
                      "html" : "<strong>Allergens:</strong> \n                    Apple, Eggs, Milk\n                "
                   }
+               },
+               {
+                  "element_type" : "panel",
+                  "panel_element" : {
+                     "panel_id" : "ingredients_list"
+                  }
                }
             ],
             "evaluation" : "unknown",
@@ -2185,6 +2235,42 @@
                "health"
             ]
          },
+         "ingredients_list" : {
+            "elements" : [
+               {
+                  "element_type" : "panel",
+                  "panel_element" : {
+                     "panel_id" : "ingredient_1"
+                  }
+               },
+               {
+                  "element_type" : "panel",
+                  "panel_element" : {
+                     "panel_id" : "ingredient_2"
+                  }
+               },
+               {
+                  "element_type" : "panel",
+                  "panel_element" : {
+                     "panel_id" : "ingredient_3"
+                  }
+               },
+               {
+                  "element_type" : "panel",
+                  "panel_element" : {
+                     "panel_id" : "ingredient_4"
+                  }
+               }
+            ],
+            "expanded" : true,
+            "level" : "info",
+            "title_element" : {
+               "title" : "Ingredient information"
+            },
+            "topics" : [
+               "health"
+            ]
+         },
          "nova" : {
             "elements" : [
                {