From 3a7d5e24898465f9c2c26d7d1c131bf6be895851 Mon Sep 17 00:00:00 2001 From: B Date: Fri, 29 Jan 2021 12:00:16 -0300 Subject: [PATCH] Latest Release (#187) * Remove duplicated css rules. (#185) * Fix typo in the Marquee component (#176) Co-authored-by: Hugo Lopes * Remove duplicated css rules. Fix invalid JSX props. Co-authored-by: Hugo Lopes * Fix the body scroll when the sidebar is open (#184) * Fix typo in the Marquee component (#176) Co-authored-by: Hugo Lopes * Fix the body scroll when the sidebar is open Co-authored-by: Hugo Lopes * Remove duplicate class in the I18nWidget comp (#183) * Fix typo in the Marquee component (#176) Co-authored-by: Hugo Lopes * Remove duplicate class name in the I18nWidget comp This PR removes a duplicate class name in the I18nWidget component. Co-authored-by: Hugo Lopes Co-authored-by: Hugo Lopes * add horizontal margin to pages when mobile screen (#180) * Add cart item options like color and size (#177) Co-authored-by: hlopes * Changes Co-authored-by: Hugo Lopes Co-authored-by: Hugo Lopes Co-authored-by: Jamie Isaksen Co-authored-by: Vinicius Zucatti <51221635+vczb@users.noreply.github.com> --- .gitignore | 1 + assets/base.css | 2 -- components/cart/CartItem/CartItem.tsx | 21 ++++++++++++++++--- .../common/I18nWidget/I18nWidget.module.css | 2 +- components/common/Layout/Layout.tsx | 8 +++---- .../product/ProductView/ProductView.tsx | 7 +++---- components/product/helpers.ts | 13 ++++++++---- components/ui/Marquee/Marquee.tsx | 4 ++-- components/ui/context.tsx | 1 + .../bigcommerce/api/cart/handlers/add-item.ts | 4 ++-- .../bigcommerce/api/cart/handlers/get-cart.ts | 2 +- .../api/cart/handlers/remove-item.ts | 2 +- .../api/cart/handlers/update-item.ts | 2 +- pages/[...pages].tsx | 2 +- pages/search.tsx | 12 +++++------ 15 files changed, 51 insertions(+), 32 deletions(-) diff --git a/.gitignore b/.gitignore index bcbf6047a..50d4285ba 100644 --- a/.gitignore +++ b/.gitignore @@ -25,6 +25,7 @@ yarn-debug.log* yarn-error.log* # local env files +.env .env.local .env.development.local .env.test.local diff --git a/assets/base.css b/assets/base.css index 781ebe0ac..f854065ba 100644 --- a/assets/base.css +++ b/assets/base.css @@ -102,8 +102,6 @@ a { } .animated { - -webkit-animation-duration: 1s; - animation-duration: 1s; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index 283f3fa40..2769ac715 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -8,6 +8,13 @@ import useUpdateItem from '@framework/cart/use-update-item' import useRemoveItem from '@framework/cart/use-remove-item' import s from './CartItem.module.css' +type ItemOption = { + name: string, + nameId: number, + value: string, + valueId: number +} + const CartItem = ({ item, currencyCode, @@ -88,12 +95,20 @@ const CartItem = ({
{/** TODO: Replace this. No `path` found at Cart */} - + {item.name} - -
+ {item.options && item.options.length > 0 ? ( +
+ {item.options.map((option:ItemOption, i: number) => + + {option.value}{ i === item.options.length -1 ? "" : ", " } + + )} +
+ ) : null} +
diff --git a/components/common/I18nWidget/I18nWidget.module.css b/components/common/I18nWidget/I18nWidget.module.css index 07a1aeba7..b216f5706 100644 --- a/components/common/I18nWidget/I18nWidget.module.css +++ b/components/common/I18nWidget/I18nWidget.module.css @@ -29,7 +29,7 @@ } .item { - @apply flex cursor-pointer px-6 py-3 flex transition ease-in-out duration-150 text-primary leading-6 font-medium items-center; + @apply flex cursor-pointer px-6 py-3 transition ease-in-out duration-150 text-primary leading-6 font-medium items-center; text-transform: capitalize; } diff --git a/components/common/Layout/Layout.tsx b/components/common/Layout/Layout.tsx index ff8467a23..375473c04 100644 --- a/components/common/Layout/Layout.tsx +++ b/components/common/Layout/Layout.tsx @@ -61,16 +61,16 @@ const Layout: FC = ({ children, pageProps }) => {
{children}
- - - - {modalView === 'LOGIN_VIEW' && } {modalView === 'SIGNUP_VIEW' && } {modalView === 'FORGOT_VIEW' && } + + + + = ({ product }) => { size: null, color: null, }) - const variant = - getCurrentVariant(product, choices) || product.variants.edges?.[0] + const variant = getCurrentVariant(product, choices) const addToCart = async () => { setLoading(true) try { await addItem({ productId: product.entityId, - variantId: product.variants.edges?.[0]?.node.entityId!, + variantId: variant?.node.entityId!, }) openSidebar() setLoading(false) @@ -156,7 +155,7 @@ const ProductView: FC = ({ product }) => {
diff --git a/components/product/helpers.ts b/components/product/helpers.ts index eda8d434a..bcc90b9a8 100644 --- a/components/product/helpers.ts +++ b/components/product/helpers.ts @@ -32,8 +32,10 @@ export function getProductOptions(product: ProductNode) { export function getCurrentVariant(product: ProductNode, opts: SelectedOptions) { const variant = product.variants.edges?.find((edge) => { const { node } = edge ?? {} + const numberOfDefinedOpts = Object.values(opts).filter(value => value !== null).length; + const numberOfEdges = node?.productOptions?.edges?.length; - return Object.entries(opts).every(([key, value]) => + const isEdgeEqualToOption = ([key, value]:[string, string | null]) => node?.productOptions.edges?.find((edge) => { if ( edge?.node.__typename === 'MultipleChoiceOption' && @@ -43,9 +45,12 @@ export function getCurrentVariant(product: ProductNode, opts: SelectedOptions) { (valueEdge) => valueEdge?.node.label === value ) } - }) - ) + }); + + return numberOfDefinedOpts === numberOfEdges ? + Object.entries(opts).every(isEdgeEqualToOption) + : Object.entries(opts).some(isEdgeEqualToOption) }) - return variant + return variant ?? product.variants.edges?.[0] } diff --git a/components/ui/Marquee/Marquee.tsx b/components/ui/Marquee/Marquee.tsx index 09f562011..163f29a34 100644 --- a/components/ui/Marquee/Marquee.tsx +++ b/components/ui/Marquee/Marquee.tsx @@ -9,7 +9,7 @@ interface Props { variant?: 'primary' | 'secondary' } -const Maquee: FC = ({ +const Marquee: FC = ({ className = '', children, variant = 'primary', @@ -32,4 +32,4 @@ const Maquee: FC = ({ ) } -export default Maquee +export default Marquee diff --git a/components/ui/context.tsx b/components/ui/context.tsx index 096e2f865..206573858 100644 --- a/components/ui/context.tsx +++ b/components/ui/context.tsx @@ -90,6 +90,7 @@ function uiReducer(state: State, action: Action) { return { ...state, displayModal: true, + displaySidebar: false, } } case 'CLOSE_MODAL': { diff --git a/framework/bigcommerce/api/cart/handlers/add-item.ts b/framework/bigcommerce/api/cart/handlers/add-item.ts index 25ae3880e..ca9de1ed5 100644 --- a/framework/bigcommerce/api/cart/handlers/add-item.ts +++ b/framework/bigcommerce/api/cart/handlers/add-item.ts @@ -26,8 +26,8 @@ const addItem: CartHandlers['addItem'] = async ({ }), } const { data } = cartId - ? await config.storeApiFetch(`/v3/carts/${cartId}/items`, options) - : await config.storeApiFetch('/v3/carts', options) + ? await config.storeApiFetch(`/v3/carts/${cartId}/items?include=line_items.physical_items.options`, options) + : await config.storeApiFetch('/v3/carts?include=line_items.physical_items.options', options) // Create or update the cart cookie res.setHeader( diff --git a/framework/bigcommerce/api/cart/handlers/get-cart.ts b/framework/bigcommerce/api/cart/handlers/get-cart.ts index 9fb42d730..703601cd8 100644 --- a/framework/bigcommerce/api/cart/handlers/get-cart.ts +++ b/framework/bigcommerce/api/cart/handlers/get-cart.ts @@ -12,7 +12,7 @@ const getCart: CartHandlers['getCart'] = async ({ if (cartId) { try { - result = await config.storeApiFetch(`/v3/carts/${cartId}`) + result = await config.storeApiFetch(`/v3/carts/${cartId}?include=line_items.physical_items.options`) } catch (error) { if (error instanceof BigcommerceApiError && error.status === 404) { // Remove the cookie if it exists but the cart wasn't found diff --git a/framework/bigcommerce/api/cart/handlers/remove-item.ts b/framework/bigcommerce/api/cart/handlers/remove-item.ts index 2ee5dbe16..e4b57a01b 100644 --- a/framework/bigcommerce/api/cart/handlers/remove-item.ts +++ b/framework/bigcommerce/api/cart/handlers/remove-item.ts @@ -15,7 +15,7 @@ const removeItem: CartHandlers['removeItem'] = async ({ } const result = await config.storeApiFetch<{ data: any } | null>( - `/v3/carts/${cartId}/items/${itemId}`, + `/v3/carts/${cartId}/items/${itemId}?include=line_items.physical_items.options`, { method: 'DELETE' } ) const data = result?.data ?? null diff --git a/framework/bigcommerce/api/cart/handlers/update-item.ts b/framework/bigcommerce/api/cart/handlers/update-item.ts index c64c111df..73776ccd9 100644 --- a/framework/bigcommerce/api/cart/handlers/update-item.ts +++ b/framework/bigcommerce/api/cart/handlers/update-item.ts @@ -16,7 +16,7 @@ const updateItem: CartHandlers['updateItem'] = async ({ } const { data } = await config.storeApiFetch( - `/v3/carts/${cartId}/items/${itemId}`, + `/v3/carts/${cartId}/items/${itemId}?include=line_items.physical_items.options`, { method: 'PUT', body: JSON.stringify({ diff --git a/pages/[...pages].tsx b/pages/[...pages].tsx index 6caac1720..66a6be90e 100644 --- a/pages/[...pages].tsx +++ b/pages/[...pages].tsx @@ -65,7 +65,7 @@ export default function Pages({ page, }: InferGetStaticPropsType) { return ( -
+
{page?.body && }
) diff --git a/pages/search.tsx b/pages/search.tsx index 5110aba55..88a6354cd 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -106,9 +106,9 @@ export default function Search({ fill="currentColor" > @@ -205,9 +205,9 @@ export default function Search({ fill="currentColor" > @@ -378,9 +378,9 @@ export default function Search({ fill="currentColor" >