@licklist/design 0.68.0 → 0.68.1-dev.0

package/src/setting/dashboard/DashboardSetting.stories.tsx

@@ -1,36 +1,36 @@
-import { Meta, Story } from "@storybook/react";
-import { FormProvider, useForm } from "react-hook-form";
-import Container from "react-bootstrap/Container";
-import * as Config from "@licklist/core/dist/Config";
+import { Meta, Story } from '@storybook/react'
+import { FormProvider, useForm } from 'react-hook-form'
+import Container from 'react-bootstrap/Container'
+import * as Config from '@licklist/core/dist/Config'
 
 import {
   EventSettingForm,
   EventSettingFormFieldValues,
   EventSettingFormProps,
-} from "./EventSettingForm";
+} from './EventSettingForm'
 import {
   FinancialDataForm,
   FinancialDataFormFieldValues,
   FinancialDataFormProps,
-} from "./FinancialDataForm";
+} from './FinancialDataForm'
 import {
   OtherSettingForm,
   OtherSettingFormFieldValues,
   OtherSettingFormProps,
-} from "./OtherSettingForm";
+} from './OtherSettingForm'
 import {
   ProviderSettingForm,
   ProviderSettingFormFieldValues,
   ProviderSettingFormProps,
-} from "./ProviderSettingForm";
+} from './ProviderSettingForm'
 import {
   DashboardSettingForm,
   DashboardSettingFormProps,
-} from "./DashboardSettingForm";
+} from './DashboardSettingForm'
 
 export default {
-  title: "Setting/Dashboard",
-} as Meta;
+  title: 'Setting/Dashboard',
+} as Meta
 
 export const SettingFormComponent: Story<DashboardSettingFormProps> = (
   args,
@@ -41,101 +41,101 @@ export const SettingFormComponent: Story<DashboardSettingFormProps> = (
       onSubmit={(values) => console.log(values)}
     />
   </Container>
-);
+)
 
 export const FinancialDataFormComponent: Story<FinancialDataFormProps> = (
   args,
 ) => {
   const form = useForm<FinancialDataFormFieldValues>({
     defaultValues: args.defaultValues,
-  });
+  })
   return (
     <FormProvider {...form}>
       <FinancialDataForm {...args} />
     </FormProvider>
-  );
-};
+  )
+}
 
 export const EventSettingFormComponent: Story<EventSettingFormProps> = (
   args,
 ) => {
   const form = useForm<EventSettingFormFieldValues>({
     defaultValues: args.defaultValues,
-  });
+  })
   return (
     <FormProvider {...form}>
       <EventSettingForm {...args} />
     </FormProvider>
-  );
-};
+  )
+}
 
 export const OtherSettingFormComponent: Story<OtherSettingFormProps> = (
   args,
 ) => {
   const form = useForm<OtherSettingFormFieldValues>({
     defaultValues: args.defaultValues,
-  });
+  })
   return (
     <FormProvider {...form}>
       <OtherSettingForm {...args} />
     </FormProvider>
-  );
-};
+  )
+}
 
 export const ProviderSettingFormComponent: Story<ProviderSettingFormProps> = (
   args,
 ) => {
   const form = useForm<ProviderSettingFormFieldValues>({
     defaultValues: args.defaultValues,
-  });
+  })
   return (
     <FormProvider {...form}>
       <ProviderSettingForm {...args} />
     </FormProvider>
-  );
-};
+  )
+}
 
 ProviderSettingFormComponent.args = {
   isLoading: false,
   defaultValues: {
-    redirectAfterOrderPurchase: "1",
-    redirectAfterFinalPayment: "2",
-    phoneOnVenueCheckoutPage: "3",
+    redirectAfterOrderPurchase: '1',
+    redirectAfterFinalPayment: '2',
+    phoneOnVenueCheckoutPage: '3',
     defaultVenueCurrency: Config.Currency.GBP,
   },
-};
+}
 
 OtherSettingFormComponent.args = {
   isLoading: false,
   defaultValues: {
-    specialNotesInCheckout: "0",
-    specialNotesDescription: "",
-    smsOnOrderIsProcessing: "0",
-    smsOnOrderIsProcessingText: "",
-    smsOnOrderIsActioned: "0",
-    smsOnOrderIsActionedText: "",
+    specialNotesInCheckout: '0',
+    specialNotesDescription: '',
+    smsOnOrderIsProcessing: '0',
+    smsOnOrderIsProcessingText: '',
+    smsOnOrderIsActioned: '0',
+    smsOnOrderIsActionedText: '',
   },
-};
+}
 
 EventSettingFormComponent.args = {
   isLoading: false,
   defaultValues: {
-    termsAndConditions: "",
+    termsAndConditions: '',
   },
-};
+}
 
 FinancialDataFormComponent.args = {
   isLoading: false,
   defaultValues: {
-    accountName: "",
-    accountNumber: "",
-    sortCode: "",
+    accountName: '',
+    accountNumber: '',
+    sortCode: '',
   },
-};
+}
 
 SettingFormComponent.args = {
   isLoading: false,
-  onSubmit: (data) => console.log("onSubmit", data),
+  onSubmit: (data) => console.log('onSubmit', data),
   hasPermission: true,
   defaultValues: {
     notificationOnEachOrder: 0,
@@ -148,4 +148,4 @@ SettingFormComponent.args = {
     ...OtherSettingFormComponent.args.defaultValues,
     ...ProviderSettingFormComponent.args.defaultValues,
   },
-};
+}

