@graphcommerce/magento-product 9.1.0-canary.18 → 9.1.0-canary.19

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 9.1.0-canary.19
+
+### Patch Changes
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`89e785d`](https://github.com/graphcommerce-org/graphcommerce/commit/89e785de9d62c2f6cf6b2885da72ff63b16fc70d) - Added support for TIME and DATE for the customizable options. Added required stars. ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`7565120`](https://github.com/graphcommerce-org/graphcommerce/commit/756512031642371609258fba322a7f3a4845a17b) - Customizable Product Options wouldn't be properly selected because the parent woudln't rerender anymore. ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`37c00d8`](https://github.com/graphcommerce-org/graphcommerce/commit/37c00d80419b209850457559d7b7eca4101f5705) - Forward productListRenderer for all locations that can be rendered by pagebuilder ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`e9da6a9`](https://github.com/graphcommerce-org/graphcommerce/commit/e9da6a9e55a9344a1f8ef8f1f20060af2bb38ee9) - Added support for video's on the product page. ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`1e38811`](https://github.com/graphcommerce-org/graphcommerce/commit/1e3881177065548165b7141a29cff8ab27692b25) - Added support for meta_keyword for products and categories ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`b497116`](https://github.com/graphcommerce-org/graphcommerce/commit/b497116798e26419950982a6a9d05932a9e99961) - Make sure CustomizableOptions are sorted correctly ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`89e785d`](https://github.com/graphcommerce-org/graphcommerce/commit/89e785de9d62c2f6cf6b2885da72ff63b16fc70d) - Created a CustomizablePrice component that will highlight the price, to prevent duplicating logic and preventing rerenders. ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`722763f`](https://github.com/graphcommerce-org/graphcommerce/commit/722763f01f9c4726126d5a30919bdcd25929a330) - Support for new_from_date and new_to_date labels ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`35fdadd`](https://github.com/graphcommerce-org/graphcommerce/commit/35fdadd8896619a2c84e91e39279f5928c0c9007) - Refactored the price calculation of customizable options on the product page so required options are correctly handled. ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`35fdadd`](https://github.com/graphcommerce-org/graphcommerce/commit/35fdadd8896619a2c84e91e39279f5928c0c9007) - Renamed customizable_options_entered to entered_options_record and customizable_options to selected_options_record ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.18
 
 ## 9.1.0-canary.17

package/components/AddProductsToCart/AddProductsToCartForm.tsx

@@ -3,7 +3,6 @@ import type { ApolloQueryResult } from '@graphcommerce/graphql'
 import { useApolloClient } from '@graphcommerce/graphql'
 import type { CrosssellsQuery } from '@graphcommerce/magento-cart'
 import { CrosssellsDocument, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
-import type { ErrorSnackbarProps, MessageSnackbarProps } from '@graphcommerce/next-ui'
 import { nonNullable } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
@@ -22,13 +21,6 @@ export type AddProductsToCartFormProps = {
   sx?: SxProps<Theme>
   redirect?: RedirectType
   snackbarProps?: AddProductsToCartSnackbarProps
-
-  /** @deprecated Use snackbarProps.errorSnackbar instead */
-  errorSnackbar?: Omit<ErrorSnackbarProps, 'open'>
-  /** @deprecated Use snackbarProps.successSnackbar instead */
-  successSnackbar?: Omit<MessageSnackbarProps, 'open' | 'action'>
-  /** @deprecated Use snackbarProps.disableSuccessSnackbar instead */
-  disableSuccessSnackbar?: boolean
 } & UseFormGraphQlOptions<AddProductsToCartMutation, AddProductsToCartFields>
 
 const name = 'AddProductsToCartForm'
@@ -45,17 +37,7 @@ const name = 'AddProductsToCartForm'
  * - Redirects the user to the cart/checkout/added page after successful submission.
  */
 export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
-  let {
-    children,
-    redirect,
-    onComplete,
-    sx,
-    disableSuccessSnackbar,
-    errorSnackbar,
-    successSnackbar,
-    snackbarProps,
-    ...formProps
-  } = props
+  let { children, redirect, onComplete, sx, snackbarProps, ...formProps } = props
   const router = useRouter()
   const client = useApolloClient()
   const crosssellsQuery = useRef<Promise<ApolloQueryResult<CrosssellsQuery>>>()
@@ -78,26 +60,24 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
           cartId,
           cartItems: cartItems
             .filter((cartItem) => cartItem.sku && cartItem.quantity !== 0)
-            .map(({ customizable_options, ...cartItem }) => {
-              const options = Object.values(customizable_options ?? {})
-                .flat(1)
-                .filter(Boolean)
-
-              return {
-                ...cartItem,
-                quantity: cartItem.quantity || 1,
-                selected_options: [
-                  ...(cartItem.selected_options ?? []).filter(Boolean),
-                  ...options,
-                ],
-                entered_options: [
-                  ...(cartItem.entered_options
-                    ?.filter((option) => option?.value)
-                    .filter(nonNullable)
-                    .map((option) => ({ uid: option.uid, value: `${option?.value}` })) ?? []),
-                ],
-              }
-            }),
+            .map(({ selected_options_record = {}, entered_options_record = {}, ...cartItem }) => ({
+              ...cartItem,
+              quantity: cartItem.quantity || 1,
+              selected_options: [
+                ...(cartItem.selected_options ?? []).filter(nonNullable),
+                ...Object.values(selected_options_record).flat(1).filter(nonNullable),
+              ],
+              entered_options: [
+                ...(cartItem.entered_options ?? []).filter(nonNullable),
+                ...Object.entries(entered_options_record).map(([uid, value]) => {
+                  if (value instanceof Date) {
+                    const dateValue = value.toISOString().replace(/.000Z/, '').replace('T', ' ')
+                    return { uid, value: dateValue }
+                  }
+                  return { uid, value: value.toString() }
+                }),
+              ],
+            })),
         }
 
         const sku = requestData.cartItems[requestData.cartItems.length - 1]?.sku
@@ -147,12 +127,7 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
       <Box component='form' onSubmit={submit} noValidate sx={sx} className={name}>
         {children}
       </Box>
-      <AddProductsToCartSnackbar
-        errorSnackbar={errorSnackbar}
-        successSnackbar={successSnackbar}
-        disableSuccessSnackbar={disableSuccessSnackbar}
-        {...snackbarProps}
-      />
+      <AddProductsToCartSnackbar {...snackbarProps} />
     </AddProductsToCartContext.Provider>
   )
 }

