Latest Release (#187)

* Remove duplicated css rules. (#185) * Fix typo in the Marquee component (#176) Co-authored-by: Hugo Lopes <hugo.lopes@present-technologies.com> * Remove duplicated css rules. Fix invalid JSX props. Co-authored-by: Hugo Lopes <hugo.lopes@present-technologies.com> * Fix the body scroll when the sidebar is open (#184) * Fix typo in the Marquee component (#176) Co-authored-by: Hugo Lopes <hugo.lopes@present-technologies.com> * Fix the body scroll when the sidebar is open Co-authored-by: Hugo Lopes <hugo.lopes@present-technologies.com> * Remove duplicate class in the I18nWidget comp (#183) * Fix typo in the Marquee component (#176) Co-authored-by: Hugo Lopes <hugo.lopes@present-technologies.com> * Remove duplicate class name in the I18nWidget comp This PR removes a duplicate class name in the I18nWidget component. Co-authored-by: Hugo Lopes <hugo.rodrigues.lopes@gmail.com> Co-authored-by: Hugo Lopes <hugo.lopes@present-technologies.com> * add horizontal margin to pages when mobile screen (#180) * Add cart item options like color and size (#177) Co-authored-by: hlopes <hugo.lopes@present-technologies.com> * Changes Co-authored-by: Hugo Lopes <hugo.rodrigues.lopes@gmail.com> Co-authored-by: Hugo Lopes <hugo.lopes@present-technologies.com> Co-authored-by: Jamie Isaksen <jamie@jamie.no> Co-authored-by: Vinicius Zucatti <51221635+vczb@users.noreply.github.com>
2021-01-29 12:00:16 -03:00 · 2021-01-29 12:00:16 -03:00 · 3a7d5e2489
commit 3a7d5e2489
parent 08a6b2efcf
15 changed files with 51 additions and 32 deletions
--- 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
--- 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;
--- 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 = ({
      <div className="flex-1 flex flex-col text-base">
        {/** TODO: Replace this. No `path` found at Cart */}
        <Link href={`/product/${item.url.split('/')[3]}`}>
-          <span className="font-bold mb-5 text-lg cursor-pointer">
+          <span className="font-bold text-lg cursor-pointer leading-6">
            {item.name}
          </span>
        </Link>
-
-        <div className="flex items-center">
+        {item.options && item.options.length > 0 ? (
+          <div className="">
+            {item.options.map((option:ItemOption, i: number) =>
+              <span key={`${item.id}-${option.name}`} className="text-sm font-semibold text-accents-7">
+                {option.value}{ i === item.options.length -1 ? "" : ", " }
+              </span>
+            )}
+          </div>
+        ) : null}
+        <div className="flex items-center mt-3">
          <button type="button" onClick={() => increaseQuantity(-1)}>
            <Minus width={18} height={18} />
          </button>
--- 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;
 }

--- a/components/common/Layout/Layout.tsx
+++ b/components/common/Layout/Layout.tsx
@ -61,16 +61,16 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
        <main className="fit">{children}</main>
        <Footer pages={pageProps.pages} />

-        <Sidebar open={displaySidebar} onClose={closeSidebar}>
-          <CartSidebarView />
-        </Sidebar>
-
        <Modal open={displayModal} onClose={closeModal}>
          {modalView === 'LOGIN_VIEW' && <LoginView />}
          {modalView === 'SIGNUP_VIEW' && <SignUpView />}
          {modalView === 'FORGOT_VIEW' && <ForgotPassword />}
        </Modal>

+        <Sidebar open={displaySidebar} onClose={closeSidebar}>
+          <CartSidebarView />
+        </Sidebar>
+
        <FeatureBar
          title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
          hide={acceptedCookies}
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@ -38,15 +38,14 @@ const ProductView: FC<Props> = ({ 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<Props> = ({ product }) => {
        <WishlistButton
          className={s.wishlistButton}
          productId={product.entityId}
-          variant={product.variants.edges?.[0]!}
+          variant={variant!}
        />
      </div>
    </Container>
--- 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]
 }
--- a/components/ui/Marquee/Marquee.tsx
+++ b/components/ui/Marquee/Marquee.tsx
@ -9,7 +9,7 @@ interface Props {
  variant?: 'primary' | 'secondary'
 }

-const Maquee: FC<Props> = ({
+const Marquee: FC<Props> = ({
  className = '',
  children,
  variant = 'primary',
@ -32,4 +32,4 @@ const Maquee: FC<Props> = ({
  )
 }

-export default Maquee
+export default Marquee
--- 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': {
--- 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(
--- 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
--- 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
--- 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({
--- a/pages/[...pages].tsx
+++ b/pages/[...pages].tsx
@ -65,7 +65,7 @@ export default function Pages({
  page,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
-    <div className="max-w-2xl mx-auto py-20">
+    <div className="max-w-2xl mx-8 sm:mx-auto py-20">
      {page?.body && <Text html={page.body} />}
    </div>
  )
--- a/pages/search.tsx
+++ b/pages/search.tsx
@ -106,9 +106,9 @@ export default function Search({
                    fill="currentColor"
                  >
                    <path
-                      fill-rule="evenodd"
+                      fillRule="evenodd"
                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                      clip-rule="evenodd"
+                      clipRule="evenodd"
                    />
                  </svg>
                </button>
@ -205,9 +205,9 @@ export default function Search({
                    fill="currentColor"
                  >
                    <path
-                      fill-rule="evenodd"
+                      fillRule="evenodd"
                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                      clip-rule="evenodd"
+                      clipRule="evenodd"
                    />
                  </svg>
                </button>
@ -378,9 +378,9 @@ export default function Search({
                    fill="currentColor"
                  >
                    <path
-                      fill-rule="evenodd"
+                      fillRule="evenodd"
                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                      clip-rule="evenodd"
+                      clipRule="evenodd"
                    />
                  </svg>
                </button>