@licklist/design 0.68.0-dev.1 → 0.68.1-dev.0

package/src/notification/sms-template/form/SmsTemplateForm.tsx

@@ -1,33 +1,33 @@
-import { useEffect } from "react";
-import { FormValues } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
-import { Button, Form } from "react-bootstrap";
-import { FormProvider, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
-import { NotificationPlaceholder } from "@licklist/core/dist/DataMapper/Notification/NotificationPlaceholderDataMapper";
-import { ServerError } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
-import FormErrorService from "@licklist/plugins/dist/services/Form/FormErrorService";
+import { useEffect } from 'react'
+import { FormValues } from '@licklist/plugins/dist/types/services/Form/hook-form-service'
+import { Button, Form } from 'react-bootstrap'
+import { FormProvider, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
+import { NotificationPlaceholder } from '@licklist/core/dist/DataMapper/Notification/NotificationPlaceholderDataMapper'
+import { ServerError } from '@licklist/plugins/dist/hooks/Api/useHttpQuery'
+import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorService'
 
-import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
-import { NotificationPlaceholders } from "../../components/NotificationPlaceholders";
-import { SmsTemplateControl } from "../control/SmsTemplateControl";
+import { NotificationType } from '@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper'
+import { NotificationPlaceholders } from '../../components/NotificationPlaceholders'
+import { SmsTemplateControl } from '../control/SmsTemplateControl'
 
 export interface SmsTemplateValues extends FormValues {
-  name: string;
-  isActive: boolean;
-  isDefault: boolean;
-  body: string;
-  type?: NotificationType;
-  id?: number | string;
+  name: string
+  isActive: boolean
+  isDefault: boolean
+  body: string
+  type?: NotificationType
+  id?: number | string
 }
 
 export interface SmsTemplateProps extends HasPermissionProp {
-  isLoading: boolean;
-  onSubmit: (values: SmsTemplateValues) => void;
-  defaultValues?: SmsTemplateValues;
-  placeholders?: NotificationPlaceholder[];
-  serverErrors?: ServerError;
-  notificationTypes?: NotificationType[];
+  isLoading: boolean
+  onSubmit: (values: SmsTemplateValues) => void
+  defaultValues?: SmsTemplateValues
+  placeholders?: NotificationPlaceholder[]
+  serverErrors?: ServerError
+  notificationTypes?: NotificationType[]
 }
 
 export function SmsTemplateForm({
@@ -38,15 +38,15 @@ export function SmsTemplateForm({
   serverErrors,
   notificationTypes = [],
 }: SmsTemplateProps) {
-  const { t } = useTranslation("Design");
+  const { t } = useTranslation('Design')
 
-  const form = useForm<SmsTemplateValues>({ defaultValues });
+  const form = useForm<SmsTemplateValues>({ defaultValues })
 
-  const { setError } = form;
+  const { setError } = form
 
   useEffect(() => {
-    FormErrorService.handleServerErrors(serverErrors, setError);
-  }, [serverErrors, setError]);
+    FormErrorService.handleServerErrors(serverErrors, setError)
+  }, [serverErrors, setError])
 
   return (
     <FormProvider {...form}>
@@ -56,10 +56,10 @@ export function SmsTemplateForm({
 
         {hasPermission && (
           <Button className="mt-5 d-no dne d-md-block" type="submit">
-            {t("save")}
+            {t('save')}
           </Button>
         )}
       </Form>
     </FormProvider>
-  );
+  )
 }

package/src/notification/sms-template/form/index.ts

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

package/src/notification/sms-template/index.ts

@@ -1,3 +1,3 @@
-export * from "./control";
-export * from "./form";
-export * from "./card";
+export * from './control'
+export * from './form'
+export * from './card'

package/src/number-of-people-input/NumberOfPeopleInput.tsx

@@ -1,21 +1,22 @@
-import { useEffect } from "react";
-import { useFormContext, Controller } from "react-hook-form";
-import { RenderNumberOfPeopleInputComponent } from "./components";
+import { useEffect } from 'react'
+import { useFormContext, Controller } from 'react-hook-form'
+import { RenderNumberOfPeopleInputComponent } from './components'
 
-const NUMBER_OF_PEOPLE = "numberOfPeople";
+const NUMBER_OF_PEOPLE = 'numberOfPeople'
 
 export const NumberOfPeopleInput = () => {
-  const { control, clearErrors } = useFormContext();
+  const { control, clearErrors } = useFormContext()
 
   // Handle remove error of input in case
   // when user firstly choose a product with
   // relyOnPeopleCategory field, and them remove it
   // from steps from.
-  useEffect(() => {
-    return () => {
-      clearErrors(NUMBER_OF_PEOPLE);
-    };
-  }, [clearErrors]);
+  useEffect(
+    () => () => {
+      clearErrors(NUMBER_OF_PEOPLE)
+    },
+    [clearErrors],
+  )
 
   return (
     <Controller
@@ -33,5 +34,5 @@ export const NumberOfPeopleInput = () => {
         />
       )}
     />
-  );
-};
+  )
+}