package/components/AddProductsToCart/useFormAddProductsToCart.ts

@@ -1,4 +1,5 @@
 import type { UseFormGqlMutationReturn } from '@graphcommerce/ecommerce-ui'
+import type { EnteredOptionInput } from '@graphcommerce/graphql-mesh'
 import { createContext, useContext } from 'react'
 import type { LiteralUnion, Simplify } from 'type-fest'
 import type {
@@ -10,7 +11,21 @@ export type RedirectType = LiteralUnion<'added' | undefined | false, `/${string}
 
 type Item = Simplify<
   AddProductsToCartMutationVariables['cartItems'][number] & {
-    customizable_options?: Record<string, string | string[]>
+    /**
+     * The value of the selected_options_record values will be added to the selected_options array.
+     *
+     * This format exists to prevent name collisions and without having to select by index in the
+     * selected_options array.
+     */
+    selected_options_record?: Record<string, string | string[]>
+    /**
+     * The value of the entered_options_record entries will be coverted to entries for the
+     * entered_options array.
+     *
+     * This format exists to prevent name collisions and without having to select by index in the
+     * entered_options array.
+     */
+    entered_options_record?: Record<string, string | number | Date>
   }
 >
 

package/components/ProductCustomizable/CustomizableAreaOption.tsx

@@ -1,4 +1,4 @@
-import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
+import { TextFieldElement, useWatch } from '@graphcommerce/ecommerce-ui'
 import type { CurrencyEnum } from '@graphcommerce/graphql-mesh'
 import { Money } from '@graphcommerce/magento-store'
 import type { TypeRenderer } from '@graphcommerce/next-ui'
@@ -7,11 +7,11 @@ import { i18n } from '@lingui/core'
 import { Box } from '@mui/material'
 import React from 'react'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
+import { CustomizablePrice } from './CustomizablePrice'
 import type { ProductCustomizableFragment } from './ProductCustomizable.gql'
 
 export type OptionTypeRenderer = TypeRenderer<
   NonNullable<NonNullable<ProductCustomizableFragment['options']>[number]> & {
-    optionIndex: number
     index: number
     currency: CurrencyEnum
     productPrice: number
@@ -23,55 +23,40 @@ export type CustomizableAreaOptionProps = React.ComponentProps<
 >
 
 export function CustomizableAreaOption(props: CustomizableAreaOptionProps) {
-  const { uid, areaValue, required, optionIndex, index, title, currency, productPrice } = props
+  const { uid, areaValue, required, index, title, currency, productPrice } = props
   const maxLength = areaValue?.max_characters ?? undefined
-  const { control, register, getValues } = useFormAddProductsToCart()
+  const { control } = useFormAddProductsToCart()
 
+  const name = `cartItems.${index}.entered_options_record.${uid}` as const
   if (!areaValue) return null
 
   return (
     <Box>
-      <input
-        type='hidden'
-        {...register(`cartItems.${index}.entered_options.${optionIndex}.uid`)}
-        value={uid}
+      <SectionHeader
+        labelLeft={
+          <>
+            {title} {required && ' *'}
+          </>
+        }
+        sx={{ mt: 0 }}
       />
-      <SectionHeader labelLeft={title} sx={{ mt: 0 }} />
       <TextFieldElement
         sx={{ width: '100%' }}
         color='primary'
         multiline
         minRows={3}
         control={control}
-        name={`cartItems.${index}.entered_options.${optionIndex}.value`}
+        name={name}
         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>
-                ),
+          endAdornment: (
+            <CustomizablePrice
+              name={name}
+              price_type={areaValue.price_type}
+              productPrice={productPrice}
+              currency={currency}
+              value={areaValue.price}
+            />
+          ),
         }}
         required={Boolean(required)}
         rules={{ maxLength }}

package/components/ProductCustomizable/CustomizableCheckboxOption.tsx

@@ -1,25 +1,71 @@
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
-import { ActionCard, filterNonNullableKeys, SectionHeader } from '@graphcommerce/next-ui'
+import { ActionCard, nonNullable, SectionHeader } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Box, Checkbox } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'
+import type { CustomizableCheckboxOptionFragment } from './CustomizableCheckboxOption.gql'
 
 export type CustomizableCheckboxOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableCheckboxOption']
 >
 
-export function CustomizableCheckboxOption(props: CustomizableCheckboxOptionProps) {
-  const { uid, required, index, title: label, checkboxValue, currency, productPrice } = props
-  const { control, getValues } = useFormAddProductsToCart()
+type CheckboxActionCardProps = Pick<CustomizableCheckboxOptionProps, 'productPrice' | 'currency'> &
+  Pick<ActionCardProps, 'value' | 'selected'> & {
+    option: NonNullable<NonNullable<CustomizableCheckboxOptionFragment['checkboxValue']>[number]>
+  }
+
+function CustomizableCheckboxActionCard(props: CheckboxActionCardProps) {
+  const { productPrice, currency, value, selected, option, ...rest } = props
+  const { title, price, price_type } = option
+
+  return (
+    <ActionCard
+      {...rest}
+      value={value}
+      selected={selected}
+      title={
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <Checkbox checked={selected} /> {title}
+        </Box>
+      }
+      price={
+        price === 0
+          ? null
+          : price && (
+              <Box
+                sx={{
+                  color: selected ? 'text.primary' : 'text.secondary',
+                }}
+              >
+                <span style={{ fontFamily: 'arial' }}>{'+ '}</span>
+                <Money
+                  value={price_type === 'PERCENT' ? productPrice * (price / 100) : price}
+                  currency={currency}
+                />
+              </Box>
+            )
+      }
+    />
+  )
+}
 
-  const allSelected = getValues(`cartItems.${index}.customizable_options.${uid}`) || []
+export function CustomizableCheckboxOption(props: CustomizableCheckboxOptionProps) {
+  const { uid, required, index, title: label, checkboxValue, productPrice, currency } = props
+  const { control } = useFormAddProductsToCart()
 
   return (
     <Box>
-      <SectionHeader labelLeft={label} sx={{ mt: 0 }} />
+      <SectionHeader
+        labelLeft={
+          <>
+            {label} {required && ' *'}
+          </>
+        }
+        sx={{ mt: 0 }}
+      />
       <ActionCardListForm
         sx={(theme) => ({
           mt: theme.spacings.xxs,
@@ -31,41 +77,15 @@ export function CustomizableCheckboxOption(props: CustomizableCheckboxOptionProp
             ? i18n._(/* i18n*/ 'Please select a value for ‘{label}’', { label })
             : false,
         }}
-        render={ActionCard}
-        name={`cartItems.${index}.customizable_options.${uid}`}
-        items={filterNonNullableKeys(checkboxValue, ['title']).map(
-          (checkboxVal) =>
-            ({
-              value: checkboxVal.uid,
-              title: (
-                <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                  <Checkbox checked={allSelected.includes(checkboxVal.uid)} /> {checkboxVal.title}
-                </Box>
-              ),
-              price:
-                checkboxVal.price === 0
-                  ? null
-                  : checkboxVal.price && (
-                      <Box
-                        sx={{
-                          color: allSelected.includes(checkboxVal.uid)
-                            ? 'text.primary'
-                            : 'text.secondary',
-                        }}
-                      >
-                        <span style={{ fontFamily: 'arial' }}>{'+ '}</span>
-                        <Money
-                          value={
-                            checkboxVal.price_type === 'PERCENT'
-                              ? productPrice * (checkboxVal.price / 100)
-                              : checkboxVal.price
-                          }
-                          currency={currency}
-                        />
-                      </Box>
-                    ),
-            }) satisfies ActionCardProps,
-        )}
+        render={CustomizableCheckboxActionCard}
+        name={`cartItems.${index}.selected_options_record.${uid}`}
+        items={(checkboxValue ?? []).filter(nonNullable).map((checkboxVal) => ({
+          productPrice,
+          currency,
+          title: checkboxVal.title ?? '',
+          value: checkboxVal.uid,
+          option: checkboxVal,
+        }))}
         errorMessage=''
       />
     </Box>

package/components/ProductCustomizable/CustomizableDateOption.graphql

@@ -1,6 +1,7 @@
 fragment CustomizableDateOption on CustomizableDateOption {
   product_sku
   dateValue: value {
+    type
     price
     price_type
     sku

package/components/ProductCustomizable/CustomizableDateOption.tsx

@@ -1,10 +1,11 @@
 import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
-import { Money } from '@graphcommerce/magento-store'
+import type { CustomizableDateTypeEnum } from '@graphcommerce/graphql-mesh'
 import { SectionHeader } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { t } from '@lingui/macro'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'
+import { CustomizablePrice } from './CustomizablePrice'
 
 export type CustomizableDateOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableDateOption']
@@ -13,111 +14,65 @@ export type CustomizableDateOptionProps = React.ComponentProps<
   maxDate?: Date
 }
 
-export function CustomizableDateOption(props: CustomizableDateOptionProps) {
-  const {
-    uid,
-    required,
-    optionIndex,
-    index,
-    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,
-    resetField,
-    getValues,
-  } = useFormAddProductsToCart()
+function getInputType(
+  type: CustomizableDateTypeEnum | null | undefined,
+): React.HTMLInputTypeAttribute {
+  if (type === 'DATE') return 'date'
+  if (type === 'TIME') return 'time'
+  return 'datetime-local'
+}
 
-  const { invalid } = getFieldState(`cartItems.${index}.entered_options.${optionIndex}.value`)
+export function CustomizableDateOption(props: CustomizableDateOptionProps) {
+  const { uid, required, index, title, minDate, maxDate, dateValue, currency, productPrice } = props
+  const { control } = useFormAddProductsToCart()
 
-  minDate.setSeconds(0, 0)
-  maxDate.setSeconds(0, 0)
+  const name = `cartItems.${index}.entered_options_record.${uid}` as const
   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>
-        )
+  minDate?.setSeconds(0, 0)
+  maxDate?.setSeconds(0, 0)
+
   return (
     <Box>
-      <input
-        type='hidden'
-        {...register(`cartItems.${index}.entered_options.${optionIndex}.uid`)}
-        value={uid}
-      />
-
       <SectionHeader labelLeft={title} sx={{ mt: 0 }} />
       <TextFieldElement
         control={control}
-        name={`cartItems.${index}.entered_options.${optionIndex}.value`}
+        name={name}
         sx={{
           width: '100%',
-          '& input[type="datetime-local"]::-webkit-calendar-picker-indicator': {
+          '& ::-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'
+        type={getInputType(dateValue.type)}
         InputProps={{
-          endAdornment: price,
+          endAdornment: (
+            <CustomizablePrice
+              name={name}
+              price_type={dateValue.price_type}
+              currency={currency}
+              value={dateValue.price}
+              productPrice={productPrice}
+            />
+          ),
           inputProps: {
-            min: minDate.toISOString().replace(/:00.000Z/, ''),
-            max: maxDate.toISOString().replace(/:00.000Z/, ''),
+            min: minDate?.toISOString().replace(/.000Z/, ''),
+            max: maxDate?.toISOString().replace(/.000Z/, ''),
           },
         }}
-        onChange={(data) => {
-          const selectedDate = new Date(data.currentTarget.value)
-          if (selectedDate < minDate || selectedDate > maxDate) {
-            setError(`cartItems.${index}.entered_options.${optionIndex}.value`, {
-              message: 'Invalid date',
-            })
-          } else {
-            clearErrors(`cartItems.${index}.entered_options.${optionIndex}.value`)
-          }
-          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`)
+        rules={{
+          validate: (value) => {
+            if (!(value instanceof Date)) return true
+
+            if (minDate && value < minDate)
+              return t`Date must be after ${minDate.toLocaleDateString()}`
+            if (maxDate && value > maxDate)
+              return t`Date must be before ${maxDate.toLocaleDateString()}`
+
+            return true
+          },
         }}
       />
     </Box>

