develop #2

Merged
Rhayllon_Daudt merged 8 commits from develop into master 2023-02-11 02:55:53 +00:00
22 changed files with 552 additions and 9 deletions
Showing only changes of commit 4b636c9215 - Show all commits

View File

@ -1,12 +1,36 @@
import React from 'react' import React from 'react'
import { useProduct } from 'vtex.product-context' import { useProduct } from 'vtex.product-context'
// import { useCssHandles } from 'vtex.css-handles'
import styles from "./styles.css"
const Pix = () => { const Pix = () => {
const product = useProduct() const product = useProduct()
// console.log(product) let pixValueTotal:any = product?.product?.priceRange?.sellingPrice?.lowPrice;
var pixValue = product?.product?.priceRange?.sellingPrice?.lowPrice; let pixValueTotalNumber = parseFloat(pixValueTotal);
let porcentagemDesconto = 10;
let desconto = (pixValueTotalNumber / 100)* porcentagemDesconto;
let pixValueDesconto = (pixValueTotal - desconto).toFixed(2);
let pixValueDescontoVirgula = pixValueDesconto.replace(".", ",")
// const CSS_HANDLES = [
// "wrapperComponentPix",
// "imagePix",
// "wrapperTexts",
// "wrapperTexts__value",
// "wrapperTexts__descontoPorcentagem",
// ]
// const handles = useCssHandles(CSS_HANDLES)
return ( return (
<div>{pixValue}</div> <div className={styles.wrapperComponentPix}>
<img className={styles.imagePix} src="https://agenciamagma.vteximg.com.br/arquivos/PixImg-RhayllonDaudt.png" alt="PixIcon" />
<div className={styles.wrapperTexts}>
<p className={styles.wrapperTexts__value}>R$ {pixValueDescontoVirgula} </p>
<p className={styles.wrapperTexts__descontoPorcentagem}>10% de desconto</p>
</div>
</div>
) )
} }

View File

@ -0,0 +1,29 @@
.wrapperComponentPix{
display: flex;
margin: 8px 0 16px 0;
align-items: center;
}
.wrapperTexts__value{
margin: 0;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: rgba(0, 0, 0, 0.58);
}
.wrapperTexts__descontoPorcentagem{
margin: 0;
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-size: 13px;
line-height: 18px;
color: #929292;
}
.imagePix{
height: 24px;
}
.wrapperTexts{
margin-left: 26px;
}

4
react/typings/css.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
declare module "*.css" {
const css: any;
export default css;
}

7
react/typings/global.d.ts vendored Normal file
View File

@ -0,0 +1,7 @@
export interface TimeSplit {
hours: string
minutes: string
seconds: string
}
type GenericObject = Record<string, any>

6
react/typings/graphql.d.ts vendored Normal file
View File

@ -0,0 +1,6 @@
declare module "*.graphql" {
import { DocumentNode } from "graphql";
const value: DocumentNode;
export default value;
}

15
react/typings/storefront.d.ts vendored Normal file
View File

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

View File

@ -0,0 +1 @@
declare module "vtex.css-handles"

103
react/typings/vtex.order-manager.d.ts vendored Normal file
View File

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

38
react/typings/vtex.render-runtime.d.ts vendored Normal file
View File

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

9
react/typings/vtex.styleguide.d.ts vendored Normal file
View File

@ -0,0 +1,9 @@
declare module "vtex.styleguide" {
import { ComponentType } from "react";
export const Input: ComponentType<InputProps>;
interface InputProps {
[key: string]: any
}
}

View File

