diff --git a/framework/saleor/cart/use-add-item.tsx b/framework/saleor/cart/use-add-item.tsx index cce0950e9..f5b59bf45 100644 --- a/framework/saleor/cart/use-add-item.tsx +++ b/framework/saleor/cart/use-add-item.tsx @@ -9,7 +9,7 @@ import { checkoutToCart, } from '../utils' import { Cart, CartItemBody } from '../types' -import { Mutation, MutationCheckoutLineItemsAddArgs } from '../schema' +import { Mutation, MutationCheckoutLinesAddArgs } from '../schema' export default useAddItem as UseAddItem @@ -27,13 +27,13 @@ export const handler: MutationHook = { }) } - const { checkoutLineItemsAdd } = await fetch< + const { checkoutLinesAdd } = await fetch< Mutation, - MutationCheckoutLineItemsAddArgs + MutationCheckoutLinesAddArgs >({ ...options, variables: { - checkoutId: getCheckoutId(), + checkoutId: getCheckoutId().checkoutId, lineItems: [ { variantId: item.variantId, @@ -43,7 +43,7 @@ export const handler: MutationHook = { }, }) - return checkoutToCart(checkoutLineItemsAdd) + return checkoutToCart(checkoutLinesAdd) }, useHook: ({ fetch }) => () => { const { mutate } = useCart() diff --git a/framework/saleor/cart/use-cart.tsx b/framework/saleor/cart/use-cart.tsx index 5f77360bb..823e7ad1f 100644 --- a/framework/saleor/cart/use-cart.tsx +++ b/framework/saleor/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, getCheckoutId } from '../utils' import getCheckoutQuery from '../utils/queries/get-checkout-query' export default useCommerceCart as UseCart @@ -27,7 +27,7 @@ export const handler: SWRHook< const data = await fetch({ ...options, variables: { - checkoutId: checkoutId, + checkoutId: getCheckoutId().checkoutToken, }, }) checkout = data.node diff --git a/framework/saleor/const.ts b/framework/saleor/const.ts index 506fccf8d..038ad4270 100644 --- a/framework/saleor/const.ts +++ b/framework/saleor/const.ts @@ -1,2 +1,5 @@ export const API_URL = process.env.NEXT_PUBLIC_SALEOR_API_URL export const API_CHANNEL = process.env.NEXT_PUBLIC_SALEOR_CHANNEL +export const CHECKOUT_ID_COOKIE = 'saleorCheckoutID' + + diff --git a/framework/saleor/provider.ts b/framework/saleor/provider.ts index 7fe77bcf1..e18903403 100644 --- a/framework/saleor/provider.ts +++ b/framework/saleor/provider.ts @@ -15,6 +15,7 @@ import fetcher from './fetcher' export const saleorProvider = { locale: 'en-us', cartCookie: "", + cartCookieToken: "", fetcher, cart: { useCart, useAddItem, useUpdateItem, useRemoveItem }, customer: { useCustomer }, diff --git a/framework/saleor/utils/checkout-create.ts b/framework/saleor/utils/checkout-create.ts index 8f7f63cbf..1c2aec6a7 100644 --- a/framework/saleor/utils/checkout-create.ts +++ b/framework/saleor/utils/checkout-create.ts @@ -1,23 +1,27 @@ import Cookies from 'js-cookie' import checkoutCreateMutation from './mutations/checkout-create' -import { CheckoutCreatePayload } from '../schema' +import { CheckoutCreate } from '../schema' +import { CHECKOUT_ID_COOKIE } from '@framework/const' export const checkoutCreate = async ( fetch: any -): Promise => { +): Promise => { const data = await fetch({ query: checkoutCreateMutation, }) const checkout = data.checkoutCreate?.checkout const checkoutId = checkout?.id + const checkoutToken = checkout?.token + + const value = `${checkoutId}:${checkoutToken}`; if (checkoutId) { const options = { expires: 60 * 60 * 24 * 30, } - Cookies.set('saleorCheckoutID', checkoutId, options) + Cookies.set(CHECKOUT_ID_COOKIE, value, options) } return checkout diff --git a/framework/saleor/utils/get-checkout-id.ts b/framework/saleor/utils/get-checkout-id.ts index 05452c948..1d1b6f448 100644 --- a/framework/saleor/utils/get-checkout-id.ts +++ b/framework/saleor/utils/get-checkout-id.ts @@ -1,5 +1,9 @@ +import Cookies from 'js-cookie' +import { CHECKOUT_ID_COOKIE } from '../const' + const getCheckoutId = (id?: string) => { - return id + const r = Cookies.get(CHECKOUT_ID_COOKIE)?.split(":") || []; + return { checkoutId: r[0], checkoutToken: r[1] } } export default getCheckoutId diff --git a/framework/saleor/utils/mutations/checkout-create.ts b/framework/saleor/utils/mutations/checkout-create.ts index aceae0943..9b5d37d42 100644 --- a/framework/saleor/utils/mutations/checkout-create.ts +++ b/framework/saleor/utils/mutations/checkout-create.ts @@ -2,16 +2,19 @@ import { checkoutDetailsFragment } from '../queries/get-checkout-query' const checkoutCreateMutation = /* GraphQL */ ` mutation createCheckout { - checkoutCreate(input: {}) { - checkoutUserErrors { + checkoutCreate(input: { + email: "customer@example.com", + lines: [{quantity: 1, variantId: "UHJvZHVjdFZhcmlhbnQ6Mjk3"}], + channel: "default-channel" + }) { + errors { code field message } - # Breaks GraphQL Codegen - # checkout { - # ${checkoutDetailsFragment} - # } + checkout { + ${checkoutDetailsFragment} + } } } ` diff --git a/framework/saleor/utils/mutations/checkout-line-item-add.ts b/framework/saleor/utils/mutations/checkout-line-item-add.ts index a41268571..56472dc4d 100644 --- a/framework/saleor/utils/mutations/checkout-line-item-add.ts +++ b/framework/saleor/utils/mutations/checkout-line-item-add.ts @@ -1,16 +1,16 @@ import { checkoutDetailsFragment } from '../queries/get-checkout-query' const checkoutLineItemAddMutation = /* GraphQL */ ` - mutation checkoutLineItemAdd($checkoutId: ID!, $lineItems: [CheckoutLineItemInput!]!) { - checkoutLineItemsAdd(checkoutId: $checkoutId, lineItems: $lineItems) { - checkoutUserErrors { + mutation checkoutLineItemAdd($checkoutId: ID!, $lineItems: [CheckoutLineInput!]!) { + checkoutLinesAdd(checkoutId: $checkoutId, lines: $lineItems) { + errors { code field message } - # checkout { - # ${checkoutDetailsFragment} - # } + checkout { + ${checkoutDetailsFragment} + } } } ` diff --git a/framework/saleor/utils/queries/get-checkout-query.ts b/framework/saleor/utils/queries/get-checkout-query.ts index d8758e321..d806219ad 100644 --- a/framework/saleor/utils/queries/get-checkout-query.ts +++ b/framework/saleor/utils/queries/get-checkout-query.ts @@ -1,61 +1,11 @@ export const checkoutDetailsFragment = ` id - webUrl - subtotalPriceV2{ - amount - currencyCode - } - totalTaxV2 { - amount - currencyCode - } - totalPriceV2 { - amount - currencyCode - } - completedAt - createdAt - taxesIncluded - lineItems(first: 250) { - pageInfo { - hasNextPage - hasPreviousPage - } - edges { - node { - id - title - variant { - id - sku - title - image { - originalSrc - altText - width - height - } - priceV2{ - amount - currencyCode - } - compareAtPriceV2{ - amount - currencyCode - } - product { - handle - } - } - quantity - } - } - } + token ` const getCheckoutQuery = /* GraphQL */ ` - query($checkoutId: ID!) { - node(id: $checkoutId) { + query($checkoutId: UUID!) { + checkout(token: $checkoutId) { ... on Checkout { ${checkoutDetailsFragment} }