@riosst100/pwa-marketplace 2.7.3 → 2.7.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "2.7.3",
+  "version": "2.7.5",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/overwrites/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -248,6 +248,33 @@ const getConfigName = (product, optionCodes, optionSelections) => {
     return value;
 };
 
+const getConfigSku = (product, optionCodes, optionSelections) => {
+    let value;
+
+    const { variants } = product;
+    const isConfigurable = isProductConfigurable(product);
+
+    const optionsSelected =
+        Array.from(optionSelections.values()).filter(value => !!value).length >
+        0;
+
+    if (!isConfigurable) {
+        value = product.name;
+    } else {
+        const item = findMatchingVariant({
+            optionCodes,
+            optionSelections,
+            variants
+        });
+
+        value = optionsSelected && item
+            ? item.product.sku
+            : product.sku;
+    }
+
+    return value;
+};
+
 const attributeLabelCompare = (attribute1, attribute2) => {
     const label1 = attribute1['attribute_metadata']['label'].toLowerCase();
     const label2 = attribute2['attribute_metadata']['label'].toLowerCase();
@@ -450,6 +477,11 @@ export const useProductFullDetail = props => {
         [product, optionCodes, optionSelections]
     );
 
+    const productSku = useMemo(
+        () => getConfigSku(product, optionCodes, optionSelections),
+        [product, optionCodes, optionSelections]
+    );
+
     // The map of ids to values (and their uids)
     // For example:
     // { "179" => [{ uid: "abc", value_index: 1 }, { uid: "def", value_index: 2 }]}
@@ -625,7 +657,7 @@ export const useProductFullDetail = props => {
         name: productName,
         price: productPrice?.final_price,
         price_range: product?.price_range,
-        sku: product.sku,
+        sku: productSku,
         publish_status: product.publish_status,
         term_and_conditions: product.term_and_conditions,
         link_to_other_stores: product.link_to_other_stores,

package/src/overwrites/venia-ui/lib/components/Image/image.js

@@ -87,20 +87,19 @@ const Image = props => {
             {...rest}
         />
     ) : (
-        // <ResourceImage
-        //     alt={alt}
-        //     className={imageClass}
-        //     handleError={handleError}
-        //     handleLoad={handleImageLoad}
-        //     height={talonResourceHeight}
-        //     resource={resource}
-        //     type={type}
-        //     width={talonResourceWidth}
-        //     widths={widths}
-        //     ratio={ratio}
-        //     {...rest}
-        // />
-        <></>
+        <ResourceImage
+            alt={alt}
+            className={imageClass}
+            handleError={handleError}
+            handleLoad={handleImageLoad}
+            height={talonResourceHeight}
+            resource={resource}
+            type={type}
+            width={talonResourceWidth}
+            widths={widths}
+            ratio={ratio}
+            {...rest}
+        />
     );
 
     return (

package/src/overwrites/venia-ui/lib/components/ProductOptions/option.js

@@ -67,7 +67,7 @@ const Option = props => {
 
     return (
         <div className={classes.root} data-cy="ProductOptions-Option-root">
-            <span className={classes.title}>{label}</span>
+            {/* <span className={classes.title}>{label}</span> */}
             <ValueList
                 getItemKey={getItemKey}
                 selectedValue={initialSelection}

package/src/overwrites/venia-ui/lib/components/ProductOptions/tile.js

@@ -76,7 +76,7 @@ const Tile = props => {
                 root: classes.variantImageSwatch
             }}
             resource={variantImg}
-            width={24}
+            width={20}
         />
     );
 

package/src/overwrites/venia-ui/lib/components/ProductOptions/tile.module.css

@@ -19,6 +19,9 @@
 .variantImageSwatch {
     width: 24px;
     height: 24px;
+    display: table;
+    margin-bottom: 2px;
+    margin-right: 5px;
 }
 
 .root:hover {
@@ -27,7 +30,7 @@
 }
 
 .label {
-    padding-left: 0.4rem;
+    padding-left: 5px;
     padding-right: 5px;
 }