package/src/setting/dashboard/DashboardSettingForm.tsx

@@ -1,39 +1,39 @@
-import { useEffect } from "react";
-import { useId } from "@react-aria/utils";
-import { Button, Spinner } from "react-bootstrap";
-import Col from "react-bootstrap/Col";
-import Form from "react-bootstrap/Form";
-import Row from "react-bootstrap/Row";
-import { Controller, FormProvider, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import FormErrorService from "@licklist/plugins/dist/services/Form/FormErrorService";
-import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
-import { ServerError } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
-import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import { useEffect } from 'react'
+import { useId } from '@react-aria/utils'
+import { Button, Spinner } from 'react-bootstrap'
+import Col from 'react-bootstrap/Col'
+import Form from 'react-bootstrap/Form'
+import Row from 'react-bootstrap/Row'
+import { Controller, FormProvider, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorService'
+import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
+import { ServerError } from '@licklist/plugins/dist/hooks/Api/useHttpQuery'
+import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
 
-import { HelpPopover } from "../../help/popover/HelpPopover";
-import { BooleanSwitch } from "../../static";
-import { SelectItem } from "../../types/generic/SelectItem";
+import { HelpPopover } from '../../help/popover/HelpPopover'
+import { BooleanSwitch } from '../../static'
+import { SelectItem } from '../../types/generic/SelectItem'
 import {
   EventSettingForm,
   EventSettingFormFieldValues,
-} from "./EventSettingForm";
+} from './EventSettingForm'
 
 import {
   ProviderSettingForm,
   ProviderSettingFormFieldValues,
-} from "./ProviderSettingForm";
+} from './ProviderSettingForm'
 
 export type DashboardSettingFormFieldValues = {
-  notificationOnEachOrder: number;
-  orderReportOnEventStart: number;
-  orderReportFormat: number;
-  isEnquiryOnly: boolean;
-  hasUserVerification: boolean;
-  metaPixelId?: number;
-  eventDeadlineErrorMessage?: string;
+  notificationOnEachOrder: number
+  orderReportOnEventStart: number
+  orderReportFormat: number
+  isEnquiryOnly: boolean
+  hasUserVerification: boolean
+  metaPixelId?: number
+  eventDeadlineErrorMessage?: string
 } & EventSettingFormFieldValues &
-  ProviderSettingFormFieldValues;
+  ProviderSettingFormFieldValues
 
 // @TODO not for first release
 // import {
@@ -46,10 +46,10 @@ export type DashboardSettingFormFieldValues = {
 // } from "./OtherSettingForm";
 
 export interface DashboardSettingFormProps extends HasPermissionProp {
-  isLoading: boolean;
-  onSubmit?: (data: DashboardSettingFormFieldValues) => void;
-  defaultValues?: Partial<DashboardSettingFormFieldValues>;
-  serverErrors?: ServerError;
+  isLoading: boolean
+  onSubmit?: (data: DashboardSettingFormFieldValues) => void
+  defaultValues?: Partial<DashboardSettingFormFieldValues>
+  serverErrors?: ServerError
 }
 
 export const DashboardSettingForm = ({
@@ -60,35 +60,35 @@ export const DashboardSettingForm = ({
   serverErrors,
 }: DashboardSettingFormProps) => {
   const form = useForm<DashboardSettingFormFieldValues>({
-    mode: "onChange",
+    mode: 'onChange',
     defaultValues: {
       ...defaultValues,
     },
-  });
+  })
   const {
     register,
     handleSubmit,
     formState: { errors, isValid, isDirty },
     setError,
-  } = form;
-  const { t } = useTranslation(["Design", "Validation"]);
+  } = form
+  const { t } = useTranslation(['Design', 'Validation'])
 
   useEffect(() => {
-    FormErrorService.handleServerErrors(serverErrors, setError);
-  }, [serverErrors, setError]);
+    FormErrorService.handleServerErrors(serverErrors, setError)
+  }, [serverErrors, setError])
 
