diff --git a/react/ProductContext.tsx b/react/ProductContext.tsx
new file mode 100644
index 0000000..e8dcf65
--- /dev/null
+++ b/react/ProductContext.tsx
@@ -0,0 +1,3 @@
+import ProductContext from "./components/ProductContext/ProductContext";
+
+export default ProductContext;
diff --git a/react/components/ProductContext/ProductContext.tsx b/react/components/ProductContext/ProductContext.tsx
new file mode 100644
index 0000000..5e310b1
--- /dev/null
+++ b/react/components/ProductContext/ProductContext.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+import styles from './styles.css'
+
+const ProductContext = () => {
+ const productContextValue = useProduct();
+ console.log(productContextValue);
+
+ return (
+
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 e6ef024..df61590 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -12,6 +12,10 @@
]
},
+ "ProductContext": {
+ "props": {}
+ },
+
"newsletter": {
"props": {
"text": "Você também pode gostar:"
@@ -161,6 +165,7 @@
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments#m3-academy",
+ "ProductContext",
"sku-selector",
"product-gifts",
"flex-layout.row#buy-button",
diff --git a/store/interfaces.json b/store/interfaces.json
index c4b2ac4..d18fbc0 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -5,5 +5,8 @@
"html": {
"component": "html",
"composition": "children"
+ },
+ "ProductContext": {
+ "component": "ProductContext"
}
}