@licklist/design 0.68.1 → 0.68.2-dev.2

package/src/sales/coupon/control/CouponFormControl.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState, useRef } from "react";
-import { ProductGroup } from "@licklist/core/dist/DataMapper/Product/ProductGroupDataMapper";
+import { useEffect, useState, useRef } from 'react'
+import { ProductGroup } from '@licklist/core/dist/DataMapper/Product/ProductGroupDataMapper'
 import {
   COUPON_TOTAL_TYPE_GROSS,
   COUPON_TOTAL_TYPE_TOTAL,
@@ -9,43 +9,43 @@ import {
   COUPON_TYPE_PERCENTAGE_PER_PERSON,
   CouponTotalType,
   CouponType,
-} from "@licklist/core/dist/DataMapper/Product/CouponDataMapper";
-import { DateTime } from "luxon";
-import { Col, Form, Row } from "react-bootstrap";
-import { useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import couponCodeRules from "@licklist/plugins/dist/validation/Rules/couponCodeRules";
+} from '@licklist/core/dist/DataMapper/Product/CouponDataMapper'
+import { DateTime } from 'luxon'
+import { Col, Form, Row } from 'react-bootstrap'
+import { useFormContext } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import couponCodeRules from '@licklist/plugins/dist/validation/Rules/couponCodeRules'
 /* TODO: Show Recurrent date, when reccurent date bugs are fixed */
 // import { Frequency } from "rrule";
 // import { RecurrenceInput } from "../../../recurrence-input";
 // import { useId } from "@react-aria/utils";
 
-import HTMLInputDateElement from "../../../types/static/HTMLInputDateElement";
-import { Typeahead, TypeaheadOptions } from "../../../typeahead";
-import { convertToTypeaheadOptions } from "../utils";
+import HTMLInputDateElement from '../../../types/static/HTMLInputDateElement'
+import { Typeahead, TypeaheadOptions } from '../../../typeahead'
+import { convertToTypeaheadOptions } from '../utils'
 
 export interface CouponFormValues {
-  name?: string;
-  code: string;
-  discountType: CouponType;
-  productGroupIds: Array<TypeaheadOptions | ProductGroup>;
-  discount: number;
-  totalType: CouponTotalType;
-  startFrom: string;
-  validTill: string;
-  days: string[];
-  rrule?: string;
-  totalCoupons: number;
-  usesPerUser: number;
-  useAgain: number;
-  usesPerUserDay: number;
-  minAmount: number;
-  maxAmount: number;
+  name?: string
+  code: string
+  discountType: CouponType
+  productGroupIds: Array<TypeaheadOptions | ProductGroup>
+  discount: number
+  totalType: CouponTotalType
+  startFrom: string
+  validTill: string
+  days: string[]
+  rrule?: string
+  totalCoupons: number
+  usesPerUser: number
+  useAgain: number
+  usesPerUserDay: number
+  minAmount: number
+  maxAmount: number
 }
 
 export interface CouponFormProps {
-  productGroups?: ProductGroup[];
-  isLoading?: boolean;
+  productGroups?: ProductGroup[]
+  isLoading?: boolean
 }
 
 export const CouponFormControl = ({
@@ -58,48 +58,48 @@ export const CouponFormControl = ({
     getValues,
     formState: { errors },
     watch,
-  } = useFormContext<CouponFormValues>();
-  const { t } = useTranslation(["Design", "Notification", "App"]);
+  } = useFormContext<CouponFormValues>()
+  const { t } = useTranslation(['Design', 'Notification', 'App'])
   const [selectedProductGroups, setSelectedProductGroups] = useState<
     TypeaheadOptions[]
-  >([]);
+  >([])
   /* TODO: Show Recurrent date, when reccurent date bugs are fixed */
   // const rrule = watch("rrule");
   // const [recurrent, setRecurrent] = useState(Boolean(rrule));
   // const recurrentId = useId();
 
-  const startFromValue = watch("startFrom");
-  const validTillValue = watch("validTill");
-  const startFromInput = useRef<HTMLInputDateElement | null>(null);
-  const validTillInput = useRef<HTMLInputDateElement | null>(null);
+  const startFromValue = watch('startFrom')
+  const validTillValue = watch('validTill')
+  const startFromInput = useRef<HTMLInputDateElement | null>(null)
+  const validTillInput = useRef<HTMLInputDateElement | null>(null)
 
   const discountTypes = {
-    [COUPON_TYPE_FIXED]: t("Design:fixed"),
-    [COUPON_TYPE_FIXED_PER_PERSON]: t("Design:fixedPerPerson"),
-    [COUPON_TYPE_PERCENTAGE]: t("Design:percentage"),
-    [COUPON_TYPE_PERCENTAGE_PER_PERSON]: t("Design:percentagePerPerson"),
+    [COUPON_TYPE_FIXED]: t('Design:fixed'),
+    [COUPON_TYPE_FIXED_PER_PERSON]: t('Design:fixedPerPerson'),
+    [COUPON_TYPE_PERCENTAGE]: t('Design:percentage'),
+    [COUPON_TYPE_PERCENTAGE_PER_PERSON]: t('Design:percentagePerPerson'),
     // @TODO: no need for v1 release
     // [COUPON_TYPE_QUANTITY]: t("Design:quantity"),
-  };
+  }
 
   const totalTypes = {
-    [COUPON_TOTAL_TYPE_GROSS]: t("Design:grossTotal"),
-    [COUPON_TOTAL_TYPE_TOTAL]: t("Design:depositTotal"),
-  };
+    [COUPON_TOTAL_TYPE_GROSS]: t('Design:grossTotal'),
+    [COUPON_TOTAL_TYPE_TOTAL]: t('Design:depositTotal'),
+  }
 
   useEffect(() => {
-    const defaultProductGroup = getValues("productGroupIds");
+    const defaultProductGroup = getValues('productGroupIds')
 
     setSelectedProductGroups(
       convertToTypeaheadOptions(defaultProductGroup as ProductGroup[]),
-    );
-  }, [getValues]);
+    )
+  }, [getValues])
 
   useEffect(() => {
-    setValue("productGroupIds", selectedProductGroups);
-  }, [getValues, setValue, selectedProductGroups]);
+    setValue('productGroupIds', selectedProductGroups)
+  }, [getValues, setValue, selectedProductGroups])
 
