From cd29ec6d06b3591e77f3781f8c59b8f1c7d8b573 Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Mon, 30 Jan 2023 16:15:00 -0300 Subject: [PATCH] feat: adiciona bloco custumizado pix --- assets/pix-logo-vitor-soares.png | Bin 0 -> 1405 bytes react/Pix.tsx | 2 + react/components/Pix-bloco/Pix.tsx | 30 ++++++ react/components/Pix-bloco/style.module.css | 3 + 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 | 1 + store/interfaces.json | 4 + 14 files changed, 223 insertions(+) create mode 100644 assets/pix-logo-vitor-soares.png create mode 100644 react/Pix.tsx create mode 100644 react/components/Pix-bloco/Pix.tsx create mode 100644 react/components/Pix-bloco/style.module.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 diff --git a/assets/pix-logo-vitor-soares.png b/assets/pix-logo-vitor-soares.png new file mode 100644 index 0000000000000000000000000000000000000000..df6f8510d35c2f02e59224d0b182c91b1eac6ba1 GIT binary patch literal 1405 zcmV-@1%mpCP)X1^@s6g&p|Z00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPxv4WkRbOTEySXfXIOZr!B)iT>N%>1UOXQmb0A}yWNk{^w&@oV+BufKf{ za}-W%`1q$}sol?Ggc9{v17 zksRm9%dB`XM@Mw$por z{cIWt18Y*pd*$*H%pmcUfIUKB$kMs^ZFm20i;#{A`TR(r9e|Koee}zZXZ%<+bjF`P z*Mut|1CA0wK`DJEwo*sx#(RdHDVPNgc}P=v<|TDKgJC%Cc_oA)5R3}yQ4mC35E08E z$+%MdP` zbL7^>oZKWBfOupT)S-Q^G07G?M6X~{V7vfBfn6B~VPMWMFrY2C0g~X1mXZdcesP&Z z33*g&u`MzT(zMC@?vqIn22!vJbC63qNouyZ5~>RUsF}~_s^KzOaL>2L*-MO=>W?f@ zlK`62*t5@Esq-WMY3*vD)XYceix9#xfzd(xTFxO+b&zNH7~&*xfp-XH(MAT(A@TBv zZ!<=64j_c)EZeOp3PPx!XFxRyhGVtfQih(uxHxesI9f0oi`rnuVB{TyE$sUb-#jbA z6(vXTKmGP*n@DZupBJaCC*axvtTBW}6ogO$gHKxw<828Su$o`*om?Hh#kDxfXE18# zh}t2#!4n}8hJvFHUp-rc7)j7_Tt70P@;#)btUBG?$kih&EA)KdZ4I~6F}6hy?w0aX zT)g@)O1fi~*gN`nmA)88N^{b~D%%?v(GCa42D^DJvNa0@ZL!X0_KMWu&Nqx!D*|?0 z2gD^e^0^}1Ksn)y*E=RZlq`_%L$dASsbPbM)|xqch$o@P^^TkOaqrckj}1^(6QX z+ez8*@3Dy)i5VD^n30?3ED*vN5e~|AJG@1jWZ*-?xr1p9hD-J0`MG=SB>Xg3Oa|v} zUF;A|E8xCtol5zG zM8b0vd1BXQ2%)Xau0(wvK%IbXJ2E=!N&SEyYp98&TR^ti9XK&$-%kqwc>+J-1wcmv zK_-AVgHzDx#U^k2yGcc|$K8fO)p>Wwde@Y^y>`is@}}G>{}25O_OJ)WrGO_Z00000 LNkvXXu0mjf#*&S? literal 0 HcmV?d00001 diff --git a/react/Pix.tsx b/react/Pix.tsx new file mode 100644 index 0000000..b617656 --- /dev/null +++ b/react/Pix.tsx @@ -0,0 +1,2 @@ +import Pix from "./components/Pix-bloco/Pix"; +export default Pix; diff --git a/react/components/Pix-bloco/Pix.tsx b/react/components/Pix-bloco/Pix.tsx new file mode 100644 index 0000000..3648654 --- /dev/null +++ b/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 ( +
+
+
+ desconto +
+
+

R${totalValue.toFixed(2)}

+

10 % de desconto

+
+
+
+ ); +}; + +export default Pix; diff --git a/react/components/Pix-bloco/style.module.css b/react/components/Pix-bloco/style.module.css new file mode 100644 index 0000000..1bc0701 --- /dev/null +++ b/react/components/Pix-bloco/style.module.css @@ -0,0 +1,3 @@ +.wrapper { + /* background-color: red; */ +} 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 46c3964..2c3ed0d 100644 --- a/store/blocks/pdp/product.jsonc +++ b/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", diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..849cdc8 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,9 @@ "html": { "component": "html", "composition": "children" + }, + + "Pix": { + "component": "Pix" } }