@ -18,8 +18,15 @@
"testId": "breadcrumbs", "testId": "breadcrumbs",
"blockClass": "pdp-breadcrumb" "blockClass": "pdp-breadcrumb"
}, },
"children": ["breadcrumb"] "children": ["breadcrumb#Pdp"]
}, },
"breadcrumb#Pdp": {
"props": {
"blockClass": "Pdp"
}
},
"flex-layout.row#specifications-title": { "flex-layout.row#specifications-title": {
"children": ["rich-text#specifications"] "children": ["rich-text#specifications"]
}, },
@ -339,7 +346,6 @@
"product-identifier.product#identifierMain", "product-identifier.product#identifierMain",
"flex-layout.row#selling-price", "flex-layout.row#selling-price",
"html#productInstallments", "html#productInstallments",
"example-component",
"pix", "pix",
"product-separator", "product-separator",
"sku-selector#inverseOrder", "sku-selector#inverseOrder",
@ -353,7 +359,14 @@
"props": { "props": {
"testId": "product-installments" "testId": "product-installments"
}, },
"children": ["product-installments"] "children": ["product-installments#InstallmentsMainPdp"]
},
"product-installments#InstallmentsMainPdp": {
"props": {
"blockClass": "InstallmentsMainPdp",
"installmentsCriteria": "max-quantity-without-interest"
}
}, },
"flex-layout.row#product-name": { "flex-layout.row#product-name": {

View File

@ -4,7 +4,8 @@
"colGap": 2, "colGap": 2,
"preserveLayoutOnMobile": true, "preserveLayoutOnMobile": true,
"preventHorizontalStretch": true, "preventHorizontalStretch": true,
"marginBottom": 4 "marginBottom": 4,
"blockClass": "sellPrice"
}, },
"children": [ "children": [
"product-selling-price" "product-selling-price"

View File

@ -0,0 +1,40 @@
/*
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 */
.homeLink--Pdp {
padding: 0 2px 4px 2px;
}
.homeLink--Pdp::before {
content: "Home";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.homeLink--Pdp .homeIcon--Pdp {
display: none;
}
.link--Pdp,
.term--Pdp {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.container--Pdp {
padding: 0;
width: 94.44%;
margin: 0 auto;
}

View File

@ -31,4 +31,14 @@
border: none; border: none;
border-radius: 0; border-radius: 0;
height: 48px; height: 48px;
}
.flexRowContent--sellPrice {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
margin: 0;
} }

View File

@ -25,4 +25,13 @@
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
}
.installments--InstallmentsMainPdp {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #929292;
} }

View File

@ -23,18 +23,96 @@
.productNameContainer--quickview { .productNameContainer--quickview {
display: flex; display: flex;
justify-content: end; justify-content: end;
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
} }
:global(.vtex-product-identifier-0-x-product-identifier--productReference) { :global(.vtex-product-identifier-0-x-product-identifier--productReference) {
display: flex; display: flex;
justify-content: end; justify-content: end;
margin-bottom: 24px; margin-bottom: 24px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
} }
.skuSelectorContainer--inverseOrder { .skuSelectorContainer--inverseOrder {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--cor .skuSelectorTextContainer::before {
content: "Outras cores:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--cor .skuSelectorName,
.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--cor .skuSelectorNameSeparator,
.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue {
font-size: 0;
}
.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer::before {
content: "Outros Tamanhos:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--tamanho .skuSelectorName {
font-size: 0;
}
.skuSelectorContainer--inverseOrder .skuSelectorItem--inverseOrder {
width: 40px;
height: 40px;
border-radius: 50%;
}
.skuSelectorContainer--inverseOrder .skuSelectorItem--inverseOrder--selected .frameAround--inverseOrder {
border: 2px solid #000000;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
}
.skuSelectorContainer--inverseOrder .skuSelectorItem--inverseOrder--selected .skuSelectorItemTextValue--inverseOrder {
color: #000000;
}
.skuSelectorContainer--inverseOrder .skuSelectorItem--inverseOrder--selected .skuSelectorInternalBox--inverseOrder {
border: none;
}
.skuSelectorContainer--inverseOrder .skuSelectorItemTextValue--inverseOrder {
padding: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
.skuSelectorContainer--inverseOrder .frameAround--inverseOrder {
border-radius: 50%;
}
.skuSelectorContainer--inverseOrder .skuSelectorInternalBox--inverseOrder {
border-radius: 50%;
width: 40px;
height: 40px;
border-color: #989898;
}
.skuSelectorContainer--inverseOrder .diagonalCross--inverseOrder {
border-radius: 50%;
}
.shippingContainer { .shippingContainer {
display: flex; display: flex;

View File

@ -0,0 +1,31 @@
.homeLink--Pdp{
padding: 0 2px 4px 2px;
&::before {
content: "Home";
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray15;
}
.homeIcon--Pdp{
display: none;
}
}
.link--Pdp,
.term--Pdp{
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray15;
}
.container--Pdp{
padding: 0;
width: 94.44%;
margin: 0 auto;
}

View File

@ -24,4 +24,13 @@
} }
} }
}
.flexRowContent--sellPrice{
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: $color-black2;
margin: 0;
} }

