-
Notifications
You must be signed in to change notification settings - Fork 243
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
feat(core): Add currency selector to header (#1912)
* Add currency selector Co-Authored-By: Chancellor Clark <[email protected]> * Abstract cart cookie handling to a common lib * Change currency of cart * Only show transactional currencies in switcher (for now) * Use default currency when there is no preference specified in cookie * Add cart ID + version to key to invalidate cart on currency change --------- Co-authored-by: Chancellor Clark <[email protected]>
- @bigcommerce/create-catalyst@0.21.0
- @bigcommerce/catalyst-core@1.0.0-rc.10
- @bigcommerce/catalyst-core@1.0.0-rc.9
- @bigcommerce/catalyst-core@1.0.0-rc.8
- @bigcommerce/catalyst-core@1.0.0-rc.7
- @bigcommerce/catalyst-core@1.0.0-rc.6
- @bigcommerce/catalyst-core@1.0.0-rc.5
- @bigcommerce/catalyst-core@1.0.0-rc.4
- @bigcommerce/catalyst-core@1.0.0-rc
- @bigcommerce/catalyst-core@makeswift-canary
- @bigcommerce/catalyst-core@makeswift-1.0.0-rc.10
- @bigcommerce/catalyst-core@makeswift-1.0.0-rc.9
- @bigcommerce/catalyst-core@makeswift-1.0.0-rc.8
- @bigcommerce/catalyst-core@makeswift-1.0.0-rc.7
- @bigcommerce/catalyst-core@makeswift-1.0.0-rc.6
- @bigcommerce/catalyst-core@makeswift-1.0.0-rc.5
- @bigcommerce/catalyst-core@makeswift-1.0.0-rc.4
- @bigcommerce/catalyst-core@canary
1 parent
ee42e45
commit da2a462
Showing
25 changed files
with
341 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@bigcommerce/catalyst-core": minor | ||
| --- | ||
|
|
||
| Add currency selector to header |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| 'use server'; | ||
|
|
||
| import { BigCommerceGQLError } from '@bigcommerce/catalyst-client'; | ||
| import { SubmissionResult } from '@conform-to/react'; | ||
| import { parseWithZod } from '@conform-to/zod'; | ||
| import { revalidatePath, revalidateTag } from 'next/cache'; | ||
| import { getTranslations } from 'next-intl/server'; | ||
| import { z } from 'zod'; | ||
|
|
||
| import { client } from '~/client'; | ||
| import { graphql } from '~/client/graphql'; | ||
| import { TAGS } from '~/client/tags'; | ||
| import { getCartId, setCartId } from '~/lib/cart'; | ||
| import { setPreferredCurrencyCode } from '~/lib/currency'; | ||
|
|
||
| import { CurrencyCode } from '../fragment'; | ||
| import { CurrencyCodeSchema } from '../schema'; | ||
|
|
||
| const currencySwitchSchema = z.object({ | ||
| id: CurrencyCodeSchema, | ||
| }); | ||
|
|
||
| // Note: this results in a new cart being created in the new currency, so the cart ID will change | ||
| const UpdateCartCurrencyMutation = graphql(` | ||
| mutation UpdateCartCurrency($input: UpdateCartCurrencyInput!) { | ||
| cart { | ||
| updateCartCurrency(input: $input) { | ||
| cart { | ||
| currencyCode | ||
| entityId | ||
| } | ||
| } | ||
| } | ||
| } | ||
| `); | ||
|
|
||
| export const updateCartCurrency = async (cartId: string, currencyCode: CurrencyCode) => { | ||
| const result = await client.fetch({ | ||
| document: UpdateCartCurrencyMutation, | ||
| variables: { input: { data: { currencyCode }, cartEntityId: cartId } }, | ||
| }); | ||
| const newCartId = result.data.cart.updateCartCurrency?.cart?.entityId; | ||
|
|
||
| if (newCartId) { | ||
| await setCartId(newCartId); | ||
| } else { | ||
| throw new Error('Failed to update cart currency', { cause: result }); | ||
| } | ||
| }; | ||
|
|
||
| export const switchCurrency = async (_prevState: SubmissionResult | null, payload: FormData) => { | ||
| const t = await getTranslations('Components.Header.Currency'); | ||
|
|
||
| const submission = parseWithZod(payload, { schema: currencySwitchSchema }); | ||
|
|
||
| if (submission.status !== 'success') { | ||
| return submission.reply({ formErrors: [t('invalidCurrency')] }); | ||
| } | ||
|
|
||
| await setPreferredCurrencyCode(submission.value.id); | ||
|
|
||
| const cartId = await getCartId(); | ||
|
|
||
| if (cartId) { | ||
| await updateCartCurrency(cartId, submission.value.id) | ||
| .then(() => { | ||
| revalidateTag(TAGS.cart); | ||
| }) | ||
| .catch((error: unknown) => { | ||
| // eslint-disable-next-line no-console | ||
| console.error('Error updating cart currency', error); | ||
|
|
||
| if (error instanceof BigCommerceGQLError) { | ||
| return submission.reply({ | ||
| formErrors: error.errors.map(({ message }) => message), | ||
| }); | ||
| } | ||
|
|
||
| if (error instanceof Error) { | ||
| return submission.reply({ formErrors: [error.message] }); | ||
| } | ||
|
|
||
| return submission.reply({ formErrors: [t('errorUpdatingCurrency')] }); | ||
| }); | ||
| } | ||
|
|
||
| revalidatePath('/'); | ||
|
|
||
| return submission.reply({ resetForm: true }); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { z } from 'zod'; | ||
|
|
||
| import type { CurrencyCode } from './fragment'; | ||
|
|
||
| export const CurrencyCodeSchema = z | ||
| .string() | ||
| .length(3) | ||
| .toUpperCase() | ||
| .refine((val): val is CurrencyCode => /^[A-Z]{3}$/.test(val), { | ||
| message: 'Must be a valid currency code', | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| 'use server'; | ||
|
|
||
| import { cookies } from 'next/headers'; | ||
|
|
||
| export async function getCartId(): Promise<string | undefined> { | ||
| const cookieStore = await cookies(); | ||
| const cartId = cookieStore.get('cartId')?.value; | ||
|
|
||
| return cartId; | ||
| } | ||
|
|
||
| export async function setCartId(cartId: string): Promise<void> { | ||
| const cookieStore = await cookies(); | ||
|
|
||
| cookieStore.set('cartId', cartId, { | ||
| httpOnly: true, | ||
| secure: process.env.NODE_ENV === 'production', | ||
| sameSite: 'lax', | ||
| path: '/', | ||
| }); | ||
| } | ||
|
|
||
| export async function clearCartId(): Promise<void> { | ||
| const cookieStore = await cookies(); | ||
|
|
||
| cookieStore.delete('cartId'); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| 'use server'; | ||
|
|
||
| import { cookies } from 'next/headers'; | ||
|
|
||
| import type { CurrencyCode } from '~/components/header/fragment'; | ||
| import { CurrencyCodeSchema } from '~/components/header/schema'; | ||
|
|
||
| export async function getPreferredCurrencyCode(): Promise<CurrencyCode | undefined> { | ||
| const cookieStore = await cookies(); | ||
| const currencyCode = cookieStore.get('currencyCode')?.value; | ||
|
|
||
| if (!currencyCode) { | ||
| return undefined; | ||
| } | ||
|
|
||
| const result = CurrencyCodeSchema.safeParse(currencyCode); | ||
|
|
||
| return result.success ? result.data : undefined; | ||
| } | ||
|
|
||
| export async function setPreferredCurrencyCode(currencyCode: CurrencyCode): Promise<void> { | ||
| const cookieStore = await cookies(); | ||
|
|
||
| cookieStore.set('currencyCode', currencyCode, { | ||
| httpOnly: true, | ||
| secure: process.env.NODE_ENV === 'production', | ||
| sameSite: 'lax', | ||
| path: '/', | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters