@nuskin/cs-product-lib 1.1.4 → 1.2.0-brw-4716.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuskin/cs-product-lib",
-  "version": "1.1.4",
+  "version": "1.2.0-brw-4716.2",
   "description": "Library for pulling and parsing product content (and applying business logic) retrieved from Contentstack",
   "main": "src/index.js",
   "scripts": {

package/src/csProduct.js

@@ -453,6 +453,12 @@ const csProduct = (props) => {
         if (!Array.isArray(skus)) {
             skus = [skus]
         }
+
+        const skuBundle = await getBundles(skus, locale)
+        if (skuBundle.length > 0 && !skuBundle[0].error || skuBundle[0].error.message !== undefined) {
+            return skuBundle
+        }
+
         const query = `{"variants": {"$in_query":{"sap_data.skus": {"$in": ${helpers?.arrayString(
             skus
         )}}}}}`

package/src/formatProduct.js

@@ -21,7 +21,7 @@ const formatProduct = (parent, homeUrl) => {
         features: helpers?.mapFeatures(parent),
         productDetails: helpers?.mapProductDetails(parent),
         benefitsMedia: {
-            image: helpers?.mapImage(parent?.benefits_media?.image),
+            image: helpers?.mapImage(parent?.benefits_media?.image, true, null, 460, 95),
             youTubeVideoId: parent?.benefits_media?.youtube_video_id
         },
         benefits: helpers?.mapBenefits(parent),

package/src/helpers.js

@@ -131,7 +131,7 @@ function mapSubscriptions(subscriptions) {
 /* istanbul ignore next */
 function mapProductImages(parent) {
     if ((parent?.product_images_bynder || []).length) {
-        return parent?.product_images_bynder.map((img) => mapImage(img))
+        return parent?.product_images_bynder.map((img) => mapImage(img, true, 600, 600, 95))
     }
     if ((parent?.product_images || []).length) {
         return parent?.product_images.map((img) => mapImage(img))
@@ -254,7 +254,7 @@ function mapCsStatus(variant) {
 const getProductImages = (parent = {}) => {
     const { product_images_bynder = [], product_images = [] } = parent
     if (product_images_bynder?.length)
-        return product_images_bynder?.map((img) => mapImage(img))
+        return product_images_bynder?.map((img) => mapImage(img, true, 600, 600, 95))
 
     return product_images?.map((img) => mapImage(img))
 }
@@ -498,7 +498,7 @@ function mapPoints(parent) {
 }
 
 /* istanbul ignore next */
-function mapImage(image, useWebp = false) {
+function mapImage(image, useWebp = false, width, height, quality = 100, transform = 'fit') {
     if (Array.isArray(image)) {
         image = image[0]
     }
@@ -524,10 +524,17 @@ function mapImage(image, useWebp = false) {
         // isSvg will only work if a public link to the original derivative is authored on the bynder asset.
         const isSvg = derivatives.original && derivatives.original.includes('.svg');
         let imgURL = derivatives.webImage
+        let thumbnail = derivatives.thumbnail
         if (isSvg) {
             imgURL = derivatives.original
-        } else if (useWebp && derivatives.transformBaseUrl) {
-            imgURL = `${derivatives.transformBaseUrl}.webp`
+        } else if (derivatives.transformBaseUrl) {
+            imgURL = thumbnail = `${derivatives.transformBaseUrl}${useWebp ? '.webp' : ''}`
+            if (width || height) {
+                imgURL += `?quality=${quality}&io=transform:${transform}${width ? `,width:${width}` : ''}${height ? `,height:${height}` : ''}`
+            } else if (quality && quality !== 100) {
+                imgURL += `?quality=${quality}`
+            }
+            thumbnail += '?quality=85&io=transform:fill,width:50,height:50'
         }
         return {
             url: imgURL,
@@ -536,7 +543,7 @@ function mapImage(image, useWebp = false) {
                 image.description ||
                 image.name ||
                 '',
-            thumbnail: (image.derivatives || {}).thumbnail
+            thumbnail: thumbnail
         }
     } else if ((image || {}).files) {
         const isSvg = (image.files.original || {}).url && (image.files.original || {}).url.includes('.svg');
@@ -593,7 +600,7 @@ function mapProductDetails(productOrVariant) {
     const includedItems = productDetails.included_items
     const highlights = (productDetails.highlights || []).map((highlight) => ({
         iconUrl: !isNullOrEmpty(highlight.icon_bynder)
-            ? (mapImage(highlight.icon_bynder) || {}).url
+            ? (mapImage(highlight.icon_bynder, true, 60, 60, 95) || {}).url
             : (highlight.icon || {}).url,
         label: highlight.text
     }))
@@ -624,7 +631,7 @@ function featureImage(feature) {
 function mapFeatures(productOrVariant) {
     return ((productOrVariant || {}).features || []).map((feature = {}) => ({
         // eslint-disable-next-line no-nested-ternary
-        image: mapImage(featureImage(feature)),
+        image: mapImage(featureImage(feature), true, null, 455, 95),
         subtitle: feature.header,
         features: feature.features,
         backgroundColor: mapBrandStyle(feature, BACKGROUND_COLOR),
@@ -716,7 +723,7 @@ function mapBenefitsAndFeatures(productOrVariant) {
             : jsonBenefits
 
     return {
-        image: mapImage(benefitsMedia.image),
+        image: mapImage(benefitsMedia.image, true, null, 460, 95),
         youTubeVideoId: benefitsMedia.youTubeVideoId,
         benefits: benefitsToMarkdown(legacyBenefits, jsonBenefits),
         backgroundColor: productOrVariant?.background_color,
@@ -740,7 +747,7 @@ function mapResults(productOrVariant) {
         image: mapImage(
             (Array.isArray(results.image_or_video) &&
                 results.image_or_video.length > 0) ||
-                results.image
+                results.image, true, null, 460, 95
         ),
         youTubeVideoId: results.youtube_video_id
     }
@@ -752,7 +759,7 @@ function mapSustainability(product) {
     const image = mapImage(
         Array.isArray(sustainability.image)
             ? sustainability.image[0]
-            : sustainability.image
+            : sustainability.image, true, null, 460, 95
     )
     const richText = sustainability.description
     const description = hasRichTextContent(richText)
@@ -762,7 +769,7 @@ function mapSustainability(product) {
         image: mapImage(
             Array.isArray(highlight.image)
                 ? highlight.image[0]
-                : highlight.image
+                : highlight.image, true, 60, 60, 95
         ),
         description: hasRichTextContent(highlight.description)
             ? createMarkdown(highlight.description)
@@ -787,7 +794,7 @@ function mapUsage(productOrVariant, legacyUsage) {
         recommendations: decodeHTML(usage.recommendations),
         warnings: decodeHTML(usage.warnings),
         additionalText: usage.additional_text,
-        image: mapImage(usage.image_or_video || usage.image),
+        image: mapImage(usage.image_or_video || usage.image, true, null, 460, 95),
         youTubeVideoId: usage.youtube_video_id,
         markdown: legacyUsage ? htmlToMarkdown(legacyUsage) : null
     }
@@ -856,7 +863,7 @@ function mapIngredients(ings, legacyIngredients) {
             keyIngredients: ((ingredients || {}).key_ingredients || []).map(
                 (keyIngredient) => ({
                     image: !isNullOrEmpty(keyIngredient.icon_bynder)
-                        ? mapImage(keyIngredient.icon_bynder, true)
+                        ? mapImage(keyIngredient.icon_bynder, true, 100, 100, 95)
                         : {
                             url: (keyIngredient.icon || {}).url,
                             alt: (keyIngredient.icon || {}).title
@@ -868,7 +875,7 @@ function mapIngredients(ings, legacyIngredients) {
             nutritionInformationImage: !isNullOrEmpty(
                 (ingredients || {}).nutrition_information_image_bynder
             )
-                ? mapImage(ingredients.nutrition_information_image_bynder)
+                ? mapImage(ingredients.nutrition_information_image_bynder, true, null, 1200, 95)
                 : (ingredients || {}).nutrition_information_image
                     ? {
                         url: ingredients.nutrition_information_image.url,
@@ -894,7 +901,7 @@ function mapIngredients(ings, legacyIngredients) {
             {
                 keyIngredients: keyIngredients.map((keyIngredient) => ({
                     image: !isNullOrEmpty(keyIngredient.icon_bynder)
-                        ? mapImage(keyIngredient.icon_bynder, true)
+                        ? mapImage(keyIngredient.icon_bynder, true, 100, 100, 95)
                         : {
                             url: (keyIngredient.icon || {}).url,
                             alt: (keyIngredient.icon || {}).title
@@ -905,7 +912,7 @@ function mapIngredients(ings, legacyIngredients) {
                 nutritionInformationImage: !isNullOrEmpty(
                     (ings || {}).nutrition_information_image_bynder
                 )
-                    ? mapImage(ings.nutrition_information_image_bynder)
+                    ? mapImage(ings.nutrition_information_image_bynder, true, null, 1200, 95)
                     : (ings || {}).nutrition_information_image
                         ? {
                             url: ings.nutrition_information_image.url,
@@ -953,7 +960,7 @@ function mapDisclaimerWarnings(disclaimerWarnings) {
             if (!text && !hasRichTextContent(richText)) {
                 return null
             }
-            const icon = mapImage(disclaimerWarning.icon)
+            const icon = mapImage(disclaimerWarning.icon, true, 25, 25, 85)
             const boldText = disclaimerWarning.bold_text || ''
             const link = mapLink(disclaimerWarning.link)
             const markdownText = createMarkdown(richText, text, boldText, link)

package/src/transformBundle.js

@@ -22,7 +22,7 @@ const transformBundle = (parent, homeUrl) => ({
     salesLabel: parent?.sales_label,
     salesText: parent?.sales_text,
     features: {
-        image: helpers?.mapImage(parent?.features?.image),
+        image: helpers?.mapImage(parent?.features?.image, true, null, 455, 95),
         subtitle: parent?.features?.header,
         features: parent?.features?.features,
         backgroundColor: parent?.features?.background_color