View File

@ -15,4 +15,12 @@
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
}
.installments--InstallmentsMainPdp{
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: $color-gray15;
} }

View File

@ -25,7 +25,7 @@
.image--prateleiraImg{ .image--prateleiraImg{
min-height: 314px; min-height: 314px;
@media screen and (min-width: 2500px) { @media screen and (min-width: 1920px) {
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {

View File

@ -14,17 +14,119 @@
.productNameContainer--quickview{ .productNameContainer--quickview{
display: flex; display: flex;
justify-content: end; justify-content: end;
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: $color-gray14;
@media screen and (min-width: 1920px) {
}
} }
:global(.vtex-product-identifier-0-x-product-identifier--productReference){ :global(.vtex-product-identifier-0-x-product-identifier--productReference){
display: flex; display: flex;
justify-content: end; justify-content: end;
margin-bottom: 24px; margin-bottom: 24px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray13;
} }
.skuSelectorContainer--inverseOrder{ .skuSelectorContainer--inverseOrder{
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
.skuSelectorSubcontainer--cor{
.skuSelectorTextContainer{
&::before {
content: "Outras cores:";
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray15;
text-transform: uppercase;
}
}
.skuSelectorName,
.skuSelectorNameSeparator,
.skuSelectorSelectorImageValue{
font-size: 0;
}
}
.skuSelectorSubcontainer--tamanho{
.skuSelectorTextContainer{
&::before {
content: "Outros Tamanhos:";
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray15;
text-transform: uppercase;
}
}
.skuSelectorName{
font-size: 0;
}
}
.skuSelectorItem--inverseOrder{
width: 40px;
height: 40px;
border-radius: 50%;
}
.skuSelectorItem--inverseOrder--selected{
.frameAround--inverseOrder{
border: 2px solid $color-black2;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
}
.skuSelectorItemTextValue--inverseOrder{
color: $color-black2;
}
.skuSelectorInternalBox--inverseOrder{
border: none;
}
}
.skuSelectorItemTextValue--inverseOrder{
padding: 0;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray11;
}
.frameAround--inverseOrder{
border-radius: 50%;
}
.skuSelectorInternalBox--inverseOrder{
border-radius: 50%;
width: 40px;
height: 40px;
border-color: $color-gray12;
}
.diagonalCross--inverseOrder{
border-radius: 50%;
// transform: rotate(-45deg);
}
} }
.shippingContainer{ .shippingContainer{

View File

@ -12,6 +12,12 @@ $color-gray6: #B9B9B9;
$color-gray7: #CCCCCC; $color-gray7: #CCCCCC;
$color-gray8: #bfbfbf; $color-gray8: #bfbfbf;
$color-gray9: #bababa; $color-gray9: #bababa;
$color-gray10: #D5D5D5;
$color-gray11: rgba(185, 185, 185, 0.6);
$color-gray12: #989898;
$color-gray13: rgba(146, 146, 146, 0.48);
$color-gray14: #575757;
$color-gray15: #929292;
$color-blue: #4267b2; $color-blue: #4267b2;