From 4b636c9215fb172c668267538639ae67e38ae46e Mon Sep 17 00:00:00 2001 From: Rhayllon Date: Fri, 10 Feb 2023 16:02:54 -0300 Subject: [PATCH] =?UTF-8?q?Feat(Pdp):=20Cria=20custom=20componente=20custo?= =?UTF-8?q?m=20do=20Pix,=20e=20mudan=C3=A7as=20de=20Css=20variadas=20na=20?= =?UTF-8?q?pagina?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Pix/Pix.tsx | 30 ++++- react/components/Pix/styles.css | 29 +++++ react/typings/css.d.ts | 4 + react/typings/global.d.ts | 7 ++ react/typings/graphql.d.ts | 6 + react/typings/storefront.d.ts | 15 +++ react/typings/vtex.css-handles.ts | 1 + react/typings/vtex.order-manager.d.ts | 103 ++++++++++++++++++ react/typings/vtex.render-runtime.d.ts | 38 +++++++ react/typings/vtex.styleguide.d.ts | 9 ++ store/blocks/pdp/product.jsonc | 19 +++- store/blocks/product-price.jsonc | 3 +- styles/css/vtex.breadcrumb.css | 40 +++++++ styles/css/vtex.flex-layout.css | 10 ++ styles/css/vtex.product-price.css | 9 ++ styles/css/vtex.store-components.css | 80 +++++++++++++- .../sass/pages/product/vtex.breadcrumb.scss | 31 ++++++ .../sass/pages/product/vtex.flex-layout.scss | 9 ++ .../pages/product/vtex.product-price.scss | 8 ++ .../pages/product/vtex.product-summary.scss | 2 +- .../pages/product/vtex.store-components.scss | 102 +++++++++++++++++ styles/sass/utils/_vars.scss | 6 + 22 files changed, 552 insertions(+), 9 deletions(-) create mode 100644 react/components/Pix/styles.css create mode 100644 react/typings/css.d.ts create mode 100644 react/typings/global.d.ts create mode 100644 react/typings/graphql.d.ts create mode 100644 react/typings/storefront.d.ts create mode 100644 react/typings/vtex.css-handles.ts create mode 100644 react/typings/vtex.order-manager.d.ts create mode 100644 react/typings/vtex.render-runtime.d.ts create mode 100644 react/typings/vtex.styleguide.d.ts create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index 1cf0eeb..eee4b67 100644 --- a/react/components/Pix/Pix.tsx +++ b/react/components/Pix/Pix.tsx @@ -1,12 +1,36 @@ import React from 'react' import { useProduct } from 'vtex.product-context' +// import { useCssHandles } from 'vtex.css-handles' +import styles from "./styles.css" + const Pix = () => { const product = useProduct() - // console.log(product) - var pixValue = product?.product?.priceRange?.sellingPrice?.lowPrice; + let pixValueTotal:any = product?.product?.priceRange?.sellingPrice?.lowPrice; + let pixValueTotalNumber = parseFloat(pixValueTotal); + let porcentagemDesconto = 10; + let desconto = (pixValueTotalNumber / 100)* porcentagemDesconto; + let pixValueDesconto = (pixValueTotal - desconto).toFixed(2); + let pixValueDescontoVirgula = pixValueDesconto.replace(".", ",") + + // const CSS_HANDLES = [ + // "wrapperComponentPix", + // "imagePix", + // "wrapperTexts", + // "wrapperTexts__value", + // "wrapperTexts__descontoPorcentagem", + // ] + + // const handles = useCssHandles(CSS_HANDLES) + return ( -
{pixValue}
+
+ PixIcon +
+

R$ {pixValueDescontoVirgula}

+

10% de desconto

