Feat(Pdp): Cria custom componente custom do Pix, e mudanças de Css variadas na pagina

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 (
-    <div>{pixValue}</div>
+    <div className={styles.wrapperComponentPix}>
+      <img className={styles.imagePix} src="https://agenciamagma.vteximg.com.br/arquivos/PixImg-RhayllonDaudt.png" alt="PixIcon" />
+      <div className={styles.wrapperTexts}>
+        <p className={styles.wrapperTexts__value}>R$ {pixValueDescontoVirgula} </p>
+        <p className={styles.wrapperTexts__descontoPorcentagem}>10% de desconto</p>
+      </div>
+    </div>
   )
 }
 

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;
+}

react/typings/css.d.ts

@@ -0,0 +1,4 @@
+declare module "*.css" {
+    const css: any;
+    export default css;
+}

react/typings/global.d.ts

@@ -0,0 +1,7 @@
+export interface TimeSplit {
+    hours: string
+    minutes: string
+    seconds: string
+}
+
+type GenericObject = Record<string, any>

react/typings/graphql.d.ts

@@ -0,0 +1,6 @@
+declare module "*.graphql" {
+    import { DocumentNode } from "graphql";
+
+    const value: DocumentNode;
+    export default value;
+}

react/typings/storefront.d.ts

@@ -0,0 +1,15 @@
+import { FunctionComponent } from "react";
+
+declare global {
+  interface StorefrontFunctionComponent<P = GenericObject>
+    extends FunctionComponent<P> {
+    getSchema?(props: P): GenericObject
+    schema?: GenericObject
+  }
+
+  interface StorefrontComponent<P = GenericObject, S = GenericObject>
+    extends Component<P, S> {
+    getSchema?(props: P): GenericObject
+    schema: GenericObject
+  }
+}

react/typings/vtex.css-handles.ts

@@ -0,0 +1 @@
+declare module "vtex.css-handles"

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<DefaultOrderForm, "items">;
+    type DefaultOrderFormUpdated = DefaultOrderFormOmited & {
+        items: OrderFormItem[] | null;
+    };
+
+    export const OrderFormContext = createContext<Context<OrderForm>>({
+        orderForm: DefaultOrderFormUpdated,
+        setOrderForm: noop,
+        error: undefined,
+        loading: false,
+    });
+
+    function useOrderForm<O extends OrderForm = DefaultOrderFormUpdated>() {
+        const context = useContext(OrderFormContext);
+
+        if (context === undefined) {
+            throw new Error(
+                "useOrderForm must be used within a OrderFormProvider"
+            );
+        }
+        return context as Context<O>;
+    }
+
+    export type OrderFormItem = {
+        additionalInfo: {
+            brandName: string;
+            __typename: string;
+        };
+        attachments: Array<any>;
+        attachmentOfferings: Array<any>;
+        bundleItems: Array<any>;
+        parentAssemblyBinding: any;
+        parentItemIndex: any;
+        sellingPriceWithAssemblies: any;
+        options: any;
+        availability: string;
+        detailUrl: string;
+        id: string;
+        imageUrls: Record<string, string>;
+        listPrice: number;
+        manualPrice: any;
+        measurementUnit: string;
+        modalType: any;
+        name: string;
+        offerings: Array<any>;
+        price: number;
+        priceTags: Array<any>;
+        productCategories: Record<string, string>;
+        productCategoryIds: string;
+        productRefId: string;
+        productId: string;
+        quantity: number;
+        seller: string;
+        sellingPrice: number;
+        skuName: string;
+        skuSpecifications: Array<any>;
+        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<Record<string, never>>;
+        useOrderForm: typeof useOrderForm;
+    };
+    export default _default;
+}
+
+declare module "vtex.order-manager/constants" {
+    export * from "vtex.order-manager/react/constants";
+}
+
+

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<ExtensionPointProps>;
+
+    interface ChildBlockProps {
+        id: string
+    }
+
+    export const ChildBlock: ComponentType<ChildBlockProps>;
+    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: <TOriginalProps extends GenericObject>(
+        Component: ComponentType<TOriginalProps & RenderContextProps>
+    ) => ComponentType<TOriginalProps>;
+}

react/typings/vtex.styleguide.d.ts

@@ -0,0 +1,9 @@
+declare module "vtex.styleguide" {
+    import { ComponentType } from "react";
+
+    export const Input: ComponentType<InputProps>;
+
+    interface InputProps {
+        [key: string]: any
+    }
+}

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": {

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"

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;
+}

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;
 }

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;
 }

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;

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;
+}

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;
 }

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;
 }

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) {

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{

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;