diff --git a/react/components/Pixdiscount/pix-discount.tsx b/react/components/Pixdiscount/pix-discount.tsx index 6aaa9b7..8dddddb 100644 --- a/react/components/Pixdiscount/pix-discount.tsx +++ b/react/components/Pixdiscount/pix-discount.tsx @@ -23,11 +23,12 @@ export function PixDiscount() { return (
pix
-

{discount()}

+

{discount()}

10% de desconto
diff --git a/react/components/Pixdiscount/styles.css b/react/components/Pixdiscount/styles.css index 3ae0430..27e9605 100644 --- a/react/components/Pixdiscount/styles.css +++ b/react/components/Pixdiscount/styles.css @@ -2,8 +2,18 @@ display: flex; } +.pixImg { + height: 24px; + padding: 10px 26px 5px 0; +} + +.discountP { + margin: 0; + margin-right: 30px; +} .discountPixContainer { display: flex; + align-items: center; flex-direction: column; font-family: "Open Sans"; font-style: normal; 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 46b392a..8e658ea 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -68,6 +68,13 @@ "text": "##### Product Specifications" } }, + + "product-description": { + "props": { + "collapseContent": false + } + }, + "flex-layout.row#description": { "props": { "marginBottom": 7 diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index fabc5e9..e068188 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -25,6 +25,8 @@ .flexRowContent--addToBag .stretchChildrenWidth:last-child :global(.vtex-button) { background-color: #000000; border: none; + height: 49px; + box-sizing: border-box; } :global(.vtex-add-to-cart-button-0-x-buttonText) { diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 5ad81cc..3f1fda2 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -20,6 +20,7 @@ font-size: 16px; line-height: 22px; color: #929292; + margin-bottom: 8px; } .currencyContainer--installmentsSumary { @@ -31,4 +32,47 @@ } .installmentsNumber--installmentsSumary--4::after { content: "x"; +} + +.installmentsPrice { + display: none; +} + +.listPrice { + margin: 8px; + padding: 0; + display: block; +} + +.listPriceLabel { + font-size: 0; +} + +.listPriceValue { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; +} +.listPriceValue::before { + content: "de "; +} +.listPriceValue::after { + content: " por"; + text-decoration: line-through; +} + +.sellingPriceLabel { + font-size: 0; +} + +.sellingPrice { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 6b63929..7180eb2 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -26,4 +26,8 @@ height: 16px !important; border: 0.5px solid #000000; background-color: white; +} + +.slideChildrenContainer { + margin-bottom: 36px; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 1c7389e..7de5dbd 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -20,6 +20,7 @@ .skuSelectorContainer--sku-selector { display: flex; flex-direction: column-reverse; + margin-bottom: 16px; } .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { @@ -196,46 +197,4 @@ .carouselGaleryThumbs :global(.vtex-store-components-3-x-productImagesThumb) { margin-right: 16px; width: 90px !important; -} - -.installmentsPrice { - display: none; -} - -.listPrice { - margin: 8px; - padding: 0; -} - -.listPriceLabel { - font-size: 0; -} - -.listPriceValue { - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #bababa; -} -.listPriceValue::before { - content: "de "; -} -.listPriceValue::after { - content: " por"; - text-decoration: line-through; -} - -.sellingPriceLabel { - font-size: 0; -} - -.sellingPrice { - font-family: "Open Sans"; - font-style: normal; - font-weight: 700; - font-size: 24px; - line-height: 33px; - color: #000000; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index aa7dead..e8ec1ee 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -16,6 +16,8 @@ :global(.vtex-button) { background-color: #000000; border: none; + height: 49px; + box-sizing: border-box; } } } diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index cd38dd4..c9b23e5 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -11,6 +11,7 @@ font-size: 16px; line-height: 22px; color: #929292; + margin-bottom: 8px; } .currencyContainer--installmentsSumary { @@ -23,3 +24,47 @@ content: "x"; } } + +.installmentsPrice { + display: none; +} +.listPrice { + margin: 8px; + padding: 0; + display: block; +} + +.listPriceLabel { + font-size: 0; +} + +.listPriceValue { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; + + &::before { + content: "de "; + } + + &::after { + content: " por"; + text-decoration: line-through; + } +} + +.sellingPriceLabel { + font-size: 0; +} + +.sellingPrice { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index e44ca8c..af5c0ed 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -18,3 +18,7 @@ border: 0.5px solid #000000; background-color: white; } + +.slideChildrenContainer { + margin-bottom: 36px; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index be2d5fa..f867ef4 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -11,6 +11,7 @@ .skuSelectorContainer--sku-selector { display: flex; flex-direction: column-reverse; + margin-bottom: 16px; } .skuSelectorSubcontainer--tamanho { .skuSelectorItemTextValue { @@ -195,46 +196,3 @@ width: 90px !important; } } - -.installmentsPrice { - display: none; -} -.listPrice { - margin: 8px; - padding: 0; -} - -.listPriceLabel { - font-size: 0; -} - -.listPriceValue { - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #bababa; - - &::before { - content: "de "; - } - - &::after { - content: " por"; - text-decoration: line-through; - } -} - -.sellingPriceLabel { - font-size: 0; -} - -.sellingPrice { - font-family: "Open Sans"; - font-style: normal; - font-weight: 700; - font-size: 24px; - line-height: 33px; - color: #000000; -}