From 4f7cd7f998ab3f5bfd00db882bf535de1ab98665 Mon Sep 17 00:00:00 2001 From: Lucas Castro Date: Mon, 19 Oct 2020 16:55:54 -0300 Subject: [PATCH 01/10] Start developing product-reference component --- react/ProductName.tsx | 2 ++ react/ProductReference.tsx | 33 +++++++++++++++++++++++++++++++++ react/package.json | 2 +- react/yarn.lock | 8 ++++---- store/interfaces.json | 3 +++ 5 files changed, 43 insertions(+), 5 deletions(-) create mode 100644 react/ProductReference.tsx diff --git a/react/ProductName.tsx b/react/ProductName.tsx index b1341ba4..331f4a04 100644 --- a/react/ProductName.tsx +++ b/react/ProductName.tsx @@ -15,6 +15,8 @@ const ProductName: FunctionComponent = () => { return } + console.log(item) + return ( { + const { item, loading } = useItemContext() + const handles = useCssHandles(CSS_HANDLES) + + if (loading) { + return + } + + console.log(item) + + return ( + + {item.productRefId} + + ) +} + +export default ProductReference diff --git a/react/package.json b/react/package.json index 5aebaabf..47e86903 100644 --- a/react/package.json +++ b/react/package.json @@ -26,7 +26,7 @@ "@vtex/styleguide": "^8.70.4", "@vtex/test-tools": "^3.0.0", "apollo-client": "^2.5.1", - "typescript": "3.8.3", + "typescript": "3.9.7", "vtex.checkout-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-graphql@0.41.0/public/@types/vtex.checkout-graphql", "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.4/public/@types/vtex.css-handles", "vtex.device-detector": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.device-detector@0.2.5/public/@types/vtex.device-detector", diff --git a/react/yarn.lock b/react/yarn.lock index fcf8892e..f3e3ca3d 100644 --- a/react/yarn.lock +++ b/react/yarn.lock @@ -5250,10 +5250,10 @@ typed-styles@^0.0.7: resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9" integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q== -typescript@3.8.3: - version "3.8.3" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061" - integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w== +typescript@3.9.7: + version "3.9.7" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa" + integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw== typescript@^3.7.3: version "3.7.4" diff --git a/store/interfaces.json b/store/interfaces.json index 0257e566..e975c576 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -39,6 +39,9 @@ } } }, + "product-reference": { + "component": "ProductReference" + }, "product-brand": { "component": "ProductBrand", "preview": { From 38b08be0331452da7516e43223733f22befd31fa Mon Sep 17 00:00:00 2001 From: Lucas Castro Date: Tue, 20 Oct 2020 19:40:22 -0300 Subject: [PATCH 02/10] Show identifier product and padronizing code --- react/ProductName.tsx | 2 -- react/ProductReference.tsx | 37 +++++++++++++++++++++++++--------- react/constants/Identifiers.ts | 2 ++ 3 files changed, 29 insertions(+), 12 deletions(-) create mode 100644 react/constants/Identifiers.ts diff --git a/react/ProductName.tsx b/react/ProductName.tsx index 331f4a04..b1341ba4 100644 --- a/react/ProductName.tsx +++ b/react/ProductName.tsx @@ -15,8 +15,6 @@ const ProductName: FunctionComponent = () => { return } - console.log(item) - return ( { +const ProductReference: FunctionComponent = ({ + identifierOptionValue = 'ProductReferenceId', +}) => { const { item, loading } = useItemContext() const handles = useCssHandles(CSS_HANDLES) @@ -17,16 +24,26 @@ const ProductReference: FunctionComponent = () => { console.log(item) + const [identifier, setIdentifier] = useState() + + console.log(identifier) + + useEffect(() => { + if (identifierOptionValue === PRODUCT_REFERENCE_ID) { + setIdentifier(item.productRefId) + } else if (identifierOptionValue === PRODUCT_SKU_REFERENCE_ID) { + setIdentifier(item.refId) + } + }, [item.productRefId]) + return ( - - {item.productRefId} - + {identifier} + ) } diff --git a/react/constants/Identifiers.ts b/react/constants/Identifiers.ts new file mode 100644 index 00000000..d7dd34a3 --- /dev/null +++ b/react/constants/Identifiers.ts @@ -0,0 +1,2 @@ +export const PRODUCT_REFERENCE_ID = 'ProductReferenceId' +export const PRODUCT_SKU_REFERENCE_ID = 'ProductSkuReferenceId' \ No newline at end of file From 01e17761ef5241e3395429cc6d1347a4425f7641 Mon Sep 17 00:00:00 2001 From: Lucas Castro Date: Wed, 21 Oct 2020 11:11:53 -0300 Subject: [PATCH 03/10] Finish new component product-reference --- react/ProductReference.tsx | 56 ++++++++++++++++++++++------------ react/constants/Identifiers.ts | 2 ++ 2 files changed, 39 insertions(+), 19 deletions(-) diff --git a/react/ProductReference.tsx b/react/ProductReference.tsx index c947180e..e8a1de6d 100644 --- a/react/ProductReference.tsx +++ b/react/ProductReference.tsx @@ -4,17 +4,26 @@ import { useCssHandles } from 'vtex.css-handles' import { useItemContext } from './ItemContext' import { opaque } from './utils/opaque' -import { PRODUCT_REFERENCE_ID, PRODUCT_SKU_REFERENCE_ID } from './constants/Identifiers' +import { + PRODUCT_REFERENCE_ID, + PRODUCT_SKU_REFERENCE_ID, + PRODUCT_ID, + PRODUCT_SKU_ITEM_ID, +} from './constants/Identifiers' -const CSS_HANDLES = ['productReferenceId'] as const +const CSS_HANDLES = [ + 'productReferenceId', + 'productIdentifierValue', + 'productIdentifierLabelValue', +] as const -interface identifierOption { - identifierOptionValue?: string | undefined +interface Props { + identifierLabel?: String + identifierOption?: String } -const ProductReference: FunctionComponent = ({ - identifierOptionValue = 'ProductReferenceId', -}) => { +const ProductReference: FunctionComponent = props => { + const { identifierOption = PRODUCT_REFERENCE_ID, identifierLabel } = props const { item, loading } = useItemContext() const handles = useCssHandles(CSS_HANDLES) @@ -22,29 +31,38 @@ const ProductReference: FunctionComponent = ({ return } - console.log(item) - - const [identifier, setIdentifier] = useState() - - console.log(identifier) + const [identifierValue, setIdentifierValue] = useState< + String | null | undefined + >() useEffect(() => { - if (identifierOptionValue === PRODUCT_REFERENCE_ID) { - setIdentifier(item.productRefId) - } else if (identifierOptionValue === PRODUCT_SKU_REFERENCE_ID) { - setIdentifier(item.refId) + if (identifierOption === PRODUCT_REFERENCE_ID) { + setIdentifierValue(item.productRefId) + } else if (identifierOption === PRODUCT_SKU_REFERENCE_ID) { + setIdentifierValue(item.refId) + } else if (identifierOption === PRODUCT_SKU_ITEM_ID) { + setIdentifierValue(item.id) + } else if (identifierOption === PRODUCT_ID) { + setIdentifierValue(item.productId) } }, [item.productRefId]) - return ( + return identifierValue ? (
- {identifier} + {identifierLabel && ( + + {identifierLabel} + + )} + + {identifierValue} +
- ) + ) : null } export default ProductReference diff --git a/react/constants/Identifiers.ts b/react/constants/Identifiers.ts index d7dd34a3..85b6cbc4 100644 --- a/react/constants/Identifiers.ts +++ b/react/constants/Identifiers.ts @@ -1,2 +1,4 @@ +export const PRODUCT_ID = 'ProductId' +export const PRODUCT_SKU_ITEM_ID = 'ProductSkuItemId' export const PRODUCT_REFERENCE_ID = 'ProductReferenceId' export const PRODUCT_SKU_REFERENCE_ID = 'ProductSkuReferenceId' \ No newline at end of file From 4d074a1edf9365ffd9e53b99e2e33e31b46cb309 Mon Sep 17 00:00:00 2001 From: Lucas Castro Date: Wed, 21 Oct 2020 12:01:13 -0300 Subject: [PATCH 04/10] Adjust documentation --- CHANGELOG.md | 3 +++ docs/README.md | 12 +++++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 982791e3..34acb88f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +### Added +- New component called 'product-reference', where is possible to pull an identifier product information. + ## [0.24.3] - 2020-10-13 ### Changed - Change unitPriceType prop from UnitPrice default value to 'sellingPrice'. diff --git a/docs/README.md b/docs/README.md index edf75842..2f385b5e 100644 --- a/docs/README.md +++ b/docs/README.md @@ -255,6 +255,7 @@ Therefore, in order to customize the `product-list` configuration, you can simpl | `product-list-content-mobile` | Creates the product list layout for mobile devices. | | `message` | Renders a message text about the product availability. | | `product-name` | Renders the product names. | +| `product-reference` | Renders the product reference information. | | `price` | Renders the product prices. | | `unit-price` | Renders the price for each product unit added to the cart. | | `product-list-image` | Renders the product images. | @@ -292,6 +293,13 @@ Therefore, in order to customize the `product-list` configuration, you can simpl | ---------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | | `width` | `number` | Product image width (in pixels). | `96` | +### `product-reference` props + +| Prop name | Type | Description | Default value | +| ---------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | +| `identifierLabel` | `string` | Label to insert before the main reference information | no default value | +| `identifierOption` | `string` | You can pull reference information through the following options: product id (`ProductId`), SKU ID (`ProductSkuItemId`), product reference ID (`ProductReferenceId`) and SKU reference ID (`ProductSkuReferenceId`). | `ProductReferenceId` | + ### `remove-button` props | Prop name | Type | Description | Default value | @@ -320,6 +328,9 @@ In order to apply CSS customizations in this and other blocks, follow the instru | `productPriceCurrency` | | `productPrice` | | `productQuantityLabel` | +| `productReferenceId` | +| `productIdentifierValue` | +| `productIdentifierLabelValue` | | `productVariationsContainer` | | `productVariationsItem` | | `quantityDropdownContainer` | @@ -334,7 +345,6 @@ In order to apply CSS customizations in this and other blocks, follow the instru | `unitPriceMeasurementUnit` | | `unitPricePerUnitCurrency` | - ## Contributors ✨ From cfeff6e5afb4afb270229370d11bfd65325e878c Mon Sep 17 00:00:00 2001 From: Lucas Castro Date: Wed, 21 Oct 2020 13:47:22 -0300 Subject: [PATCH 05/10] Fix some points on documentations --- docs/README.md | 2 +- react/ProductReference.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/README.md b/docs/README.md index 2f385b5e..afbbee5d 100644 --- a/docs/README.md +++ b/docs/README.md @@ -328,7 +328,7 @@ In order to apply CSS customizations in this and other blocks, follow the instru | `productPriceCurrency` | | `productPrice` | | `productQuantityLabel` | -| `productReferenceId` | +| `productIdentifier` | | `productIdentifierValue` | | `productIdentifierLabelValue` | | `productVariationsContainer` | diff --git a/react/ProductReference.tsx b/react/ProductReference.tsx index e8a1de6d..ae24addc 100644 --- a/react/ProductReference.tsx +++ b/react/ProductReference.tsx @@ -12,7 +12,7 @@ import { } from './constants/Identifiers' const CSS_HANDLES = [ - 'productReferenceId', + 'productIdentifier', 'productIdentifierValue', 'productIdentifierLabelValue', ] as const @@ -50,7 +50,7 @@ const ProductReference: FunctionComponent = props => { return identifierValue ? (
{identifierLabel && ( From 042305159c5dea7d350617fd66458df69f55d810 Mon Sep 17 00:00:00 2001 From: Lucas Castro Date: Thu, 5 Nov 2020 16:18:36 -0300 Subject: [PATCH 06/10] Fix lint errors --- react/ProductReference.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/react/ProductReference.tsx b/react/ProductReference.tsx index ae24addc..bc49d4b2 100644 --- a/react/ProductReference.tsx +++ b/react/ProductReference.tsx @@ -1,9 +1,9 @@ import React, { FunctionComponent, useState, useEffect } from 'react' import { Loading } from 'vtex.render-runtime' import { useCssHandles } from 'vtex.css-handles' + import { useItemContext } from './ItemContext' import { opaque } from './utils/opaque' - import { PRODUCT_REFERENCE_ID, PRODUCT_SKU_REFERENCE_ID, @@ -18,8 +18,8 @@ const CSS_HANDLES = [ ] as const interface Props { - identifierLabel?: String - identifierOption?: String + identifierLabel?: string + identifierOption?: string } const ProductReference: FunctionComponent = props => { @@ -27,12 +27,8 @@ const ProductReference: FunctionComponent = props => { const { item, loading } = useItemContext() const handles = useCssHandles(CSS_HANDLES) - if (loading) { - return - } - const [identifierValue, setIdentifierValue] = useState< - String | null | undefined + string | null | undefined >() useEffect(() => { @@ -45,7 +41,11 @@ const ProductReference: FunctionComponent = props => { } else if (identifierOption === PRODUCT_ID) { setIdentifierValue(item.productId) } - }, [item.productRefId]) + }, [item.productRefId, identifierOption, item.id, item.productId, item.refId]) + + if (loading) { + return + } return identifierValue ? (
Date: Thu, 5 Nov 2020 16:19:56 -0300 Subject: [PATCH 07/10] Update docs/README.md Co-authored-by: Bia <52087100+guerreirobeatriz@users.noreply.github.com> --- docs/README.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/docs/README.md b/docs/README.md index afbbee5d..0d5bc4b9 100644 --- a/docs/README.md +++ b/docs/README.md @@ -295,10 +295,10 @@ Therefore, in order to customize the `product-list` configuration, you can simpl ### `product-reference` props -| Prop name | Type | Description | Default value | -| ---------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -| `identifierLabel` | `string` | Label to insert before the main reference information | no default value | -| `identifierOption` | `string` | You can pull reference information through the following options: product id (`ProductId`), SKU ID (`ProductSkuItemId`), product reference ID (`ProductReferenceId`) and SKU reference ID (`ProductSkuReferenceId`). | `ProductReferenceId` | +| Prop name | Type | Description | Default value | +| :------------------: | :---------: | :---------------------------------: | :-------------: | +| `identifierLabel` | `string` | Text label to be displayed to the left of the product reference value. | `undefined` | +| `identifierOption` | `enum` | Desired product reference data i.e. product identifier to be displayed. Possible options are: `ProductId`, `ProductSkuItemId`, `ProductReferenceId`, and `ProductSkuReferenceId`. | `ProductReferenceId` | ### `remove-button` props @@ -361,4 +361,3 @@ Thanks goes to these wonderful people: This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome! - From ed4d1f27501c4b4c02069329eb0db306a98018f7 Mon Sep 17 00:00:00 2001 From: Lucas Castro Date: Thu, 5 Nov 2020 17:21:55 -0300 Subject: [PATCH 08/10] Fix code structure --- react/ProductReference.tsx | 32 ++++++++++++-------------------- 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/react/ProductReference.tsx b/react/ProductReference.tsx index bc49d4b2..05e1987b 100644 --- a/react/ProductReference.tsx +++ b/react/ProductReference.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, useState, useEffect } from 'react' +import React, { FunctionComponent, useMemo } from 'react' import { Loading } from 'vtex.render-runtime' import { useCssHandles } from 'vtex.css-handles' @@ -23,31 +23,23 @@ interface Props { } const ProductReference: FunctionComponent = props => { - const { identifierOption = PRODUCT_REFERENCE_ID, identifierLabel } = props + const { identifierOption, identifierLabel } = props const { item, loading } = useItemContext() const handles = useCssHandles(CSS_HANDLES) - const [identifierValue, setIdentifierValue] = useState< - string | null | undefined - >() + const identifierValue = useMemo(() => { + if (identifierOption === PRODUCT_REFERENCE_ID) return item.productRefId + if (identifierOption === PRODUCT_SKU_REFERENCE_ID) return item.refId + if (identifierOption === PRODUCT_SKU_ITEM_ID) return item.id + if (identifierOption === PRODUCT_ID) return item.productId - useEffect(() => { - if (identifierOption === PRODUCT_REFERENCE_ID) { - setIdentifierValue(item.productRefId) - } else if (identifierOption === PRODUCT_SKU_REFERENCE_ID) { - setIdentifierValue(item.refId) - } else if (identifierOption === PRODUCT_SKU_ITEM_ID) { - setIdentifierValue(item.id) - } else if (identifierOption === PRODUCT_ID) { - setIdentifierValue(item.productId) - } + return item.productRefId }, [item.productRefId, identifierOption, item.id, item.productId, item.refId]) - if (loading) { - return - } + if (loading) return + if (!identifierValue) return null - return identifierValue ? ( + return (
= props => { {identifierValue}
- ) : null + ) } export default ProductReference From c1ada47243680ba418f2929942e619f6e8507b35 Mon Sep 17 00:00:00 2001 From: Lucas Castro Date: Thu, 5 Nov 2020 17:40:53 -0300 Subject: [PATCH 09/10] Correct enums structure --- react/ProductReference.tsx | 17 +++++++---------- react/constants/Identifiers.ts | 10 ++++++---- 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/react/ProductReference.tsx b/react/ProductReference.tsx index 05e1987b..624003da 100644 --- a/react/ProductReference.tsx +++ b/react/ProductReference.tsx @@ -4,12 +4,7 @@ import { useCssHandles } from 'vtex.css-handles' import { useItemContext } from './ItemContext' import { opaque } from './utils/opaque' -import { - PRODUCT_REFERENCE_ID, - PRODUCT_SKU_REFERENCE_ID, - PRODUCT_ID, - PRODUCT_SKU_ITEM_ID, -} from './constants/Identifiers' +import { IdentifierType } from './constants/Identifiers' const CSS_HANDLES = [ 'productIdentifier', @@ -28,10 +23,12 @@ const ProductReference: FunctionComponent = props => { const handles = useCssHandles(CSS_HANDLES) const identifierValue = useMemo(() => { - if (identifierOption === PRODUCT_REFERENCE_ID) return item.productRefId - if (identifierOption === PRODUCT_SKU_REFERENCE_ID) return item.refId - if (identifierOption === PRODUCT_SKU_ITEM_ID) return item.id - if (identifierOption === PRODUCT_ID) return item.productId + if (identifierOption === IdentifierType.PRODUCT_REFERENCE_ID) + return item.productRefId + if (identifierOption === IdentifierType.PRODUCT_SKU_REFERENCE_ID) + return item.refId + if (identifierOption === IdentifierType.PRODUCT_SKU_ITEM_ID) return item.id + if (identifierOption === IdentifierType.PRODUCT_ID) return item.productId return item.productRefId }, [item.productRefId, identifierOption, item.id, item.productId, item.refId]) diff --git a/react/constants/Identifiers.ts b/react/constants/Identifiers.ts index 85b6cbc4..6ac9d0df 100644 --- a/react/constants/Identifiers.ts +++ b/react/constants/Identifiers.ts @@ -1,4 +1,6 @@ -export const PRODUCT_ID = 'ProductId' -export const PRODUCT_SKU_ITEM_ID = 'ProductSkuItemId' -export const PRODUCT_REFERENCE_ID = 'ProductReferenceId' -export const PRODUCT_SKU_REFERENCE_ID = 'ProductSkuReferenceId' \ No newline at end of file +export const enum IdentifierType { + PRODUCT_ID = 'ProductId', + PRODUCT_SKU_ITEM_ID = 'ProductSkuItemId', + PRODUCT_REFERENCE_ID = 'ProductReferenceId', + PRODUCT_SKU_REFERENCE_ID = 'ProductSkuReferenceId', +} From 10451c61306ff1a91891180d9053989eb50eee38 Mon Sep 17 00:00:00 2001 From: LucasCastroAcctGlobal <55210107+LucasCastroAcctGlobal@users.noreply.github.com> Date: Mon, 9 Nov 2020 12:58:04 -0300 Subject: [PATCH 10/10] Update react/ProductReference.tsx Co-authored-by: Breno Calazans --- react/ProductReference.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/ProductReference.tsx b/react/ProductReference.tsx index 624003da..695747f8 100644 --- a/react/ProductReference.tsx +++ b/react/ProductReference.tsx @@ -38,7 +38,7 @@ const ProductReference: FunctionComponent = props => { return (