fix: css pós testId

react/components/Pixdiscount/pix-discount.tsx

@@ -23,11 +23,12 @@ export function PixDiscount() {
   return (
     <div className={style.pixContainer}>
       <img
+        className={style.pixImg}
         src="https://agenciamagma.vtexassets.com/arquivos/pixpatrickreissantos.png"
         alt="pix"
       />
       <div className={style.discountPixContainer}>
-        <p>{discount()}</p>
+        <p className={style.discountP}>{discount()}</p>
         <span className={style.discountSpan}>10% de desconto</span>
       </div>
     </div>

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;

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

@@ -68,6 +68,13 @@
       "text": "##### Product Specifications"
     }
   },
+
+  "product-description": {
+    "props": {
+      "collapseContent": false
+    }
+  },
+
   "flex-layout.row#description": {
     "props": {
       "marginBottom": 7

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) {

styles/css/vtex.product-price.css

@@ -20,6 +20,7 @@
   font-size: 16px;
   line-height: 22px;
   color: #929292;
+  margin-bottom: 8px;
 }
 
 .currencyContainer--installmentsSumary {
@@ -32,3 +33,46 @@
 .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;
+}

styles/css/vtex.slider-layout.css

@@ -27,3 +27,7 @@
   border: 0.5px solid #000000;
   background-color: white;
 }
+
+.slideChildrenContainer {
+  margin-bottom: 36px;
+}

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 {
@@ -197,45 +198,3 @@
   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;
-}

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;
       }
     }
   }

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;
+}

styles/sass/pages/product/vtex.slider-layout.scss

@@ -18,3 +18,7 @@
   border: 0.5px solid #000000;
   background-color: white;
 }
+
+.slideChildrenContainer {
+  margin-bottom: 36px;
+}

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;
-}