-  const notificationOnEachOrderId = useId();
-  const orderReportOnEventStartId = useId();
-  const orderReportFormatId = useId();
-  const userVerificationId = useId();
-  const metaPixelId = useId();
-  const eventDeadlineErrorMessageId = useId();
+  const notificationOnEachOrderId = useId()
+  const orderReportOnEventStartId = useId()
+  const orderReportFormatId = useId()
+  const userVerificationId = useId()
+  const metaPixelId = useId()
+  const eventDeadlineErrorMessageId = useId()
 
   const orderReportFormatList: SelectItem[] = [
-    { id: 1, value: t("groupItemsByOrder") },
+    { id: 1, value: t('groupItemsByOrder') },
     // @TODO not for first release
     // { id: 2, value: t("groupItemsByCategory") },
-  ];
+  ]
 
   return (
     <Form
@@ -101,9 +101,9 @@ export const DashboardSettingForm = ({
           <Col xs={12} sm={6}>
             <Form.Group controlId={notificationOnEachOrderId}>
               <Form.Label>
-                {t("notificationOnEachOrder")}{" "}
+                {t('notificationOnEachOrder')}{' '}
                 <HelpPopover variant="info">
-                  {t("notificationOnEachOrderHelp")}
+                  {t('notificationOnEachOrderHelp')}
                 </HelpPopover>
               </Form.Label>
               <Controller
@@ -115,16 +115,16 @@ export const DashboardSettingForm = ({
                     disabled={isLoading}
                   />
                 )}
-                name={"notificationOnEachOrder" as const}
+                name={'notificationOnEachOrder' as const}
                 control={form.control}
               />
             </Form.Group>
 
             <Form.Group controlId={orderReportOnEventStartId}>
               <Form.Label>
-                {t("orderReportOnEventStart")}{" "}
+                {t('orderReportOnEventStart')}{' '}
                 <HelpPopover variant="info">
-                  {t("orderReportOnEventStartHelp")}
+                  {t('orderReportOnEventStartHelp')}
                 </HelpPopover>
               </Form.Label>
               <Controller
@@ -136,7 +136,7 @@ export const DashboardSettingForm = ({
                     disabled={isLoading}
                   />
                 )}
-                name={"orderReportOnEventStart" as const}
+                name={'orderReportOnEventStart' as const}
                 control={form.control}
               />
             </Form.Group>
@@ -160,7 +160,7 @@ export const DashboardSettingForm = ({
             </Form.Group> */}
 
             <Form.Group controlId={userVerificationId}>
-              <Form.Label>{t("hasUserVerification")}</Form.Label>
+              <Form.Label>{t('hasUserVerification')}</Form.Label>
               <Controller
                 render={({ field: { name, value, onChange } }) => (
                   <BooleanSwitch
@@ -170,19 +170,19 @@ export const DashboardSettingForm = ({
                     disabled={isLoading}
                   />
                 )}
-                name={"hasUserVerification" as const}
+                name={'hasUserVerification' as const}
                 control={form.control}
               />
             </Form.Group>
             <Form.Group controlId={metaPixelId}>
-              <Form.Label>{t("metaPixelId")}</Form.Label>
+              <Form.Label>{t('metaPixelId')}</Form.Label>
               <Form.Control
                 type="number"
-                {...register("metaPixelId", {
+                {...register('metaPixelId', {
                   minLength: {
                     value: 15,
-                    message: t("Validation:fieldMinLength", {
-                      attribute: t("metaPixelId"),
+                    message: t('Validation:fieldMinLength', {
+                      attribute: t('metaPixelId'),
                       min: 15,
                     }),
                   },
@@ -198,12 +198,12 @@ export const DashboardSettingForm = ({
 
           <Col xs={12} sm={6}>
             <Form.Group controlId={orderReportFormatId}>
-              <Form.Label>{t("orderReportFormat")}</Form.Label>
+              <Form.Label>{t('orderReportFormat')}</Form.Label>
               <Form.Control
                 as="select"
-                {...register("orderReportFormat", {
-                  required: t("Validation:fieldRequired", {
-                    attribute: t("orderReportFormat"),
+                {...register('orderReportFormat', {
+                  required: t('Validation:fieldRequired', {
+                    attribute: t('orderReportFormat'),
                   }) as string,
                   valueAsNumber: true,
                 })}
@@ -237,9 +237,9 @@ export const DashboardSettingForm = ({
 
         <ProviderSettingForm isLoading={isLoading} />
         <Form.Group controlId={eventDeadlineErrorMessageId}>
-          <Form.Label>{t("eventDeadlineErrorMessage")}</Form.Label>
+          <Form.Label>{t('eventDeadlineErrorMessage')}</Form.Label>
           <Form.Control
-            {...register("eventDeadlineErrorMessage")}
+            {...register('eventDeadlineErrorMessage')}
             isInvalid={Boolean(errors.eventDeadlineErrorMessage)}
             disabled={isLoading}
           />
@@ -263,9 +263,9 @@ export const DashboardSettingForm = ({
               className="mr-2"
             />
           )}
-          {t("update")}
+          {t('update')}
         </Button>
       )}
     </Form>
-  );
-};
+  )
+}

package/src/setting/dashboard/EventSettingForm.tsx

@@ -1,35 +1,35 @@
-import { useId } from "@react-aria/utils";
-import Col from "react-bootstrap/Col";
-import Form from "react-bootstrap/Form";
-import Row from "react-bootstrap/Row";
-import { useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
+import { useId } from '@react-aria/utils'
+import Col from 'react-bootstrap/Col'
+import Form from 'react-bootstrap/Form'
+import Row from 'react-bootstrap/Row'
+import { useFormContext } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 import {
   Example,
   // TODO: add Terms and conditions view example on request from client
   // ExampleContent,
   // ExampleToggle,
-} from "../../help/example/Example";
+} from '../../help/example/Example'
 
 export type EventSettingFormFieldValues = {
-  termsAndConditions: string;
-};
+  termsAndConditions: string
+}
 
 export type EventSettingFormProps = {
-  isLoading: boolean;
-  defaultValues?: Partial<EventSettingFormFieldValues>;
-};
+  isLoading: boolean
+  defaultValues?: Partial<EventSettingFormFieldValues>
+}
 
 export function EventSettingForm({ isLoading = false }: EventSettingFormProps) {
-  const { register } = useFormContext<EventSettingFormFieldValues>();
-  const { t } = useTranslation("Design");
+  const { register } = useFormContext<EventSettingFormFieldValues>()
+  const { t } = useTranslation('Design')
 
-  const termsAndConditionsId = useId();
+  const termsAndConditionsId = useId()
 
   return (
     <Row>
       <Col xs={12}>
-        <h5 className="mt-5">{t("eventDefaults")}</h5>
+        <h5 className="mt-5">{t('eventDefaults')}</h5>
       </Col>
 
       <Col xs={12}>
@@ -39,14 +39,14 @@ export function EventSettingForm({ isLoading = false }: EventSettingFormProps) {
             (/* props */) => (
               <Form.Group controlId={termsAndConditionsId}>
                 <Form.Label>
-                  {t("termsAndConditions")}
+                  {t('termsAndConditions')}
                   {/*  TODO: add Terms and conditions view example on request from client */}
                   {/* <ExampleToggle {...props.toggle} /> */}
                 </Form.Label>
                 <Form.Control
                   as="textarea"
                   rows={5}
-                  {...register("termsAndConditions")}
+                  {...register('termsAndConditions')}
                   name="termsAndConditions"
                   disabled={isLoading}
                 />
@@ -63,5 +63,5 @@ export function EventSettingForm({ isLoading = false }: EventSettingFormProps) {
         </Example>
       </Col>
     </Row>
-  );
+  )
 }

package/src/setting/dashboard/FinancialDataForm.tsx

@@ -1,22 +1,22 @@
-import { useId } from "@react-aria/utils";
-import Col from "react-bootstrap/Col";
-import Form from "react-bootstrap/Form";
-import InputGroup from "react-bootstrap/InputGroup";
-import Row from "react-bootstrap/Row";
-import { useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { FaIdBadge, FaMoneyCheckAlt, FaUser } from "react-icons/fa";
+import { useId } from '@react-aria/utils'
+import Col from 'react-bootstrap/Col'
+import Form from 'react-bootstrap/Form'
+import InputGroup from 'react-bootstrap/InputGroup'
+import Row from 'react-bootstrap/Row'
+import { useFormContext } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { FaIdBadge, FaMoneyCheckAlt, FaUser } from 'react-icons/fa'
 
 export type FinancialDataFormFieldValues = {
-  accountName: string;
-  accountNumber: string;
-  sortCode: string;
-};
+  accountName: string
+  accountNumber: string
+  sortCode: string
+}
 
 export type FinancialDataFormProps = {
-  isLoading: boolean;
-  defaultValues?: Partial<FinancialDataFormFieldValues>;
-};
+  isLoading: boolean
+  defaultValues?: Partial<FinancialDataFormFieldValues>
+}
 
 export function FinancialDataForm({
   isLoading = false,
@@ -25,22 +25,22 @@ export function FinancialDataForm({
     register,
     getValues,
     formState: { errors },
-  } = useFormContext<FinancialDataFormFieldValues>();
-  const { t } = useTranslation("Design");
+  } = useFormContext<FinancialDataFormFieldValues>()
+  const { t } = useTranslation('Design')
 
-  const accountNameId = useId();
-  const accountNumberId = useId();
-  const sortCodeId = useId();
+  const accountNameId = useId()
+  const accountNumberId = useId()
+  const sortCodeId = useId()
 
   return (
     <Row>
       <Col xs={12}>
-        <h5 className="mt-5">{t("financialData")}</h5>
+        <h5 className="mt-5">{t('financialData')}</h5>
       </Col>
 
       <Col xs={12} sm={6}>
         <Form.Group controlId={accountNameId}>
-          <Form.Label>{t("accountName")}</Form.Label>
+          <Form.Label>{t('accountName')}</Form.Label>
 
           <InputGroup>
             <InputGroup.Prepend>
@@ -49,12 +49,12 @@ export function FinancialDataForm({
               </InputGroup.Text>
             </InputGroup.Prepend>
 
-            <Form.Control {...register("accountName")} disabled={isLoading} />
+            <Form.Control {...register('accountName')} disabled={isLoading} />
           </InputGroup>
         </Form.Group>
 
         <Form.Group controlId={accountNumberId}>
-          <Form.Label>{t("accountNumber")}</Form.Label>
+          <Form.Label>{t('accountNumber')}</Form.Label>
 
           <InputGroup hasValidation>
             <InputGroup.Prepend>
@@ -64,24 +64,24 @@ export function FinancialDataForm({
             </InputGroup.Prepend>
 
             <Form.Control
-              {...register("accountNumber", {
+              {...register('accountNumber', {
                 required: {
-                  value: getValues("accountName") !== "",
-                  message: t("Validation:fieldRequired", {
-                    attribute: t("accountNumber"),
+                  value: getValues('accountName') !== '',
+                  message: t('Validation:fieldRequired', {
+                    attribute: t('accountNumber'),
                   }) as string,
                 },
                 minLength: {
                   value: 8,
-                  message: t("Validation:fieldMinLength", {
-                    attribute: t("accountNumber"),
+                  message: t('Validation:fieldMinLength', {
+                    attribute: t('accountNumber'),
                     min: 8,
                   }) as string,
                 },
                 maxLength: {
                   value: 8,
-                  message: t("Validation:fieldMaxLength", {
-                    attribute: t("accountNumber"),
+                  message: t('Validation:fieldMaxLength', {
+                    attribute: t('accountNumber'),
                     max: 8,
                   }) as string,
                 },
@@ -100,7 +100,7 @@ export function FinancialDataForm({
 
       <Col xs={12} sm={6}>
         <Form.Group controlId={sortCodeId}>
-          <Form.Label>{t("sortCode")}</Form.Label>
+          <Form.Label>{t('sortCode')}</Form.Label>
 
           <InputGroup hasValidation>
             <InputGroup.Prepend>
@@ -110,24 +110,24 @@ export function FinancialDataForm({
             </InputGroup.Prepend>
 
             <Form.Control
-              {...register("sortCode", {
+              {...register('sortCode', {
                 required: {
-                  value: getValues("accountName") !== "",
-                  message: t("Validation:fieldRequired", {
-                    attribute: t("sortCode"),
+                  value: getValues('accountName') !== '',
+                  message: t('Validation:fieldRequired', {
+                    attribute: t('sortCode'),
                   }) as string,
                 },
                 minLength: {
                   value: 6,
-                  message: t("Validation:fieldMinLength", {
-                    attribute: t("sortCode"),
+                  message: t('Validation:fieldMinLength', {
+                    attribute: t('sortCode'),
                     min: 6,
                   }) as string,
                 },
                 maxLength: {
                   value: 6,
-                  message: t("Validation:fieldMaxLength", {
-                    attribute: t("sortCode"),
+                  message: t('Validation:fieldMaxLength', {
+                    attribute: t('sortCode'),
                     max: 6,
                   }) as string,
                 },
@@ -144,5 +144,5 @@ export function FinancialDataForm({
         </Form.Group>
       </Col>
     </Row>
-  );
+  )
 }