@licklist/design 0.68.1-dev.0 → 0.68.1

package/src/product-set/control/ProductSetControl.tsx

@@ -1,7 +1,7 @@
-import { Col, Form, Row } from 'react-bootstrap'
-import { Controller, useFormContext } from 'react-hook-form'
-import { useTranslation } from 'react-i18next'
-import clsx from 'clsx'
+import { Col, Form, Row } from "react-bootstrap";
+import { Controller, useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
 import {
   OPERATIONAL_COST_CUSTOMER,
   OPERATIONAL_COST_PROVIDER,
@@ -13,89 +13,89 @@ import {
   ProductSetType,
   RELY_ON_PEOPLE_TYPES,
   RelyOnPeopleType,
-} from '@licklist/core/dist/DataMapper/Product/ProductSetDataMapper'
-import { useId } from '@react-aria/utils'
-import { FieldSet } from '@licklist/core/dist/DataMapper/Order/FieldSetDataMapper'
-import { EmailTemplate } from '@licklist/core/dist/DataMapper/Notification/EmailTemplateDataMapper'
-import { SmsTemplate } from '@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper'
-import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
-import { ruleForUrlWithProtocol } from '@licklist/plugins/dist/validation/Rules/urlRule'
-import { WorkHour } from '@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper'
-import { checkIfZoneCategory } from '@licklist/plugins'
-import { WarningMessage } from '../../static'
-import { SelectItem } from '../../types/generic/SelectItem'
+} from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
+import { useId } from "@react-aria/utils";
+import { FieldSet } from "@licklist/core/dist/DataMapper/Order/FieldSetDataMapper";
+import { EmailTemplate } from "@licklist/core/dist/DataMapper/Notification/EmailTemplateDataMapper";
+import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper";
+import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import { ruleForUrlWithProtocol } from "@licklist/plugins/dist/validation/Rules/urlRule";
+import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
+import { checkIfZoneCategory } from "@licklist/plugins";
+import { WarningMessage } from "../../static";
+import { SelectItem } from "../../types/generic/SelectItem";
 import {
   DateAndRecurrenceInput,
   // TODO: Show Date Component, when reccurent date bugs are fixed
   // DateAndRecurrenceInput,
   DateAndRecurrenceInputValues,
-} from './DateAndRecurrenceInput'
-import TutorialGifCard from './TutorialGifCard'
-import { Step } from '../types'
-import { StepsControl } from '../form/StepsControl'
-import { Typeahead } from '../../typeahead'
-import { DateInput } from './DateInput'
+} from "./DateAndRecurrenceInput";
+import TutorialGifCard from "./TutorialGifCard";
+import { Step } from "../types";
+import { StepsControl } from "../form/StepsControl";
+import { Typeahead } from "../../typeahead";
+import { DateInput } from "./DateInput";
 
 const OPERATIONAL_COST_TITLES = {
-  [OPERATIONAL_COST_PROVIDER]: 'operationalCostProvider',
-  [OPERATIONAL_COST_CUSTOMER]: 'operationalCostCustomer',
-} as const
+  [OPERATIONAL_COST_PROVIDER]: "operationalCostProvider",
+  [OPERATIONAL_COST_CUSTOMER]: "operationalCostCustomer",
+} as const;
 
 const RELY_ON_PEOPLE_TYPE_TITLES = {
-  [RELY_ON_PEOPLE_PRODUCT_CAPACITY_QUANTITY]: 'peopleProductCapacityQuantity',
-  [RELY_ON_PEOPLE_PRODUCT_QUANTITY]: 'peopleProductQuantity',
-  [RELY_ON_PEOPLE_QUANTITY]: 'peopleQuantity',
-}
+  [RELY_ON_PEOPLE_PRODUCT_CAPACITY_QUANTITY]: "peopleProductCapacityQuantity",
+  [RELY_ON_PEOPLE_PRODUCT_QUANTITY]: "peopleProductQuantity",
+  [RELY_ON_PEOPLE_QUANTITY]: "peopleQuantity",
+};
 
 export interface TemplateItem {
-  id: string
-  value: EmailTemplate | SmsTemplate
-  label: string
+  id: string;
+  value: EmailTemplate | SmsTemplate;
+  label: string;
 }
 
 export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
