From 78050fe264f435808c523ffe3daf88a948118462 Mon Sep 17 00:00:00 2001
From: Saulo Klein Nery <saulokn@outlook.com>
Date: Fri, 10 Feb 2023 14:21:19 -0300
Subject: [PATCH] fix: Ajusta imagens do produto desktop mobile

---
 store/blocks/footer/footer.json               | 127 ------
 store/blocks/footer/menu.json                 | 393 ------------------
 store/blocks/pdp/product.jsonc                |  14 +-
 styles/css/vtex.store-components.css          |  18 +-
 styles/css/vtex.store-footer.css              |  24 +-
 .../pages/product/vtex.store-components.scss  |  16 +-
 .../sass/pages/product/vtex.store-footer.scss |   3 +
 7 files changed, 46 insertions(+), 549 deletions(-)
 create mode 100644 styles/sass/pages/product/vtex.store-footer.scss

diff --git a/store/blocks/footer/footer.json b/store/blocks/footer/footer.json
index c05ac0f..e69de29 100644
--- a/store/blocks/footer/footer.json
+++ b/store/blocks/footer/footer.json
@@ -1,127 +0,0 @@
-{
-  "footer": {
-    "blocks": [
-      "footer-layout.desktop",
-      "footer-layout.mobile"
-    ]
-  },
-  "footer-layout.desktop": {
-    "children": [
-      "flex-layout.row#footer-1-desktop",
-      "flex-layout.row#footer-2-desktop",
-      "flex-layout.row#footer-3-desktop"
-    ]
-  },
-  "flex-layout.row#footer-1-desktop": {
-    "children": [
-      "vtex.menu@2.x:menu#Products",
-      "vtex.menu@2.x:menu#footer-clothing",
-      "vtex.menu@2.x:menu#footer-decoration",
-      "vtex.menu@2.x:menu#footer-bags",
-      "footer-spacer",
-      "social-networks"
-    ],
-    "props": {
-      "blockClass": "menu-row",
-      "paddingTop": 6,
-      "paddingBottom": 3
-    }
-  },
-  "social-networks": {
-    "props": {
-      "socialNetworks": [
-        {
-          "name": "Facebook",
-          "url": "https://www.facebook.com/vtexonline/"
-        },
-        {
-          "name": "Instagram",
-          "url": "https://www.instagram.com/vtextruecloud/"
-        },
-        {
-          "name": "Twitter",
-          "url": "https://twitter.com/vtexonline"
-        },
-        {
-          "name": "Youtube",
-          "url": "https://www.youtube.com/user/VTEXTV"
-        }
-      ]
-    }
-  },
-  "flex-layout.row#footer-2-desktop": {
-    "children": [
-      "accepted-payment-methods"
-    ],
-    "props": {
-      "blockClass": "payment-methods"
-    }
-  },
-  "accepted-payment-methods": {
-    "props": {
-      "paymentMethods": [
-        "MasterCard",
-        "Visa",
-        "Diners Club"
-      ]
-    }
-  },
-  "flex-layout.row#footer-3-desktop": {
-    "children": [
-      "rich-text#footer"
-    ],
-    "props": {
-      "blockClass": "credits"
-    }
-  },
-  "rich-text#footer": {
-    "props": {
-      "text": "All stock and product photos are from photos.icons8.com",
-      "blockClass": "footer"
-    }
-  },
-  "footer-layout.mobile": {
-    "children": [
-      "flex-layout.row#1-footer-mobile",
-      "flex-layout.row#2-footer-mobile"
-    ]
-  },
-  "flex-layout.row#2-footer-mobile": {
-    "children": [
-      "flex-layout.col#footer-1-mobile"
-    ],
-    "props": {
-      "blockClass": "payment-methods",
-      "paddingTop": 4,
-      "paddingBottom": 4
-    }
-  },
-  "flex-layout.col#footer-1-mobile": {
-    "children": [
-      "accepted-payment-methods",
-      "social-networks",
-      "rich-text#footer-mobile"
-    ],
-    "props": {
-      "blockClass": "payment-methods",
-      "paddingTop": 4,
-      "paddingBottom": 4,
-      "rowGap": 4
-    }
-  },
-  "flex-layout.row#1-footer-mobile": {
-    "props": {
-      "paddingTop": 4,
-      "paddingBottom": 4
-    },
-    "children": [
-      "vtex.menu@2.x:menu#footer-mobile"
-    ]
-  },
-  "rich-text#footer-mobile": {
-    "props": {
-      "text": "All stock and product photos are from photos.icons8.com",
-      "blockClass": "footer"
-    }
-  }
-}
diff --git a/store/blocks/footer/menu.json b/store/blocks/footer/menu.json
index 7cc85f7..e69de29 100644
--- a/store/blocks/footer/menu.json
+++ b/store/blocks/footer/menu.json
@@ -1,393 +0,0 @@
-{
-  "vtex.menu@2.x:menu#Products": {
-    "props": {
-      "orientation": "vertical"
-    },
-    "children": [
-      "menu-item#news",
-      "menu-item#blackfriday",
-      "menu-item#sale",
-      "menu-item#personalization"
-    ]
-  },
-  "menu-item#news": {
-    "props": {
-      "id": "menu-item-news",
-      "type": "custom",
-      "iconId": null,
-      "highlight": false,
-      "itemProps": {
-        "type": "internal",
-        "href": "#",
-        "noFollow": false,
-        "tagTitle": "News",
-        "text": "News"
-      }
-    }
-  },
-  "menu-item#blackfriday": {
-    "props": {
-      "id": "menu-item-black-friday",
-      "type": "custom",
-      "iconId": null,
-      "highlight": false,
-      "itemProps": {
-        "type": "internal",
-        "href": "#",
-        "noFollow": false,
-        "tagTitle": "BlackFriday",
-        "text": "Black Friday"
-      }
-    }
-  },
-  "menu-item#sale": {
-    "props": {
-      "id": "menu-item-sale",
-      "type": "custom",
-      "iconId": null,
-      "highlight": false,
-      "itemProps": {
-        "type": "internal",
-        "href": "#",
-        "noFollow": false,
-        "tagTitle": "Sale",
-        "text": "Sale"
-      }
-    }
-  },
-  "menu-item#personalization": {
-    "props": {
-      "id": "menu-item-personalization",
-      "type": "custom",
-      "iconId": null,
-      "highlight": false,
-      "itemProps": {
-        "type": "internal",
-        "href": "#",
-        "noFollow": false,
-        "tagTitle": "Personalization",
-        "text": "Personalization"
-      }
-    }
-  },
-
-  "vtex.menu@2.x:menu#footer-decoration": {
-    "props": {
-      "orientation": "vertical"
-    },
-    "children": [
-      "menu-item#smartphones",
-      "menu-item#videogames",
-      "menu-item#tvs"
-    ]
-  },
-
-  "menu-item#smartphones": {
-    "props": {
-      "id": "menu-item-smartphones",
-      "type": "custom",
-      "iconId": null,
-      "highlight": false,
-      "itemProps": {
-        "type": "internal",
-        "href": "/decoration/smartphones",
-        "noFollow": true,
-        "tagTitle": "Smartphones",
-        "text": "Smartphones"
-      }
-    }
-  },
-
-  "menu-item#videogames": {
-    "props": {
-      "id": "menu-item-videogames",
-      "type": "custom",
-      "iconId": null,
-      "highlight": false,
-      "itemProps": {
-        "type": "internal",
-        "href": "/decoration/videogames",
-        "noFollow": true,
-        "tagTitle": "Videogames",
-        "text": "Videogames"
-      }
-    }
-  },
-
-  "menu-item#tvs": {
-    "props": {
-      "id": "menu-item-tvs",
-      "type": "custom",
-      "iconId": null,
-      "highlight": false,
-      "itemProps": {
-        "type": "internal",
-        "href": "/decoration/tvs",
-        "noFollow": true,
-        "tagTitle": "TVs",
-        "text": "TVs"
-      }
-    }
-  },
-
-  "vtex.menu@2.x:menu#footer-bags": {
-    "props": {
-      "orientation": "vertical"
-    },
-    "children": [
-      "menu-item#bags",
-      "menu-item#backpacks",
-      "menu-item#necessaire"
-    ]
-  },
-
-  "menu-item#bags": {
-    "props": {
-      "id": "menu-item-bags",
-      "type": "custom",
-      "iconId": null,
-      "highlight": false,
-      "itemProps": {
-        "type": "internal",
-        "href": "/bags/d",
-        "noFollow": true,
-        "tagTitle": "Bags",
-        "text": "Bags"
-      }
-    }
-  },
-
-  "menu-item#backpacks": {
-    "props": {
-      "id": "menu-item-backpacks",
-      "type": "custom",
-      "iconId": null,
-      "highlight": false,
-      "itemProps": {
-        "type": "internal",
-        "href": "/bags/backpacks",
-        "noFollow": true,
-        "tagTitle": "Backpacks",
-        "text": "Backpacks"
-      }
-    }
-  },
-
-  "menu-item#necessaire": {
-    "props": {
-      "id": "menu-item-necessaire",
-      "type": "custom",
-      "iconId": null,
-      "highlight": false,
-      "itemProps": {
-        "type": "internal",
-        "href": "/bags/necessaire",
-        "noFollow": true,
-        "tagTitle": "Necessaire",
-        "text": "Necessaire"
-      }
-    }
-  },
-
-  "vtex.menu@2.x:menu#footer-clothing": {
-    "props": {
-      "orientation": "vertical"
-    },
-    "children": [
-      "menu-item#clothing",
-      "menu-item#shorts",
-      "menu-item#tank-tops",
-      "menu-item#shirts",
-      "menu-item#sweatshirt",
-      "menu-item#cropped"
-    ]
-  },
-
-  "vtex.menu@2.x:menu#footer-mobile": {
-    "props": {
-      "orientation": "vertical"
-    },
-    "children": [
-      "menu-item#clothing-mobile",
-      "menu-item#decoration-mobile",
-      "menu-item#sale-mobile"
-    ]
-  },
-
-  "menu-item#clothing-mobile": {
-    "props": {
-      "id": "menu-item-category-clothing",
-      "type": "custom",
-      "iconId": null,
-      "highlight": false,
-      "itemProps": {
-        "type": "internal",
-        "href": "/clothing/d",
-        "noFollow": true,
-        "tagTitle": "Clothing",
-        "text": "Clothing"
-      }
-    },
-    "blocks": ["vtex.menu@2.x:submenu.accordion#clothing"]
-  },
-  "vtex.menu@2.x:submenu.accordion#clothing": {
-    "children": ["vtex.menu@2.x:menu#clothing-accordion"]
-  },
-
-  "vtex.menu@2.x:menu#clothing-accordion": {
-    "props": {
-      "orientation": "vertical"
-    },
-    "children": [
-      "menu-item#shorts",
-      "menu-item#tank-tops",
-      "menu-item#shirts",
-      "menu-item#sweatshirt",
-      "menu-item#cropped"
-    ]
-  },
-
-  "menu-item#decoration-mobile": {
-    "props": {
-      "itemProps": {
-        "tagTitle": "Decoration",
-        "text": "Decoration"
-      }
-    },
-    "blocks": ["vtex.menu@2.x:submenu.accordion#decoration"]
-  },
-  "vtex.menu@2.x:submenu.accordion#decoration": {
-    "children": ["vtex.menu@2.x:menu#footer-decoration-mobile"]
-  },
-
-  "vtex.menu@2.x:menu#footer-decoration-mobile": {
-    "props": {
-      "orientation": "vertical"
-    },
-    "children": [
-      "menu-item#smartphones",
-      "menu-item#videogames",
-      "menu-item#tvs"
-    ]
-  },
-
-  "menu-item#sale-mobile": {
-    "props": {
-      "itemProps": {
-        "tagTitle": "Sale",
-        "text": "Sale"
-      }
-    },
-    "blocks": ["vtex.menu@2.x:submenu.accordion#sale"]
-  },
-  "vtex.menu@2.x:submenu.accordion#sale": {
-    "children": ["vtex.menu@2.x:menu#footer-sale-mobile"]
-  },
-
-  "vtex.menu@2.x:menu#footer-sale-mobile": {
-    "props": {
-      "orientation": "vertical"
-    },
-    "children": [
-      "menu-item#smartphones",
-      "menu-item#videogames",
-      "menu-item#tvs"
-    ]
-  },
-
-  "menu-item#clothing": {
-    "props": {
-      "id": "menu-item-category-clothing",
-      "type": "custom",
-      "iconId": null,
-      "highlight": false,
-      "itemProps": {
-        "type": "internal",
-        "href": "/clothing/d",
-        "noFollow": true,
-        "tagTitle": "Clothing",
-        "text": "Clothing"
-      }
-    }
-  },
-
-  "menu-item#shorts": {
-    "props": {
-      "id": "menu-item-shorts",
-      "type": "custom",
-      "iconId": null,
-      "highlight": false,
-      "itemProps": {
-        "type": "internal",
-        "href": "/clothing/shorts",
-        "noFollow": false,
-        "tagTitle": "Shorts",
-        "text": "Shorts"
-      }
-    }
-  },
-
-  "menu-item#tank-tops": {
-    "props": {
-      "id": "menu-item-tank-tops",
-      "type": "custom",
-      "iconId": null,
-      "highlight": false,
-      "itemProps": {
-        "type": "internal",
-        "href": "/clothing/tank-tops",
-        "noFollow": false,
-        "tagTitle": "Tank tops",
-        "text": "Tank tops"
-      }
-    }
-  },
-
-  "menu-item#shirts": {
-    "props": {
-      "id": "menu-item-shirts",
-      "type": "custom",
-      "iconId": null,
-      "highlight": false,
-      "itemProps": {
-        "type": "internal",
-        "href": "/clothing/shirts",
-        "noFollow": false,
-        "tagTitle": "Shirts",
-        "text": "Shirts"
-      }
-    }
-  },
-
-  "menu-item#sweatshirt": {
-    "props": {
-      "id": "menu-item-sweat-shirts",
-      "type": "custom",
-      "iconId": null,
-      "highlight": false,
-      "itemProps": {
-        "type": "internal",
-        "href": "/clothing/sweatshirt",
-        "noFollow": false,
-        "tagTitle": "Sweatshirt",
-        "text": "Sweatshirt"
-      }
-    }
-  },
-
-  "menu-item#cropped": {
-    "props": {
-      "id": "menu-item-cropped",
-      "type": "custom",
-      "iconId": null,
-      "highlight": false,
-      "itemProps": {
-        "type": "internal",
-        "href": "/clothing/cropped",
-        "noFollow": false,
-        "tagTitle": "Cropped",
-        "text": "Cropped"
-      }
-    }
-  }
-}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 3cd7069..72d7f9b 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -115,7 +115,7 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "49%",
+      "width": "50%",
       "rowGap": 0,
       "blockClass": "productShowcase"
     }
