feat: adiciona bloco custumizado pix

react/Pix.tsx

@@ -0,0 +1,2 @@
+import Pix from "./components/Pix-bloco/Pix";
+export default Pix;

react/components/Pix-bloco/Pix.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import { useProduct } from "vtex.product-context";
+import styles from "./style.module.css";
+
+const Pix = () => {
+  const productContextValue = useProduct();
+
+  const productPrice = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice;
+
+  const discountValue = (Number(productPrice) * 10) / 100;
+
+  const totalValue = Number(productPrice) - Number(discountValue);
+
+  return (
+    <div className={styles["wrapper"]}>
+      <div className={styles["container"]}>
+        <div className={styles["image"]}>
+          <img src="https://agenciamagma.vtexassets.com/arquivos/pix-logo-vitor-soares.png" alt="desconto" />
+        </div>
+        <div className={styles["discount"]}>
+          <p className={styles["value"]}>R${totalValue.toFixed(2)}</p>
+          <p className={styles["text"]}>10 % de desconto</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Pix;

react/components/Pix-bloco/style.module.css

@@ -0,0 +1,3 @@
+.wrapper {
+  /* background-color: red; */
+}

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

@@ -108,6 +108,7 @@
       "product-rating-summary",
       "flex-layout.row#selling-price",
       "product-installments",
+      "Pix",
       "product-separator",
       "sku-selector",
       "html#buy-button",

store/interfaces.json

@@ -5,5 +5,9 @@
   "html": {
     "component": "html",
     "composition": "children"
+  },
+
+  "Pix": {
+    "component": "Pix"
   }
 }