\n {t('CreateAccount.title')}\n

{t('CreateAccount.accountBenefits')}

{t('CreateAccount.fastCheckout')}
{t('CreateAccount.multipleAddresses')}
{t('CreateAccount.ordersHistory')}
{t('CreateAccount.ordersTracking')}
{t('CreateAccount.wishlists')}

\n \n {t('CreateAccount.cta')}\n \n

,\n customFields: [\n { name: t('sku'), value: product.sku },\n { name: t('weight'), value: `${product.weight?.value} ${product.weight?.unit}` },\n ...removeEdgesAndNodes(product.customFields).map(({ name, value }) => ({ name, value })),\n ],\n hasVariants: removeEdgesAndNodes(product.productOptions).length > 0,\n isPreorder: product.availabilityV2.status === 'Preorder',\n disabled: product.availabilityV2.status === 'Unavailable' || !product.inventory.isInStock,\n }));\n });\n\n const streamableAnalyticsData = Streamable.from(async () => {\n const customerAccessToken = await getSessionCustomerAccessToken();\n const currencyCode = await getPreferredCurrencyCode();\n\n const searchParams = await props.searchParams;\n const parsed = CompareParamsSchema.parse(searchParams);\n const productIds = parsed.ids?.filter((id) => !Number.isNaN(id));\n\n const products = await getComparedProducts(productIds, currencyCode, customerAccessToken);\n\n return products.map((product) => {\n return {\n id: product.entityId,\n name: product.name,\n sku: product.sku,\n brand: product.brand?.name ?? '',\n price: product.prices?.price.value ?? 0,\n currency: product.prices?.price.currencyCode ?? '',\n };\n });\n });\n\n return (\n \n \n \n );\n}\n" }, { "path": "core/app/[locale]/(default)/error.tsx", "content": "'use client';\n\nimport { useTranslations } from 'next-intl';\n\nimport { Error as ErrorSection } from '@/vibes/soul/sections/error';\n\ninterface Props {\n error: Error & { digest?: string };\n reset: () => void;\n}\n\nexport default function Error({ reset }: Props) {\n const t = useTranslations('Error');\n\n return (\n \n );\n}\n" }, { "path": "core/app/[locale]/(default)/gift-certificates/balance/_actions/get-gift-certificate-by-code.ts", "content": "'use server';\n\nimport { SubmissionResult } from '@conform-to/react';\nimport { parseWithZod } from '@conform-to/zod';\nimport { getFormatter, getTranslations } from 'next-intl/server';\n\nimport { GiftCertificateData } from '@/vibes/soul/sections/gift-certificate-balance-section';\nimport { giftCertificateCodeSchema } from '@/vibes/soul/sections/gift-certificate-balance-section/schema';\nimport { client } from '~/client';\nimport { graphql, ResultOf } from '~/client/graphql';\nimport { ExistingResultType } from '~/client/util';\n\nimport { GiftCertificateFragment } from '../fragment';\n\ninterface State {\n lastResult: SubmissionResult | null;\n data: GiftCertificateData | null;\n errorMessage?: string;\n}\n\nconst GetGiftCertificateByCodeQuery = graphql(\n `\n query GetGiftCertificateByCode($code: String!) {\n site {\n giftCertificate(code: $code) {\n ...GiftCertificateFragment\n }\n }\n }\n `,\n [GiftCertificateFragment],\n);\n\nfunction transformGiftCertificate(\n giftCertificate: ResultOf,\n format: ExistingResultType,\n): GiftCertificateData | null {\n if (!giftCertificate.amount.formattedV2 || !giftCertificate.balance.formattedV2) {\n return null;\n }\n\n return {\n code: giftCertificate.code,\n currencyCode: giftCertificate.currencyCode,\n status: giftCertificate.status,\n amount: giftCertificate.amount.formattedV2,\n balance: giftCertificate.balance.formattedV2,\n senderName: giftCertificate.sender.name,\n recipientName: giftCertificate.recipient.name,\n purchasedAt: format.dateTime(new Date(giftCertificate.purchasedAt.utc), { dateStyle: 'long' }),\n expiresAt: giftCertificate.expiresAt?.utc\n ? format.dateTime(new Date(giftCertificate.expiresAt.utc), { dateStyle: 'long' })\n : null,\n };\n}\n\nexport async function getGiftCertificateByCode(\n prevState: Awaited,\n formData: FormData,\n): Promise {\n const t = await getTranslations('GiftCertificates.CheckBalance');\n const format = await getFormatter();\n const schema = giftCertificateCodeSchema({ required_error: t('Errors.codeRequired') });\n const submission = parseWithZod(formData, { schema });\n\n if (submission.status !== 'success') {\n return {\n ...prevState,\n lastResult: submission.reply(),\n };\n }\n\n try {\n const { code } = schema.parse(submission.value);\n const response = await client.fetch({\n document: GetGiftCertificateByCodeQuery,\n fetchOptions: { cache: 'no-store' },\n variables: { code },\n });\n\n if (!response.data.site.giftCertificate) {\n return {\n ...prevState,\n lastResult: submission.reply({ formErrors: [t('Errors.invalidCode')] }),\n errorMessage: t('Errors.invalidCode'),\n };\n }\n\n const giftCertificate = transformGiftCertificate(response.data.site.giftCertificate, format);\n\n if (!giftCertificate) {\n return {\n ...prevState,\n lastResult: submission.reply({ formErrors: [t('Errors.somethingWentWrong')] }),\n errorMessage: t('Errors.somethingWentWrong'),\n };\n }\n\n return {\n lastResult: submission.reply(),\n data: giftCertificate,\n };\n } catch (error) {\n // eslint-disable-next-line no-console\n console.error(error);\n\n return {\n ...prevState,\n lastResult: submission.reply({ formErrors: [t('Errors.somethingWentWrong')] }),\n errorMessage: t('Errors.somethingWentWrong'),\n };\n }\n}\n" }, { "path": "core/app/[locale]/(default)/gift-certificates/balance/fragment.ts", "content": "import { graphql } from '~/client/graphql';\n\nexport const GiftCertificateFragment = graphql(`\n fragment GiftCertificateFragment on GiftCertificate {\n code\n currencyCode\n status\n theme\n sender {\n name\n }\n recipient {\n name\n }\n amount {\n value\n formattedV2\n }\n balance {\n value\n formattedV2\n }\n purchasedAt {\n utc\n }\n expiresAt {\n utc\n }\n }\n`);\n" }, { "path": "core/app/[locale]/(default)/gift-certificates/balance/page.tsx", "content": "import type { Metadata } from 'next';\nimport { getTranslations, setRequestLocale } from 'next-intl/server';\n\nimport { GiftCertificateCheckBalanceSection } from '@/vibes/soul/sections/gift-certificate-balance-section';\nimport { redirect } from '~/i18n/routing';\nimport { getPreferredCurrencyCode } from '~/lib/currency';\nimport { getMetadataAlternates } from '~/lib/seo/canonical';\n\nimport { getGiftCertificatesData } from '../page-data';\n\nimport { getGiftCertificateByCode } from './_actions/get-gift-certificate-by-code';\n\ninterface Props {\n params: Promise<{ locale: string }>;\n}\n\nexport async function generateMetadata({ params }: Props): Promise {\n const { locale } = await params;\n\n const t = await getTranslations({ locale, namespace: 'GiftCertificates' });\n\n return {\n title: t('title') || 'Gift certificates - Check balance',\n alternates: await getMetadataAlternates({ path: '/gift-certificates/balance', locale }),\n };\n}\n\nexport default async function GiftCertificates(props: Props) {\n const { locale } = await props.params;\n\n setRequestLocale(locale);\n\n const t = await getTranslations('GiftCertificates');\n const currencyCode = await getPreferredCurrencyCode();\n const data = await getGiftCertificatesData(currencyCode);\n\n if (!data.giftCertificatesEnabled) {\n return redirect({ href: '/', locale });\n }\n\n return (\n \n );\n}\n" }, { "path": "core/app/[locale]/(default)/gift-certificates/page-data.ts", "content": "import { cache } from 'react';\n\nimport { client } from '~/client';\nimport { graphql } from '~/client/graphql';\nimport { revalidate } from '~/client/revalidate-target';\nimport { CurrencyCode } from '~/components/header/fragment';\nimport { StoreLogoFragment } from '~/components/store-logo/fragment';\nimport { logoTransformer } from '~/data-transformers/logo-transformer';\n\nconst GiftCertificatesRootQuery = graphql(\n `\n query GiftCertificatesRootQuery($currencyCode: currencyCode) {\n site {\n settings {\n giftCertificates(currencyCode: $currencyCode) {\n isEnabled\n }\n currency {\n defaultCurrency\n }\n ...StoreLogoFragment\n }\n }\n }\n `,\n [StoreLogoFragment],\n);\n\nexport const getGiftCertificatesData = cache(async (currencyCode?: CurrencyCode) => {\n const response = await client.fetch({\n document: GiftCertificatesRootQuery,\n variables: { currencyCode },\n fetchOptions: { next: { revalidate } },\n });\n\n return {\n giftCertificatesEnabled: response.data.site.settings?.giftCertificates?.isEnabled ?? false,\n defaultCurrency: response.data.site.settings?.currency.defaultCurrency ?? undefined,\n logo: response.data.site.settings ? logoTransformer(response.data.site.settings) : '',\n };\n});\n" }, { "path": "core/app/[locale]/(default)/gift-certificates/page.tsx", "content": "import type { Metadata } from 'next';\nimport { getFormatter, getTranslations, setRequestLocale } from 'next-intl/server';\n\nimport { GiftCertificatesSection } from '@/vibes/soul/sections/gift-certificates-section';\nimport { redirect } from '~/i18n/routing';\nimport { getPreferredCurrencyCode } from '~/lib/currency';\nimport { getMetadataAlternates } from '~/lib/seo/canonical';\n\nimport { getGiftCertificatesData } from './page-data';\n\ninterface Props {\n params: Promise<{ locale: string }>;\n}\n\nexport async function generateMetadata({ params }: Props): Promise {\n const { locale } = await params;\n\n const t = await getTranslations({ locale, namespace: 'GiftCertificates' });\n\n return {\n title: t('title') || 'Gift certificates',\n alternates: await getMetadataAlternates({ path: '/gift-certificates', locale }),\n };\n}\n\nexport default async function GiftCertificates(props: Props) {\n const { locale } = await props.params;\n\n setRequestLocale(locale);\n\n const t = await getTranslations('GiftCertificates');\n const format = await getFormatter();\n const currencyCode = await getPreferredCurrencyCode();\n const data = await getGiftCertificatesData(currencyCode);\n\n if (!data.giftCertificatesEnabled) {\n return redirect({ href: '/', locale });\n }\n\n const exampleBalance = format.number(25.0, {\n style: 'currency',\n currency: currencyCode ?? data.defaultCurrency,\n });\n\n return (\n \n );\n}\n" }, { "path": "core/app/[locale]/(default)/gift-certificates/purchase/_actions/add-to-cart.tsx", "content": "'use server';\n\nimport { BigCommerceGQLError } from '@bigcommerce/catalyst-client';\nimport { SubmissionResult } from '@conform-to/react';\nimport { parseWithZod } from '@conform-to/zod';\nimport { getFormatter, getTranslations } from 'next-intl/server';\nimport { ReactNode } from 'react';\nimport { z } from 'zod';\n\nimport { DynamicFormActionArgs } from '@/vibes/soul/form/dynamic-form';\nimport { Field } from '@/vibes/soul/form/dynamic-form/schema';\nimport { client } from '~/client';\nimport { graphql, ResultOf } from '~/client/graphql';\nimport { ExistingResultType } from '~/client/util';\nimport { Link } from '~/components/link';\nimport { addToOrCreateCart } from '~/lib/cart';\nimport { MissingCartError } from '~/lib/cart/error';\nimport { getPreferredCurrencyCode } from '~/lib/currency';\n\nimport { GiftCertificateSettingsFragment } from '../fragment';\n\ninterface State {\n lastResult: SubmissionResult | null;\n successMessage?: ReactNode;\n}\n\nconst GiftCertificateSettingsQuery = graphql(\n `\n query GiftCertificateSettings($currencyCode: currencyCode) {\n site {\n settings {\n giftCertificates(currencyCode: $currencyCode) {\n ...GiftCertificateSettingsFragment\n }\n }\n }\n }\n `,\n [GiftCertificateSettingsFragment],\n);\n\nconst schema = (\n giftCertificateSettings: ResultOf | undefined,\n t: ExistingResultType>,\n) => {\n return z\n .object({\n senderName: z.string(),\n senderEmail: z.string().email(),\n recipientName: z.string(),\n recipientEmail: z.string().email(),\n message: z.string().optional(),\n amount: z.number({\n required_error: t('Form.Errors.amountRequired'),\n invalid_type_error: t('Form.Errors.amountInvalid'),\n }),\n })\n .superRefine((data, ctx) => {\n if (!giftCertificateSettings) {\n ctx.addIssue({\n code: z.ZodIssueCode.custom,\n message: t('Form.Errors.unexpectedSettingsError'),\n });\n\n return;\n }\n\n if (\n 'minimumAmount' in giftCertificateSettings &&\n 'maximumAmount' in giftCertificateSettings\n ) {\n const min = giftCertificateSettings.minimumAmount.value;\n const max = giftCertificateSettings.maximumAmount.value;\n\n if (data.amount < min || data.amount > max) {\n ctx.addIssue({\n code: z.ZodIssueCode.custom,\n path: ['amount'],\n message: t('Form.Errors.amountOutOfRange', {\n minAmount: String(min),\n maxAmount: String(max),\n }),\n });\n\n return;\n }\n }\n\n if ('amounts' in giftCertificateSettings) {\n const validAmounts = giftCertificateSettings.amounts.map((amt) => amt.value);\n\n if (!validAmounts.includes(data.amount)) {\n ctx.addIssue({\n code: z.ZodIssueCode.custom,\n path: ['amount'],\n message: t('Form.Errors.amountInvalid'),\n });\n }\n }\n });\n};\n\nexport async function addGiftCertificateToCart(\n _args: DynamicFormActionArgs,\n _prevState: State,\n formData: FormData,\n): Promise {\n const t = await getTranslations('GiftCertificates.Purchase');\n const format = await getFormatter();\n const currencyCode = await getPreferredCurrencyCode();\n const settingsResp = await client.fetch({\n document: GiftCertificateSettingsQuery,\n variables: { currencyCode },\n });\n\n const submission = parseWithZod(formData, {\n schema: schema(settingsResp.data.site.settings?.giftCertificates ?? undefined, t),\n });\n\n if (submission.status !== 'success') {\n return { lastResult: submission.reply() };\n }\n\n const amountFormatted = format.number(submission.value.amount, {\n style: 'currency',\n currency: currencyCode,\n });\n\n try {\n await addToOrCreateCart({\n giftCertificates: [\n {\n name: `${amountFormatted} Gift Certificate`,\n sender: {\n name: submission.value.senderName,\n email: submission.value.senderEmail,\n },\n recipient: {\n name: submission.value.recipientName,\n email: submission.value.recipientEmail,\n },\n message: submission.value.message ?? undefined,\n theme: 'GENERAL',\n amount: submission.value.amount,\n quantity: 1,\n },\n ],\n });\n\n return {\n lastResult: submission.reply(),\n successMessage: t.rich('successMessage', {\n cartLink: (chunks) => (\n \n {chunks}\n \n ),\n }),\n };\n } catch (error) {\n // eslint-disable-next-line no-console\n console.error(error);\n\n if (error instanceof BigCommerceGQLError) {\n return {\n lastResult: submission.reply({\n formErrors: error.errors.map(({ message }) => {\n return message;\n }),\n }),\n };\n }\n\n if (error instanceof MissingCartError) {\n return {\n lastResult: submission.reply({ formErrors: [t('missingCart')] }),\n };\n }\n\n if (error instanceof Error) {\n return {\n lastResult: submission.reply({ formErrors: [error.message] }),\n };\n }\n\n return {\n lastResult: submission.reply({ formErrors: [t('unknownError')] }),\n };\n }\n}\n" }, { "path": "core/app/[locale]/(default)/gift-certificates/purchase/fragment.ts", "content": "import { graphql } from '~/client/graphql';\n\nexport const GiftCertificateSettingsFragment = graphql(`\n fragment GiftCertificateSettingsFragment on GiftCertificateSettings {\n __typename\n isEnabled\n currencyCode\n expiry {\n unit\n value\n }\n ... on FixedAmountGiftCertificateSettings {\n amounts {\n value\n formattedV2\n }\n }\n ... on CustomAmountGiftCertificateSettings {\n minimumAmount {\n value\n formattedV2\n }\n maximumAmount {\n value\n formattedV2\n }\n }\n }\n`);\n" }, { "path": "core/app/[locale]/(default)/gift-certificates/purchase/page-data.ts", "content": "import { cache } from 'react';\n\nimport { client } from '~/client';\nimport { graphql } from '~/client/graphql';\nimport { revalidate } from '~/client/revalidate-target';\nimport { CurrencyCode } from '~/components/header/fragment';\nimport { StoreLogoFragment } from '~/components/store-logo/fragment';\nimport { logoTransformer } from '~/data-transformers/logo-transformer';\n\nimport { GiftCertificateSettingsFragment } from './fragment';\n\nconst GiftCertificatePurchaseSettingsQuery = graphql(\n `\n query GiftCertificatePurchaseSettingsQuery($currencyCode: currencyCode) {\n site {\n settings {\n giftCertificates(currencyCode: $currencyCode) {\n ...GiftCertificateSettingsFragment\n }\n currency {\n defaultCurrency\n }\n storeName\n ...StoreLogoFragment\n }\n }\n }\n `,\n [GiftCertificateSettingsFragment, StoreLogoFragment],\n);\n\nexport const getGiftCertificatePurchaseData = cache(async (currencyCode?: CurrencyCode) => {\n const response = await client.fetch({\n document: GiftCertificatePurchaseSettingsQuery,\n variables: { currencyCode },\n fetchOptions: { next: { revalidate } },\n });\n\n return {\n giftCertificateSettings: response.data.site.settings?.giftCertificates ?? null,\n logo: response.data.site.settings ? logoTransformer(response.data.site.settings) : '',\n storeName: response.data.site.settings?.storeName ?? undefined,\n defaultCurrency: response.data.site.settings?.currency.defaultCurrency ?? undefined,\n };\n});\n" }, { "path": "core/app/[locale]/(default)/gift-certificates/purchase/page.tsx", "content": "import { ResultOf } from 'gql.tada';\nimport { Metadata } from 'next';\nimport { getFormatter, getTranslations } from 'next-intl/server';\n\nimport { Field, FieldGroup } from '@/vibes/soul/form/dynamic-form/schema';\nimport { GiftCertificatePurchaseSection } from '@/vibes/soul/sections/gift-certificate-purchase-section';\nimport { GiftCertificateSettingsFragment } from '~/app/[locale]/(default)/gift-certificates/purchase/fragment';\nimport { ExistingResultType } from '~/client/util';\nimport { redirect } from '~/i18n/routing';\nimport { getPreferredCurrencyCode } from '~/lib/currency';\nimport { getMetadataAlternates } from '~/lib/seo/canonical';\n\nimport { addGiftCertificateToCart } from './_actions/add-to-cart';\nimport { getGiftCertificatePurchaseData } from './page-data';\n\ninterface Props {\n params: Promise<{ locale: string }>;\n}\n\nexport async function generateMetadata({ params }: Props): Promise {\n const { locale } = await params;\n\n const t = await getTranslations({ locale, namespace: 'GiftCertificates' });\n\n return {\n title: t('Purchase.title'),\n alternates: await getMetadataAlternates({ path: '/gift-certificates/purchase', locale }),\n };\n}\n\nfunction getFields(\n giftCertificateSettings: ResultOf,\n expiresAt: string | undefined,\n t: ExistingResultType>,\n): Array> {\n const baseFields: Array> = [\n [\n {\n type: 'text',\n name: 'senderName',\n label: t('Purchase.Form.senderNameLabel'),\n required: true,\n },\n {\n type: 'email',\n name: 'senderEmail',\n label: t('Purchase.Form.senderEmailLabel'),\n required: true,\n },\n ],\n [\n {\n type: 'text',\n name: 'recipientName',\n label: t('Purchase.Form.recipientNameLabel'),\n required: true,\n },\n {\n type: 'email',\n name: 'recipientEmail',\n label: t('Purchase.Form.recipientEmailLabel'),\n required: true,\n },\n ],\n {\n type: 'textarea',\n name: 'message',\n label: t('Purchase.Form.messageLabel'),\n required: false,\n },\n {\n type: 'checkbox',\n name: 'nonRefundable',\n label: t('Purchase.Form.nonRefundableCheckboxLabel'),\n required: true,\n },\n ];\n\n if (expiresAt) {\n baseFields.push({\n type: 'checkbox',\n name: 'expirationConsent',\n label: t('Purchase.Form.expiryCheckboxLabel', { expiryDate: expiresAt }),\n required: true,\n });\n }\n\n const amountFields: Array> =\n giftCertificateSettings.__typename === 'CustomAmountGiftCertificateSettings'\n ? [\n {\n type: 'text',\n name: 'amount',\n label: t('Purchase.Form.customAmountLabel', {\n minAmount: String(giftCertificateSettings.minimumAmount.value),\n maxAmount: String(giftCertificateSettings.maximumAmount.value),\n }),\n pattern: '^[0-9]*\\\\.?[0-9]+$',\n required: true,\n },\n ]\n : [\n {\n type: 'select',\n name: 'amount',\n label: t('Purchase.Form.amountLabel'),\n defaultValue: '0',\n options: [\n {\n label: t('Purchase.Form.selectAmountPlaceholder'),\n value: '0',\n },\n ...giftCertificateSettings.amounts.map((amount) => ({\n label: amount.formattedV2 ?? '',\n value: String(amount.value),\n })),\n ],\n required: true,\n },\n ];\n\n return [...amountFields, ...baseFields];\n}\n\nfunction getExpiryDate(\n expiry: ResultOf['expiry'],\n): number | undefined {\n if (!expiry?.unit || !expiry.value) {\n return undefined;\n }\n\n switch (expiry.unit) {\n case 'DAYS':\n return Date.now() + expiry.value * 24 * 60 * 60 * 1000;\n\n case 'WEEKS':\n return Date.now() + expiry.value * 7 * 24 * 60 * 60 * 1000;\n\n case 'MONTHS':\n return Date.now() + expiry.value * 30 * 24 * 60 * 60 * 1000;\n\n case 'YEARS':\n return Date.now() + expiry.value * 365 * 24 * 60 * 60 * 1000;\n\n default:\n return undefined;\n }\n}\n\nexport default async function GiftCertificatePurchasePage({ params }: Props) {\n const { locale } = await params;\n\n const t = await getTranslations({ locale, namespace: 'GiftCertificates' });\n const format = await getFormatter();\n const currencyCode = await getPreferredCurrencyCode();\n const data = await getGiftCertificatePurchaseData(currencyCode);\n\n if (!data.giftCertificateSettings?.isEnabled) {\n return redirect({ href: '/', locale });\n }\n\n const expiryDate = getExpiryDate(data.giftCertificateSettings.expiry);\n const expiresAt = expiryDate ? format.dateTime(expiryDate, { dateStyle: 'long' }) : undefined;\n const fields = getFields(data.giftCertificateSettings, expiresAt, t);\n\n return (\n \n );\n}\n" }, { "path": "core/app/[locale]/(default)/layout.tsx", "content": "import { setRequestLocale } from 'next-intl/server';\nimport { PropsWithChildren } from 'react';\n\nimport { Footer } from '~/components/footer';\nimport { Header } from '~/components/header';\n\ninterface Props extends PropsWithChildren {\n params: Promise<{ locale: string }>;\n}\n\nexport default async function DefaultLayout({ params, children }: Props) {\n const { locale } = await params;\n\n setRequestLocale(locale);\n\n return (\n <>\n

\n\n

{children}

\n\n

\n ),\n },\n ]\n : []),\n ];\n });\n\n const streameableRelatedProducts = Streamable.from(async () => {\n const product = await streamableProductPricingAndRelatedProducts;\n\n if (!product) {\n return [];\n }\n\n const relatedProducts = removeEdgesAndNodes(product.relatedProducts);\n\n return productCardTransformer(relatedProducts, format);\n });\n\n const streamableMinQuantity = Streamable.from(async () => {\n const product = await streamableProduct;\n\n return product.minPurchaseQuantity;\n });\n\n const streamableMaxQuantity = Streamable.from(async () => {\n const product = await streamableProduct;\n\n return product.maxPurchaseQuantity;\n });\n\n const streamableAnalyticsData = Streamable.from(async () => {\n const [extendedProduct, pricingProduct] = await Streamable.all([\n streamableProduct,\n streamableProductPricingAndRelatedProducts,\n ]);\n\n return {\n id: extendedProduct.entityId,\n name: extendedProduct.name,\n sku: extendedProduct.sku,\n brand: extendedProduct.brand?.name ?? '',\n price: pricingProduct?.prices?.price.value ?? 0,\n currency: pricingProduct?.prices?.price.currencyCode ?? '',\n };\n });\n\n const streamableUser = Streamable.from(async () => {\n const session = await auth();\n const firstName = session?.user?.firstName ?? '';\n const lastName = session?.user?.lastName ?? '';\n\n if (!firstName || !lastName) {\n return { email: session?.user?.email ?? '', name: '' };\n }\n\n const lastInitial = lastName.charAt(0).toUpperCase();\n const obfuscatedName = `${firstName} ${lastInitial}.`;\n\n return { email: session?.user?.email ?? '', name: obfuscatedName };\n });\n\n return (\n <>\n \n \n }\n additionalInformationTitle={t('ProductDetails.additionalInformation')}\n ctaDisabled={streameableCtaDisabled}\n ctaLabel={streameableCtaLabel}\n decrementLabel={t('ProductDetails.decreaseQuantity')}\n emptySelectPlaceholder={t('ProductDetails.emptySelectPlaceholder')}\n fields={productOptionsTransformer(baseProduct.productOptions)}\n incrementLabel={t('ProductDetails.increaseQuantity')}\n loadMoreImagesAction={getMoreProductImages}\n prefetch={true}\n product={{\n id: baseProduct.entityId.toString(),\n title: baseProduct.name,\n description:

,\n href: baseProduct.path,\n images: streamableImages,\n price: streamablePrices,\n reviewsEnabled,\n showRating,\n numberOfReviews: baseProduct.reviewSummary.numberOfReviews,\n subtitle: baseProduct.brand?.name,\n rating: baseProduct.reviewSummary.averageRating,\n accordions: streameableAccordions,\n minQuantity: streamableMinQuantity,\n maxQuantity: streamableMaxQuantity,\n stockDisplayData: streamableStockDisplayData,\n backorderDisplayData: streamableBackorderDisplayData,\n }}\n quantityLabel={t('ProductDetails.quantity')}\n recaptchaSiteKey={recaptchaSiteKey}\n reviewFormAction={submitReview}\n thumbnailLabel={t('ProductDetails.thumbnail')}\n user={streamableUser}\n />\n \n\n \n\n {showRating && (\n

\n \n

\n )}\n\n \n Streamable.all([streamableProduct, streamableProductPricingAndRelatedProducts]),\n )}\n >\n {([extendedProduct, pricingProduct]) => (\n <>\n \n \n \n )}\n \n\n \n \n );\n}\n" }, { "path": "core/app/[locale]/(default)/webpages/[id]/_components/web-page.tsx", "content": "import { Stream, Streamable } from '@/vibes/soul/lib/streamable';\nimport { Breadcrumb, Breadcrumbs, BreadcrumbsSkeleton } from '@/vibes/soul/sections/breadcrumbs';\n\nexport interface WebPage {\n title: string;\n content: string;\n breadcrumbs: Breadcrumb[];\n seo: {\n pageTitle: string;\n metaDescription: string;\n metaKeywords: string;\n };\n}\n\ninterface Props {\n webPage: Streamable;\n breadcrumbs?: Streamable;\n children?: React.ReactNode;\n}\n\nexport function WebPageContent({ webPage: streamableWebPage, breadcrumbs, children }: Props) {\n return (\n

\n } value={streamableWebPage}>\n {(webPage) => {\n const { title, content } = webPage;\n\n return (\n <>\n

\n {breadcrumbs && }\n\n

\n {title}\n

\n\n \n {children}\n \n );\n }}\n \n

\n );\n}\n\nfunction WebPageTitleSkeleton() {\n return (\n

\n );\n}\n\nfunction WebPageBodySkeleton() {\n return (\n

\n );\n}\n\nfunction WebPageContentSkeleton() {\n return (\n

\n \n \n

\n \n

\n );\n}\n" }, { "path": "core/app/[locale]/(default)/webpages/[id]/contact/_actions/submit-contact-form.ts", "content": "'use server';\n\nimport { BigCommerceGQLError } from '@bigcommerce/catalyst-client';\nimport { SubmissionResult } from '@conform-to/react';\nimport { parseWithZod } from '@conform-to/zod';\nimport { getLocale, getTranslations } from 'next-intl/server';\nimport { z } from 'zod';\n\nimport { DynamicFormActionArgs } from '@/vibes/soul/form/dynamic-form';\nimport { Field, schema } from '@/vibes/soul/form/dynamic-form/schema';\nimport { client } from '~/client';\nimport { graphql, VariablesOf } from '~/client/graphql';\nimport { redirect } from '~/i18n/routing';\nimport { assertRecaptchaTokenPresent, getRecaptchaFromForm } from '~/lib/recaptcha';\n\nconst inputSchema = z.object({\n data: z.object({\n companyName: z.string().optional(),\n fullName: z.string().optional(),\n phoneNumber: z.string().optional(),\n orderNumber: z.string().optional(),\n rmaNumber: z.string().optional(),\n email: z.string().email(),\n comments: z.string().trim(),\n }),\n pageEntityId: z.number(),\n});\n\nconst SubmitContactUsMutation = graphql(`\n mutation SubmitContactUsMutation($input: SubmitContactUsInput!, $reCaptchaV2: ReCaptchaV2Input) {\n submitContactUs(input: $input, reCaptchaV2: $reCaptchaV2) {\n __typename\n errors {\n __typename\n ... on Error {\n message\n }\n }\n }\n }\n`);\n\nfunction parseContactFormInput(\n value: Record,\n): VariablesOf['input'] {\n const mappedInput = {\n data: {\n companyName: value.companyname,\n fullName: value.fullname,\n phoneNumber: value.phone,\n orderNumber: value.orderno,\n rmaNumber: value.rma,\n email: value.email,\n comments: value.comments,\n },\n pageEntityId: Number(value.pageId),\n };\n\n return inputSchema.parse(mappedInput);\n}\n\nexport async function submitContactForm(\n { fields }: DynamicFormActionArgs,\n _prevState: { lastResult: SubmissionResult | null },\n formData: FormData,\n) {\n const t = await getTranslations('WebPages.ContactUs.Form');\n const locale = await getLocale();\n\n const submission = parseWithZod(formData, { schema: schema(fields) });\n\n if (submission.status !== 'success') {\n return {\n lastResult: submission.reply(),\n };\n }\n\n const { siteKey, token } = await getRecaptchaFromForm(formData);\n const recaptchaValidation = assertRecaptchaTokenPresent(siteKey, token, t('recaptchaRequired'));\n\n if (!recaptchaValidation.success) {\n return {\n lastResult: submission.reply({ formErrors: recaptchaValidation.formErrors }),\n };\n }\n\n try {\n const input = parseContactFormInput(submission.value);\n const response = await client.fetch({\n document: SubmitContactUsMutation,\n variables: {\n input,\n reCaptchaV2:\n recaptchaValidation.token != null ? { token: recaptchaValidation.token } : undefined,\n },\n fetchOptions: { cache: 'no-store' },\n });\n\n const result = response.data.submitContactUs;\n\n if (result.errors.length > 0) {\n return {\n lastResult: submission.reply({ formErrors: result.errors.map((error) => error.message) }),\n };\n }\n } catch (error) {\n // eslint-disable-next-line no-console\n console.error(error);\n\n if (error instanceof BigCommerceGQLError) {\n return {\n lastResult: submission.reply({\n formErrors: error.errors.map(({ message }) => message),\n }),\n };\n }\n\n if (error instanceof Error) {\n return {\n lastResult: submission.reply({ formErrors: [error.message] }),\n };\n }\n\n return {\n lastResult: submission.reply({ formErrors: [t('somethingWentWrong')] }),\n };\n }\n\n return redirect({\n href: {\n pathname: String(submission.value.pagePath),\n query: { success: 'true' },\n },\n locale,\n });\n}\n" }, { "path": "core/app/[locale]/(default)/webpages/[id]/contact/page-data.ts", "content": "import { cache } from 'react';\n\nimport { client } from '~/client';\nimport { graphql, VariablesOf } from '~/client/graphql';\nimport { revalidate } from '~/client/revalidate-target';\nimport { BreadcrumbsWebPageFragment } from '~/components/breadcrumbs/fragment';\n\nconst ContactPageQuery = graphql(\n `\n query ContactPageQuery($id: ID!) {\n node(id: $id) {\n __typename\n ... on ContactPage {\n entityId\n name\n ...BreadcrumbsFragment\n path\n contactFields\n htmlBody\n seo {\n pageTitle\n metaKeywords\n metaDescription\n }\n }\n }\n }\n `,\n [BreadcrumbsWebPageFragment],\n);\n\ntype Variables = VariablesOf;\n\nexport const getWebpageData = cache(async (variables: Variables) => {\n const { data } = await client.fetch({\n document: ContactPageQuery,\n variables,\n fetchOptions: { next: { revalidate } },\n });\n\n return data;\n});\n" }, { "path": "core/app/[locale]/(default)/webpages/[id]/contact/page.tsx", "content": "import type { Metadata } from 'next';\nimport { notFound } from 'next/navigation';\nimport { getTranslations, setRequestLocale } from 'next-intl/server';\nimport { cache } from 'react';\n\nimport { DynamicForm } from '@/vibes/soul/form/dynamic-form';\nimport type { Field, FieldGroup } from '@/vibes/soul/form/dynamic-form/schema';\nimport { Streamable } from '@/vibes/soul/lib/streamable';\nimport { ButtonLink } from '@/vibes/soul/primitives/button-link';\nimport { Breadcrumb } from '@/vibes/soul/sections/breadcrumbs';\nimport {\n breadcrumbsTransformer,\n truncateBreadcrumbs,\n} from '~/data-transformers/breadcrumbs-transformer';\nimport { getRecaptchaSiteKey } from '~/lib/recaptcha';\nimport { getMetadataAlternates } from '~/lib/seo/canonical';\n\nimport { WebPage, WebPageContent } from '../_components/web-page';\n\nimport { submitContactForm } from './_actions/submit-contact-form';\nimport { getWebpageData } from './page-data';\n\ninterface Props {\n params: Promise<{ id: string; locale: string }>;\n searchParams: Promise<{ success?: string }>;\n}\n\ninterface ContactPage extends WebPage {\n entityId: number;\n path: string;\n contactFields: string[];\n}\n\nconst fieldMapping = {\n fullname: 'fullName',\n companyname: 'companyName',\n phone: 'phone',\n orderno: 'orderNo',\n rma: 'rma',\n} as const;\n\ntype ContactField = keyof typeof fieldMapping;\n\nconst getWebPage = cache(async (id: string): Promise => {\n const data = await getWebpageData({ id: decodeURIComponent(id) });\n const webpage = data.node?.__typename === 'ContactPage' ? data.node : null;\n\n if (!webpage) {\n return notFound();\n }\n\n const breadcrumbs = breadcrumbsTransformer(webpage.breadcrumbs);\n\n return {\n entityId: webpage.entityId,\n title: webpage.name,\n path: webpage.path,\n breadcrumbs,\n content: webpage.htmlBody,\n contactFields: webpage.contactFields,\n seo: webpage.seo,\n };\n});\n\nasync function getWebPageBreadcrumbs(id: string): Promise {\n const t = await getTranslations('WebPages.ContactUs');\n\n const webpage = await getWebPage(id);\n const [, ...rest] = webpage.breadcrumbs.reverse();\n const breadcrumbs = [\n {\n label: t('home'),\n href: '/',\n },\n ...rest.reverse(),\n {\n label: webpage.title,\n href: '#',\n },\n ];\n\n return truncateBreadcrumbs(breadcrumbs, 5);\n}\n\nasync function getWebPageWithSuccessContent(id: string, message: string) {\n const webpage = await getWebPage(id);\n\n return {\n ...webpage,\n content: message,\n };\n}\n\nasync function getContactFields(id: string) {\n const t = await getTranslations('WebPages.ContactUs.Form');\n const { entityId, path, contactFields } = await getWebPage(id);\n const toGroupsOfTwo = (fields: Field[]) =>\n fields.reduce>>((acc, _, i) => {\n if (i % 2 === 0) {\n acc.push(fields.slice(i, i + 2));\n }\n\n return acc;\n }, []);\n\n const pageIdField: Field = {\n id: 'pageId',\n name: 'pageId',\n type: 'hidden',\n label: 'Page ID',\n defaultValue: String(entityId),\n };\n\n // Used for redirect to self with query params\n const pagePathField: Field = {\n id: 'pagePath',\n name: 'pagePath',\n type: 'hidden',\n label: 'Page Path',\n defaultValue: path,\n };\n\n const emailField: Field = {\n id: 'email',\n name: 'email',\n label: `${t('email')} *`,\n type: 'email',\n required: true,\n };\n\n const commentsField: Field = {\n id: 'comments',\n name: 'comments',\n label: `${t('comments')} *`,\n type: 'textarea',\n required: true,\n };\n\n const optionalFields = contactFields\n .filter((field): field is ContactField => Object.hasOwn(fieldMapping, field))\n .map((field) => ({\n id: field,\n name: field,\n label: t(fieldMapping[field]),\n type: 'text',\n required: false,\n }));\n\n return [\n ...toGroupsOfTwo([emailField, ...optionalFields]),\n commentsField,\n pageIdField,\n pagePathField,\n ];\n}\n\nexport async function generateMetadata({ params }: Props): Promise {\n const { id, locale } = await params;\n const webpage = await getWebPage(id);\n const { pageTitle, metaDescription, metaKeywords } = webpage.seo;\n\n return {\n title: pageTitle || webpage.title,\n ...(metaDescription && { description: metaDescription }),\n ...(metaKeywords && { keywords: metaKeywords.split(',') }),\n ...(webpage.path && {\n alternates: await getMetadataAlternates({ path: webpage.path, locale }),\n }),\n };\n}\n\nexport default async function ContactPage({ params, searchParams }: Props) {\n const { id, locale } = await params;\n const { success } = await searchParams;\n\n setRequestLocale(locale);\n\n const t = await getTranslations('WebPages.ContactUs.Form');\n\n if (success === 'true') {\n return (\n getWebPageBreadcrumbs(id))}\n webPage={Streamable.from(() => getWebPageWithSuccessContent(id, t('success')))}\n >\n \n {t('successCta')}\n \n \n );\n }\n\n const recaptchaSiteKey = await getRecaptchaSiteKey();\n\n return (\n getWebPageBreadcrumbs(id))}\n webPage={Streamable.from(() => getWebPage(id))}\n >\n

\n \n

\n \n );\n}\n" }, { "path": "core/app/[locale]/(default)/webpages/[id]/layout.tsx", "content": "import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';\nimport { setRequestLocale } from 'next-intl/server';\nimport { cache } from 'react';\n\nimport { SidebarMenu } from '@/vibes/soul/sections/sidebar-menu';\nimport { StickySidebarLayout } from '@/vibes/soul/sections/sticky-sidebar-layout';\nimport { client } from '~/client';\nimport { graphql } from '~/client/graphql';\nimport { revalidate } from '~/client/revalidate-target';\n\ninterface Props extends React.PropsWithChildren {\n params: Promise<{ locale: string; id: string }>;\n}\n\nconst WebPageChildrenQuery = graphql(`\n query WebPageChildrenQuery($id: ID!) {\n node(id: $id) {\n ... on WebPage {\n children(first: 20) {\n edges {\n node {\n name\n ... on NormalPage {\n path\n }\n ... on ContactPage {\n path\n }\n ... on RawHtmlPage {\n path\n }\n ... on ExternalLinkPage {\n link\n }\n }\n }\n }\n }\n }\n }\n`);\n\ninterface PageLink {\n label: string;\n href: string;\n}\n\nconst getWebPageChildren = cache(async (id: string): Promise => {\n const { data } = await client.fetch({\n document: WebPageChildrenQuery,\n variables: { id: decodeURIComponent(id) },\n fetchOptions: { next: { revalidate } },\n });\n\n if (!data.node) {\n return [];\n }\n\n if (!('children' in data.node)) {\n return [];\n }\n\n const { children } = data.node;\n\n return removeEdgesAndNodes(children).reduce((acc: PageLink[], child) => {\n if ('path' in child) {\n return [...acc, { label: child.name, href: child.path }];\n }\n\n if ('link' in child) {\n return [...acc, { label: child.name, href: child.link }];\n }\n\n return acc;\n }, []);\n});\n\nexport default async function WebPageLayout({ params, children }: Props) {\n const { locale, id } = await params;\n\n setRequestLocale(locale);\n\n return (\n }\n sidebarSize=\"small\"\n >\n {children}\n \n );\n}\n" }, { "path": "core/app/[locale]/(default)/webpages/[id]/normal/page-data.ts", "content": "import { cache } from 'react';\n\nimport { client } from '~/client';\nimport { graphql, VariablesOf } from '~/client/graphql';\nimport { revalidate } from '~/client/revalidate-target';\nimport { BreadcrumbsWebPageFragment } from '~/components/breadcrumbs/fragment';\n\nconst NormalPageQuery = graphql(\n `\n query NormalPageQuery($id: ID!) {\n node(id: $id) {\n ... on NormalPage {\n __typename\n name\n ...BreadcrumbsFragment\n htmlBody\n entityId\n seo {\n pageTitle\n metaDescription\n metaKeywords\n }\n }\n }\n }\n `,\n [BreadcrumbsWebPageFragment],\n);\n\ntype Variables = VariablesOf;\n\nexport const getWebpageData = cache(async (variables: Variables) => {\n const { data } = await client.fetch({\n document: NormalPageQuery,\n variables,\n fetchOptions: { next: { revalidate } },\n });\n\n return data;\n});\n" }, { "path": "core/app/[locale]/(default)/webpages/[id]/normal/page.tsx", "content": "import type { Metadata } from 'next';\nimport { notFound } from 'next/navigation';\nimport { getTranslations, setRequestLocale } from 'next-intl/server';\nimport { cache } from 'react';\n\nimport { Streamable } from '@/vibes/soul/lib/streamable';\nimport { Breadcrumb } from '@/vibes/soul/sections/breadcrumbs';\nimport {\n breadcrumbsTransformer,\n truncateBreadcrumbs,\n} from '~/data-transformers/breadcrumbs-transformer';\nimport { getMetadataAlternates } from '~/lib/seo/canonical';\n\nimport { WebPageContent, WebPage as WebPageData } from '../_components/web-page';\n\nimport { getWebpageData } from './page-data';\n\ninterface Props {\n params: Promise<{ locale: string; id: string }>;\n}\n\nconst getWebPage = cache(async (id: string): Promise => {\n const data = await getWebpageData({ id: decodeURIComponent(id) });\n const webpage = data.node?.__typename === 'NormalPage' ? data.node : null;\n\n if (!webpage) {\n return notFound();\n }\n\n const breadcrumbs = breadcrumbsTransformer(webpage.breadcrumbs);\n\n return {\n title: webpage.name,\n breadcrumbs,\n content: webpage.htmlBody,\n seo: webpage.seo,\n };\n});\n\nasync function getWebPageBreadcrumbs(id: string): Promise {\n const t = await getTranslations('WebPages.Normal');\n\n const webpage = await getWebPage(id);\n const [, ...rest] = webpage.breadcrumbs.reverse();\n const breadcrumbs = [\n {\n label: t('home'),\n href: '/',\n },\n ...rest.reverse(),\n {\n label: webpage.title,\n href: '#',\n },\n ];\n\n return truncateBreadcrumbs(breadcrumbs, 5);\n}\n\nexport async function generateMetadata({ params }: Props): Promise {\n const { id, locale } = await params;\n const webpage = await getWebPage(id);\n const { pageTitle, metaDescription, metaKeywords } = webpage.seo;\n\n // Get the path from the last breadcrumb\n const pagePath = webpage.breadcrumbs[webpage.breadcrumbs.length - 1]?.href;\n\n return {\n title: pageTitle || webpage.title,\n ...(metaDescription && { description: metaDescription }),\n ...(metaKeywords && { keywords: metaKeywords.split(',') }),\n ...(pagePath && { alternates: await getMetadataAlternates({ path: pagePath, locale }) }),\n };\n}\n\nexport default async function WebPage({ params }: Props) {\n const { locale, id } = await params;\n\n setRequestLocale(locale);\n\n return (\n getWebPageBreadcrumbs(id))}\n webPage={Streamable.from(() => getWebPage(id))}\n />\n );\n}\n" }, { "path": "core/app/[locale]/(default)/wishlist/[token]/page-data.ts", "content": "import { cache } from 'react';\n\nimport { client } from '~/client';\nimport { PaginationFragment } from '~/client/fragments/pagination';\nimport { graphql } from '~/client/graphql';\nimport { revalidate } from '~/client/revalidate-target';\nimport { TAGS } from '~/client/tags';\nimport { ProductCardFragment } from '~/components/product-card/fragment';\nimport { WishlistItemFragment } from '~/components/wishlist/fragment';\nimport { getPreferredCurrencyCode } from '~/lib/currency';\n\nconst PublicWishlistQuery = graphql(\n `\n query PublicWishlistQuery(\n $first: Int\n $after: String\n $last: Int\n $before: String\n $token: String!\n $currencyCode: currencyCode\n ) {\n site {\n publicWishlist(token: $token) {\n entityId\n name\n token\n items(first: $first, after: $after, last: $last, before: $before) {\n edges {\n node {\n ...WishlistItemFragment\n }\n }\n pageInfo {\n ...PaginationFragment\n }\n collectionInfo {\n totalItems\n }\n }\n }\n }\n }\n `,\n [WishlistItemFragment, ProductCardFragment, PaginationFragment],\n);\n\ninterface Pagination {\n limit?: number;\n before?: string | null;\n after?: string | null;\n}\n\nexport const getPublicWishlist = cache(async (token: string, pagination: Pagination) => {\n const { before, after, limit = 9 } = pagination;\n const currencyCode = await getPreferredCurrencyCode();\n const paginationArgs = before ? { last: limit, before } : { first: limit, after };\n const response = await client.fetch({\n document: PublicWishlistQuery,\n variables: { ...paginationArgs, currencyCode, token },\n // Since the wishlist is public, it's okay that we cache this request\n fetchOptions: { next: { revalidate, tags: [TAGS.customer] } },\n });\n\n const wishlist = response.data.site.publicWishlist;\n\n if (!wishlist) {\n return null;\n }\n\n return wishlist;\n});\n" }, { "path": "core/app/[locale]/(default)/wishlist/[token]/page.tsx", "content": "import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';\nimport { Metadata } from 'next';\nimport { notFound } from 'next/navigation';\nimport { getFormatter, getTranslations, setRequestLocale } from 'next-intl/server';\nimport { SearchParams } from 'nuqs';\nimport { createSearchParamsCache, parseAsInteger, parseAsString } from 'nuqs/server';\n\nimport { Streamable } from '@/vibes/soul/lib/streamable';\nimport { CursorPaginationInfo } from '@/vibes/soul/primitives/cursor-pagination';\nimport { Breadcrumb, Breadcrumbs } from '@/vibes/soul/sections/breadcrumbs';\nimport { SectionLayout } from '@/vibes/soul/sections/section-layout';\nimport { Wishlist, WishlistDetails } from '@/vibes/soul/sections/wishlist-details';\nimport { addWishlistItemToCart } from '~/app/[locale]/(default)/account/wishlists/[id]/_actions/add-to-cart';\nimport { WishlistAnalyticsProvider } from '~/app/[locale]/(default)/account/wishlists/[id]/_components/wishlist-analytics-provider';\nimport { ExistingResultType } from '~/client/util';\nimport {\n WishlistShareButton,\n WishlistShareButtonSkeleton,\n} from '~/components/wishlist/share-button';\nimport { defaultPageInfo, pageInfoTransformer } from '~/data-transformers/page-info-transformer';\nimport { publicWishlistDetailsTransformer } from '~/data-transformers/wishlists-transformer';\nimport { getMetadataAlternates } from '~/lib/seo/canonical';\nimport { isMobileUser } from '~/lib/user-agent';\n\nimport { getPublicWishlist } from './page-data';\n\ninterface Props {\n params: Promise<{ locale: string; token: string }>;\n searchParams: Promise;\n}\n\nconst defaultWishlistItemsLimit = 12;\nconst searchParamsCache = createSearchParamsCache({\n tag: parseAsString,\n before: parseAsString,\n after: parseAsString,\n limit: parseAsInteger.withDefault(defaultWishlistItemsLimit),\n});\n\nasync function getWishlist(\n token: string,\n t: ExistingResultType>,\n pt: ExistingResultType>,\n searchParams: Promise,\n): Promise {\n const searchParamsParsed = searchParamsCache.parse(await searchParams);\n const formatter = await getFormatter();\n const wishlist = await getPublicWishlist(token, searchParamsParsed);\n\n if (!wishlist) {\n return notFound();\n }\n\n return publicWishlistDetailsTransformer(wishlist, t, pt, formatter);\n}\n\nasync function getPaginationInfo(\n token: string,\n searchParams: Promise,\n): Promise {\n const searchParamsParsed = searchParamsCache.parse(await searchParams);\n const wishlist = await getPublicWishlist(token, searchParamsParsed);\n\n return pageInfoTransformer(wishlist?.items.pageInfo ?? defaultPageInfo);\n}\n\nexport async function generateMetadata({ params, searchParams }: Props): Promise {\n const { locale, token } = await params;\n // Even though we don't need paginated data during metadata generation, we should still pass the parameters\n // to make sure we aren't bypassing an existing cache just for the metadata generation.\n const searchParamsParsed = searchParamsCache.parse(await searchParams);\n const t = await getTranslations({ locale, namespace: 'PublicWishlist' });\n const wishlist = await getPublicWishlist(token, searchParamsParsed);\n\n return {\n title: wishlist?.name ?? t('title'),\n alternates: await getMetadataAlternates({ path: `/wishlist/${token}`, locale }),\n };\n}\n\nconst getAnalyticsData = async (token: string, searchParamsPromise: Promise) => {\n const searchParamsParsed = searchParamsCache.parse(await searchParamsPromise);\n const wishlist = await getPublicWishlist(token, searchParamsParsed);\n\n if (!wishlist) {\n return [];\n }\n\n return removeEdgesAndNodes(wishlist.items)\n .map(({ product }) => product)\n .filter((product) => product !== null)\n .map((product) => {\n return {\n id: product.entityId,\n name: product.name,\n sku: product.sku,\n brand: product.brand?.name ?? '',\n price: product.prices?.price.value ?? 0,\n currency: product.prices?.price.currencyCode ?? '',\n };\n });\n};\n\nasync function getBreadcrumbs(\n token: string,\n searchParams: Promise,\n): Promise {\n const t = await getTranslations('PublicWishlist');\n const searchParamsParsed = searchParamsCache.parse(await searchParams);\n const wishlist = await getPublicWishlist(token, searchParamsParsed);\n\n return [\n { href: '/', label: 'Home' },\n { href: '#', label: wishlist?.name ?? t('defaultName') },\n ];\n}\n\nexport default async function PublicWishlist({ params, searchParams }: Props) {\n const { locale, token } = await params;\n\n setRequestLocale(locale);\n\n const t = await getTranslations('Wishlist');\n const pwt = await getTranslations('PublicWishlist');\n const pt = await getTranslations('Product.ProductDetails');\n const wishlistActions = (wishlist?: Wishlist) => {\n if (!wishlist) {\n return (\n

