feat: area pix finalizada

react/components/pixCustom/pixCustom.tsx

@@ -1,45 +1,53 @@
-import React from 'react';
-import {useProduct} from 'vtex.product-context';
+import React from "react";
+import { useProduct } from "vtex.product-context";
 
-import './styles.css';
+// import { useCssHandles } from "vtex.css-handles";
 
+import styles from "./styles.css";
 
 const pixCustom = () => {
-    const productContextValue = useProduct()
+  const productContextValue = useProduct();
 
   // {productContextValue?.product?.priceRange.sellingPrice.highPrice}
 
-    const valorString = productContextValue?.product?.priceRange.sellingPrice.lowPrice;
+  const valorString =
+    productContextValue?.product?.priceRange.sellingPrice.lowPrice;
 
-    const valorNumber = Number(valorString)
+  const valorNumber = Number(valorString);
 
-    const desconto = 0.9
-
-    var pix = (valorNumber * desconto).toFixed(2).replace(".", ",")
+  const desconto = 0.9;
+<div>…</div>
+  var pix = (valorNumber * desconto).toFixed(2).replace(".", ",");
 
   console.log(pix);
 
+  // const CSS_HANDLES = [
+  //   "divConteiner",
+  //   "divImg",
+  //   "img",
+  //   "divText",
+  //   "h1Valor",
+  //   "h2Desconto",
+  // ];
+
+  // const handles = useCssHandles(CSS_HANDLES);
+
   return (
-        <div>
-            <div>
-                <img src="https://agenciamagma.vtexassets.com/arquivos/AdilsonFernandoNevesOrnellas-ImgPix.png" alt="Imagem Pix" />
+    <div className={styles.divConteiner}>
+      <div className={styles.divImg}>
+        <img
+          className={styles.img}
+          src="https://agenciamagma.vtexassets.com/arquivos/AdilsonFernandoNevesOrnellas-ImgPix.png"
+          alt="Imagem Pix"
+        />
       </div>
 
-            <div>
-
-                <div>
-
+      <div className={styles.divText}>
+        <h1 className={styles.h1Valor}> R$ {pix} </h1>
+        <h2 className={styles.h2Desconto}> 10% de desconto </h2>
       </div>
-
-                <div>
-                    <h1> R$ ${pix} </h1>
-                    <h2> 10% de desconto </h2>
-                </div>
-
-            </div>
-
     </div>
   );
-}
+};
 
-export default pixCustom
+export default pixCustom;

react/components/pixCustom/styles.css

@@ -1,3 +1,37 @@
-[class*=""] {
+/* [class*=""] {
   
+} */
+.divConteiner {
+  display: flex;
+  align-items: center;
+  width: 203px;
+  height: 39px;
+  gap: 26px;
+  margin-top: 8px;
+}
+.divImg {
+}
+.img {
+  width: 66px;
+  height: 24px;
+}
+.divText {
+}
+.h1Valor {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 25px;
+  color: rgba(0, 0, 0, 0.58);
+  margin: 0;
+}
+.h2Desconto {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 13px;
+  line-height: 18px;
+  color: #929292;
+  margin: 0;
 }

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

@@ -380,7 +380,8 @@
   },
   "list-context.product-list#demo": {
     "props":{
-      // "collection":"/m3-academy---desafio/sandalias"
+      // "category":"112901"
+      // "specificationFilters":"(id:112901)"
     },
     "blocks": ["product-summary.shelf#demo"],
     "children": ["slider-layout#demo-product"]

styles/css/vtex.store-components.css

@@ -171,7 +171,6 @@
 .skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho {
   order: 1;
   height: 67px;
-  margin-bottom: 10px !important;
 }
 .skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorName {
   font-size: 0;

styles/sass/pages/product/vtex.store-components.scss

@@ -151,7 +151,7 @@
   .skuSelectorSubcontainer--tamanho {
     order: 1;
     height: 67px;
-    margin-bottom: 10px !important;
+    // margin-bottom: 10px !important;
     .skuSelectorName {
       font-size: 0;
       font-family: "Open Sans";