Variants Issue with Shopify Provider (vercel#222)

* changes * Progress * Normalized Products output * Progress * Restored Index Agnostic * Progress * Reordering * Moved normalizer to BC function * Removed Futures * More Types * More Types * More Types * Fix useCallback * Progress, Changes types, readme and restoring functionality * Changes * TS Issues * Changes * Normalizer * Normalizing more operations * Normalizing more operations * changes * Merge Issues * Cleanup * change * changes * index.ts broke my tree shaking * slug * Normalized Options and Swatches * Restored Add to cart * Correct Variant Added to Cart * Normalizing Cart Responses * Changes * changes breaking * Adding immutable normalizer for Product * Cart Normalized * changes * Progress * More updates * Removed some comments * Add loading state for data hooks * Bug fix * Changed the way isEmpty works * Improve navbar performance * Added useResponse hook * added useResponse to useWhishlist * Added husky and lint-staged * Ran prettier fix * Added more cart types * Moved types.d.ts to the commerce folder * Minor changes * Moved normalizer to happen after fetch * updated useCart types * Updated normalizer for useData * Added new normalizer for the cart to the UI * More corrections for useCart * Updated cart update hooks * Removed import * Progress * Switch away from global types * Making multiple changes * Improved types for operations * Moved and updated cart types * Updated the useAddItem and useRemoveItem hooks * Minor life improvement * Minor change * Implement Shopify Provider * Update README.md * Update README.md * normalizations & missing files * Update index.ts * fixes * Update normalize.ts * fix: cart error on first load * shopify checkout redirect & api handler * Update get-checkout-id.ts * userAvatar * Fix: color option * Update normalize.ts * changes * Update next.config.js * start customer auth & signup * Update config.ts * Login, Sign Up, Log Out, and checkout & customer association * Automatic login after sign-up * Update handle-login.ts * MOving stuff around and adding temporal new files * changes * Replace use-cart with the new hook * Removed old hook * Improved HookHandler type * Moved types * Simplified useData types * Updated Fetcher type * Moved SwrOptions type * Removed duplicated fetcher * Moved provider to its own file * Added proper type for fetch input * Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic" This reverts commit 23c8ed7, reversing changes made to bf50965. * change readme * Revert "Merge branch 'master' of https://github.com/vercel/commerce into agnostic" This reverts commit bf50965, reversing changes made to 0dad4dd. * Revert "Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic"" This reverts commit c9a43f1. * align with upstream changes * Updated how the hook input is handled * Add more options to the hook handler * Final touches to the hook handler type * Moved useWishlist to use new handler * Move useCustomer to the new hook * Added a default fetcher * query all products for vendors & paths, improve search * Update use-search.tsx * fix cart after upstream changes * Shopify Provider (vercel#186) * Start of Shopify provider * add missing comment to documentation * add missing env vars to documentation * update reference to types file * Moved useSearch to the new hook * Removed old use-data lib * Removed generics for result and body * Removed normalizr * Wishlist * New changes and initial Features API * Fixed some types * Fixed more types * fixes after upstream changes * Fixed product types * Fixed another product type * Updated type * Fixed remaining issues with types * Added a MutationHandler * Moved the handlers to each hook * Moved the fetcher to its own file * Moved handler to each hook * Added initial version of useAddItem * Added better mutation types, and moved some hooks * Removed use-cart-actions * Added initial version of useAddItem * Updated types * Update use-add-item.tsx * changes * Changes * Reordering and changes * Adding Features APO * Adding wishlist api * Implementing FeaturesAPI with Wishlist * Removing bug with touchstart * Adding tyni typing * moved use-remove-item * Removed MutationHandler type * Moved more hooks and updated types to make them smaller * Moved data hooks to new format * Removed no longer required types * Removed useResponse helper * Updated useData type * Moved wishlist use-add-item * Moved wishlist use-remove-item to provider * Moved use-login and use-logout * Update use-signup * Removed use-action helper * Moved auth & cart hooks + several fixes * Updated cart item, fixed deprecations * Update next.config.js * Updates to wishlist feature * Moved the features to be environment variable only * More changes for wishlist config * Disable wishlist * Removed useWishlistActions * Updated readme * updates * typos * Updated the way the provider config is set * Removed features.ts * Removed bootstrap.js * Aligned with upstream changes * Updates * shopify: changes * shopify: changes * Update next.config.js * Shopify Provider Updates (vercel#209) * Implement Shopify Provider * Update README.md * Update README.md * normalizations & missing files * Update index.ts * fixes * Update normalize.ts * fix: cart error on first load * shopify checkout redirect & api handler * Update get-checkout-id.ts * Fix: color option * Update normalize.ts * changes * Update next.config.js * start customer auth & signup * Update config.ts * Login, Sign Up, Log Out, and checkout & customer association * Automatic login after sign-up * Update handle-login.ts * changes * Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic" This reverts commit 23c8ed7, reversing changes made to bf50965. * change readme * Revert "Merge branch 'master' of https://github.com/vercel/commerce into agnostic" This reverts commit bf50965, reversing changes made to 0dad4dd. * Revert "Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic"" This reverts commit c9a43f1. * align with upstream changes * query all products for vendors & paths, improve search * Update use-search.tsx * fix cart after upstream changes * fixes after upstream changes * Moved handler to each hook * Added initial version of useAddItem * Updated types * Update use-add-item.tsx * Moved auth & cart hooks + several fixes * Updated cart item, fixed deprecations * Update next.config.js * Aligned with upstream changes * Updates * Update next.config.js * Updated the commerce config structure * Removed @framework imports within framework providers * Fixed types * changes * Adding extra config * Adding shopify commit * Adding env templates to the providers * Ignore some types * Adding link for Cart * Adding customCheckout * multiple changes to fix the wishlist * Shopify Provier Updates (vercel#212) * changes * Adding shopify commit * Changed to query page by id * Fixed page query, Changed use-search GraphQl query * Update use-search.tsx * remove unused util * Changed cookie expiration * Update tsconfig.json Co-authored-by: okbel <[email protected]> * Bump and adding dependency * Adding color checks * Now colors work with lighter colors * Stable commerce.config.json * Updated main readme * Readme changes * Default to bigcommerce * og config * Adding Shopify Config * Adding OG Card * Adding support for default option * Adding support for default options and removing the one that we do not need * Changes to Shopify * Shopify provider fixes (vercel#225) * Changed to query page by id * Fixed page query, Changed use-search GraphQl query * Update use-search.tsx * remove unused util * Changed cookie expiration * Update tsconfig.json * Fix add to cart & prepare for user activation * Update helpers.ts * Update helpers.ts * Changes, fix Shopify GraphQL deprecations * Update checkout-to-cart.ts * Default to BigCommerce * Update index.ts * Fixed types * Delete commerce.config.json * Shopify provider fixes (vercel#239) * Changed to query page by id * Fixed page query, Changed use-search GraphQl query * Update use-search.tsx * remove unused util * Changed cookie expiration * Update tsconfig.json * Fix add to cart & prepare for user activation * Update helpers.ts * Update helpers.ts * Changes, fix Shopify GraphQL deprecations * Update checkout-to-cart.ts * Default to BigCommerce * Update index.ts * Fixed types * Update customer-access-token-delete.ts * Fix item missing path * Update customer-access-token-delete.ts Co-authored-by: bc <[email protected]> Co-authored-by: Luis Alvarez <[email protected]> Co-authored-by: cond0r <[email protected]> Co-authored-by: Peter Mekhaeil <[email protected]>
josephfraser · Apr 13, 2021 · d838f34 · d838f34
1 parent 936f149
commit d838f34
Show file tree

Hide file tree

Showing 41 changed files with 326 additions and 290 deletions.
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
@@ -1,23 +1,20 @@
 import cn from 'classnames'
 import Image from 'next/image'
 import { NextSeo } from 'next-seo'
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import s from './ProductView.module.css'
-
 import { Swatch, ProductSlider } from '@components/product'
 import { Button, Container, Text, useUI } from '@components/ui'
-
 import type { Product } from '@commerce/types'
 import usePrice from '@framework/product/use-price'
 import { useAddItem } from '@framework/cart'
-
 import { getVariant, SelectedOptions } from '../helpers'
 import WishlistButton from '@components/wishlist/WishlistButton'
 
 interface Props {
-  className?: string
   children?: any
   product: Product
+  className?: string
 }
 
 const ProductView: FC<Props> = ({ product }) => {
@@ -29,12 +26,18 @@ const ProductView: FC<Props> = ({ product }) => {
   })
   const { openSidebar } = useUI()
   const [loading, setLoading] = useState(false)
-  const [choices, setChoices] = useState<SelectedOptions>({
-    size: null,
-    color: null,
-  })
+  const [choices, setChoices] = useState<SelectedOptions>({})
+
+  useEffect(() => {
+    // Selects the default option
+    product.variants[0].options?.forEach((v) => {
+      setChoices((choices) => ({
+        ...choices,
+        [v.displayName.toLowerCase()]: v.values[0].label.toLowerCase(),
+      }))
+    })
+  }, [])
 
-  // Select the correct variant based on choices
   const variant = getVariant(product, choices)
 
   const addToCart = async () => {
@@ -143,7 +146,6 @@ const ProductView: FC<Props> = ({ product }) => {
               className={s.button}
               onClick={addToCart}
               loading={loading}
-              disabled={!variant && product.options.length > 0}
             >
               Add to Cart
             </Button>

diff --git a/components/product/helpers.ts b/components/product/helpers.ts
@@ -1,9 +1,5 @@
 import type { Product } from '@commerce/types'
-
-export type SelectedOptions = {
-  size: string | null
-  color: string | null
-}
+export type SelectedOptions = Record<string, string | null>
 
 export function getVariant(product: Product, opts: SelectedOptions) {
   const variant = product.variants.find((variant) => {

diff --git a/framework/shopify/api/index.ts b/framework/shopify/api/index.ts
@@ -5,7 +5,6 @@ import {
   API_TOKEN,
   SHOPIFY_CHECKOUT_ID_COOKIE,
   SHOPIFY_CUSTOMER_TOKEN_COOKIE,
-  SHOPIFY_COOKIE_EXPIRE,
 } from '../const'
 
 if (!API_URL) {
@@ -48,7 +47,7 @@ const config = new Config({
   commerceUrl: API_URL,
   apiToken: API_TOKEN!,
   cartCookie: SHOPIFY_CHECKOUT_ID_COOKIE,
-  cartCookieMaxAge: SHOPIFY_COOKIE_EXPIRE,
+  cartCookieMaxAge: 60 * 60 * 24 * 30,
   fetch: fetchGraphqlApi,
   customerCookie: SHOPIFY_CUSTOMER_TOKEN_COOKIE,
 })

diff --git a/framework/shopify/api/operations/get-all-collections.ts b/framework/shopify/api/operations/get-all-collections.ts
diff --git a/framework/shopify/api/operations/get-page.ts b/framework/shopify/api/operations/get-page.ts
diff --git a/framework/shopify/auth/use-login.tsx b/framework/shopify/auth/use-login.tsx
@@ -10,7 +10,7 @@ import {
   MutationCheckoutCreateArgs,
 } from '../schema'
 import useLogin, { UseLogin } from '@commerce/auth/use-login'
-import { setCustomerToken } from '../utils'
+import { setCustomerToken, throwUserErrors } from '../utils'
 
 export default useLogin as UseLogin<typeof handler>
 
@@ -45,13 +45,8 @@ export const handler: MutationHook<null, {}, CustomerAccessTokenCreateInput> = {
       },
     })
 
-    const errors = customerAccessTokenCreate?.customerUserErrors
+    throwUserErrors(customerAccessTokenCreate?.customerUserErrors)
 
-    if (errors && errors.length) {
-      throw new ValidationError({
-        message: getErrorMessage(errors[0]),
-      })
-    }
     const customerAccessToken = customerAccessTokenCreate?.customerAccessToken
     const accessToken = customerAccessToken?.accessToken
 

diff --git a/framework/shopify/auth/use-signup.tsx b/framework/shopify/auth/use-signup.tsx
@@ -1,15 +1,16 @@
 import { useCallback } from 'react'
 import type { MutationHook } from '@commerce/utils/types'
-import { CommerceError } from '@commerce/utils/errors'
+import { CommerceError, ValidationError } from '@commerce/utils/errors'
 import useSignup, { UseSignup } from '@commerce/auth/use-signup'
 import useCustomer from '../customer/use-customer'
-import { CustomerCreateInput } from '../schema'
-
 import {
-  customerCreateMutation,
-  customerAccessTokenCreateMutation,
-} from '../utils/mutations'
-import handleLogin from '../utils/handle-login'
+  CustomerCreateInput,
+  Mutation,
+  MutationCustomerCreateArgs,
+} from '../schema'
+
+import { customerCreateMutation } from '../utils/mutations'
+import { handleAutomaticLogin, throwUserErrors } from '../utils'
 
 export default useSignup as UseSignup<typeof handler>
 
@@ -33,7 +34,11 @@ export const handler: MutationHook<
           'A first name, last name, email and password are required to signup',
       })
     }
-    const data = await fetch({
+
+    const { customerCreate } = await fetch<
+      Mutation,
+      MutationCustomerCreateArgs
+    >({
       ...options,
       variables: {
         input: {
@@ -45,19 +50,10 @@ export const handler: MutationHook<
       },
     })
 
-    try {
-      const loginData = await fetch({
-        query: customerAccessTokenCreateMutation,
-        variables: {
-          input: {
-            email,
-            password,
-          },
-        },
-      })
-      handleLogin(loginData)
-    } catch (error) {}
-    return data
+    throwUserErrors(customerCreate?.customerUserErrors)
+    await handleAutomaticLogin(fetch, { email, password })
+
+    return null
   },
   useHook: ({ fetch }) => () => {
     const { revalidate } = useCustomer()

diff --git a/framework/shopify/cart/index.ts b/framework/shopify/cart/index.ts
@@ -1,3 +1,4 @@
 export { default as useCart } from './use-cart'
 export { default as useAddItem } from './use-add-item'
+export { default as useUpdateItem } from './use-update-item'
 export { default as useRemoveItem } from './use-remove-item'
diff --git a/framework/shopify/cart/use-add-item.tsx b/framework/shopify/cart/use-add-item.tsx
@@ -1,12 +1,15 @@
+import { useCallback } from 'react'
 import type { MutationHook } from '@commerce/utils/types'
 import { CommerceError } from '@commerce/utils/errors'
 import useAddItem, { UseAddItem } from '@commerce/cart/use-add-item'
 import useCart from './use-cart'
+import {
+  checkoutLineItemAddMutation,
+  getCheckoutId,
+  checkoutToCart,
+} from '../utils'
 import { Cart, CartItemBody } from '../types'
-import { checkoutLineItemAddMutation, getCheckoutId } from '../utils'
-import { checkoutToCart } from './utils'
 import { Mutation, MutationCheckoutLineItemsAddArgs } from '../schema'
-import { useCallback } from 'react'
 
 export default useAddItem as UseAddItem<typeof handler>
 
@@ -40,8 +43,7 @@ export const handler: MutationHook<Cart, {}, CartItemBody> = {
       },
     })
 
-    // TODO: Fix this Cart type here
-    return checkoutToCart(checkoutLineItemsAdd) as any
+    return checkoutToCart(checkoutLineItemsAdd)
   },
   useHook: ({ fetch }) => () => {
     const { mutate } = useCart()

diff --git a/framework/shopify/cart/use-cart.tsx b/framework/shopify/cart/use-cart.tsx
@@ -6,7 +6,7 @@ import useCommerceCart, {
 
 import { Cart } from '../types'
 import { SWRHook } from '@commerce/utils/types'
-import { checkoutCreate, checkoutToCart } from './utils'
+import { checkoutCreate, checkoutToCart } from '../utils'
 import getCheckoutQuery from '../utils/queries/get-checkout-query'
 
 export default useCommerceCart as UseCart<typeof handler>
@@ -22,11 +22,12 @@ export const handler: SWRHook<
   },
   async fetcher({ input: { cartId: checkoutId }, options, fetch }) {
     let checkout
+
     if (checkoutId) {
       const data = await fetch({
         ...options,
         variables: {
-          checkoutId,
+          checkoutId: checkoutId,
         },
       })
       checkout = data.node
@@ -36,8 +37,7 @@ export const handler: SWRHook<
       checkout = await checkoutCreate(fetch)
     }
 
-    // TODO: Fix this type
-    return checkoutToCart({ checkout } as any)
+    return checkoutToCart({ checkout })
   },
   useHook: ({ useData }) => (input) => {
     const response = useData({

diff --git a/framework/shopify/cart/use-remove-item.tsx b/framework/shopify/cart/use-remove-item.tsx
@@ -1,23 +1,22 @@
 import { useCallback } from 'react'
-
 import type {
   MutationHookContext,
   HookFetcherContext,
 } from '@commerce/utils/types'
-
+import { RemoveCartItemBody } from '@commerce/types'
 import { ValidationError } from '@commerce/utils/errors'
-
 import useRemoveItem, {
   RemoveItemInput as RemoveItemInputBase,
   UseRemoveItem,
 } from '@commerce/cart/use-remove-item'
-
 import useCart from './use-cart'
-import { checkoutLineItemRemoveMutation, getCheckoutId } from '../utils'
-import { checkoutToCart } from './utils'
+import {
+  checkoutLineItemRemoveMutation,
+  getCheckoutId,
+  checkoutToCart,
+} from '../utils'
 import { Cart, LineItem } from '../types'
 import { Mutation, MutationCheckoutLineItemsRemoveArgs } from '../schema'
-import { RemoveCartItemBody } from '@commerce/types'
 
 export type RemoveItemFn<T = any> = T extends LineItem
   ? (input?: RemoveItemInput<T>) => Promise<Cart | null>

diff --git a/framework/shopify/cart/use-update-item.tsx b/framework/shopify/cart/use-update-item.tsx
@@ -13,7 +13,7 @@ import useUpdateItem, {
 import useCart from './use-cart'
 import { handler as removeItemHandler } from './use-remove-item'
 import type { Cart, LineItem, UpdateCartItemBody } from '../types'
-import { checkoutToCart } from './utils'
+import { checkoutToCart } from '../utils'
 import { getCheckoutId, checkoutLineItemUpdateMutation } from '../utils'
 import { Mutation, MutationCheckoutLineItemsUpdateArgs } from '../schema'
 

diff --git a/framework/shopify/cart/utils/checkout-to-cart.ts b/framework/shopify/cart/utils/checkout-to-cart.ts
diff --git a/framework/shopify/cart/utils/fetcher.ts b/framework/shopify/cart/utils/fetcher.ts