+
+
) } diff --git a/react/components/Pix/styles.css b/react/components/Pix/styles.css new file mode 100644 index 0000000..cba0fbd --- /dev/null +++ b/react/components/Pix/styles.css @@ -0,0 +1,29 @@ +.wrapperComponentPix{ + display: flex; + margin: 8px 0 16px 0; + align-items: center; +} +.wrapperTexts__value{ + margin: 0; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} +.wrapperTexts__descontoPorcentagem{ + margin: 0; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} +.imagePix{ + height: 24px; +} +.wrapperTexts{ + margin-left: 26px; +} \ No newline at end of file diff --git a/react/typings/css.d.ts b/react/typings/css.d.ts new file mode 100644 index 0000000..c5862b6 --- /dev/null +++ b/react/typings/css.d.ts @@ -0,0 +1,4 @@ +declare module "*.css" { + const css: any; + export default css; +} diff --git a/react/typings/global.d.ts b/react/typings/global.d.ts new file mode 100644 index 0000000..17b4165 --- /dev/null +++ b/react/typings/global.d.ts @@ -0,0 +1,7 @@ +export interface TimeSplit { + hours: string + minutes: string + seconds: string +} + +type GenericObject = Record diff --git a/react/typings/graphql.d.ts b/react/typings/graphql.d.ts new file mode 100644 index 0000000..84017d3 --- /dev/null +++ b/react/typings/graphql.d.ts @@ -0,0 +1,6 @@ +declare module "*.graphql" { + import { DocumentNode } from "graphql"; + + const value: DocumentNode; + export default value; +} diff --git a/react/typings/storefront.d.ts b/react/typings/storefront.d.ts new file mode 100644 index 0000000..4689dc6 --- /dev/null +++ b/react/typings/storefront.d.ts @@ -0,0 +1,15 @@ +import { FunctionComponent } from "react"; + +declare global { + interface StorefrontFunctionComponent

+ extends FunctionComponent

{ + getSchema?(props: P): GenericObject + schema?: GenericObject + } + + interface StorefrontComponent

+ extends Component { + getSchema?(props: P): GenericObject + schema: GenericObject + } +} diff --git a/react/typings/vtex.css-handles.ts b/react/typings/vtex.css-handles.ts new file mode 100644 index 0000000..4f191a0 --- /dev/null +++ b/react/typings/vtex.css-handles.ts @@ -0,0 +1 @@ +declare module "vtex.css-handles" diff --git a/react/typings/vtex.order-manager.d.ts b/react/typings/vtex.order-manager.d.ts new file mode 100644 index 0000000..b563ce5 --- /dev/null +++ b/react/typings/vtex.order-manager.d.ts @@ -0,0 +1,103 @@ +/* eslint-disable no-inner-declarations */ +declare module "vtex.order-manager/OrderQueue" { + export * from "vtex.order-manager/react/OrderQueue"; + export { default } from "vtex.order-manager/react/OrderQueue"; + + export const QueueStatus = { + PENDING: "Pending", + FULFILLED: "Fulfilled", + } as const; +} + +declare module "vtex.order-manager/OrderForm" { + import { createContext, useContext } from "react"; + import type { DEFAULT_ORDER_FORM } from "@vtex/order-manager/src/constants"; + import type { Context, OrderForm } from "@vtex/order-manager/src/typings"; + + type DefaultOrderForm = typeof DEFAULT_ORDER_FORM; + type DefaultOrderFormOmited = Omit; + type DefaultOrderFormUpdated = DefaultOrderFormOmited & { + items: OrderFormItem[] | null; + }; + + export const OrderFormContext = createContext>({ + orderForm: DefaultOrderFormUpdated, + setOrderForm: noop, + error: undefined, + loading: false, + }); + + function useOrderForm() { + const context = useContext(OrderFormContext); + + if (context === undefined) { + throw new Error( + "useOrderForm must be used within a OrderFormProvider" + ); + } + return context as Context; + } + + export type OrderFormItem = { + additionalInfo: { + brandName: string; + __typename: string; + }; + attachments: Array; + attachmentOfferings: Array; + bundleItems: Array; + parentAssemblyBinding: any; + parentItemIndex: any; + sellingPriceWithAssemblies: any; + options: any; + availability: string; + detailUrl: string; + id: string; + imageUrls: Record; + listPrice: number; + manualPrice: any; + measurementUnit: string; + modalType: any; + name: string; + offerings: Array; + price: number; + priceTags: Array; + productCategories: Record; + productCategoryIds: string; + productRefId: string; + productId: string; + quantity: number; + seller: string; + sellingPrice: number; + skuName: string; + skuSpecifications: Array; + unitMultiplier: number; + uniqueId: string; + refId: string; + isGift: boolean; + priceDefinition: { + calculatedSellingPrice: number; + total: number; + sellingPrices: Array<{ + quantity: number; + value: number; + __typename: string; + }>; + __typename: string; + }; + __typename: string; + }; + + export { OrderFormProvider, useOrderForm }; + declare const _default: { + OrderFormProvider: import("react").FC>; + useOrderForm: typeof useOrderForm; + }; + export default _default; +} + +declare module "vtex.order-manager/constants" { + export * from "vtex.order-manager/react/constants"; +} + + diff --git a/react/typings/vtex.render-runtime.d.ts b/react/typings/vtex.render-runtime.d.ts new file mode 100644 index 0000000..bfb1e97 --- /dev/null +++ b/react/typings/vtex.render-runtime.d.ts @@ -0,0 +1,38 @@ +/* Typings for `render-runtime` */ +declare module "vtex.render-runtime" { + import { ComponentType, ReactElement, ReactType } from "react"; + + export interface NavigationOptions { + page: string + params?: any + } + + export interface RenderContextProps { + runtime: { + navigate: (options: NavigationOptions) => void + } + } + + interface ExtensionPointProps { + id: string + [key: string]: any + } + + export const ExtensionPoint: ComponentType; + + interface ChildBlockProps { + id: string + } + + export const ChildBlock: ComponentType; + export const useChildBlock = () => GenericObject; + + export const Helmet: ReactElement; + export const Link: ReactType; + export const NoSSR: ReactElement; + export const RenderContextConsumer: ReactElement; + export const canUseDOM: boolean; + export const withRuntimeContext: ( + Component: ComponentType + ) => ComponentType; +} diff --git a/react/typings/vtex.styleguide.d.ts b/react/typings/vtex.styleguide.d.ts new file mode 100644 index 0000000..6f1f00a --- /dev/null +++ b/react/typings/vtex.styleguide.d.ts @@ -0,0 +1,9 @@ +declare module "vtex.styleguide" { + import { ComponentType } from "react"; + + export const Input: ComponentType; + + interface InputProps { + [key: string]: any + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 7ca9da8..84e0c2d 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -18,8 +18,15 @@ "testId": "breadcrumbs", "blockClass": "pdp-breadcrumb" }, - "children": ["breadcrumb"] + "children": ["breadcrumb#Pdp"] }, + + "breadcrumb#Pdp": { + "props": { + "blockClass": "Pdp" + } + }, + "flex-layout.row#specifications-title": { "children": ["rich-text#specifications"] }, @@ -339,7 +346,6 @@ "product-identifier.product#identifierMain", "flex-layout.row#selling-price", "html#productInstallments", - "example-component", "pix", "product-separator", "sku-selector#inverseOrder", @@ -353,7 +359,14 @@ "props": { "testId": "product-installments" }, - "children": ["product-installments"] + "children": ["product-installments#InstallmentsMainPdp"] + }, + + "product-installments#InstallmentsMainPdp": { + "props": { + "blockClass": "InstallmentsMainPdp", + "installmentsCriteria": "max-quantity-without-interest" + } }, "flex-layout.row#product-name": { diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..50a7efd 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -4,7 +4,8 @@ "colGap": 2, "preserveLayoutOnMobile": true, "preventHorizontalStretch": true, - "marginBottom": 4 + "marginBottom": 4, + "blockClass": "sellPrice" }, "children": [ "product-selling-price" diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..2fd4df1 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,40 @@ +/* +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 */ +.homeLink--Pdp { + padding: 0 2px 4px 2px; +} +.homeLink--Pdp::before { + content: "Home"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.homeLink--Pdp .homeIcon--Pdp { + display: none; +} + +.link--Pdp, +.term--Pdp { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.container--Pdp { + padding: 0; + width: 94.44%; + margin: 0 auto; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index ed1f9f3..774e386 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -31,4 +31,14 @@ border: none; border-radius: 0; height: 48px; +} + +.flexRowContent--sellPrice { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; + margin: 0; } \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index b398cf6..0dcb8e5 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -25,4 +25,13 @@ font-weight: 700; font-size: 24px; line-height: 33px; +} + +.installments--InstallmentsMainPdp { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 3bcc85e..15497da 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -23,18 +23,96 @@ .productNameContainer--quickview { display: flex; justify-content: end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; } - :global(.vtex-product-identifier-0-x-product-identifier--productReference) { display: flex; justify-content: end; margin-bottom: 24px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); } .skuSelectorContainer--inverseOrder { display: flex; flex-direction: column-reverse; } +.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--cor .skuSelectorTextContainer::before { + content: "Outras cores:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} +.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--cor .skuSelectorName, +.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--cor .skuSelectorNameSeparator, +.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue { + font-size: 0; +} +.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer::before { + content: "Outros Tamanhos:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} +.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer--inverseOrder .skuSelectorItem--inverseOrder { + width: 40px; + height: 40px; + border-radius: 50%; +} +.skuSelectorContainer--inverseOrder .skuSelectorItem--inverseOrder--selected .frameAround--inverseOrder { + border: 2px solid #000000; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; +} +.skuSelectorContainer--inverseOrder .skuSelectorItem--inverseOrder--selected .skuSelectorItemTextValue--inverseOrder { + color: #000000; +} +.skuSelectorContainer--inverseOrder .skuSelectorItem--inverseOrder--selected .skuSelectorInternalBox--inverseOrder { + border: none; +} +.skuSelectorContainer--inverseOrder .skuSelectorItemTextValue--inverseOrder { + padding: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorContainer--inverseOrder .frameAround--inverseOrder { + border-radius: 50%; +} +.skuSelectorContainer--inverseOrder .skuSelectorInternalBox--inverseOrder { + border-radius: 50%; + width: 40px; + height: 40px; + border-color: #989898; +} +.skuSelectorContainer--inverseOrder .diagonalCross--inverseOrder { + border-radius: 50%; +} .shippingContainer { display: flex; diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..6388af7 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,31 @@ +.homeLink--Pdp{ + padding: 0 2px 4px 2px; + + &::before { + content: "Home"; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray15; + } + + .homeIcon--Pdp{ + display: none; + } +} +.link--Pdp, +.term--Pdp{ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray15; +} +.container--Pdp{ + padding: 0; + width: 94.44%; + margin: 0 auto; +} \ 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 20ba3dc..ecc6a10 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -24,4 +24,13 @@ } } +} +.flexRowContent--sellPrice{ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: $color-black2; + margin: 0; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index fc0c2fa..7a4b54f 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -15,4 +15,12 @@ font-weight: 700; font-size: 24px; line-height: 33px; +} +.installments--InstallmentsMainPdp{ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: $color-gray15; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 60bb2fa..d4e4a7b 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -25,7 +25,7 @@ .image--prateleiraImg{ min-height: 314px; - @media screen and (min-width: 2500px) { + @media screen and (min-width: 1920px) { } @media screen and (max-width: 1024px) { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 2ca2f94..c8af5a6 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -14,17 +14,119 @@ .productNameContainer--quickview{ display: flex; justify-content: end; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: $color-gray14; + + @media screen and (min-width: 1920px) { + + } } :global(.vtex-product-identifier-0-x-product-identifier--productReference){ display: flex; justify-content: end; margin-bottom: 24px; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray13; } .skuSelectorContainer--inverseOrder{ display: flex; flex-direction: column-reverse; + + .skuSelectorSubcontainer--cor{ + + .skuSelectorTextContainer{ + &::before { + content: "Outras cores:"; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray15; + text-transform: uppercase; + } + } + + .skuSelectorName, + .skuSelectorNameSeparator, + .skuSelectorSelectorImageValue{ + font-size: 0; + } + } + .skuSelectorSubcontainer--tamanho{ + + .skuSelectorTextContainer{ + &::before { + content: "Outros Tamanhos:"; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray15; + text-transform: uppercase; + } + } + + .skuSelectorName{ + font-size: 0; + } + } + + .skuSelectorItem--inverseOrder{ + width: 40px; + height: 40px; + border-radius: 50%; + } + .skuSelectorItem--inverseOrder--selected{ + + .frameAround--inverseOrder{ + border: 2px solid $color-black2; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + } + .skuSelectorItemTextValue--inverseOrder{ + color: $color-black2; + } + .skuSelectorInternalBox--inverseOrder{ + border: none; + } + } + + .skuSelectorItemTextValue--inverseOrder{ + padding: 0; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray11; + } + .frameAround--inverseOrder{ + border-radius: 50%; + } + .skuSelectorInternalBox--inverseOrder{ + border-radius: 50%; + width: 40px; + height: 40px; + border-color: $color-gray12; + } + .diagonalCross--inverseOrder{ + border-radius: 50%; + // transform: rotate(-45deg); + } } .shippingContainer{ diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index ac559f3..cd5669a 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -12,6 +12,12 @@ $color-gray6: #B9B9B9; $color-gray7: #CCCCCC; $color-gray8: #bfbfbf; $color-gray9: #bababa; +$color-gray10: #D5D5D5; +$color-gray11: rgba(185, 185, 185, 0.6); +$color-gray12: #989898; +$color-gray13: rgba(146, 146, 146, 0.48); +$color-gray14: #575757; +$color-gray15: #929292; $color-blue: #4267b2;