From 5252930d8d1907f0c1fee16e508b17da203fbc96 Mon Sep 17 00:00:00 2001 From: Eleonora Otz Date: Sat, 28 Jan 2023 12:31:26 -0300 Subject: [PATCH] feat: Cria bloco de Newsletter --- manifest.json | 3 +- react/Example.tsx | 2 +- react/components/Html/index.tsx | 80 +++++++----- react/components/Html/styles.css | 12 ++ store/blocks/home/home.jsonc | 5 +- store/blocks/pdp/product-assembly.jsonc | 12 +- store/blocks/pdp/product.jsonc | 35 ++++- styles/css/vtex.product-price.css | 24 +--- styles/css/vtex.store-components.css | 98 +++++++++++++- .../sass/pages/product/vtex.flex-layout.scss | 9 -- .../pages/product/vtex.product-price.scss | 59 ++++----- .../pages/product/vtex.store-components.scss | 122 +++++++++++++++++- 12 files changed, 338 insertions(+), 123 deletions(-) create mode 100644 react/components/Html/styles.css diff --git a/manifest.json b/manifest.json index a2cde0d..6f9f3e2 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.store-newsletter": "1.x" }, "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema" } diff --git a/react/Example.tsx b/react/Example.tsx index a355f89..fe63560 100644 --- a/react/Example.tsx +++ b/react/Example.tsx @@ -1,3 +1,3 @@ -import Example from "./components/Example/ProductContext"; +import Example from "./components/Example/Example"; export default Example; diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..082c0f0 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,41 +1,53 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; +import "./styles.css"; const CSS_HANDLES = ["html"] as const; type HtmlProps = { - children?: ReactNode, - /** - * Qual tag Html que deseja que seja usar - * - * @default div - */ - tag?: keyof React.ReactHTML - /** - * Classes CSS extras que deseja adicionar. - * Feito para uso de [classes do tachyons](https://tachyons.io/) - */ - tachyonsClasses?: string - /** - * Se caso quiser usar esse componente - * para adicinar um texto simples - */ - text?: string - /** - * Tag ID para - */ - testId?: string -} - -export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => { - const { handles } = useCssHandles(CSS_HANDLES); - - const props = { - className: `${handles.html} ${classes}`, - "data-testid": testId - }; - const Children = <>{children}{text}; - const Element = React.createElement(tag, props, Children); - - return <>{Element}; + children?: ReactNode; + /** + * Qual tag Html que deseja que seja usar + * + * @default div + */ + tag?: keyof React.ReactHTML; + /** + * Classes CSS extras que deseja adicionar. + * Feito para uso de [classes do tachyons](https://tachyons.io/) + */ + tachyonsClasses?: string; + /** + * Se caso quiser usar esse componente + * para adicinar um texto simples + */ + text?: string; + /** + * Tag ID para + */ + testId?: string; +}; + +export const Html = ({ + children = null, + tag = "div", + text = "", + tachyonsClasses: classes = "", + testId, +}: HtmlProps) => { + const { handles } = useCssHandles(CSS_HANDLES); + + const props = { + className: `${handles.html} ${classes}`, + "data-testid": testId, + }; + const Children = ( + <> + {children} + {text} + + ); + const Element = React.createElement(tag, props, Children); + + return <>{Element}; }; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..e28c0d3 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,12 @@ +[class*="html--buy-button"] { + display: flex; + gap: 10px; + margin-bottom: 5px; +} + +[class*="html--buy-button"] :global(.vtex-button) { + height: 49px; + background: black; + border: none; + border-radius: 0; +} diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..e18de24 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,8 +2,9 @@ "store.home": { "blocks": [ "list-context.image-list#demo", - "example-component", /* You can make references to blocks defined in other files. - * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ + "example-component" + /* You can make references to blocks defined in other files. + * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */, "flex-layout.row#deals", "__fold__", "rich-text#shelf-title", diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index f9e22eb..34f4233 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -1,10 +1,10 @@ { - "sticky-layout#buy-button": { - "props": { - "position": "bottom" - }, - "children": ["flex-layout.row#buy-button"] - }, + // "sticky-layout#buy-button": { + // "props": { + // "position": "bottom" + // }, + // "children": ["flex-layout.row#buy-button"] + // }, "product-assembly-options": { "children": [ "flex-layout.row#product-assembly-options", diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index d50443c..cc5cfb1 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -7,7 +7,8 @@ "flex-layout.row#specifications-title", "product-specification-group#table", "shelf.relatedProducts", - "product-questions-and-answers" + "product-questions-and-answers", + "newsletter" ] }, "html#breadcrumb": { @@ -109,7 +110,8 @@ "flex-layout.row#selling-price", "product-installments", "sku-selector", - "flex-layout.row#buy-button", + // "flex-layout.row#buy-button", + "html#buy-button", "product-gifts", "availability-subscriber", "shipping-simulator" @@ -131,15 +133,30 @@ } }, - "flex-layout.row#buy-button": { + "product-installments": { + "props": { + "markers": ["discount"], + "message": "{installmentsNumber} x de {installmentValue} sem juros", + "installmentsCriteria": "max-quantity-without-interest" + } + }, + + "html#buy-button": { "props": { - "marginTop": 4, - "marginBottom": 7, "blockClass": "buy-button" }, "children": ["product-quantity#size", "add-to-cart-button"] }, + // "flex-layout.row#buy-button": { + // "props": { + // "marginTop": 4, + // "marginBottom": 7, + // "blockClass": "buy-button" + // }, + // "children": ["product-quantity#size", "add-to-cart-button"] + // }, + "flex-layout.row#product-availability": { "props": { "colGap": 7, @@ -178,5 +195,13 @@ "width": "28%", "showLabel": false } + }, + + "newsletter": { + "props": { + "label": "Assine nossa newsletter \n Receba ofertas e novidades por e-mail", + "placeholder": "Digite seu e-mail", + "submit": "ENVIAR" + } } } diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index bc7fb01..934c701 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -52,31 +52,15 @@ } .installments { - font-size: 0; -} -.installments .installmentsNumber, -.installments .installmentValue { - font-weight: 700; font-size: 16px; line-height: 22px; + font-weight: 400; color: #929292; margin-bottom: 16px; } -.installments .installmentsNumber { - font-size: 0 !important; -} -.installments .installmentsNumber::before { - content: "36 x"; - font-size: 16px; -} -.installments .installmentsNumber::after { - content: " de "; - font-weight: 400; - font-size: 16px; -} -.installments .installmentValue::after { - content: " sem juros"; - font-weight: 400; +.installments .installments-discount, +.installments .installmentValue { + font-weight: 700; } .savings--summaryPercentage { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 8f86ec3..962e553 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,7 +8,20 @@ /* Media Query M3 */ /* Grid breakpoints */ .newsletter { - background: red; + display: block; + background: #000000; +} +.newsletter :global(.vtex-input-prefix__group) { + border: none; +} +.newsletter .label { + color: #fff; + font-weight: 400; + font-size: 18px; + line-height: 25px; +} +.newsletter .button-container :global(.vtex-button__label) { + background-color: transparent; } .container { @@ -186,11 +199,13 @@ .shippingContainer :global(.vtex-button) { font-size: 0; position: relative; - top: 25px; - right: 148px; - width: 53px; - height: 53px; + top: 27px; + right: 147px; + width: 49px; + height: 49px; margin-top: 0; + border: none; + border-radius: 0; background-color: #000000; cursor: pointer; } @@ -220,4 +235,77 @@ :global(.vtex-button__label) { height: fit-content; +} + +.shippingTable { + display: flex; + flex-direction: column; + border: none; +} +.shippingTable .shippingTableHead { + display: flex; + flex-direction: row; +} +.shippingTable .shippingTableHead .shippingTableHeadDeliveryName, +.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate, +.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice { + padding: 0; +} +.shippingTable .shippingTableHead .shippingTableHeadDeliveryName { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + min-width: 140px; + text-align: left; +} +.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate { + font-size: 0; + min-width: 140px; + text-align: left; +} +.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate::after { + content: "FRETE"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} +.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice { + font-size: 0; + min-width: 140px; + text-align: left; +} +.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice::after { + content: "PRAZO"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} +.shippingTable .shippingTableBody .shippingTableRow { + display: flex; + flex-direction: row; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + display: flex; + order: 3; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate .shippingTableCellDeliveryPrice { + display: flex; + order: 2; +} +.shippingTable .shippingTableBody .shippingTableCell { + padding: 0; + display: flex; + color: #AFAFAF; + font-weight: 400; + font-size: 12px; + line-height: 16px; + min-width: 140px; + padding-top: 15px; +} +.shippingTable .shippingTableRadioBtn { + display: none; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index d263571..60b789a 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -100,17 +100,8 @@ .stretchChildrenWidth { margin: 0; - // display: flex; - // align-items: center; - // justify-content: center; } -// .input-button { -// display: flex; -// align-items: center; -// justify-content: center; -// } - .flexRowContent--buy-button { height: 49px; display: flex; diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index ef4e61d..2c98406 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -17,17 +17,6 @@ margin: 0; } -// .installments { -// color: $gray-500; -// margin-bottom: 16px; -// } - -// .sellingPriceValue--summary { -// font-size: 1.25rem; -// font-weight: 600; -// color: $black; -// } - .savings--summary { background: #8bc34a; border-radius: 1000px; @@ -62,38 +51,38 @@ } .installments { - font-size: 0; + font-size: 16px; + line-height: 22px; + font-weight: 400; + color: $gray-500; + margin-bottom: 16px; - .installmentsNumber, + .installments-discount, .installmentValue { font-weight: 700; - font-size: 16px; - line-height: 22px; - color: $gray-500; - margin-bottom: 16px; } - .installmentsNumber { - font-size: 0 !important; + // .installmentsNumber { + // font-size: 0 !important; - &::before { - content: "36 x"; - font-size: 16px; - } + // &::before { + // content: "36 x"; + // font-size: 16px; + // } - &::after { - content: " de "; - font-weight: 400; - font-size: 16px; - } - } + // &::after { + // content: " de "; + // font-weight: 400; + // font-size: 16px; + // } + // } - .installmentValue { - &::after { - content: " sem juros"; - font-weight: 400; - } - } + // .installmentValue { + // &::after { + // content: " sem juros"; + // font-weight: 400; + // } + // } } .savings--summaryPercentage { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 1c4fb87..f1b89a4 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,5 +1,27 @@ .newsletter { - background: red; + display: block; + background: $black; + + :global(.vtex-input-prefix__group) { + border: none; + + // background: $black; + } + + .label { + color: $white; + font-weight: 400; + // font-size: 24px; + // line-height: 38px; + font-size: 18px; + line-height: 25px; + } + + .button-container { + :global(.vtex-button__label) { + background-color: transparent; + } + } } .container { @@ -208,11 +230,13 @@ :global(.vtex-button) { font-size: 0; position: relative; - top: 25px; - right: 148px; - width: 53px; - height: 53px; + top: 27px; + right: 147px; + width: 49px; + height: 49px; margin-top: 0; + border: none; + border-radius: 0; background-color: $black; cursor: pointer; @@ -248,3 +272,91 @@ :global(.vtex-button__label) { height: fit-content; } + +.shippingTable { + display: flex; + flex-direction: column; + border: none; + + .shippingTableHead { + display: flex; + flex-direction: row; + + .shippingTableHeadDeliveryName, + .shippingTableHeadDeliveryEstimate, + .shippingTableHeadDeliveryPrice { + padding: 0; + } + + .shippingTableHeadDeliveryName { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray-700; + text-transform: uppercase; + min-width: 140px; + text-align: left; + } + + .shippingTableHeadDeliveryEstimate { + font-size: 0; + min-width: 140px; + text-align: left; + + &::after { + content: "FRETE"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray-700; + // margin-right: 40px; + } + } + + .shippingTableHeadDeliveryPrice { + font-size: 0; + min-width: 140px; + text-align: left; + + &::after { + content: "PRAZO"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray-700; + } + } + } + + .shippingTableBody { + .shippingTableRow { + display: flex; + flex-direction: row; + + .shippingTableCellDeliveryEstimate { + display: flex; + order: 3; + + .shippingTableCellDeliveryPrice { + display: flex; + order: 2; + } + } + } + + .shippingTableCell { + padding: 0; + display: flex; + color: $gray-400; + font-weight: 400; + font-size: 12px; + line-height: 16px; + min-width: 140px; + padding-top: 15px; + } + } + + .shippingTableRadioBtn { + display: none; + } +}