@@ -131,7 +131,8 @@
       "thumbnailsOrientation": "horizontal",
       "displayThumbnailsArrows": true,
       "showNavigationArrows": false,
-      "showPaginationDots": false
+      "showPaginationDots": false,
+      "contentType": "images"
     }
   },
 
@@ -186,7 +187,8 @@
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
-      "showValueNameForImageVariation": true
+      "showValueNameForImageVariation": true,
+      "hideImpossibleCombinations": false
     }
   },
 
@@ -322,6 +324,12 @@
     }
   },
 
+  "product-description": {
+    "props": {
+      "collapseContent": false
+    }
+  },
+
   "tab-content.item#1": {
     "children": ["product-images#2", "product-description"],
     "props": {
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 9b6edad..738ef02 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -14,6 +14,11 @@
     padding-right: 32px;
   }
 }
+@media only screen and (max-width: 1024px) {
+  .productDescriptionContainer {
+    border-bottom: 1px solid #b9b9b9;
+  }
+}
 .productDescriptionContainer .productDescriptionTitle {
   font-weight: 400;
   font-size: 24px;
@@ -34,13 +39,14 @@
 }
 @media only screen and (max-width: 1024px) {
   .productDescriptionContainer .productDescriptionText {
+    margin: 0 0 16px;
     font-size: 14px;
     line-height: 19px;
   }
 }
 
 .productImageTag--productImage2--main {
-  max-height: auto !important;
+  max-height: none !important;
   object-fit: fill !important;
 }
 