-  const productGroupList = convertToTypeaheadOptions(productGroups);
+  const productGroupList = convertToTypeaheadOptions(productGroups)
 
   /* TODO: Show Recurrent date, when reccurent date bugs are fixed */
   // useEffect(() => {
@@ -111,16 +111,16 @@ export const CouponFormControl = ({
   return (
     <Row>
       <Col md={5}>
-        <h2 className="mb-5">{t("Design:coupon")}</h2>
+        <h2 className="mb-5">{t('Design:coupon')}</h2>
         <Row>
           <Col md={6}>
             <Form.Group>
-              <Form.Label>{t("Design:name")}</Form.Label>
+              <Form.Label>{t('Design:name')}</Form.Label>
               <Form.Control
                 isInvalid={errors.name !== undefined}
-                {...register("name", {
-                  required: t("Validation:fieldRequired", {
-                    attribute: t("Design:name"),
+                {...register('name', {
+                  required: t('Validation:fieldRequired', {
+                    attribute: t('Design:name'),
                   }) as string,
                 })}
                 disabled={isLoading}
@@ -133,15 +133,15 @@ export const CouponFormControl = ({
 
           <Col md={6}>
             <Form.Group>
-              <Form.Label>{t("Design:couponCode")}</Form.Label>
+              <Form.Label>{t('Design:couponCode')}</Form.Label>
               <Form.Control
                 isInvalid={errors.code !== undefined}
-                {...register("code", {
-                  required: t("Validation:fieldRequired", {
-                    attribute: t("Design:code"),
+                {...register('code', {
+                  required: t('Validation:fieldRequired', {
+                    attribute: t('Design:code'),
                   }) as string,
                   pattern: {
-                    message: `${t("Validation:fieldCouponCode")}`,
+                    message: `${t('Validation:fieldCouponCode')}`,
                     value: couponCodeRules,
                   },
                 })}
@@ -158,11 +158,11 @@ export const CouponFormControl = ({
         <Row>
           <Col md={6}>
             <Form.Group>
-              <Form.Label>{t("Design:discountType")}</Form.Label>
+              <Form.Label>{t('Design:discountType')}</Form.Label>
               <Form.Control
-                {...register("discountType", { required: true })}
+                {...register('discountType', { required: true })}
                 as="select"
-                defaultValue={getValues("discountType") ?? 1}
+                defaultValue={getValues('discountType') ?? 1}
                 disabled={isLoading}
               >
                 {Object.keys(discountTypes).map((discountType) => (
@@ -176,13 +176,13 @@ export const CouponFormControl = ({
 
           <Col md={6}>
             <Form.Group>
-              <Form.Label>{t("Design:discount")}</Form.Label>
+              <Form.Label>{t('Design:discount')}</Form.Label>
               <Form.Control
                 type="number"
                 isInvalid={errors.discount !== undefined}
-                {...register("discount", {
-                  required: t("Validation:fieldRequired", {
-                    attribute: t("Design:discount"),
+                {...register('discount', {
+                  required: t('Validation:fieldRequired', {
+                    attribute: t('Design:discount'),
                   }) as string,
                 })}
                 disabled={isLoading}
@@ -197,11 +197,11 @@ export const CouponFormControl = ({
         <Row>
           <Col md={6}>
             <Form.Group>
-              <Form.Label>{t("Design:applyOn")}</Form.Label>
+              <Form.Label>{t('Design:applyOn')}</Form.Label>
               <Form.Control
-                {...register("totalType", { required: true })}
+                {...register('totalType', { required: true })}
                 as="select"
-                defaultValue={getValues("totalType") ?? 1}
+                defaultValue={getValues('totalType') ?? 1}
                 disabled={isLoading}
               >
                 {Object.keys(totalTypes).map((totalType) => (
@@ -215,21 +215,21 @@ export const CouponFormControl = ({
         </Row>
       </Col>
       <Col md={{ span: 5, offset: 1 }}>
-        <h2 className="mb-5">{t("Design:limitations")}</h2>
+        <h2 className="mb-5">{t('Design:limitations')}</h2>
         <Row>
           <Col md={6}>
             <Form.Group>
-              <Form.Label>{t("Design:startFrom")}</Form.Label>
+              <Form.Label>{t('Design:startFrom')}</Form.Label>
               <Form.Control
                 type="date"
-                {...register("startFrom")}
+                {...register('startFrom')}
                 value={startFromValue}
                 isInvalid={errors.startFrom !== undefined}
                 onChange={(e) => {
-                  const date = DateTime.fromSQL(e.target.value).toISODate();
-                  setValue("startFrom", date);
+                  const date = DateTime.fromSQL(e.target.value).toISODate()
+                  setValue('startFrom', date)
                 }}
-                className={startFromValue && "date-input-with-value"}
+                className={startFromValue && 'date-input-with-value'}
                 ref={startFromInput}
                 onClick={() => startFromInput?.current?.showPicker()}
                 disabled={isLoading}
@@ -241,17 +241,17 @@ export const CouponFormControl = ({
           </Col>
           <Col md={6}>
             <Form.Group>
-              <Form.Label>{t("Design:validTill")}</Form.Label>
+              <Form.Label>{t('Design:validTill')}</Form.Label>
               <Form.Control
                 type="date"
-                {...register("validTill")}
+                {...register('validTill')}
                 value={validTillValue}
                 onChange={(e) => {
-                  const date = DateTime.fromSQL(e.target.value).toISODate();
-                  setValue("validTill", date);
+                  const date = DateTime.fromSQL(e.target.value).toISODate()
+                  setValue('validTill', date)
                 }}
                 ref={validTillInput}
-                className={validTillValue && "date-input-with-value"}
+                className={validTillValue && 'date-input-with-value'}
                 onClick={() => validTillInput?.current?.showPicker()}
                 disabled={isLoading}
               />
@@ -261,14 +261,14 @@ export const CouponFormControl = ({
         <Row>
           <Col>
             <Form.Group className="mb-3">
-              <Form.Label>{t("Design:productGroups")}</Form.Label>
+              <Form.Label>{t('Design:productGroups')}</Form.Label>
               <Typeahead
                 name="productGroupIds"
                 options={productGroupList}
                 isMultipleChoise
                 isCouponForm
-                placeholder={t("Design:choose")}
-                noOptionsMessage={t("Design:noSelectedProductGroups")}
+                placeholder={t('Design:choose')}
+                noOptionsMessage={t('Design:noSelectedProductGroups')}
               />
             </Form.Group>
           </Col>
@@ -312,9 +312,9 @@ export const CouponFormControl = ({
         <Row>
           <Col md={6}>
             <Form.Group>
-              <Form.Label>{t("Design:totalCoupons")}</Form.Label>
+              <Form.Label>{t('Design:totalCoupons')}</Form.Label>
               <Form.Control
-                {...register("totalCoupons")}
+                {...register('totalCoupons')}
                 type="number"
                 isInvalid={errors.totalCoupons !== undefined}
                 disabled={isLoading}
@@ -326,10 +326,10 @@ export const CouponFormControl = ({
           </Col>
           <Col md={6}>
             <Form.Group>
-              <Form.Label>{t("Design:usesPerUser")}</Form.Label>
+              <Form.Label>{t('Design:usesPerUser')}</Form.Label>
               <Form.Control
                 type="number"
-                {...register("usesPerUser")}
+                {...register('usesPerUser')}
                 disabled={isLoading}
               />
             </Form.Group>
@@ -338,27 +338,27 @@ export const CouponFormControl = ({
         <Row>
           <Col md={6}>
             <Form.Group>
-              <Form.Label>{t("Design:useAgain")}</Form.Label>
+              <Form.Label>{t('Design:useAgain')}</Form.Label>
               <Form.Control
                 type="number"
-                {...register("useAgain")}
+                {...register('useAgain')}
                 disabled={isLoading}
               />
               <Form.Text className="text-muted">
-                {t("Design:useAgainExplanation")}
+                {t('Design:useAgainExplanation')}
               </Form.Text>
             </Form.Group>
           </Col>
           <Col md={6}>
             <Form.Group>
-              <Form.Label>{t("Design:usesPerUserDay")}</Form.Label>
+              <Form.Label>{t('Design:usesPerUserDay')}</Form.Label>
               <Form.Control
                 type="number"
-                {...register("usesPerUserDay")}
+                {...register('usesPerUserDay')}
                 disabled={isLoading}
               />
               <Form.Text className="text-muted">
-                {t("Design:usesPerUserDayExplanation")}
+                {t('Design:usesPerUserDayExplanation')}
               </Form.Text>
             </Form.Group>
           </Col>
@@ -366,32 +366,32 @@ export const CouponFormControl = ({
         <Row>
           <Col md={6}>
             <Form.Group>
-              <Form.Label>{t("Design:minAmount")}</Form.Label>
+              <Form.Label>{t('Design:minAmount')}</Form.Label>
               <Form.Control
                 type="number"
-                {...register("minAmount")}
+                {...register('minAmount')}
                 disabled={isLoading}
               />
               <Form.Text className="text-muted">
-                {t("Design:minAmountExplanation")}
+                {t('Design:minAmountExplanation')}
               </Form.Text>
             </Form.Group>
           </Col>
           <Col md={6}>
             <Form.Group>
-              <Form.Label>{t("Design:maxAmount")}</Form.Label>
+              <Form.Label>{t('Design:maxAmount')}</Form.Label>
               <Form.Control
                 type="number"
-                {...register("maxAmount")}
+                {...register('maxAmount')}
                 disabled={isLoading}
               />
               <Form.Text className="text-muted">
-                {t("Design:maxAmountExplanation")}
+                {t('Design:maxAmountExplanation')}
               </Form.Text>
             </Form.Group>
           </Col>
         </Row>
       </Col>
     </Row>
-  );
-};
+  )
+}

package/src/sales/coupon/control/index.ts

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

package/src/sales/coupon/form/CouponForm.stories.tsx

@@ -1,35 +1,35 @@
-import { Meta, Story } from "@storybook/react";
+import { Meta, Story } from '@storybook/react'
 
-import { CouponForm, CouponFormValues, CouponFormProps } from "./CouponFrom";
+import { CouponForm, CouponFormValues, CouponFormProps } from './CouponFrom'
 
 export default {
-  title: "Coupon/Form",
+  title: 'Coupon/Form',
   component: CouponForm,
-} as Meta;
+} as Meta
 
 export const Default: Story<CouponFormProps> = (args) => {
-  return <CouponForm {...args} />;
-};
+  return <CouponForm {...args} />
+}
 
 export const Empty: Story<CouponFormProps> = (args) => {
-  return <CouponForm {...args} />;
-};
+  return <CouponForm {...args} />
+}
 
 export const ServerErrors: Story<CouponFormProps> = (args) => {
-  return <CouponForm {...args} />;
-};
+  return <CouponForm {...args} />
+}
 
 Default.args = {
   defaultValues: {
-    name: "New Coupon",
-    code: "999",
-    discountType: "fixed",
+    name: 'New Coupon',
+    code: '999',
+    discountType: 'fixed',
     productGroupIds: [],
     discount: 12,
-    totalType: "gross",
-    startFrom: "2023-01-11",
-    rrule: "INTERVAL=1;FREQ=MONTHLY",
-    validTill: "",
+    totalType: 'gross',
+    startFrom: '2023-01-11',
+    rrule: 'INTERVAL=1;FREQ=MONTHLY',
+    validTill: '',
     days: [],
     totalCoupons: 1,
     usesPerUser: 1,
@@ -40,19 +40,19 @@ Default.args = {
   },
   onSubmit: (data) => console.log(data),
   hasPermission: true,
-};
+}
 
 Empty.args = {
   onSubmit: (data) => console.log(data),
   hasPermission: true,
-};
+}
 
 ServerErrors.args = {
   onSubmit: (data) => console.log(data),
   hasPermission: true,
   serverErrors: {
-    name: ["Field is required"],
-    code: ["This is also required"],
-    discount: ["And this is required too"],
+    name: ['Field is required'],
+    code: ['This is also required'],
+    discount: ['And this is required too'],
   },
-};
+}

package/src/sales/coupon/form/CouponFrom.tsx

@@ -1,46 +1,46 @@
-import { useEffect } from "react";
+import { useEffect } from 'react'
 import {
   ProductGroup,
   ProductGroupDTO,
-} from "@licklist/core/dist/DataMapper/Product/ProductGroupDataMapper";
+} from '@licklist/core/dist/DataMapper/Product/ProductGroupDataMapper'
 import {
   CouponTotalType,
   CouponType,
-} from "@licklist/core/dist/DataMapper/Product/CouponDataMapper";
-import { Button, Form } from "react-bootstrap";
-import { useForm, FormProvider } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { ServerError } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
-import FormErrorService from "@licklist/plugins/dist/services/Form/FormErrorService";
+} from '@licklist/core/dist/DataMapper/Product/CouponDataMapper'
+import { Button, Form } from 'react-bootstrap'
+import { useForm, FormProvider } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { ServerError } from '@licklist/plugins/dist/hooks/Api/useHttpQuery'
+import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorService'
 
-import { CouponFormControl } from "../control";
+import { CouponFormControl } from '../control'
 
 export interface CouponFormValues {
-  name?: string;
-  code: string;
-  discountType: CouponType;
-  productGroupIds: ProductGroupDTO[];
-  discount: number;
-  totalType: CouponTotalType;
-  startFrom: string;
-  validTill: string;
-  days: string[];
-  rrule?: string;
-  totalCoupons: number;
-  usesPerUser: number;
-  useAgain: number;
-  usesPerUserDay: number;
-  minAmount: number;
-  maxAmount: number;
+  name?: string
+  code: string
+  discountType: CouponType
+  productGroupIds: ProductGroupDTO[]
+  discount: number
+  totalType: CouponTotalType
+  startFrom: string
+  validTill: string
+  days: string[]
+  rrule?: string
+  totalCoupons: number
+  usesPerUser: number
+  useAgain: number
+  usesPerUserDay: number
+  minAmount: number
+  maxAmount: number
 }
 
 export interface CouponFormProps {
-  productGroups?: ProductGroup[];
-  defaultValues?: CouponFormValues;
-  onSubmit: (values: CouponFormValues) => void;
-  isLoading?: boolean;
-  hasPermission: boolean;
-  serverErrors?: ServerError;
+  productGroups?: ProductGroup[]
+  defaultValues?: CouponFormValues
+  onSubmit: (values: CouponFormValues) => void
+  isLoading?: boolean
+  hasPermission: boolean
+  serverErrors?: ServerError
 }
 
 export const CouponForm = ({
@@ -53,13 +53,13 @@ export const CouponForm = ({
 }: CouponFormProps) => {
   const form = useForm<CouponFormValues>({
     defaultValues,
-  });
-  const { setError } = form;
-  const { t } = useTranslation(["Design", "Notification", "App"]);
+  })
+  const { setError } = form
+  const { t } = useTranslation(['Design', 'Notification', 'App'])
 
   useEffect(() => {
-    FormErrorService.handleServerErrors(serverErrors, setError);
-  }, [serverErrors, setError]);
+    FormErrorService.handleServerErrors(serverErrors, setError)
+  }, [serverErrors, setError])
 
   return (
     <FormProvider {...form}>
@@ -78,10 +78,10 @@ export const CouponForm = ({
             type="submit"
             disabled={isLoading}
           >
-            {t("save")}
+            {t('save')}
           </Button>
         )}
       </Form>
     </FormProvider>
-  );
-};
+  )
+}

package/src/sales/coupon/form/index.ts

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

package/src/sales/coupon/index.tsx

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

package/src/sales/coupon/utils/index.ts

@@ -1,13 +1,13 @@
-import { ProductGroup } from "@licklist/core/dist/DataMapper/Product/ProductGroupDataMapper";
+import { ProductGroup } from '@licklist/core/dist/DataMapper/Product/ProductGroupDataMapper'
 
 export const convertToTypeaheadOptions = (productGroups?: ProductGroup[]) => {
   if (!productGroups || !productGroups.length) {
-    return [];
+    return []
   }
 
   return productGroups.map(({ id, name }: ProductGroup) => ({
     id: Number(id),
     value: name,
     label: name,
-  }));
-};
+  }))
+}

package/src/sales/filters/SaleFilter.stories.tsx

@@ -1,20 +1,20 @@
-import { useState } from "react";
-import { Meta, Story } from "@storybook/react";
-import { SaleFilters, SaleFiltersProps } from "./SaleFilters";
+import { useState } from 'react'
+import { Meta, Story } from '@storybook/react'
+import { SaleFilters, SaleFiltersProps } from './SaleFilters'
 
 export default {
-  title: "Sales/Filters",
+  title: 'Sales/Filters',
   component: SaleFilters,
-} as Meta;
+} as Meta
 
 export const Default: Story<SaleFiltersProps> = () => {
   const [values, setValues] = useState({
-    id: "",
-    name: "",
-    email: "",
-    date: "",
+    id: '',
+    name: '',
+    email: '',
+    date: '',
     is_in_cart: false,
-  });
+  })
 
-  return <SaleFilters values={values} onChange={setValues} />;
-};
+  return <SaleFilters values={values} onChange={setValues} />
+}