From 59dac4f6dc921cb6512c78c01c3e1a56486d911b Mon Sep 17 00:00:00 2001 From: Adilson Fernando Date: Fri, 27 Jan 2023 16:34:21 -0300 Subject: [PATCH] feat: area pix finalizada --- react/components/pixCustom/pixCustom.tsx | 70 ++++++------ react/components/pixCustom/styles.css | 36 +++++- 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 | 3 +- styles/css/vtex.store-components.css | 1 - .../pages/product/vtex.store-components.scss | 2 +- 13 files changed, 260 insertions(+), 35 deletions(-) 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/react/components/pixCustom/pixCustom.tsx b/react/components/pixCustom/pixCustom.tsx index 95b9ad1..51ccd09 100644 --- a/react/components/pixCustom/pixCustom.tsx +++ b/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} + // {productContextValue?.product?.priceRange.sellingPrice.highPrice} - const valorString = productContextValue?.product?.priceRange.sellingPrice.lowPrice; - - const valorNumber = Number(valorString) - - const desconto = 0.9 + const valorString = + productContextValue?.product?.priceRange.sellingPrice.lowPrice; - var pix = (valorNumber * desconto).toFixed(2).replace(".", ",") - - console.log(pix); - - return( -
-
- Imagem Pix -
+ const valorNumber = Number(valorString); -
+ const desconto = 0.9; +
…
+ var pix = (valorNumber * desconto).toFixed(2).replace(".", ","); -
+ console.log(pix); -
+ // const CSS_HANDLES = [ + // "divConteiner", + // "divImg", + // "img", + // "divText", + // "h1Valor", + // "h2Desconto", + // ]; -
-

R$ ${pix}

-

10% de desconto

-
+ // const handles = useCssHandles(CSS_HANDLES); -
+ return ( +
+
+ Imagem Pix +
-
- ); -} +
+

R$ {pix}

+

10% de desconto

+
+
+ ); +}; -export default pixCustom \ No newline at end of file +export default pixCustom; diff --git a/react/components/pixCustom/styles.css b/react/components/pixCustom/styles.css index 5ab7eff..a3eadfd 100644 --- a/react/components/pixCustom/styles.css +++ b/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; } 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 ab95194..2cf6ab8 100644 --- a/store/blocks/pdp/product.jsonc +++ b/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"] diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 62007a9..e9913e0 100644 --- a/styles/css/vtex.store-components.css +++ b/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; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 75c0e36..e133c26 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/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";