package/src/number-of-people-input/components/RenderNumberOfPeopleInputComponent.stories.tsx

@@ -1,20 +1,20 @@
-import { useState } from "react";
-import { Meta } from "@storybook/react";
-import { RenderNumberOfPeopleInputComponent } from "./RenderNumberOfPeopleInputComponent";
+import { useState } from 'react'
+import { Meta } from '@storybook/react'
+import { RenderNumberOfPeopleInputComponent } from './RenderNumberOfPeopleInputComponent'
 
 export default {
-  title: "NumberOfPeopleInput/RenderNumberOfPeopleInputComponent",
+  title: 'NumberOfPeopleInput/RenderNumberOfPeopleInputComponent',
   component: RenderNumberOfPeopleInputComponent,
-} as Meta;
+} as Meta
 
 const productCategories = [
   {
     id: 1,
-    name: "Early Bird General Admission",
+    name: 'Early Bird General Admission',
     products: [
       {
         id: 7,
-        name: "Beer",
+        name: 'Beer',
         description: `Ticket is valid for students and non students. 
             You do not need student ID for this event but do require regular age ID e.g. driving licence or passport. 
             Ticket valid for entry before 11.30pm for 12.30am showtime.`,
@@ -24,7 +24,7 @@ const productCategories = [
       },
       {
         id: 8,
-        name: "Wine",
+        name: 'Wine',
         description: `Ticket is valid for students and non students.
              You do not need student ID for this event but do require regular age ID e.g. driving licence or passport.
               Ticket valid for entry before 11.30pm for 12.30am showtime.`,
@@ -37,11 +37,11 @@ const productCategories = [
   },
   {
     id: 2,
-    name: "Nice",
+    name: 'Nice',
     products: [
       {
         id: 3,
-        name: "Beer",
+        name: 'Beer',
         description: `Ticket is valid for students and non students. 
             You do not need student ID for this event but do require regular age ID e.g. driving licence or passport. 
             Ticket valid for entry before 11.30pm for 12.30am showtime.`,
@@ -51,7 +51,7 @@ const productCategories = [
       },
       {
         id: 5,
-        name: "Wine",
+        name: 'Wine',
         description: `Ticket is valid for students and non students.
              You do not need student ID for this event but do require regular age ID e.g. driving licence or passport.
               Ticket valid for entry before 11.30pm for 12.30am showtime.`,
@@ -61,24 +61,24 @@ const productCategories = [
       },
     ],
   },
-];
+]
 
 const menus = [
   {
     id: 1,
-    name: "Menu 1",
+    name: 'Menu 1',
     menuSteps: [
       {
         id: 1,
-        name: "Burger",
+        name: 'Burger',
         productCategories: productCategories,
       },
     ],
   },
-];
+]
 
 export function Default() {
-  const [peopleAmount, setPeopleAmount] = useState(0);
+  const [peopleAmount, setPeopleAmount] = useState(0)
 
   return (
     <div>
@@ -88,5 +88,5 @@ export function Default() {
         peopleAmountError={false}
       />
     </div>
-  );
+  )
 }

package/src/number-of-people-input/components/RenderNumberOfPeopleInputComponent.tsx

@@ -1,13 +1,13 @@
-import { useTranslation, Trans } from "react-i18next";
-import clsx from "clsx";
-import { NumberInput } from "../../iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput";
+import { useTranslation, Trans } from 'react-i18next'
+import clsx from 'clsx'
+import { NumberInput } from '../../iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput'
 
-const NUMBER_OF_PEOPLE = "numberOfPeople";
+const NUMBER_OF_PEOPLE = 'numberOfPeople'
 
 export interface RenderNumberOfPeopleInputComponentProps {
-  onChangePeopleAmount: (value: number) => void;
-  peopleAmount: number;
-  peopleAmountError?: boolean;
+  onChangePeopleAmount: (value: number) => void
+  peopleAmount: number
+  peopleAmountError?: boolean
 }
 
 export const RenderNumberOfPeopleInputComponent = ({
@@ -15,12 +15,12 @@ export const RenderNumberOfPeopleInputComponent = ({
   peopleAmount,
   peopleAmountError,
 }: RenderNumberOfPeopleInputComponentProps) => {
-  const { t } = useTranslation("Design");
+  const { t } = useTranslation('Design')
 
   return (
     <div id={NUMBER_OF_PEOPLE} className="people-input">
       <div className="d-flex align-items-center input-wrapper">
-        <h3 className="iframe-event__name">{t("people")}</h3>
+        <h3 className="iframe-event__name">{t('people')}</h3>
 
         <NumberInput
           onChange={onChangePeopleAmount}
@@ -28,7 +28,7 @@ export const RenderNumberOfPeopleInputComponent = ({
           onArrowUp={() => onChangePeopleAmount(Number(peopleAmount) + 1)}
           min={0}
           value={Number(peopleAmount)}
-          className={clsx("iframe-event__product-count")}
+          className={clsx('iframe-event__product-count')}
         />
       </div>
       <div className="iframe-event__message-error">
@@ -40,8 +40,8 @@ export const RenderNumberOfPeopleInputComponent = ({
                 i18nKey="pleaseSelectAtLeastFrom"
                 values={{
                   min: 1,
-                  type: "item",
-                  from: "this category",
+                  type: 'item',
+                  from: 'this category',
                 }}
               />
             </p>
@@ -49,5 +49,5 @@ export const RenderNumberOfPeopleInputComponent = ({
         )}
       </div>
     </div>
-  );
-};
+  )
+}

package/src/number-of-people-input/components/index.ts

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

package/src/number-of-people-input/index.ts

@@ -1,2 +1,2 @@
-export * from "./NumberOfPeopleInput";
-export * from "./components";
+export * from './NumberOfPeopleInput'
+export * from './components'

package/src/product-set/card/ProductSetCard.stories.tsx

@@ -1,21 +1,19 @@
-import { Meta, Story } from "@storybook/react";
+import { Meta, Story } from '@storybook/react'
 
-import { ProductSetCard, ProductSetCardProps } from "./ProductSetCard";
+import { ProductSetCard, ProductSetCardProps } from './ProductSetCard'
 
 export default {
-  title: "Product Set/Card",
+  title: 'Product Set/Card',
   component: ProductSetCard,
-} as Meta;
+} as Meta
 
 export const Default: Story<ProductSetCardProps> = (args) => (
   <ProductSetCard {...args} />
 )
 
-
 Default.args = {
-  href: "#",
-  name: "Mobile Ordering",
-  rrule: "FREQ=WEEKLY;BYDAY=WE",
+  href: '#',
+  name: 'Mobile Ordering',
+  rrule: 'FREQ=WEEKLY;BYDAY=WE',
   hasPermission: true,
-};
-
+}

package/src/product-set/card/ProductSetCard.tsx

@@ -1,28 +1,28 @@
-import { useState } from "react";
-import { ListGroup, OverlayTrigger, Popover } from "react-bootstrap";
-import RRule from "rrule";
-import { useTranslation } from "react-i18next";
-import clsx from "clsx";
-import { useId } from "@react-aria/utils";
-import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
-import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
-import { FaEllipsisH, FaEye, FaTrashAlt } from "react-icons/fa";
-import { ConfirmModal } from "../../modals";
-import { MenuButton } from "../../table/MenuButton";
-import { ProductSetNameControl } from "../form/ProductSetNameControl";
+import { useState } from 'react'
+import { ListGroup, OverlayTrigger, Popover } from 'react-bootstrap'
+import RRule from 'rrule'
+import { useTranslation } from 'react-i18next'
+import clsx from 'clsx'
+import { useId } from '@react-aria/utils'
+import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
+import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
+import { FaEllipsisH, FaEye, FaTrashAlt } from 'react-icons/fa'
+import { ConfirmModal } from '../../modals'
+import { MenuButton } from '../../table/MenuButton'
+import { ProductSetNameControl } from '../form/ProductSetNameControl'
 
 export interface ProductSetCardProps extends HasPermissionProp {
-  name: string;
-  rrule?: string;
-  href: string;
-  duplicateProductSetName: string;
-  onChangeDuplicateProductSetName: (value: string) => void;
-  onCopy: () => Promise<boolean | undefined>;
-  onRemove: () => void;
-  isLoading?: boolean;
-  className?: string;
-  override?: number;
-  duplicateProductSetError?: string;
+  name: string
+  rrule?: string
+  href: string
+  duplicateProductSetName: string
+  onChangeDuplicateProductSetName: (value: string) => void
+  onCopy: () => Promise<boolean | undefined>
+  onRemove: () => void
+  isLoading?: boolean
+  className?: string
+  override?: number
+  duplicateProductSetError?: string
 }
 
 export function ProductSetCard({
@@ -35,18 +35,18 @@ export function ProductSetCard({
   duplicateProductSetName,
   duplicateProductSetError,
   isLoading,
-  className = "",
+  className = '',
   hasPermission = true,
   override = 0,
 }: ProductSetCardProps) {
-  const { t } = useTranslation("Design");
-  const popoverId = useId();
-  const productSetCardClasses = `product-set-card ${className}`;
-  const [isOverlayVisibile, setIsOverlayVisible] = useState(false);
+  const { t } = useTranslation('Design')
+  const popoverId = useId()
+  const productSetCardClasses = `product-set-card ${className}`
+  const [isOverlayVisibile, setIsOverlayVisible] = useState(false)
 
   const onCardClick = () => {
-    RouteService.redirectTo(href);
-  };
+    RouteService.redirectTo(href)
+  }
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     <div
@@ -64,7 +64,7 @@ export function ProductSetCard({
             </div>
             {!!override && (
               <div className="h6 bold ml-1">
-                {`${override} ${t(override > 1 ? "overrides" : "override")}`}
+                {`${override} ${t(override > 1 ? 'overrides' : 'override')}`}
               </div>
             )}
           </div>
@@ -81,8 +81,8 @@ export function ProductSetCard({
               <Popover
                 id={popoverId}
                 className={clsx(
-                  "product-set-card-popover",
-                  !isOverlayVisibile && "d-none",
+                  'product-set-card-popover',
+                  !isOverlayVisibile && 'd-none',
                 )}
               >
                 <Popover.Content
@@ -115,12 +115,12 @@ export function ProductSetCard({
                             {(confirm) => (
                               <MenuButton
                                 onClick={() => {
-                                  setIsOverlayVisible(false);
-                                  onChangeDuplicateProductSetName(name);
+                                  setIsOverlayVisible(false)
+                                  onChangeDuplicateProductSetName(name)
                                   // confirm function  memoize the callback function and it leads to bugs
-                                  confirm(() => {});
+                                  confirm(() => {})
                                 }}
-                                name={t("duplicate")}
+                                name={t('duplicate')}
                                 className="product-set-card-menu-item-text"
                               />
                             )}
@@ -140,10 +140,10 @@ export function ProductSetCard({
                             {(confirm) => (
                               <MenuButton
                                 onClick={() => {
-                                  setIsOverlayVisible(false);
-                                  confirm(onRemove);
+                                  setIsOverlayVisible(false)
+                                  confirm(onRemove)
                                 }}
-                                name={t("remove")}
+                                name={t('remove')}
                                 icon={<FaTrashAlt size={12} />}
                                 className="product-set-card-menu-item-text d-flex w-100 align-items-center"
                                 rightIcon
@@ -162,8 +162,8 @@ export function ProductSetCard({
               type="button"
               className="product-set-card-menu-button"
               onClick={(e) => {
-                e.stopPropagation();
-                setIsOverlayVisible(true);
+                e.stopPropagation()
+                setIsOverlayVisible(true)
               }}
             >
               <FaEllipsisH />
@@ -172,5 +172,5 @@ export function ProductSetCard({
         </div>
       </div>
     </div>
-  );
+  )
 }

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

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