From 0dcda9f0386aa35b55292c84f5d908c0dfb55872 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Thu, 9 Feb 2023 16:18:58 -0300 Subject: [PATCH] feat(availability):availability finalizada --- react/components/ProductContext/Pix.tsx | 11 +++- store/blocks/pdp/product.jsonc | 6 +++ styles/css/vtex.flex-layout.css | 26 +++++++++ styles/css/vtex.store-components.css | 53 +++++++++++++++++++ .../sass/pages/product/vtex.flex-layout.scss | 27 +++++++++- .../pages/product/vtex.store-components.scss | 53 +++++++++++++++++++ 6 files changed, 173 insertions(+), 3 deletions(-) diff --git a/react/components/ProductContext/Pix.tsx b/react/components/ProductContext/Pix.tsx index 4a09b0d..4b8c073 100644 --- a/react/components/ProductContext/Pix.tsx +++ b/react/components/ProductContext/Pix.tsx @@ -1,7 +1,14 @@ -import React from 'react'; +import React, { useRef, useEffect } from 'react'; import { useProduct } from 'vtex.product-context'; -const Pix = () => { +const Pix: React.FC = () => { + const buttonRef = useRef(null); + useEffect(() => { + if (buttonRef.current) { + buttonRef.current.innerHTML = 'Novo texto'; + buttonRef.current.setAttribute('placeholder', 'Novo placeholder'); + } + }, []); const { product } = useProduct() let pixprice = product?.priceRange.sellingPrice.lowPrice diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index db392cb..700f7d8 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -454,6 +454,12 @@ "children": ["availability-subscriber"] }, + "availability-subscriber":{ + "props": { + "blockClass": "message-availability" + } + }, + "share#default": { "props": { "social": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index d413635..02713df 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -200,4 +201,29 @@ font-weight: 700; font-size: 25px; line-height: 38px; +} + +.flexRowContent--message-availability :global(.vtex-store-components-3-x-title) { + font-size: 0; +} +.flexRowContent--message-availability :global(.vtex-store-components-3-x-title)::after { + content: "Produto indisponível"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 900; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.flexRowContent--message-availability :global(.vtex-store-components-3-x-subscribeLabel) { + font-size: 0; +} +.flexRowContent--message-availability :global(.vtex-store-components-3-x-subscribeLabel)::after { + content: "Deseja saber quando estiver disponível?"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index aba5c15..8f3d246 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -241,4 +241,57 @@ font-size: 14px !important; line-height: 19px !important; } +} + +.form { + width: max-content; +} +.form .content { + width: 65.532%; + height: 108px; + display: grid; + justify-items: center; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 1fr 1fr; + gap: 8px; +} +.form .content .inputName, .form .content .inputEmail { + width: 100%; + height: 40px; + min-width: 150px; + margin-right: 0; + margin-bottom: 7px; +} +.form .submit { + width: 100%; + justify-content: center; + grid-column: span 2; + grid-row: 2; +} +.form .submit :global(.vtex-button) { + width: 100%; + background: #000000; + width: 308px; + height: 49px; +} +.form .submit :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; +} +.form .submit :global(.vtex-button) :global(.vtex-button__label)::after { + content: "AVISE-ME"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #FFFFFF; +} +.form :global(.vtex-styleguide-9-x-input) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 28px; + padding: 14px 14px 16px; + color: #989898; } \ 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 f1e0d8e..5a75976 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -194,4 +194,29 @@ line-height: 38px; } } - +.flexRowContent--message-availability{ + :global(.vtex-store-components-3-x-title){ + font-size: 0; + &::after{ + content: "Produto indisponível"; + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 900; + font-size: 14px; + line-height: 19px; + color: #868686; + } + } + :global(.vtex-store-components-3-x-subscribeLabel){ + font-size: 0; + &::after{ + content: "Deseja saber quando estiver disponível?"; + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 3d1bab5..f4a374e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -216,4 +216,57 @@ } } +.form{ + width: max-content; + .content{ + width: 65.532%; + height: 108px; + display: grid; + justify-items: center; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 1fr 1fr; + gap: 8px; + .inputName,.inputEmail{ + width: 100%; + height: 40px; + min-width: 150px; + margin-right: 0; + margin-bottom: 7px; + } + } + .submit{ + width: 100%; + justify-content: center; + grid-column: span 2; + grid-row: 2; + :global(.vtex-button){ + width: 100%; + background: #000000; + width: 308px; + height: 49px; + :global(.vtex-button__label){ + font-size: 0; + &::after{ + content: "AVISE-ME"; + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #FFFFFF; + } + } + } + } + :global(.vtex-styleguide-9-x-input ){ + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 28px; + padding: 14px 14px 16px; + color: #989898; + } +} +