@licklist/design 0.68.0 → 0.68.1-dev.0

package/src/product-set/product/advanced-options/AdvancedOptions.tsx

@@ -1,23 +1,23 @@
-import React, { useContext } from "react";
-import { Col, Form } from "react-bootstrap";
-import { Controller, Path, useFormContext } from "react-hook-form";
-import { HookFormService } from "@licklist/plugins";
-import { useId } from "@react-aria/utils";
-import { useTranslation } from "react-i18next";
-import { PRODUCT_DEfAULT_COLORS } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import { useContext } from 'react'
+import { Col, Form } from 'react-bootstrap'
+import { Controller, Path, useFormContext } from 'react-hook-form'
+import { HookFormService } from '@licklist/plugins'
+import { useId } from '@react-aria/utils'
+import { useTranslation } from 'react-i18next'
+import { PRODUCT_DEfAULT_COLORS } from '@licklist/core/dist/DataMapper/Product/ProductDataMapper'
 import {
   FieldNamePrefixPath,
   FormValues,
-} from "@licklist/plugins/dist/types/services/Form/hook-form-service";
-import { ProductPriceControl } from "../price/ProductPriceControl";
-import { PropertyControl } from "../../../snippet";
+} from '@licklist/plugins/dist/types/services/Form/hook-form-service'
+import { ProductPriceControl } from '../price/ProductPriceControl'
+import { PropertyControl } from '../../../snippet'
 