\n \n

\n );\n }\n\n const { publicUrl } = wishlist;\n\n if (!publicUrl || publicUrl === '') {\n return null;\n }\n\n return (\n

\n \n

\n );\n };\n\n return (\n getAnalyticsData(token, searchParams))}>\n \n getBreadcrumbs(token, searchParams))} />\n\n getPaginationInfo(token, searchParams))}\n wishlist={Streamable.from(() => getWishlist(token, t, pt, searchParams))}\n />\n \n \n );\n}\n" }, { "path": "core/app/[locale]/error.tsx", "content": "'use client';\n\nimport { useTranslations } from 'next-intl';\n\nimport { Error as ErrorSection } from '@/vibes/soul/sections/error';\n\ninterface Props {\n error: Error & { digest?: string };\n reset: () => void;\n}\n\nexport default function Error({ reset }: Props) {\n const t = useTranslations('Error');\n\n return ;\n}\n" }, { "path": "core/app/[locale]/layout.tsx", "content": "import { Analytics } from '@vercel/analytics/react';\nimport { SpeedInsights } from '@vercel/speed-insights/next';\nimport { clsx } from 'clsx';\nimport type { Metadata } from 'next';\nimport { notFound } from 'next/navigation';\nimport { NextIntlClientProvider } from 'next-intl';\nimport { setRequestLocale } from 'next-intl/server';\nimport { NuqsAdapter } from 'nuqs/adapters/next/app';\nimport { cache, PropsWithChildren } from 'react';\n\nimport '../../globals.css';\n\nimport { fonts } from '~/app/fonts';\nimport { CookieNotifications } from '~/app/notifications';\nimport { Providers } from '~/app/providers';\nimport { client } from '~/client';\nimport { graphql } from '~/client/graphql';\nimport { revalidate } from '~/client/revalidate-target';\nimport { WebAnalyticsFragment } from '~/components/analytics/fragment';\nimport { AnalyticsProvider } from '~/components/analytics/provider';\nimport { ConsentManager } from '~/components/consent-manager';\nimport { ScriptsFragment } from '~/components/consent-manager/scripts-fragment';\nimport { ContainerQueryPolyfill } from '~/components/polyfills/container-query';\nimport { scriptsTransformer } from '~/data-transformers/scripts-transformer';\nimport { routing } from '~/i18n/routing';\nimport { getToastNotification } from '~/lib/server-toast';\n\nconst RootLayoutMetadataQuery = graphql(\n `\n query RootLayoutMetadataQuery {\n site {\n settings {\n url {\n vanityUrl\n }\n privacy {\n cookieConsentEnabled\n privacyPolicyUrl\n }\n storeName\n seo {\n pageTitle\n metaDescription\n metaKeywords\n }\n ...WebAnalyticsFragment\n }\n content {\n ...ScriptsFragment\n }\n }\n channel {\n entityId\n }\n }\n `,\n [WebAnalyticsFragment, ScriptsFragment],\n);\n\nconst fetchRootLayoutMetadata = cache(async () => {\n return await client.fetch({\n document: RootLayoutMetadataQuery,\n fetchOptions: { next: { revalidate } },\n });\n});\n\nexport async function generateMetadata(): Promise {\n const { data } = await fetchRootLayoutMetadata();\n\n const storeName = data.site.settings?.storeName ?? '';\n\n const { pageTitle, metaDescription, metaKeywords } = data.site.settings?.seo || {};\n\n const vanityUrl = data.site.settings?.url.vanityUrl;\n\n // Use preview deployment URL so metadataBase (canonical, og:url) points at the preview, not production.\n let baseUrl: URL | undefined;\n const previewUrl =\n process.env.VERCEL_ENV === 'preview' ? `https://${process.env.VERCEL_URL}` : undefined;\n\n if (previewUrl && URL.canParse(previewUrl)) {\n baseUrl = new URL(previewUrl);\n } else if (vanityUrl && URL.canParse(vanityUrl)) {\n baseUrl = new URL(vanityUrl);\n }\n\n return {\n metadataBase: baseUrl,\n title: {\n template: `%s - ${storeName}`,\n default: pageTitle || storeName,\n },\n icons: {\n icon: '/favicon.ico', // app/favicon.ico/route.ts\n },\n description: metaDescription,\n keywords: metaKeywords ? metaKeywords.split(',') : null,\n other: {\n platform: 'bigcommerce.catalyst',\n build_sha: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA ?? '',\n store_hash: process.env.BIGCOMMERCE_STORE_HASH ?? '',\n },\n };\n}\n\nconst VercelComponents = () => {\n if (process.env.VERCEL !== '1') {\n return null;\n }\n\n return (\n <>\n {process.env.DISABLE_VERCEL_ANALYTICS !== 'true' && }\n {process.env.DISABLE_VERCEL_SPEED_INSIGHTS !== 'true' && }\n \n );\n};\n\ninterface Props extends PropsWithChildren {\n params: Promise<{ locale: string }>;\n}\n\nexport default async function RootLayout({ params, children }: Props) {\n const { locale } = await params;\n\n const rootData = await fetchRootLayoutMetadata();\n const toastNotificationCookieData = await getToastNotification();\n\n if (!routing.locales.includes(locale)) {\n notFound();\n }\n\n // need to call this method everywhere where static rendering is enabled\n // https://next-intl-docs.vercel.app/docs/getting-started/app-router#add-setRequestLocale-to-all-layouts-and-pages\n setRequestLocale(locale);\n\n const scripts = scriptsTransformer(rootData.data.site.content.scripts);\n const isCookieConsentEnabled =\n rootData.data.site.settings?.privacy?.cookieConsentEnabled ?? false;\n const privacyPolicyUrl = rootData.data.site.settings?.privacy?.privacyPolicyUrl;\n\n return (\n f.variable))} lang={locale}>\n \n \n \n \n \n \n {toastNotificationCookieData && (\n \n )}\n {children}\n \n \n \n \n \n \n \n \n \n );\n}\n\nexport function generateStaticParams() {\n return routing.locales.map((locale) => ({ locale }));\n}\n\nexport const fetchCache = 'default-cache';\n" }, { "path": "core/app/[locale]/maintenance/page.tsx", "content": "import { Metadata } from 'next';\nimport { getTranslations, setRequestLocale } from 'next-intl/server';\nimport { ReactNode } from 'react';\n\nimport { Maintenance as MaintenanceSection } from '@/vibes/soul/sections/maintenance';\nimport { client } from '~/client';\nimport { graphql } from '~/client/graphql';\nimport { StoreLogoFragment } from '~/components/store-logo/fragment';\nimport { logoTransformer } from '~/data-transformers/logo-transformer';\n\nconst MaintenancePageQuery = graphql(\n `\n query MaintenancePageQuery {\n site {\n settings {\n contact {\n phone\n email\n }\n statusMessage\n ...StoreLogoFragment\n }\n }\n }\n `,\n [StoreLogoFragment],\n);\n\ninterface Props {\n params: Promise<{ locale: string }>;\n}\n\nexport async function generateMetadata({ params }: Props): Promise {\n const { locale } = await params;\n\n const t = await getTranslations({ locale, namespace: 'Maintenance' });\n\n return {\n title: t('title'),\n };\n}\n\nconst Container = ({ children }: { children: ReactNode }) => (\n

\n {children}\n

\n);\n\nexport default async function Maintenance({ params }: Props) {\n const { locale } = await params;\n\n setRequestLocale(locale);\n\n const t = await getTranslations('Maintenance');\n\n const { data } = await client.fetch({\n document: MaintenancePageQuery,\n });\n\n const storeSettings = data.site.settings;\n\n if (!storeSettings) {\n return (\n \n \n \n );\n }\n\n const { contact, statusMessage } = storeSettings;\n const logo = data.site.settings ? logoTransformer(data.site.settings) : '';\n\n return (\n \n \n \n );\n}\n" }, { "path": "core/app/[locale]/not-found.tsx", "content": "import { getTranslations } from 'next-intl/server';\n\nimport { NotFound as NotFoundSection } from '@/vibes/soul/sections/not-found';\nimport { Footer } from '~/components/footer';\nimport { Header } from '~/components/header';\n\nexport default async function NotFound() {\n const t = await getTranslations('NotFound');\n\n return (\n <>\n

\n\n \n\n

{title}

\n {newsletterSubscriptionTitle}\n

\n {t('CreateAccount.title')}\n