@graphcommerce/magento-product 8.1.0-canary.2 → 8.1.0-canary.20

package/CHANGELOG.md

@@ -1,6 +1,136 @@
 # Change Log
 
-## 8.1.0-canary.2
+## 8.1.0-canary.20
+
+## 8.1.0-canary.19
+
+## 8.1.0-canary.18
+
+## 8.1.0-canary.17
+
+## 8.1.0-canary.16
+
+## 8.1.0-canary.15
+
+## 8.1.0-canary.14
+
+## 8.1.0-canary.13
+
+## 8.1.0-canary.12
+
+## 8.1.0-canary.11
+
+### Patch Changes
+
+- [#2255](https://github.com/graphcommerce-org/graphcommerce/pull/2255) [`679d07d`](https://github.com/graphcommerce-org/graphcommerce/commit/679d07dad5b5e2dab3c0f3d537716b6115af8ef7) - make the ProductPageMeta fragment injectable
+  ([@carlocarels90](https://github.com/carlocarels90))
+
+## 8.1.0-canary.10
+
+## 8.1.0-canary.9
+
+## 8.1.0-canary.8
+
+## 8.1.0-canary.7
+
+## 8.1.0-canary.6
+
+## 8.1.0-canary.5
+
+### Patch Changes
+
+- [#2224](https://github.com/graphcommerce-org/graphcommerce/pull/2224) [`4dd2d01`](https://github.com/graphcommerce-org/graphcommerce/commit/4dd2d01b3e14e3107ee3e337bef2a8528d654e75) - When applying a filter it would not always scroll to the #products.
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.0.6-canary.4
+
+### Patch Changes
+
+- [#2227](https://github.com/graphcommerce-org/graphcommerce/pull/2227) [`d597719`](https://github.com/graphcommerce-org/graphcommerce/commit/d597719baaabbe079660ac063fd021d871831511) - Added option to change sort order (ASC / DESC) for sort options (Name, price, position etc) on catalog and search pages.
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.0.6-canary.3
+
+## 8.0.6-canary.2
+
+### Patch Changes
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`0767bc4`](https://github.com/graphcommerce-org/graphcommerce/commit/0767bc40f7b596209f24ca4e745ff0441f3275c9) - Upgrade input components to no longer use muiRegister, which improves INP scores
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Prevent BillingPage query from rerunning on each mutation
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.0.6-canary.1
+
+## 8.0.6-canary.0
+
+### Patch Changes
+
+- [#2196](https://github.com/graphcommerce-org/graphcommerce/pull/2196) [`84c50e4`](https://github.com/graphcommerce-org/graphcommerce/commit/84c50e49a1a7f154d4a8f4045c37e773e20283ad) - Allow Lingui to use linguiLocale with country identifiers like `en-us`, it would always load `en` in this case. Introced a new `useLocale` hook to use the correct locale string to use in Intl methods.
+  ([@paales](https://github.com/paales))
+
+## 8.0.5
+
+### Patch Changes
+
+- [#2239](https://github.com/graphcommerce-org/graphcommerce/pull/2239) [`a2a6e78`](https://github.com/graphcommerce-org/graphcommerce/commit/a2a6e78291ab978f4ef1236a4476b4d54555af7f) - Prices of products are now updated when customizable options are selected
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 8.0.5-canary.10
+
+## 8.0.5-canary.9
+
+## 8.0.5-canary.8
+
+### Patch Changes
+
+- [#2239](https://github.com/graphcommerce-org/graphcommerce/pull/2239) [`a2a6e78`](https://github.com/graphcommerce-org/graphcommerce/commit/a2a6e78291ab978f4ef1236a4476b4d54555af7f) - Prices of products are now updated when customizable options are selected
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 8.0.5-canary.7
+
+## 8.0.5-canary.6
+
+## 8.0.5-canary.5
+
+## 8.0.5-canary.4
+
+## 8.0.5-canary.3
+
+## 8.0.5-canary.2
+
+## 8.0.5-canary.1
+
+## 8.0.5-canary.0
+
+## 8.0.4
+
+## 8.0.4-canary.1
+
+## 8.0.4-canary.0
+
+## 8.0.3
+
+### Patch Changes
+
+- [#2217](https://github.com/graphcommerce-org/graphcommerce/pull/2217) [`2b750da`](https://github.com/graphcommerce-org/graphcommerce/commit/2b750da77723d37485da01df05f52d19b80cc90c) - fix for breadcrumbs on pdp when no category attached to product
+  ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 8.0.3-canary.6
+
+### Patch Changes
+
+- [#2217](https://github.com/graphcommerce-org/graphcommerce/pull/2217) [`2b750da`](https://github.com/graphcommerce-org/graphcommerce/commit/2b750da77723d37485da01df05f52d19b80cc90c) - fix for breadcrumbs on pdp when no category attached to product
+  ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 8.0.3-canary.5
+
+## 8.0.3-canary.4
+
+## 8.0.3-canary.3
+
+## 8.0.3-canary.2
 
 ## 8.0.3-canary.1
 

package/components/AddProductsToCart/AddProductsToCartButton.tsx

@@ -17,6 +17,7 @@ export type AddProductsToCartButtonProps = UseAddProductsToCartActionProps &
     | 'onClick'
     | 'sx'
     | 'children'
+    | 'type'
   >
 
 export function AddProductsToCartButton(props: AddProductsToCartButtonProps) {

package/components/AddProductsToCart/AddProductsToCartForm.tsx

@@ -90,7 +90,7 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
         const requestData = {
           cartId,
           cartItems: cartItems
-            .filter((cartItem) => cartItem.sku)
+            .filter((cartItem) => cartItem.sku && cartItem.quantity !== 0)
             .map(({ customizable_options, ...cartItem }) => {
               const options = Object.values(customizable_options ?? {})
                 .flat(1)
@@ -103,7 +103,12 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
                   ...(cartItem.selected_options ?? []).filter(Boolean),
                   ...options,
                 ],
-                entered_options: cartItem.entered_options?.filter((option) => option?.value),
+                entered_options: [
+                  ...(cartItem.entered_options
+                    ?.filter((option) => option?.value)
+                    .filter(nonNullable)
+                    .map((option) => ({ uid: option.uid, value: `${option?.value}` })) ?? []),
+                ],
               }
             }),
         }

package/components/AddProductsToCart/AddProductsToCartSnackbar.tsx

@@ -4,14 +4,16 @@ import {
   Button,
   ErrorSnackbar,
   ErrorSnackbarProps,
-  filterNonNullableKeys,
   iconChevronRight,
   IconSvg,
   MessageSnackbar,
   MessageSnackbarProps,
+  nonNullable,
+  useLocale,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { useRouter } from 'next/router'
+import { useMemo } from 'react'
+import { findAddedItems } from './findAddedItems'
 import { toUserErrors } from './toUserErrors'
 import { useFormAddProductsToCart } from './useFormAddProductsToCart'
 
@@ -24,9 +26,8 @@ export function AddProductsToCartSnackbar(props: AddProductsToCartSnackbarProps)
   const { errorSnackbar, successSnackbar } = props
   const { error, data, redirect, control, submittedVariables } = useFormAddProductsToCart()
   const formState = useFormState({ control })
-  const { locale } = useRouter()
 
-  const formatter = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' })
+  const formatter = new Intl.ListFormat(useLocale(), { style: 'long', type: 'conjunction' })
 
   const userErrors = toUserErrors(data)
 
@@ -37,14 +38,10 @@ export function AddProductsToCartSnackbar(props: AddProductsToCartSnackbarProps)
     !userErrors.length &&
     !redirect
 
-  const items = filterNonNullableKeys(data?.addProductsToCart?.cart.items)
-
-  const productsAdded = items
-    .filter(
-      (item) =>
-        submittedVariables?.cartItems?.find((cartItem) => cartItem.sku === item.product.sku),
-    )
-    .map((product) => product.product.name || '')
+  const addedItems = useMemo(
+    () => findAddedItems(data, submittedVariables),
+    [data, submittedVariables],
+  )
 
   const showErrorSnackbar = userErrors.length > 0
 
@@ -80,13 +77,15 @@ export function AddProductsToCartSnackbar(props: AddProductsToCartSnackbarProps)
         >
           <Trans
             id={
-              productsAdded.length === 1
+              addedItems.length === 1
                 ? '<0>{name}</0> has been added to your shopping cart!'
                 : '<0>{name}</0> have been added to your shopping cart!'
             }
             components={{ 0: <strong /> }}
             values={{
-              name: formatter.format(productsAdded),
+              name: formatter.format(
+                addedItems.map((item) => item?.itemInCart?.product.name).filter(nonNullable),
+              ),
             }}
           />
         </MessageSnackbar>

package/components/AddProductsToCart/findAddedItems.ts

@@ -0,0 +1,81 @@
+import { filterNonNullableKeys, isTypename } from '@graphcommerce/next-ui'
+import { AddProductsToCartMutation } from './AddProductsToCart.gql'
+import { AddProductsToCartFields } from './useFormAddProductsToCart'
+
+export function findAddedItems(
+  data: AddProductsToCartMutation | null | undefined,
+  variables: AddProductsToCartFields | null | undefined,
+) {
+  if (!data || !variables) return []
+
+  return variables.cartItems.map((itemVariable) => ({
+    itemVariable,
+    itemInCart: data.addProductsToCart?.cart.items?.find((cartItem) => {
+      if (!cartItem) return false
+
+      let isCandidate = cartItem.product.sku === itemVariable.sku
+      if (isTypename(cartItem, ['ConfigurableCartItem'])) {
+        if (itemVariable.parent_sku) {
+          isCandidate =
+            cartItem?.product.sku === itemVariable.parent_sku &&
+            cartItem.configured_variant.sku === itemVariable.sku
+        }
+      }
+      if (!isCandidate) {
+        // console.log("The SKU's dont match, so this isn't the product.")
+        return false
+      }
+
+      let selectedOptions = itemVariable.selected_options
+      if (isTypename(cartItem, ['ConfigurableCartItem'])) {
+        // Check if the requested options match the selected options
+        if (
+          !cartItem.configurable_options.every((option) => {
+            const foundItem = itemVariable.selected_options?.find(
+              (selectedOption) => selectedOption === option?.configurable_product_option_value_uid,
+            )
+
+            selectedOptions = itemVariable.selected_options?.filter(
+              (selectedOption) => selectedOption !== option?.configurable_product_option_value_uid,
+            )
+
+            return foundItem
+          })
+        ) {
+          // console.log("SKU matche, this isn't the configurable")
+          return false
+        }
+      }
+
+      const customizable_options = isTypename(cartItem, ['ConfigurableCartItem'])
+        ? cartItem.configurable_customizable
+        : cartItem.customizable_options
+
+      const matchEntered = filterNonNullableKeys(itemVariable.entered_options).every(
+        (requestOption) =>
+          customizable_options.find(
+            (itemOption) =>
+              itemOption?.customizable_option_uid === requestOption?.uid &&
+              itemOption?.values?.find((value) => value?.value === requestOption?.value),
+          ),
+      )
+      if (!matchEntered) {
+        // console.log('Entered options do not match', itemVariable.entered_options)
+        return false
+      }
+
+      const matchSelected = selectedOptions?.every((requestOption) =>
+        customizable_options.find((customizableOption) =>
+          customizableOption?.values.find(
+            (value) => value?.customizable_option_value_uid === requestOption,
+          ),
+        ),
+      )
+      if (!matchSelected) {
+        // console.log('Selected options do not match')
+        return false
+      }
+      return true
+    }),
+  }))
+}

package/components/AddProductsToCart/index.ts

@@ -3,6 +3,9 @@ export * from './AddProductsToCartButton'
 export * from './AddProductsToCartError'
 export * from './AddProductsToCartFab'
 export * from './AddProductsToCartForm'
+export * from './AddProductsToCartSnackbar'
 export * from './AddProductsToCartQuantity'
 export * from './useAddProductsToCartAction'
 export * from './useFormAddProductsToCart'
+export * from './toUserErrors'
+export * from './findAddedItems'

package/components/AddProductsToCart/useAddProductsToCartAction.ts

@@ -1,6 +1,6 @@
 import { useFormState } from '@graphcommerce/ecommerce-ui'
 import { useEventCallback } from '@mui/material'
-import { useEffect, useState } from 'react'
+import { startTransition, useEffect, useState } from 'react'
 import { UseAddProductsToCartActionFragment } from './UseAddProductsToCartAction.gql'
 import { toUserErrors } from './toUserErrors'
 import { AddToCartItemSelector, useFormAddProductsToCart } from './useFormAddProductsToCart'
@@ -68,8 +68,11 @@ export function useAddProductsToCartAction(
       if (process.env.NODE_ENV !== 'production') {
         if (!sku) console.warn(`You must provide a 'sku' to useAddProductsToCartAction`)
       }
-      setValue(`cartItems.${index}.sku`, sku ?? '')
-      onClickIncoming?.(e)
+      // TODO should be removed, setting the form value on submission isn't a great idea.
+      if (!getValues(`cartItems.${index}.sku`)) setValue(`cartItems.${index}.sku`, sku ?? '')
+      startTransition(() => {
+        onClickIncoming?.(e)
+      })
     }),
     onMouseDown: useEventCallback((e) => e.stopPropagation()),
     showSuccess,

package/components/AddProductsToCart/useFormAddProductsToCart.ts

@@ -1,11 +1,10 @@
 import { UseFormGqlMutationReturn } from '@graphcommerce/ecommerce-ui'
 import { createContext, useContext } from 'react'
-import type { LiteralUnion } from 'type-fest'
+import type { Simplify, LiteralUnion } from 'type-fest'
 import {
   AddProductsToCartMutation,
   AddProductsToCartMutationVariables,
 } from './AddProductsToCart.gql'
-import { Simplify } from 'type-fest'
 
 export type RedirectType = LiteralUnion<'added' | undefined | false, `/${string}`>
 

package/components/JsonLdProduct/JsonLdProductOffer.graphql

@@ -2,11 +2,10 @@ fragment JsonLdProductOffer on ProductInterface {
   price_range {
     minimum_price {
       regular_price {
-        value
-        currency
+        ...Money
       }
       final_price {
-        value
+        ...Money
       }
     }
   }

package/components/JsonLdProduct/ProductPageJsonLd.tsx

@@ -1,12 +1,17 @@
 import { JsonLd } from '@graphcommerce/next-ui'
 import { JsonLdProductFragment } from './JsonLdProduct.gql'
 
-type ProductPageJsonLdProps<T extends { '@type': string }> = {
-  product: JsonLdProductFragment
-  render: (product: JsonLdProductFragment) => T & { '@context': 'https://schema.org' }
+export type ProductPageJsonLdProps<
+  T extends { '@type': string },
+  P extends JsonLdProductFragment,
+> = {
+  product: P
+  render: (product: P) => T & { '@context': 'https://schema.org' }
 }
 
-export function ProductPageJsonLd<T extends { '@type': string }>(props: ProductPageJsonLdProps<T>) {
+export function ProductPageJsonLd<T extends { '@type': string }, P extends JsonLdProductFragment>(
+  props: ProductPageJsonLdProps<T, P>,
+) {
   const { product, render } = props
   return <JsonLd<T> item={render(product)} />
 }

package/components/JsonLdProduct/index.ts

@@ -1,2 +1,3 @@
 export * from './jsonLdProduct'
 export * from './ProductPageJsonLd'
+export * from './JsonLdProduct.gql'

package/components/ProductAddToCart/ProductAddToCart.tsx

@@ -1,10 +1,10 @@
+import { NumberFieldElement } from '@graphcommerce/ecommerce-ui'
 import type { ProductInterface } from '@graphcommerce/graphql-mesh'
 import { ApolloCartErrorAlert, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
 import { Money, MoneyProps } from '@graphcommerce/magento-store'
 import {
   Button,
   MessageSnackbar,
-  TextInputNumber,
   iconChevronRight,
   IconSvg,
   extendableComponent,
@@ -40,7 +40,7 @@ export function ProductAddToCart(
     defaultValues: { ...variables },
   })
 
-  const { handleSubmit, formState, error, muiRegister, required, data } = form
+  const { handleSubmit, formState, error, control, required, data } = form
   const submitHandler = handleSubmit(() => {})
 
   return (
@@ -58,15 +58,17 @@ export function ProductAddToCart(
         <Money {...price} />
       </Typography>
 
-      <TextInputNumber
+      <NumberFieldElement
         variant='outlined'
         error={formState.isSubmitted && !!formState.errors.quantity}
         required={required.quantity}
         inputProps={{ min: 1 }}
-        {...muiRegister('quantity', { required: required.quantity })}
+        name='quantity'
+        rules={{ required: required.quantity }}
         helperText={formState.isSubmitted && formState.errors.quantity?.message}
         disabled={formState.isSubmitting}
         size='small'
+        control={control}
       />
       {children}
       <Box

package/components/ProductCustomizable/CustomizableAreaOption.tsx

@@ -1,7 +1,9 @@
 import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { CurrencyEnum } from '@graphcommerce/graphql-mesh'
-import { TypeRenderer } from '@graphcommerce/next-ui'
+import { Money } from '@graphcommerce/magento-store'
+import { SectionHeader, TypeRenderer } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
+import { Box } from '@mui/material'
 import React from 'react'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import { ProductCustomizableFragment } from './ProductCustomizable.gql'
@@ -20,26 +22,58 @@ type CustomizableAreaOptionProps = React.ComponentProps<
 >
 
 export function CustomizableAreaOption(props: CustomizableAreaOptionProps) {
-  const { uid, areaValue, required, optionIndex, index, title } = props
+  const { uid, areaValue, required, optionIndex, index, title, currency, productPrice } = props
   const maxLength = areaValue?.max_characters ?? undefined
-  const { control, register } = useFormAddProductsToCart()
+  const { control, register, getValues } = useFormAddProductsToCart()
+
+  if (!areaValue) return null
 
   return (
-    <>
+    <Box>
       <input
         type='hidden'
         {...register(`cartItems.${index}.entered_options.${optionIndex}.uid`)}
         value={uid}
       />
+      <SectionHeader labelLeft={title} sx={{ mt: 0 }} />
       <TextFieldElement
+        sx={{ width: '100%' }}
         color='primary'
         multiline
         minRows={3}
         control={control}
         name={`cartItems.${index}.entered_options.${optionIndex}.value`}
-        label={title}
+        InputProps={{
+          endAdornment:
+            areaValue.price === 0
+              ? null
+              : areaValue.price && (
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      typography: 'body1',
+                      '&.sizeMedium': { typographty: 'subtitle1' },
+                      '&.sizeLarge': { typography: 'h6' },
+                      color: getValues(`cartItems.${index}.entered_options.${optionIndex}.value`)
+                        ? 'text.primary'
+                        : 'text.secondary',
+                    }}
+                  >
+                    {/* Change fontFamily so the + is properly outlined */}
+                    <span style={{ fontFamily: 'arial', paddingTop: '1px' }}>+{'\u00A0'}</span>
+                    <Money
+                      value={
+                        areaValue.price_type === 'PERCENT'
+                          ? productPrice * (areaValue.price / 100)
+                          : areaValue.price
+                      }
+                      currency={currency}
+                    />
+                  </Box>
+                ),
+        }}
         required={Boolean(required)}
-        validation={{ maxLength }}
+        rules={{ maxLength }}
         helperText={
           (maxLength ?? 0) > 0 &&
           i18n._(/* i18n*/ 'There is a maximum of ‘{maxLength}’ characters', {
@@ -47,6 +81,6 @@ export function CustomizableAreaOption(props: CustomizableAreaOptionProps) {
           })
         }
       />
-    </>
+    </Box>
   )
 }

package/components/ProductCustomizable/CustomizableDateOption.tsx

@@ -4,6 +4,7 @@ import { Trans } from '@lingui/react'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import { OptionTypeRenderer } from './CustomizableAreaOption'
+import { Money } from '@graphcommerce/magento-store'
 
 type CustomizableDateOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableDateOption']
@@ -21,14 +22,56 @@ export function CustomizableDateOption(props: CustomizableDateOptionProps) {
     title,
     minDate = new Date('1950-11-12T00:00'),
     maxDate = new Date('9999-11-12T00:00'),
+    dateValue,
+    currency,
+    productPrice,
   } = props
-  const { register, setValue, setError, getFieldState, clearErrors, control } =
-    useFormAddProductsToCart()
+  const {
+    register,
+    setValue,
+    setError,
+    getFieldState,
+    clearErrors,
+    control,
+    resetField,
+    getValues,
+  } = useFormAddProductsToCart()
 
   const { invalid } = getFieldState(`cartItems.${index}.entered_options.${optionIndex}.value`)
 
   minDate.setSeconds(0, 0)
   maxDate.setSeconds(0, 0)
+  if (!dateValue) return null
+
+  const price =
+    dateValue.price === 0
+      ? null
+      : dateValue.price && (
+          <Box
+            sx={{
+              display: 'flex',
+              typography: 'body1',
+              '&.sizeMedium': { typographty: 'subtitle1' },
+              '&.sizeLarge': { typography: 'h6' },
+              color:
+                dateValue.uid ===
+                getValues(`cartItems.${index}.entered_options.${optionIndex}.value`)
+                  ? 'text.primary'
+                  : 'text.secondary',
+            }}
+          >
+            {/* Change fontFamily so the + is properly outlined */}
+            <span style={{ fontFamily: 'arial' }}>+{'\u00A0'}</span>
+            <Money
+              value={
+                dateValue.price_type === 'PERCENT'
+                  ? productPrice * (dateValue.price / 100)
+                  : dateValue.price
+              }
+              currency={currency}
+            />
+          </Box>
+        )
   return (
     <Box>
       <input
@@ -41,12 +84,20 @@ export function CustomizableDateOption(props: CustomizableDateOptionProps) {
       <TextFieldElement
         control={control}
         name={`cartItems.${index}.entered_options.${optionIndex}.value`}
-        sx={{ width: '100%' }}
+        sx={{
+          width: '100%',
+          '& input[type="datetime-local"]::-webkit-calendar-picker-indicator': {
+            filter: (theme) => (theme.palette.mode === 'dark' ? 'invert(100%)' : 'none'),
+            mr: '10px',
+          },
+        }}
+        defaultValue=''
         required={!!required}
         error={invalid}
         helperText={invalid ? <Trans id='Invalid date' /> : ''}
         type='datetime-local'
         InputProps={{
+          endAdornment: price,
           inputProps: {
             min: minDate.toISOString().replace(/:00.000Z/, ''),
             max: maxDate.toISOString().replace(/:00.000Z/, ''),
@@ -61,10 +112,12 @@ export function CustomizableDateOption(props: CustomizableDateOptionProps) {
           } else {
             clearErrors(`cartItems.${index}.entered_options.${optionIndex}.value`)
           }
-          setValue(
-            `cartItems.${index}.entered_options.${optionIndex}.value`,
-            `${data.currentTarget.value.replace('T', ' ')}:00`,
-          )
+          if (data.currentTarget.value)
+            setValue(
+              `cartItems.${index}.entered_options.${optionIndex}.value`,
+              `${data.currentTarget.value.replace('T', ' ')}:00`,
+            )
+          else resetField(`cartItems.${index}.entered_options.${optionIndex}.value`)
         }}
       />
     </Box>