-import { BooleanSwitch } from "../../../static";
-import { ProductSetLoadingContext } from "../../form/context";
+import { BooleanSwitch } from '../../../static'
+import { ProductSetLoadingContext } from '../../form/context'
 
 interface AdvancedOptionsProps<T> extends FieldNamePrefixPath<T> {
-  isOverrides: boolean;
-  isLoading: boolean;
+  isOverrides: boolean
+  isLoading: boolean
 }
 
 export const AdvancedOptions = <T extends FormValues>({
@@ -25,21 +25,21 @@ export const AdvancedOptions = <T extends FormValues>({
   isOverrides,
   isLoading,
 }: AdvancedOptionsProps<T>) => {
-  const { t } = useTranslation(["Design", "Validation", "ProductSet"]);
+  const { t } = useTranslation(['Design', 'Validation', 'ProductSet'])
 
   const {
     register,
     control,
     formState: { errors },
-  } = useFormContext<T>();
+  } = useFormContext<T>()
 
-  const { productGroupList } = useContext(ProductSetLoadingContext);
+  const { productGroupList } = useContext(ProductSetLoadingContext)
 
-  const isRequiredId = useId();
-  const productGroupId = useId();
-  const termsAndConditionsId = useId();
-  const hasSpecialNotesId = useId();
-  const minSpendId = useId();
+  const isRequiredId = useId()
+  const productGroupId = useId()
+  const termsAndConditionsId = useId()
+  const hasSpecialNotesId = useId()
+  const minSpendId = useId()
 
   return (
     <>
@@ -47,7 +47,7 @@ export const AdvancedOptions = <T extends FormValues>({
         controlId={isRequiredId}
         className="advanced-switch-container"
       >
-        <Form.Label>{t("isRequired")}</Form.Label>
+        <Form.Label>{t('isRequired')}</Form.Label>
 
         <Controller
           render={({ field: { value, onChange, name } }) => (
@@ -67,7 +67,7 @@ export const AdvancedOptions = <T extends FormValues>({
         controlId={hasSpecialNotesId}
         className="advanced-switch-container"
       >
-        <Form.Label>{t("hasSpecialNotes")}</Form.Label>
+        <Form.Label>{t('hasSpecialNotes')}</Form.Label>
 
         <Controller
           render={({ field: { value, onChange, name } }) => (
@@ -85,44 +85,42 @@ export const AdvancedOptions = <T extends FormValues>({
 
       <PropertyControl<T>
         item={`${fieldNamePrefix}.color` as Path<T>}
-        label={t("ProductSet:selectColor")}
+        label={t('ProductSet:selectColor')}
         isDisabled={isOverrides}
         isRequired={false}
         defaultColors={PRODUCT_DEfAULT_COLORS}
       />
 
       <Form.Group controlId={productGroupId}>
-        <Form.Label>{t("productGroup")}</Form.Label>
+        <Form.Label>{t('productGroup')}</Form.Label>
         <Form.Control
           as="select"
           {...register(`${fieldNamePrefix}.productGroupId` as Path<T>)}
           isInvalid={HookFormService.isInvalid<T>(
             `${fieldNamePrefix}.productGroupId` as Path<T>,
-            errors
+            errors,
           )}
           disabled={isLoading || isOverrides}
           defaultValue=""
         >
-          <option value="">{t("Design:selectProductGroup")}</option>
-          {productGroupList.map((productGroup) => {
-            return (
-              <option value={productGroup.id} key={productGroup.id}>
-                {productGroup.value}
-              </option>
-            );
-          })}
+          <option value="">{t('Design:selectProductGroup')}</option>
+          {productGroupList.map((productGroup) => (
+            <option value={productGroup.id} key={productGroup.id}>
+              {productGroup.value}
+            </option>
+          ))}
         </Form.Control>
         <Form.Control.Feedback type="invalid">
           {HookFormService.getErrors<T>(
             `${fieldNamePrefix}.productGroupId` as Path<T>,
-            errors
+            errors,
           )}
         </Form.Control.Feedback>
       </Form.Group>
 
       <Col lg={8} md={8} className="pl-0">
         <Form.Group controlId={termsAndConditionsId}>
-          <Form.Label>{t("productTermsConditions")}</Form.Label>
+          <Form.Label>{t('productTermsConditions')}</Form.Label>
 
           <Controller
             render={({ field: { value, onChange, name, ref } }) => (
@@ -134,7 +132,7 @@ export const AdvancedOptions = <T extends FormValues>({
                 onChange={onChange}
                 isInvalid={HookFormService.isInvalid<T>(
                   `${fieldNamePrefix}.termsAndConditions` as Path<T>,
-                  errors
+                  errors,
                 )}
                 disabled={isLoading || isOverrides}
                 name={name}
@@ -147,7 +145,7 @@ export const AdvancedOptions = <T extends FormValues>({
           <Form.Control.Feedback type="invalid">
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}.termsAndConditions` as Path<T>,
-              errors
+              errors,
             )}
           </Form.Control.Feedback>
         </Form.Group>
@@ -155,7 +153,7 @@ export const AdvancedOptions = <T extends FormValues>({
 
       <Form.Group controlId={minSpendId} className="advanced-switch-container">
         <ProductPriceControl
-          title={t("minSpend")}
+          title={t('minSpend')}
           isRequired={false}
           isMoreThanZero
           allowDeposits={false}
@@ -164,5 +162,5 @@ export const AdvancedOptions = <T extends FormValues>({
         />
       </Form.Group>
     </>
-  );
-};
+  )
+}

package/src/product-set/product/advanced-options/index.ts

@@ -1 +1 @@
-export * from "./AdvancedOptions";
+export * from './AdvancedOptions'

package/src/product-set/product/booking-management/ProductBookingManagement.stories.tsx

@@ -1,24 +1,24 @@
-import { Meta, Story } from "@storybook/react";
-import Form from "react-bootstrap/Form";
-import { FormProvider, useForm } from "react-hook-form";
+import { Meta, Story } from '@storybook/react'
+import Form from 'react-bootstrap/Form'
+import { FormProvider, useForm } from 'react-hook-form'
 import {
   ProductBookingManagementControl,
   ProductBookingManagementControlProps,
   ProductBookingManagementControlValues,
-} from "./ProductBookingManagementControl";
+} from './ProductBookingManagementControl'
 
 export default {
-  title: "Product Set/Product/Booking Management Control",
-} as Meta;
+  title: 'Product Set/Product/Booking Management Control',
+} as Meta
 
 export const Default: Story<ProductBookingManagementControlProps<{}>> = (
   args,
 ) => {
   const form = useForm<ProductBookingManagementControlValues>({
-    mode: "onChange",
-  });
+    mode: 'onChange',
+  })
 
-  const onSubmit = (data) => console.log("onSubmit", data);
+  const onSubmit = (data) => console.log('onSubmit', data)
 
   return (
     <FormProvider {...form}>
@@ -30,9 +30,9 @@ export const Default: Story<ProductBookingManagementControlProps<{}>> = (
         <ProductBookingManagementControl {...args} />
       </Form>
     </FormProvider>
-  );
-};
+  )
+}
 
 Default.args = {
   isLoading: false,
-};
+}

package/src/product-set/product/booking-management/ProductBookingManagementControl.tsx

@@ -1,53 +1,53 @@
-import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
 import {
   FieldNamePrefixPath,
   FormValues,
-} from "@licklist/plugins/dist/types/services/Form/hook-form-service";
-import { useId } from "@react-aria/utils";
-import { Form } from "react-bootstrap";
-import InputGroup from "react-bootstrap/InputGroup";
-import { Controller, Path, useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { FaSortNumericUpAlt } from "react-icons/fa";
-import { SelectItem } from "../../../types/generic/SelectItem";
+} from '@licklist/plugins/dist/types/services/Form/hook-form-service'
+import { useId } from '@react-aria/utils'
+import { Form } from 'react-bootstrap'
+import InputGroup from 'react-bootstrap/InputGroup'
+import { Controller, Path, useFormContext } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { FaSortNumericUpAlt } from 'react-icons/fa'
+import { SelectItem } from '../../../types/generic/SelectItem'
 
 export interface ProductBookingManagementControlValues extends FormValues {
-  zoneId: number;
-  capacity: number;
-  duration: number;
+  zoneId: number
+  capacity: number
+  duration: number
 }
 
 export interface ProductBookingManagementControlProps<T>
   extends FieldNamePrefixPath<T> {
-  isLoading: boolean;
-  zoneList?: SelectItem[];
+  isLoading: boolean
+  zoneList?: SelectItem[]
 }
 
 export function ProductBookingManagementControl<T extends FormValues>(
   props: ProductBookingManagementControlProps<T>,
 ) {
-  const { isLoading = false, fieldNamePrefix, zoneList = [] } = props;
+  const { isLoading = false, fieldNamePrefix, zoneList = [] } = props
   const {
     register,
     control,
     formState: { errors },
-  } = useFormContext<T>();
-  const { t } = useTranslation("Design");
+  } = useFormContext<T>()
+  const { t } = useTranslation('Design')
 
-  const zoneId = useId();
-  const capacityId = useId();
-  const durationId = useId();
+  const zoneId = useId()
+  const capacityId = useId()
+  const durationId = useId()
 
   const durationTypeList: SelectItem[] = [
-    { id: 1, value: t("secs") },
-    { id: 2, value: t("mins") },
-    { id: 3, value: t("hours") },
-  ];
+    { id: 1, value: t('secs') },
+    { id: 2, value: t('mins') },
+    { id: 3, value: t('hours') },
+  ]
 
   return (
     <>
       <Form.Group controlId={zoneId}>
-        <Form.Label>{t("zone")}</Form.Label>
+        <Form.Label>{t('zone')}</Form.Label>
         <Form.Control
           as="select"
           {...register(`${fieldNamePrefix}.zoneId` as Path<T>)}
@@ -72,7 +72,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
       </Form.Group>
 
       <Form.Group controlId={capacityId}>
-        <Form.Label>{t("capacity")}</Form.Label>
+        <Form.Label>{t('capacity')}</Form.Label>
 
         <InputGroup hasValidation>
           <InputGroup.Prepend>
@@ -103,8 +103,8 @@ export function ProductBookingManagementControl<T extends FormValues>(
               validate: (value) => Number(value) % 1 === 0,
               min: {
                 value: 0,
-                message: t("Validation:fieldMinNumber", {
-                  attribute: t("capacity"),
+                message: t('Validation:fieldMinNumber', {
+                  attribute: t('capacity'),
                   min: 0,
                 }) as string,
               },
@@ -121,7 +121,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
       </Form.Group>
 
       <Form.Group controlId={durationId}>
-        <Form.Label>{t("duration")}</Form.Label>
+        <Form.Label>{t('duration')}</Form.Label>
 
         <InputGroup hasValidation>
           <Controller
@@ -176,5 +176,5 @@ export function ProductBookingManagementControl<T extends FormValues>(
         </InputGroup>
       </Form.Group>
     </>
-  );
+  )
 }

package/src/product-set/product/booking-management/index.ts

@@ -1 +1 @@
-export * from "./ProductBookingManagementControl";
+export * from './ProductBookingManagementControl'

package/src/product-set/product/constants.ts

@@ -1,2 +1,2 @@
-export const MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH = 1000;
-export const MAX_QUANTITY_RECURRENCE_DATE_IN_OVERRIDE = 1;
+export const MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH = 1000
+export const MAX_QUANTITY_RECURRENCE_DATE_IN_OVERRIDE = 1

package/src/product-set/product/deposit/ProductDeposit.stories.tsx

@@ -1,22 +1,22 @@
-import { Meta, Story } from "@storybook/react";
-import Form from "react-bootstrap/Form";
-import { FormProvider, useForm } from "react-hook-form";
+import { Meta, Story } from '@storybook/react'
+import Form from 'react-bootstrap/Form'
+import { FormProvider, useForm } from 'react-hook-form'
 import {
   ProductDepositControl,
   ProductDepositControlProps,
   ProductDepositControlValues,
-} from "./ProductDepositControl";
+} from './ProductDepositControl'
 
 export default {
-  title: "Product Set/Product/Deposit Control",
-} as Meta;
+  title: 'Product Set/Product/Deposit Control',
+} as Meta
 
 export const Default: Story<ProductDepositControlProps<{}>> = (args) => {
   const form = useForm<ProductDepositControlValues>({
-    mode: "onChange",
-  });
+    mode: 'onChange',
+  })
 
-  const onSubmit = (data) => console.log("onSubmit", data);
+  const onSubmit = (data) => console.log('onSubmit', data)
 
   return (
     <FormProvider {...form}>
@@ -28,9 +28,9 @@ export const Default: Story<ProductDepositControlProps<{}>> = (args) => {
         <ProductDepositControl {...args} />
       </Form>
     </FormProvider>
-  );
-};
+  )
+}
 
 Default.args = {
   isLoading: false,
-};
+}

package/src/product-set/product/deposit/ProductDepositControl.tsx

@@ -1,42 +1,42 @@
-import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
 import {
   FieldNamePrefixPath,
   FormValues,
-} from "@licklist/plugins/dist/types/services/Form/hook-form-service";
-import { useId } from "@react-aria/utils";
-import { Form } from "react-bootstrap";
-import Col from "react-bootstrap/Col";
-import InputGroup from "react-bootstrap/InputGroup";
-import { Controller, Path, useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { FaPoundSign } from "react-icons/fa";
+} from '@licklist/plugins/dist/types/services/Form/hook-form-service'
+import { useId } from '@react-aria/utils'
+import { Form } from 'react-bootstrap'
+import Col from 'react-bootstrap/Col'
+import InputGroup from 'react-bootstrap/InputGroup'
+import { Controller, Path, useFormContext } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { FaPoundSign } from 'react-icons/fa'
 
 export interface ProductDepositControlValues extends FormValues {
-  deposit: number;
+  deposit: number
 }
 
 export interface ProductDepositControlProps<T> extends FieldNamePrefixPath<T> {
-  isLoading: boolean;
+  isLoading: boolean
 }
 
 export function ProductDepositControl<T extends FormValues>(
   props: ProductDepositControlProps<T>,
 ) {
-  const { isLoading = false, fieldNamePrefix } = props;
+  const { isLoading = false, fieldNamePrefix } = props
   const {
     control,
     formState: { errors },
     watch,
-  } = useFormContext<T>();
-  const { t } = useTranslation("Design");
-  const totalPrice = watch(`${fieldNamePrefix}.price` as Path<T>);
+  } = useFormContext<T>()
+  const { t } = useTranslation('Design')
+  const totalPrice = watch(`${fieldNamePrefix}.price` as Path<T>)
 
-  const depositId = useId();
+  const depositId = useId()
 
   return (
     <Col xs={12} sm={6}>
       <Form.Group controlId={depositId}>
-        <Form.Label>{t("priceToPayNow")}</Form.Label>
+        <Form.Label>{t('priceToPayNow')}</Form.Label>
 
         <InputGroup hasValidation>
           <InputGroup.Prepend>
@@ -65,20 +65,20 @@ export function ProductDepositControl<T extends FormValues>(
             control={control}
             name={`${fieldNamePrefix}.deposit` as Path<T>}
             rules={{
-              required: t("Validation:fieldRequired", {
-                attribute: t("deposit"),
+              required: t('Validation:fieldRequired', {
+                attribute: t('deposit'),
               }) as string,
               min: {
                 value: 0,
-                message: t("Validation:fieldMinNumber", {
-                  attribute: t("deposit"),
+                message: t('Validation:fieldMinNumber', {
+                  attribute: t('deposit'),
                   min: 0,
                 }) as string,
               },
               max: {
                 value: Number(totalPrice),
-                message: t("Validation:fieldMaxDeposit", {
-                  attribute: t("deposit"),
+                message: t('Validation:fieldMaxDeposit', {
+                  attribute: t('deposit'),
                   max: Number(totalPrice),
                 }) as string,
               },
@@ -94,5 +94,5 @@ export function ProductDepositControl<T extends FormValues>(
         </InputGroup>
       </Form.Group>
     </Col>
-  );
+  )
 }

package/src/product-set/product/deposit/index.ts

@@ -1 +1 @@
-export * from "./ProductDepositControl";
+export * from './ProductDepositControl'

package/src/product-set/product/duration/ProductDurationControl.stories.tsx

@@ -1,15 +1,15 @@
 /* eslint-disable no-console */
-import { Meta, Story } from "@storybook/react";
-import { useForm, FormProvider } from "react-hook-form";
-import { ProductDurationControl } from "./ProductDurationControl";
+import { Meta, Story } from '@storybook/react'
+import { useForm, FormProvider } from 'react-hook-form'
+import { ProductDurationControl } from './ProductDurationControl'
 
 export default {
-  title: "Product Set/Product Duration Control",
+  title: 'Product Set/Product Duration Control',
   component: ProductDurationControl,
-} as Meta;
+} as Meta
 
 export const Default: Story = () => {
-  const form = useForm({ defaultValues: { duration: null } });
+  const form = useForm({ defaultValues: { duration: null } })
 
   return (
     <FormProvider {...form}>
@@ -20,5 +20,5 @@ export const Default: Story = () => {
         />
       </form>
     </FormProvider>
-  );
-};
+  )
+}

package/src/product-set/product/duration/ProductDurationControl.tsx

@@ -1,55 +1,55 @@
-import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { FieldNamePrefixPath } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
-import { useId } from "@react-aria/utils";
-import { Col, Form, InputGroup } from "react-bootstrap";
-import { Controller, Path, useFormContext, useWatch } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { ReactComponent as IncrementIcon } from "../../../assets/dashboard/increment.svg";
+import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
+import { FieldNamePrefixPath } from '@licklist/plugins/dist/types/services/Form/hook-form-service'
+import { useId } from '@react-aria/utils'
+import { Col, Form, InputGroup } from 'react-bootstrap'
+import { Controller, Path, useFormContext, useWatch } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { ReactComponent as IncrementIcon } from '../../../assets/dashboard/increment.svg'
 
 export interface ProductDurationControlProps<T> extends FieldNamePrefixPath<T> {
-  disabled: boolean;
+  disabled: boolean
 }
 
 export const ProductDurationControl = <T,>({
   fieldNamePrefix,
   disabled,
 }: ProductDurationControlProps<T>) => {
-  const { t } = useTranslation("Design");
-  const hoursId = useId();
-  const minutesId = useId();
+  const { t } = useTranslation('Design')
+  const hoursId = useId()
+  const minutesId = useId()
 
   const {
     control,
     formState: { errors },
     setValue,
-  } = useFormContext<T>();
+  } = useFormContext<T>()
 
-  const fieldName = `${fieldNamePrefix}.duration` as Path<T>;
+  const fieldName = `${fieldNamePrefix}.duration` as Path<T>
 
   const setDurationValue = (value: number) =>
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    setValue(fieldName, value as any, { shouldValidate: true });
+    setValue(fieldName, value as any, { shouldValidate: true })
 
   const duration = useWatch({
     control,
     name: fieldName,
-  }) as number;
+  }) as number
 
-  const durationHours = Math.floor(duration / 60);
-  const durationMinutes = duration % 60;
+  const durationHours = Math.floor(duration / 60)
+  const durationMinutes = duration % 60
 
   const onHoursChange = (value: number) => {
-    setDurationValue(value * 60 + durationMinutes);
-  };
+    setDurationValue(value * 60 + durationMinutes)
+  }
 
   const onMinutesChange = (value: number) => {
-    const sanitizedValue = value > 59 ? 59 : value;
-    setDurationValue(durationHours * 60 + sanitizedValue);
-  };
+    const sanitizedValue = value > 59 ? 59 : value
+    setDurationValue(durationHours * 60 + sanitizedValue)
+  }
 
-  const isInvalid = HookFormService.isInvalid<T>(fieldName, errors);
+  const isInvalid = HookFormService.isInvalid<T>(fieldName, errors)
 
-  const onFocus = (e) => e.target.select();
+  const onFocus = (e) => e.target.select()
 
   return (
     <Controller
@@ -58,25 +58,25 @@ export const ProductDurationControl = <T,>({
       rules={{
         min: {
           value: 0,
-          message: t("Validation:fieldMinNumber", {
-            attribute: t("duration"),
+          message: t('Validation:fieldMinNumber', {
+            attribute: t('duration'),
             min: 0,
           }),
         },
         validate: (val) => {
           if (!disabled && (!val || (val as number) < 1)) {
-            return t("Validation:fieldRequired", {
-              attribute: t("duration"),
-            }) as string;
+            return t('Validation:fieldRequired', {
+              attribute: t('duration'),
+            }) as string
           }
-          return true;
+          return true
         },
       }}
       render={({ field }) => (
         <>
           <Col lg={4} md={4} sm={6}>
             <Form.Group controlId={hoursId} className="position-relative">
-              <Form.Label>{t("durationHours")}</Form.Label>
+              <Form.Label>{t('durationHours')}</Form.Label>
 
               <InputGroup hasValidation>
                 <InputGroup.Prepend
@@ -111,7 +111,7 @@ export const ProductDurationControl = <T,>({
 
           <Col lg={4} md={4} sm={6}>
             <Form.Group controlId={minutesId} className="position-relative">
-              <Form.Label>{t("durationMinutes")}</Form.Label>
+              <Form.Label>{t('durationMinutes')}</Form.Label>
 
               <InputGroup hasValidation>
                 <InputGroup.Prepend
@@ -145,5 +145,5 @@ export const ProductDurationControl = <T,>({
         </>
       )}
     />
-  );
-};
+  )
+}

package/src/product-set/product/duration/index.ts

@@ -1 +1 @@
-export * from "./ProductDurationControl";
+export * from './ProductDurationControl'