package/components/ProductCustomizable/CustomizableDropDownOption.tsx

@@ -1,6 +1,7 @@
 import { useController } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import { filterNonNullableKeys, SectionHeader } from '@graphcommerce/next-ui'
+import { i18n } from '@lingui/core'
 import { Box, MenuItem, TextField } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'
@@ -17,9 +18,11 @@ export function CustomizableDropDownOption(props: CustomizableDropDownOptionProp
     field: { onChange, value, ref, ...field },
     fieldState: { invalid, error },
   } = useController({
-    name: `cartItems.${index}.customizable_options.${uid}`,
+    name: `cartItems.${index}.selected_options_record.${uid}`,
     rules: {
-      required: Boolean(required),
+      required: required
+        ? i18n._(/* i18n*/ 'Please select a value for ‘{label}’', { label: title })
+        : false,
     },
     control,
     defaultValue: '',
@@ -27,8 +30,14 @@ export function CustomizableDropDownOption(props: CustomizableDropDownOptionProp
 
   return (
     <Box>
-      <SectionHeader labelLeft={title} sx={{ mt: 0 }} />
-
+      <SectionHeader
+        labelLeft={
+          <>
+            {title} {required && ' *'}
+          </>
+        }
+        sx={{ mt: 0 }}
+      />
       <TextField
         sx={{
           width: '100%',
@@ -44,7 +53,6 @@ export function CustomizableDropDownOption(props: CustomizableDropDownOptionProp
         inputRef={ref}
         onChange={(event) => onChange(event.target.value)}
         select
-        required={Boolean(required)}
         error={invalid}
         helperText={error?.message}
       >