Merge pull request 'feat:adiciona componente desconto pix' (#10) from feature/adiciona-componente-desconto-pix into development

Reviewed-on: #10

react/PixPrice.tsx

@@ -0,0 +1,3 @@
+import PixPrice from "./components/PixPrice/PixPrice";
+
+export default PixPrice;

react/components/Html/styles.css

@@ -7,6 +7,7 @@
 [class*="html--buy-button"] {
   display: flex;
   gap: 10px;
+  margin-bottom: 5px;
 }
 
 [class*="html--buy-button"] :global(.vtex-button) {

react/components/PixPrice/PixPrice.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+import styles from "./styles.module.css";
+
+const PixPrice = () => {
+  // document.getElementsByClassName("myText").placeholder = "Type name here..";
+
+  const productContextValue = useProduct();
+
+  const productPrice =
+    productContextValue?.product?.priceRange?.sellingPrice?.lowPrice;
+
+  const descount = (Number(productPrice) * 10) / 100;
+
+  const total = Number(productPrice) - Number(descount.toFixed(2));
+
+  return (
+    <div className={styles["pixPrice-container"]}>
+      <div className={styles["pixPrice-content"]}>
+        <div className={styles["pixPrice-img"]}>
+          <img
+            src="https://agenciamagma.vtexassets.com/arquivos/pixRafaelSampaio.png"
+            alt=""
+          />
+        </div>
+        <div className={styles["pixPrice-descount"]}>
+          <p className={styles["pixPrice-value"]}>R$ {total.toFixed(2)}</p>
+          <p className={styles["pixPrice-text"]}>10 % de desconto</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PixPrice;

react/components/PixPrice/styles.module.css

@@ -0,0 +1,34 @@
+.pixPrice-container {
+  display: flex;
+  height: 39px;
+  margin-top: 8px;
+}
+
+.pixPrice-content {
+  display: flex;
+  gap: 26px;
+}
+
+.pixPrice-img {
+  display: flex;
+  align-items: center;
+}
+
+.pixPrice-value,
+.pixPrice-text {
+  margin: 0;
+}
+
+.pixPrice-value {
+  font-style: normal;
+  font-weight: 700;
+  font-size: 18px;
+  color: rgba(0, 0, 0, 0.58);
+}
+
+.pixPrice-text {
+  font-style: normal;
+  font-weight: 300;
+  font-size: 13px;
+  color: #929292;
+}

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

@@ -117,6 +117,7 @@
       "product-rating-summary",
       "flex-layout.row#selling-price",
       "product-installments",
+      "PixPrice",
       "sku-selector",
       "product-gifts",
       // "flex-layout.row#buy-button",

store/interfaces.json

@@ -5,5 +5,9 @@
   "html": {
     "component": "html",
     "composition": "children"
+  },
+
+  "PixPrice": {
+    "component": "PixPrice"
   }
 }

styles/configs/style.json

@@ -1,26 +1,28 @@
 {
-    "typeScale": [
-        3, 2.25, 1.5, 1.25, 1, 0.875, 0.75
-      ],
+  "typeScale": [3, 2.25, 1.5, 1.25, 1, 0.875, 0.75],
   "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16],
   "customMedia": [
     { "s": 20 },
-        { "ns": {
+    {
+      "ns": {
         "value": 40,
         "minWidth": true
       }
     },
-        { "m": {
+    {
+      "m": {
         "value": 40,
         "minWidth": true
       }
     },
-        { "l": {
+    {
+      "l": {
         "value": 64,
         "minWidth": true
       }
     },
-        { "xl": {
+    {
+      "xl": {
         "value": 80,
         "minWidth": true
       }
@@ -253,84 +255,84 @@
     "measure": [30, 34, 20],
     "styles": {
       "heading-1": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "700",
         "fontSize": "3rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-2": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "700",
         "fontSize": "2.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-3": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "700",
         "fontSize": "1.75rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-4": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.5rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-5": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-6": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "body": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "0.875rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "mini": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "0.75rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "action": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "500",
         "fontSize": "1rem",
         "textTransform": "uppercase",
         "letterSpacing": "0"
       },
       "action--small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "500",
         "fontSize": "0.875rem",
         "textTransform": "uppercase",
         "letterSpacing": "0"
       },
       "action--large": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "500",
         "fontSize": "1.25rem",
         "textTransform": "uppercase",

styles/css/vtex.flex-layout.css

@@ -9,6 +9,7 @@
 /* Grid breakpoints */
 .flexRowContent {
   padding: 0;
+  margin: 0;
 }
 
 .flexRowContent--menu-link,

styles/css/vtex.product-identifier.css

@@ -1,5 +1,20 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
 .product-identifier--productReference {
-  margin-bottom: 24px;
   display: flex;
   justify-content: end;
 }
+
+.product-identifier__value {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+}

styles/css/vtex.store-components.css

@@ -7,6 +7,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27");
 /* Grid breakpoints */
 .newsletter {
   background: red;
@@ -15,6 +16,11 @@
 .productBrand--quickview {
   display: flex;
   justify-content: end;
+  color: #575757;
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
 }
 
 .carouselGaleryThumbs {
@@ -74,6 +80,7 @@
   display: block;
   content: "OUTRAS CORES:";
   font-size: 14px;
+  color: #929292;
 }
 
 .skuSelectorSubcontainer--tamanho {
@@ -86,6 +93,7 @@
   display: block;
   content: "OUTROS TAMANHOS:";
   font-size: 14px;
+  color: #929292;
 }
 
 .productImagesThumb {
@@ -117,6 +125,7 @@
   font-size: 14px;
   display: block;
   content: "CALCULAR FRETE:";
+  color: #929292;
 }
 
 .shippingContainer :global(.vtex-input-prefix__group) {
@@ -129,7 +138,7 @@
   width: 49px;
   height: 49px;
   position: absolute;
-  left: 33.4%;
+  left: 232px;
   top: 33%;
   background: #292929;
   border: none;
@@ -152,7 +161,7 @@
   font-size: 0;
   visibility: hidden;
   position: absolute;
-  left: 43%;
+  left: 302px;
   top: 36%;
 }
 
@@ -167,6 +176,7 @@
 .shippingTable {
   border: none;
   padding: 0;
+  max-width: 382px;
 }
 
 .shippingTableHead {
@@ -175,7 +185,6 @@
 
 .shippingTableRow {
   position: relative;
-  margin-bottom: 15px;
 }
 
 .shippingTableHeadDeliveryName {
@@ -196,7 +205,7 @@
   font-size: 0;
   position: absolute;
   top: 5%;
-  left: 242%;
+  left: 342%;
 }
 
 .shippingTableHeadDeliveryEstimate::after {
@@ -213,7 +222,7 @@
   font-size: 0;
   position: absolute;
   top: 5%;
-  left: 138%;
+  left: 198%;
 }
 
 .shippingTableHeadDeliveryPrice::after {
@@ -229,3 +238,25 @@
 .shippingTableRadioBtn {
   display: none;
 }
+
+.shippingTableCellDeliveryName,
+.shippingTableCellDeliveryEstimate,
+.shippingTableCellDeliveryPrice {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: #afafaf;
+  padding: 0;
+  padding-top: 15px;
+}
+
+.shippingTableCellDeliveryEstimate {
+  position: absolute;
+  left: 62%;
+}
+
+.shippingTableCellDeliveryPrice {
+  position: absolute;
+  left: 36%;
+}

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

@@ -1,5 +1,6 @@
 .flexRowContent {
   padding: 0;
+  margin: 0;
 }
 
 .flexRowContent--menu-link,

styles/sass/pages/product/vtex.product-identifier.scss

@@ -0,0 +1,11 @@
+.product-identifier--productReference {
+  display: flex;
+  justify-content: end;
+}
+
+.product-identifier__value {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+}

styles/sass/pages/product/vtex.store-components.scss

@@ -10,6 +10,11 @@
 .productBrand--quickview {
   display: flex;
   justify-content: end;
+  color: $color-gray8;
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
 }
 
 .carouselGaleryThumbs {
@@ -69,6 +74,7 @@
       display: block;
       content: "OUTRAS CORES:";
       font-size: 14px;
+      color: $color-gray7;
     }
   }
 }
@@ -83,6 +89,7 @@
       display: block;
       content: "OUTROS TAMANHOS:";
       font-size: 14px;
+      color: $color-gray7;
     }
   }
 }
@@ -118,6 +125,7 @@
   font-size: 14px;
   display: block;
   content: "CALCULAR FRETE:";
+  color: $color-gray7;
 }
 
 .shippingContainer :global(.vtex-input-prefix__group) {
@@ -130,7 +138,7 @@
   width: 49px;
   height: 49px;
   position: absolute;
-  left: 33.4%;
+  left: 232px;
   top: 33%;
   background: $color-black;
   border: none;
@@ -153,7 +161,7 @@
   font-size: 0;
   visibility: hidden;
   position: absolute;
-  left: 43%;
+  left: 302px;
   top: 36%;
 }
 
@@ -168,6 +176,7 @@
 .shippingTable {
   border: none;
   padding: 0;
+  max-width: 382px;
 }
 
 .shippingTableHead {
@@ -176,7 +185,6 @@
 
 .shippingTableRow {
   position: relative;
-  margin-bottom: 15px;
 }
 
 .shippingTableHeadDeliveryName {
@@ -197,7 +205,7 @@
   font-size: 0;
   position: absolute;
   top: 5%;
-  left: 242%;
+  left: 342%;
 }
 
 .shippingTableHeadDeliveryEstimate::after {
@@ -214,7 +222,7 @@
   font-size: 0;
   position: absolute;
   top: 5%;
-  left: 138%;
+  left: 198%;
 }
 
 .shippingTableHeadDeliveryPrice::after {
@@ -230,3 +238,25 @@
 .shippingTableRadioBtn {
   display: none;
 }
+
+.shippingTableCellDeliveryName,
+.shippingTableCellDeliveryEstimate,
+.shippingTableCellDeliveryPrice {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: $color-gray9;
+  padding: 0;
+  padding-top: 15px;
+}
+
+.shippingTableCellDeliveryEstimate {
+  position: absolute;
+  left: 62%;
+}
+
+.shippingTableCellDeliveryPrice {
+  position: absolute;
+  left: 36%;
+}

styles/sass/utils/_vars.scss

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27");
+
 $color-black: #292929;
 
 $color-white: #fff;
@@ -9,6 +11,8 @@ $color-gray4: #c4c4c4;
 $color-gray5: #e5e5e5;
 $color-gray6: #cccccc;
 $color-gray7: #929292;
+$color-gray8: #575757;
+$color-gray9: #afafaf;
 
 $color-blue: #4267b2;