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/README.md b/README.md index e73a9747e..8eb69383c 100644 --- a/README.md +++ b/README.md @@ -89,8 +89,8 @@ Our commitment to Open Source can be found [here](https://vercel.com/oss). 5. Duplicate `.env.template` and rename it to `.env.local`. 6. Add proper store values to `.env.local`. 7. Run `yarn dev` to build and watch for code changes -8. The development branch is `development` (this is the branch pull requests should be made against). - On a release, `develop` branch is rebased into `master`. +8. The development branch is `canary` (this is the branch pull requests should be made against). + On a release, `canary` branch is rebased into `master`. 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' && } + + + + = ({ imgLayout = 'responsive', }) => { const src = p.images.edges?.[0]?.node?.urlOriginal! + const placeholderImg = '/product-img-placeholder.svg'; const { price } = usePrice({ amount: p.prices?.price?.value, baseAmount: p.prices?.retailPrice?.value, @@ -58,7 +59,7 @@ const ProductCard: FC = ({ layout={imgLayout} loading={imgLoading} priority={imgPriority} - src={p.images.edges?.[0]?.node.urlOriginal!} + src={p.images.edges?.[0]?.node.urlOriginal! || placeholderImg} alt={p.images.edges?.[0]?.node.altText || 'Product Image'} />
@@ -81,7 +82,7 @@ const ProductCard: FC = ({
{p.name} = ({ 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/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/framework/bigcommerce/products/use-search.tsx b/framework/bigcommerce/products/use-search.tsx index ade0bbca2..2b4ee7593 100644 --- a/framework/bigcommerce/products/use-search.tsx +++ b/framework/bigcommerce/products/use-search.tsx @@ -26,8 +26,7 @@ export const fetcher: HookFetcher = ( if (search) url.searchParams.set('search', search) if (Number.isInteger(categoryId)) url.searchParams.set('category', String(categoryId)) - if (Number.isInteger(categoryId)) - url.searchParams.set('brand', String(brandId)) + if (Number.isInteger(brandId)) url.searchParams.set('brand', String(brandId)) if (sort) url.searchParams.set('sort', sort) return fetch({ 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/index.tsx b/pages/index.tsx index ef1c0a96e..d1c20a744 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -44,6 +44,7 @@ export async function getStaticProps({ // We prefer to do the computation at buildtime/servertime const { featured, bestSelling } = (() => { // Create a copy of products that we can mutate + // Filter products that do not have images const products = [...newestProducts] // If the lists of featured and best selling products don't have enough // products, then fill them with products from the products list, this 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" > diff --git a/public/product-img-placeholder.svg b/public/product-img-placeholder.svg new file mode 100644 index 000000000..fbb43bb62 --- /dev/null +++ b/public/product-img-placeholder.svg @@ -0,0 +1,7 @@ + + + + + + +