From e65959044843d4ffee8860b9ef21f7c67a2ef1ad Mon Sep 17 00:00:00 2001 From: Filipe Quintanilha Date: Tue, 7 Feb 2023 10:51:12 -0300 Subject: [PATCH] feat(Shipping-simulator): Ajusta componente de frete --- manifest.json | 3 +- react/components/Example/Example.tsx | 4 +- store/blocks/pdp/product.jsonc | 11 +- styles/configs/style.json | 2 +- styles/css/vtex.address-form.css | 13 ++ styles/css/vtex.breadcrumb.css | 6 + styles/css/vtex.flex-layout.css | 2 + styles/css/vtex.store-components.css | 139 ++++++++++++++- .../sass/pages/product/vtex.address-form.scss | 3 + .../sass/pages/product/vtex.breadcrumb.scss | 6 + .../sass/pages/product/vtex.flex-layout.scss | 2 + .../pages/product/vtex.store-components.scss | 167 +++++++++++++++++- styles/sass/utils/_vars.scss | 3 +- 13 files changed, 351 insertions(+), 10 deletions(-) create mode 100644 styles/css/vtex.address-form.css create mode 100644 styles/sass/pages/product/vtex.address-form.scss diff --git a/manifest.json b/manifest.json index a2cde0d..defccae 100644 --- a/manifest.json +++ b/manifest.json @@ -65,7 +65,8 @@ "vtex.tab-layout": "0.x", "vtex.condition-layout": "2.x", "vtex.css-handles": "1.x", - "vtex.product-context": "0.x" + "vtex.product-context": "0.x", + "vtex.address-form": "4.x" }, "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema" } diff --git a/react/components/Example/Example.tsx b/react/components/Example/Example.tsx index c9b846d..4f8cf1d 100644 --- a/react/components/Example/Example.tsx +++ b/react/components/Example/Example.tsx @@ -7,6 +7,8 @@ const Pix = () => { const productContext = useProduct() + const total = (valuePix * 0.1 - valuePix / 100) / 10 + const objectPass = [ { id: productContext?.selectedItem?.itemId, @@ -55,7 +57,7 @@ const Pix = () => {

- {(valuePix / 100).toLocaleString('pt-br', { + {total.toLocaleString('pt-br', { style: 'currency', currency: 'BRL', })} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index c7a10c2..0ddefda 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -119,11 +119,18 @@ // "product-gifts", // "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "html#shipping-simulator" + // "share#default" ] }, + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator", + "blockClass": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, "html#quantity-wrapper": { "props": { "tag": "section", diff --git a/styles/configs/style.json b/styles/configs/style.json index 1ea854a..7274b7b 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -110,7 +110,7 @@ "text": { "action-primary": "#0F3E99", "action-secondary": "#eef3f7", - "link": "#0F3E99", + "link": "#000000", "emphasis": "#f71963", "disabled": "#979899", "success": "#8bc34a", diff --git a/styles/css/vtex.address-form.css b/styles/css/vtex.address-form.css new file mode 100644 index 0000000..d573100 --- /dev/null +++ b/styles/css/vtex.address-form.css @@ -0,0 +1,13 @@ +/* +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 */ +/* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +.input { + height: 49px; +} \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 17bb0f0..7fb0d81 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -58,4 +58,10 @@ .container .termArrow, .container .term { display: none; +} + +@media screen and (min-width: 1920px) { + .container { + padding-left: 360px; + } } \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index fcf781e..5ae922a 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -10,6 +10,8 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); .flexRowContent { position: relative; + padding: 0; + margin: 0; } .flexRowContent--container-compra { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f29b7d5..bdd5989 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -10,15 +10,16 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); .container { padding: 0 40px; + max-width: initial; } .container .productImagesThumb { padding-right: 16px; } .container .productImagesGallerySlide { - width: 664px !important; + width: 100% !important; } .container .carouselGaleryCursor { - width: 664px; + width: 100%; } .container .carouselGaleryThumbs { margin-top: 16px; @@ -109,4 +110,138 @@ } .container .diagonalCross { transform: rotate(90deg); +} + +.shippingContainer { + display: flex; + align-items: center; + position: relative; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + padding-bottom: 26px; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + left: 344px; + top: 50%; + transform: translateY(-50%); + padding: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL):last-child { + text-decoration: underline; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #000000 !important; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL):last-child :global(.vtex__icon-external-link) { + display: none; +} + +.shippingContainer :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-input__label)::after { + content: "CALCULAR FRETE:"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.shippingContainer :global(.vtex-input-prefix__group) { + height: 49px; + padding-right: 21px; +} +.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { + display: none; +} + +.shippingContainer :global(.vtex-input__error) { + position: absolute; + top: 70px; +} + +.shippingContainer :global(.vtex-button) { + width: 49px; + height: 49px; + background-color: #000000; + border: none; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after { + content: "OK"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #fff; +} + +.shippingTable { + border: none; + padding: 0; + margin-top: -10px; + width: fit-content; +} +.shippingTable .shippingTableHead { + display: table-row; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice, +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { + text-align: left; + font-weight: 400; + font-size: 0; + line-height: 19px; + color: #202020; + min-width: 112px; + padding: 0; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName::after { + font-size: 14px; + content: "ENTREGA"; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate::before { + font-size: 14px; + content: "FRETE"; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before { + font-size: 14px; + content: "PRAZO"; +} +.shippingTable .shippingTableBody .shippingTableRow { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 1; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + grid-area: 1/3/1/3; +} +.shippingTable .shippingTableBody .shippingTableCell { + width: 112px; + padding: 0 0 15px 0; +} +.shippingTable .shippingTableCellDeliveryName { + padding-left: 0; +} +.shippingTable .shippingTableRadioBtn { + display: none; +} +.shippingTable .shippingTableCell, +.shippingTable .shippingTableLabel, +.shippingTable .currencyContainer { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding-left: 0; +} + +@media screen and (min-width: 1920px) { + .container { + padding: 0 360px; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.address-form.scss b/styles/sass/pages/product/vtex.address-form.scss new file mode 100644 index 0000000..b4b0b87 --- /dev/null +++ b/styles/sass/pages/product/vtex.address-form.scss @@ -0,0 +1,3 @@ +.input { + height: 49px; +} diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index c86c701..a86c40d 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -58,3 +58,9 @@ display: none; } } + +@media screen and (min-width: 1920px) { + .container { + padding-left: 360px; + } +} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 2000478..fa1c1e7 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,5 +1,7 @@ .flexRowContent { position: relative; + padding: 0; + margin: 0; } .flexRowContent--container-compra { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index dd72024..0048980 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -3,17 +3,18 @@ // } .container { padding: 0 40px; + max-width: initial; .productImagesThumb { padding-right: 16px; } .productImagesGallerySlide { - width: 664px !important; + width: 100% !important; } .carouselGaleryCursor { - width: 664px; + width: 100%; } .carouselGaleryThumbs { @@ -129,3 +130,165 @@ transform: rotate(90deg); } } + +//Entrega + +.shippingContainer { + display: flex; + align-items: center; + position: relative; + :global(.vtex-address-form__postalCode) { + padding-bottom: 26px; + :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + left: 344px; + top: 50%; + transform: translateY(-50%); + padding: 0; + + &:last-child { + text-decoration: underline; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-black2 !important; + :global(.vtex__icon-external-link) { + display: none; + } + } + } + } +} + +.shippingContainer { + :global(.vtex-input__label) { + font-size: 0; + &::after { + content: 'CALCULAR FRETE:'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray7; + } + } +} + +.shippingContainer { + :global(.vtex-input-prefix__group) { + height: 49px; + padding-right: 21px; + :global(.vtex-input__suffix) { + display: none; + } + } +} + +.shippingContainer { + :global(.vtex-input__error) { + position: absolute; + top: 70px; + } +} + +.shippingContainer { + :global(.vtex-button) { + width: 49px; + height: 49px; + background-color: $color-black2; + border: none; + :global(.vtex-button__label) { + font-size: 0; + &::after { + content: 'OK'; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: $color-white; + } + } + } +} + +.shippingTable { + border: none; + padding: 0; + margin-top: -10px; + width: fit-content; + .shippingTableHead { + display: table-row; + + .shippingTableRow { + .shippingTableHeadDeliveryName, + .shippingTableHeadDeliveryPrice, + .shippingTableHeadDeliveryEstimate { + text-align: left; + font-weight: 400; + font-size: 0; + line-height: 19px; + color: $color-black3; + min-width: 112px; + padding: 0; + } + .shippingTableHeadDeliveryName { + &::after { + font-size: 14px; + content: 'ENTREGA'; + } + } + .shippingTableHeadDeliveryEstimate { + &::before { + font-size: 14px; + content: 'FRETE'; + } + } + .shippingTableHeadDeliveryPrice { + &::before { + font-size: 14px; + content: 'PRAZO'; + } + } + } + } + + .shippingTableBody { + .shippingTableRow { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 1; + + .shippingTableCellDeliveryEstimate { + grid-area: 1 / 3 / 1 / 3; + } + } + + .shippingTableCell { + width: 112px; + padding: 0 0 15px 0; + } + } + + .shippingTableCellDeliveryName { + padding-left: 0; + } + + .shippingTableRadioBtn { + display: none; + } + + .shippingTableCell, + .shippingTableLabel, + .currencyContainer { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray9; + padding-left: 0; + } +} + +@media screen and (min-width: 1920px) { + .container { + padding: 0 360px; + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 97bd214..db9992f 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,5 +1,6 @@ $color-black: #292929; $color-black2: #000000; +$color-black3: #202020; $color-white: #fff; @@ -37,4 +38,4 @@ $z-index: ( //Fonts -@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');