@@ -52,6 +58,7 @@
   flex-direction: column-reverse;
 }
 .container .carouselContainer .carouselGaleryThumbs {
+  display: block !important;
   position: static;
   margin: 16px 0 0;
 }
@@ -78,18 +85,13 @@
 }
 .container .productImageTag--main {
   object-fit: fill !important;
-  max-width: 664px;
   min-height: 664px;
+  max-height: none !important;
 }
 @media only screen and (max-width: 1024px) {
-  .container .productImageTag--main {
-    min-height: 994px;
-    max-width: none;
-  }
-}
-@media only screen and (max-width: 767px) {
   .container .productImageTag--main {
     min-height: auto;
+    min-width: auto;
   }
 }
 .container .productNameContainer {
diff --git a/styles/css/vtex.store-footer.css b/styles/css/vtex.store-footer.css
index 1fd6bb3..db9f64f 100644
--- a/styles/css/vtex.store-footer.css
+++ b/styles/css/vtex.store-footer.css
@@ -1,11 +1,13 @@
-.row--menu-row {
-  padding-right: 24px;
-}
-
-.row--menu-row .rowContainer {
-  align-items: flex-start;
-}
-
-.row--payment-methods {
-  padding-top: 16px;
-}
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
+/* Grid breakpoints */
+.poweredBy {
+  display: none;
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index f86db8a..9a8a5f7 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -3,6 +3,10 @@
     padding-right: 32px;
   }
 
+  @include mq(lg, max) {
+    border-bottom: 1px solid $color-gray13;
+  }
+
   .productDescriptionTitle {
     font-weight: 400;
     font-size: 24px;
@@ -22,6 +26,7 @@
     color: $color-gray6;
 
     @include mq(lg, max) {
+      margin: 0 0 16px;
       font-size: 14px;
       line-height: 19px;
     }
@@ -29,7 +34,7 @@
 }
 
 .productImageTag--productImage2--main {
-  max-height: auto !important;
+  max-height: none !important;
   object-fit: fill !important;
 }
 
@@ -42,6 +47,7 @@
     flex-direction: column-reverse;
 
     .carouselGaleryThumbs {
+      display: block !important;
       position: static;
       margin: 16px 0 0;
     }
@@ -74,16 +80,12 @@
 
   .productImageTag--main {
     object-fit: fill !important;
-    max-width: 664px;
     min-height: 664px;
+    max-height: none !important;
 
     @include mq(lg, max) {
-      min-height: 994px;
-      max-width: none;
-    }
-
-    @include mq(md, max) {
       min-height: auto;
+      min-width: auto;
     }
   }
 
diff --git a/styles/sass/pages/product/vtex.store-footer.scss b/styles/sass/pages/product/vtex.store-footer.scss
new file mode 100644
index 0000000..bf53c7f
--- /dev/null
+++ b/styles/sass/pages/product/vtex.store-footer.scss
@@ -0,0 +1,3 @@
+.poweredBy {
+  display: none;
+}