-  name: string
-  type: ProductSetType
-  termsAndConditions: string
-  thankYouPageUrl: string
-  operationalCost: OperationalCostType
-  productGroups?: SelectItem[]
-  relyOnPeopleType?: RelyOnPeopleType | null
-  fieldSetId?: number
-  steps: Step[]
-  emailTemplates?: TemplateItem[]
-  smsTemplates?: TemplateItem[]
+  name: string;
+  type: ProductSetType;
+  termsAndConditions: string;
+  thankYouPageUrl: string;
+  operationalCost: OperationalCostType;
+  productGroups?: SelectItem[];
+  relyOnPeopleType?: RelyOnPeopleType | null;
+  fieldSetId?: number;
+  steps: Step[];
+  emailTemplates?: TemplateItem[];
+  smsTemplates?: TemplateItem[];
 }
 
 export interface ProductSetControlShared {
-  fee?: string
-  fieldSets?: FieldSet[]
-  emailTemplates?: EmailTemplate[]
-  smsTemplates?: SmsTemplate[]
+  fee?: string;
+  fieldSets?: FieldSet[];
+  emailTemplates?: EmailTemplate[];
+  smsTemplates?: SmsTemplate[];
 }
 
 export interface ProductSetControlProps {
-  companyName: string
-  isLoading: boolean
-  isEventEditProductSet?: boolean
-  isCreateAction?: boolean
-  emailTemplates?: TemplateItem[]
-  smsTemplates?: TemplateItem[]
-  fee?: string
-  fieldSets?: FieldSet[]
-  showEmailTemplate?: boolean
-  showSmsTemplate?: boolean
-  workHours: WorkHour[] | undefined
-  providerHasBookingManagement?: boolean
-  isOverrides?: boolean
-  isCreateNewOverrides?: boolean
-  timeZone: string
+  companyName: string;
+  isLoading: boolean;
+  isEventEditProductSet?: boolean;
+  isCreateAction?: boolean;
+  emailTemplates?: TemplateItem[];
+  smsTemplates?: TemplateItem[];
+  fee?: string;
+  fieldSets?: FieldSet[];
+  showEmailTemplate?: boolean;
+  showSmsTemplate?: boolean;
+  workHours: WorkHour[] | undefined;
+  providerHasBookingManagement?: boolean;
+  isOverrides?: boolean;
+  isCreateNewOverrides?: boolean;
+  timeZone: string;
 }
 
 export function ProductSetControl({
   companyName,
   isLoading,
-  fee = '5%',
+  fee = "5%",
   fieldSets = [],
   emailTemplates = [],
   smsTemplates = [],
@@ -109,7 +109,7 @@ export function ProductSetControl({
   isCreateNewOverrides = false,
   timeZone,
 }: ProductSetControlProps) {
-  const { t } = useTranslation(['Design', 'Validation', 'Notification'])
+  const { t } = useTranslation(["Design", "Validation", "Notification"]);
   const {
     register,
     control,
@@ -117,56 +117,56 @@ export function ProductSetControl({
     watch,
     setError,
     clearErrors,
-  } = useFormContext<ProductSetControlValues>()
+  } = useFormContext<ProductSetControlValues>();
 
-  const steps = watch('steps')
+  const steps = watch("steps");
 
-  const nameId = useId()
-  const termsAndConditionsId = useId()
-  const relyOnPeopleTypeId = useId()
+  const nameId = useId();
+  const termsAndConditionsId = useId();
+  const relyOnPeopleTypeId = useId();
 
-  const showSmsTemplateSelector = showSmsTemplate && !isOverrides
-  const showEmailTemplateSelector = showEmailTemplate && !isOverrides
-  const showDateSelector = !isEventEditProductSet && isOverrides
+  const showSmsTemplateSelector = showSmsTemplate && !isOverrides;
+  const showEmailTemplateSelector = showEmailTemplate && !isOverrides;
+  const showDateSelector = !isEventEditProductSet && isOverrides;
 
   const isZoneAdded = steps?.some(({ productCategories }) =>
     productCategories?.some((category) => checkIfZoneCategory(category?.type)),
-  )
+  );
 
   return (
     <Row
       className={`product-set-form ${
-        isEventEditProductSet && 'event-edit-product-set'
+        isEventEditProductSet && "event-edit-product-set"
       }`}
     >
       <Col md={6} sm={12} className="pr-5">
         <Form.Group controlId={nameId}>
-          <Form.Label>{t('Design:name')}*</Form.Label>
+          <Form.Label>{t("Design:name")}*</Form.Label>
           <Form.Control
-            {...register('name', {
-              required: t('Validation:fieldRequired', {
-                attribute: t('name'),
+            {...register("name", {
+              required: t("Validation:fieldRequired", {
+                attribute: t("name"),
               }) as string,
               maxLength: 255,
               validate: () => {
                 if (!steps.length) {
-                  setError('steps', {
+                  setError("steps", {
                     type: HookFormService.manualErrorType,
-                    message: t('Validation:fieldMinNumber', {
-                      attribute: t('steps'),
+                    message: t("Validation:fieldMinNumber", {
+                      attribute: t("steps"),
                       min: 1,
                     }),
-                  })
+                  });
                 } else if (
                   errors.steps?.type === HookFormService.manualErrorType
                 ) {
-                  clearErrors('steps')
+                  clearErrors("steps");
                 }
 
-                return true
+                return true;
               },
             })}
-            placeholder={t('Design:placeholderProductSetName')}
+            placeholder={t("Design:placeholderProductSetName")}
             isInvalid={Boolean(errors.name)}
           />
           <Form.Control.Feedback type="invalid">
@@ -230,21 +230,21 @@ export function ProductSetControl({
 
           <Form.Group>
             <Form.Label className="mb-0">
-              {t('Design:operationalCost')}
+              {t("Design:operationalCost")}
             </Form.Label>
             <div className="d-flex">
               <span className="booking-fee-text">
-                {t('bookingFeePaid', {
+                {t("bookingFeePaid", {
                   fee,
                 })}
               </span>
             </div>
             <Form.Control
-              {...register('operationalCost', { required: true })}
+              {...register("operationalCost", { required: true })}
               as="select"
               defaultValue={OPERATIONAL_COST_PROVIDER}
               disabled={isOverrides}
-              isInvalid={HookFormService.isInvalid('operationalCost', errors)}
+              isInvalid={HookFormService.isInvalid("operationalCost", errors)}
             >
               {Object.keys(OPERATIONAL_COST_TYPES).map((operationalCost) => (
                 <option
@@ -263,20 +263,20 @@ export function ProductSetControl({
               ))}
             </Form.Control>
             <Form.Control.Feedback type="invalid">
-              {HookFormService.getErrors('operationalCost', errors)}
+              {HookFormService.getErrors("operationalCost", errors)}
             </Form.Control.Feedback>
           </Form.Group>
 
           <Form.Group controlId={relyOnPeopleTypeId}>
-            <Form.Label>{t('peopleQuantityType')}</Form.Label>
+            <Form.Label>{t("peopleQuantityType")}</Form.Label>
             <Form.Control
-              {...register('relyOnPeopleType')}
+              {...register("relyOnPeopleType")}
               as="select"
               defaultValue={null}
               disabled={isOverrides}
-              isInvalid={HookFormService.isInvalid('relyOnPeopleType', errors)}
+              isInvalid={HookFormService.isInvalid("relyOnPeopleType", errors)}
             >
-              <option value="">{t('notRequired')} </option>
+              <option value="">{t("notRequired")} </option>
               {Object.keys(RELY_ON_PEOPLE_TYPES).map((relyOnPeopleType) => (
                 <option
                   value={RELY_ON_PEOPLE_TYPES[relyOnPeopleType]}
@@ -291,30 +291,30 @@ export function ProductSetControl({
               ))}
             </Form.Control>
             <Form.Control.Feedback type="invalid">
-              {HookFormService.getErrors('relyOnPeopleType', errors)}
+              {HookFormService.getErrors("relyOnPeopleType", errors)}
             </Form.Control.Feedback>
           </Form.Group>
 
           <Form.Group controlId={termsAndConditionsId}>
-            <Form.Label>{t('Design:termsAndConditions')}</Form.Label>
+            <Form.Label>{t("Design:termsAndConditions")}</Form.Label>
             <Form.Control
-              {...register('termsAndConditions')}
+              {...register("termsAndConditions")}
               as="textarea"
               rows={2}
               disabled={isLoading || isOverrides}
               isInvalid={HookFormService.isInvalid(
-                'termsAndConditions',
+                "termsAndConditions",
                 errors,
               )}
             />
             <Form.Control.Feedback type="invalid">
-              {HookFormService.getErrors('termsAndConditions', errors)}
+              {HookFormService.getErrors("termsAndConditions", errors)}
             </Form.Control.Feedback>
           </Form.Group>
 
           <Form.Group>
             <Form.Label className="mt-4">
-              {t('Design:emailTemplate')}
+              {t("Design:emailTemplate")}
             </Form.Label>
             <>
               {showEmailTemplateSelector ? (
@@ -322,39 +322,39 @@ export function ProductSetControl({
                   name="emailTemplates"
                   options={emailTemplates}
                   isMultipleChoise
-                  placeholder={t('Design:choose')}
-                  noOptionsMessage={t('Design:noActiveTemplates', {
-                    notification: t('Design:email'),
+                  placeholder={t("Design:choose")}
+                  noOptionsMessage={t("Design:noActiveTemplates", {
+                    notification: t("Design:email"),
                   })}
                 />
               ) : (
                 <WarningMessage
-                  message={t('Design:noActiveTemplates', {
-                    notification: t('Design:email'),
+                  message={t("Design:noActiveTemplates", {
+                    notification: t("Design:email"),
                   })}
                 />
               )}
             </>
 
             <Form.Label
-              className={clsx(emailTemplates.length > 0 ? 'mt-4' : 'mt-1')}
+              className={clsx(emailTemplates.length > 0 ? "mt-4" : "mt-1")}
             >
-              {t('Design:smsTemplate')}
+              {t("Design:smsTemplate")}
             </Form.Label>
             {showSmsTemplateSelector ? (
               <Typeahead
                 name="smsTemplates"
                 options={smsTemplates}
                 isMultipleChoise
-                placeholder={t('Design:choose')}
-                noOptionsMessage={t('Design:noActiveTemplates', {
-                  notification: t('Design:sms'),
+                placeholder={t("Design:choose")}
+                noOptionsMessage={t("Design:noActiveTemplates", {
+                  notification: t("Design:sms"),
                 })}
               />
             ) : (
               <WarningMessage
-                message={t('Design:noActiveTemplates', {
-                  notification: t('Design:sms'),
+                message={t("Design:noActiveTemplates", {
+                  notification: t("Design:sms"),
                 })}
               />
             )}
@@ -365,60 +365,62 @@ export function ProductSetControl({
               control={control}
               name="fieldSetId"
               render={({ field }) => {
-                const fieldValue = Number(field.value)
+                const fieldValue = Number(field.value);
 
                 return (
                   <>
-                    <Form.Label>{t('Design:customFields')}</Form.Label>
+                    <Form.Label>{t("Design:customFields")}</Form.Label>
                     <Form.Control
                       onChange={field.onChange}
                       value={fieldValue}
                       as="select"
                       disabled={isOverrides}
                       isInvalid={HookFormService.isInvalid(
-                        'fieldSetId',
+                        "fieldSetId",
                         errors,
                       )}
                     >
-                      <option value="">{t('Design:choose')}</option>
-                      {fieldSets?.map((fieldSet) => (
-                        <option value={fieldSet.id} key={fieldSet.id}>
-                          {fieldSet.name}
-                        </option>
-                      ))}
+                      <option value="">{t("Design:choose")}</option>
+                      {fieldSets?.map((fieldSet) => {
+                        return (
+                          <option value={fieldSet.id} key={fieldSet.id}>
+                            {fieldSet.name}
+                          </option>
+                        );
+                      })}
                     </Form.Control>
                     <Form.Control.Feedback type="invalid">
-                      {HookFormService.getErrors('fieldSetId', errors)}
+                      {HookFormService.getErrors("fieldSetId", errors)}
                     </Form.Control.Feedback>
                   </>
-                )
+                );
               }}
             />
           </Form.Group>
 
           <Form.Group controlId="thankYouPageUrlId">
-            <Form.Label>{t('thankYouPageUrl')}</Form.Label>
+            <Form.Label>{t("thankYouPageUrl")}</Form.Label>
 
             <Form.Control
-              {...register('thankYouPageUrl', {
+              {...register("thankYouPageUrl", {
                 validate: (url) => {
-                  if (!url) return true
-                  if (ruleForUrlWithProtocol.test(url as string)) return true
-                  return t('Validation:fieldValidWebURL', {
-                    attribute: t('thankYouPageUrl'),
-                  }) as string
+                  if (!url) return true;
+                  if (ruleForUrlWithProtocol.test(url as string)) return true;
+                  return t("Validation:fieldValidWebURL", {
+                    attribute: t("thankYouPageUrl"),
+                  }) as string;
                 },
               })}
               disabled={isOverrides}
-              isInvalid={HookFormService.isInvalid('thankYouPageUrl', errors)}
+              isInvalid={HookFormService.isInvalid("thankYouPageUrl", errors)}
             />
 
             <Form.Control.Feedback type="invalid">
-              {HookFormService.getErrors('thankYouPageUrl', errors)}
+              {HookFormService.getErrors("thankYouPageUrl", errors)}
             </Form.Control.Feedback>
           </Form.Group>
         </div>
       </Col>
     </Row>
-  )
+  );
 }

package/src/product-set/control/ProductSetRecurrenceControl.stories.tsx

@@ -1,41 +1,43 @@
-import { Meta, Story } from '@storybook/react'
-import { useState } from 'react'
+import { Meta, Story } from "@storybook/react";
+import { useState } from "react";
 import {
   ProductSetRecurrenceControl,
   ProductSetRecurrenceControlProps,
-} from './ProductSetRecurrenceControl'
+} from "./ProductSetRecurrenceControl";
 import {
   arrayMove,
   SortableContext,
   verticalListSortingStrategy,
-} from '@dnd-kit/sortable'
-import { DndContext } from '@dnd-kit/core'
+} from "@dnd-kit/sortable";
+import { DndContext } from "@dnd-kit/core";
 
 export default {
-  title: 'Product Set/Recurrence/Control',
+  title: "Product Set/Recurrence/Control",
   component: ProductSetRecurrenceControl,
-} as Meta
+} as Meta;
 
 interface ProductSetRecurrences {
-  onEdit: ProductSetRecurrenceControlProps['onEdit']
-  menuRecurrences: ProductSetRecurrenceControlProps['menuRecurrence'][]
+  onEdit: ProductSetRecurrenceControlProps["onEdit"];
+  menuRecurrences: ProductSetRecurrenceControlProps["menuRecurrence"][];
 }
 
 export const Default: Story<ProductSetRecurrences> = (args) => {
   const [items, setItems] = useState(
     args.menuRecurrences?.sort((a, b) => a.sort - b.sort) ?? [],
-  )
+  );
 
   const onDragEnd = ({ over, active }) => {
-    if (over.id === active.id) return
+    if (over.id === active.id) return;
 
     setItems((items) => {
-      const prevIndex = items.findIndex((item) => String(item.id) === active.id)
-      const nextIndex = items.findIndex((item) => String(item.id) === over.id)
+      const prevIndex = items.findIndex(
+        (item) => String(item.id) === active.id,
+      );
+      const nextIndex = items.findIndex((item) => String(item.id) === over.id);
 
-      return arrayMove(items, prevIndex, nextIndex)
-    })
-  }
+      return arrayMove(items, prevIndex, nextIndex);
+    });
+  };
 
   return (
     <div className="product-set-recurrences">
@@ -56,8 +58,8 @@ export const Default: Story<ProductSetRecurrences> = (args) => {
         </SortableContext>
       </DndContext>
     </div>
-  )
-}
+  );
+};
 
 Default.args = {
   onEdit: (menuRecurrence) => console.log({ menuRecurrence }),
@@ -65,26 +67,26 @@ Default.args = {
     {
       id: 38,
       menuId: 257,
-      rrule: 'INTERVAL=1;FREQ=WEEKLY;BYDAY=TU,WE,TH,FR,SA',
-      startDate: '2022-12-13',
-      endDate: '2022-12-14',
+      rrule: "INTERVAL=1;FREQ=WEEKLY;BYDAY=TU,WE,TH,FR,SA",
+      startDate: "2022-12-13",
+      endDate: "2022-12-14",
       sort: 3,
     },
     {
       id: 39,
       menuId: 257,
-      rrule: 'INTERVAL=1;FREQ=WEEKLY;BYDAY=TU,WE,TH,FR,SA',
-      startDate: '2022-12-14',
-      endDate: '2022-12-15',
+      rrule: "INTERVAL=1;FREQ=WEEKLY;BYDAY=TU,WE,TH,FR,SA",
+      startDate: "2022-12-14",
+      endDate: "2022-12-15",
       sort: 1,
     },
     {
       id: 40,
       menuId: 257,
-      rrule: 'INTERVAL=1;FREQ=WEEKLY;BYDAY=TU,WE,TH,FR,SA',
-      startDate: '2022-12-11',
-      endDate: '2022-12-20',
+      rrule: "INTERVAL=1;FREQ=WEEKLY;BYDAY=TU,WE,TH,FR,SA",
+      startDate: "2022-12-11",
+      endDate: "2022-12-20",
       sort: 2,
     },
   ],
-}
+};

package/src/product-set/control/ProductSetRecurrenceControl.tsx

@@ -1,16 +1,16 @@
-import { useTranslation } from 'react-i18next'
-import { useIntl } from 'react-intl'
-import RRule from 'rrule'
-import { ProductSetRecurrence } from '@licklist/core/dist/DataMapper/Product/ProductSetRecurrenceDataMapper'
+import { useTranslation } from "react-i18next";
+import { useIntl } from "react-intl";
+import RRule from "rrule";
+import { ProductSetRecurrence } from "@licklist/core/dist/DataMapper/Product/ProductSetRecurrenceDataMapper";
 
-import { useSortable } from '@dnd-kit/sortable'
-import { CSS } from '@dnd-kit/utilities'
-import { FaCalendar, FaEllipsisH } from 'react-icons/fa'
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { FaCalendar, FaEllipsisH } from "react-icons/fa";
 
 export interface ProductSetRecurrenceControlProps {
-  menuRecurrence?: { _id: string } & Partial<ProductSetRecurrence>
-  onEdit?: (onEdit: Partial<ProductSetRecurrence>) => void
-  errorMessage?: string
+  menuRecurrence?: { _id: string } & Partial<ProductSetRecurrence>;
+  onEdit?: (onEdit: Partial<ProductSetRecurrence>) => void;
+  errorMessage?: string;
 }
 
 export const ProductSetRecurrenceControl = ({
@@ -18,15 +18,16 @@ export const ProductSetRecurrenceControl = ({
   onEdit,
   errorMessage,
 }: ProductSetRecurrenceControlProps) => {
-  const { formatDate } = useIntl()
-  const { t } = useTranslation('Design')
+  const { formatDate } = useIntl();
+  const { t } = useTranslation("Design");
 
   const { attributes, listeners, setNodeRef, transform, transition } =
-    useSortable({ id: String(menuRecurrence._id) })
+    useSortable({ id: String(menuRecurrence._id) });
 
   // TODO: i18n after the proper way to display this info is confirmed
-  const getHumanReadableDate = (menuRecurrence) =>
-    RRule.fromString(menuRecurrence.rrule).toText()
+  const getHumanReadableDate = (menuRecurrence) => {
+    return RRule.fromString(menuRecurrence.rrule).toText();
+  };
 
   return (
     <div
@@ -52,15 +53,15 @@ export const ProductSetRecurrenceControl = ({
           />
 
           <span className="product-set-recurrence-title d-flex flex-grow-1">
-            {t('from')}{' '}
+            {t("from")}{" "}
             {formatDate(menuRecurrence.startDate, {
-              dateStyle: 'medium',
-            })}{' '}
+              dateStyle: "medium",
+            })}{" "}
             {menuRecurrence.endDate && (
               <>
-                {'- '}
+                {"- "}
                 {formatDate(menuRecurrence.endDate, {
-                  dateStyle: 'medium',
+                  dateStyle: "medium",
                 })}
               </>
             )}
@@ -83,9 +84,9 @@ export const ProductSetRecurrenceControl = ({
           {getHumanReadableDate(menuRecurrence)}
         </span>
       </div>
-      <div className={`manual-form-error ${!errorMessage && 'd-none'}`}>
+      <div className={`manual-form-error ${!errorMessage && "d-none"}`}>
         {errorMessage}
       </div>
     </div>
-  )
-}
+  );
+};