@licklist/design 0.69.4 → 0.69.5

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

@@ -9,15 +9,20 @@ 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
-  onCopy: () => void
+  duplicateProductSetName: string
+  onChangeDuplicateProductSetName: (value: string) => void
+  onCopy: () => Promise<boolean | undefined>
   onRemove: () => void
+  isLoading?: boolean
   className?: string
   override?: number
+  duplicateProductSetError?: string
 }
 
 export function ProductSetCard({
@@ -26,6 +31,10 @@ export function ProductSetCard({
   href,
   onCopy,
   onRemove,
+  onChangeDuplicateProductSetName,
+  duplicateProductSetName,
+  duplicateProductSetError,
+  isLoading,
   className = '',
   hasPermission = true,
   override = 0,
@@ -35,19 +44,23 @@ export function ProductSetCard({
   const productSetCardClasses = `product-set-card ${className}`
   const [isOverlayVisibile, setIsOverlayVisible] = useState(false)
 
+  const onCardClick = () => {
+    RouteService.redirectTo(href)
+  }
   return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     <div
       role='button'
       tabIndex={0}
       className='border-0 product-set-card-wrapper w-100 pb-0'
-      onClick={() => RouteService.redirectTo(href)}
-      onKeyUp={() => RouteService.redirectTo(href)}
+      onClick={onCardClick}
     >
       <div className={productSetCardClasses}>
         <div className='product-set-card-link'>
           <div className='d-flex flex-column'>
             <div>
-              {name} {rrule && `(${RRule.fromString(rrule).toText()})`}
+              {name}
+              {rrule && `(${RRule.fromString(rrule).toText()})`}
             </div>
             {!!override && (
               <div className='h6 bold ml-1'>
@@ -87,12 +100,25 @@ export function ProductSetCard({
                         onClick={(e) => e.stopPropagation()}
                       >
                         {Boolean(onCopy) && (
-                          <ConfirmModal>
+                          <ConfirmModal
+                            // confirm function  memoize the callback function and it leads to bugs
+                            confirmationHandler={onCopy}
+                            disabledButtons={isLoading}
+                            content={
+                              <ProductSetNameControl
+                                value={duplicateProductSetName}
+                                onChange={onChangeDuplicateProductSetName}
+                                error={duplicateProductSetError}
+                              />
+                            }
+                          >
                             {(confirm) => (
                               <MenuButton
                                 onClick={() => {
                                   setIsOverlayVisible(false)
-                                  confirm(onCopy)
+                                  onChangeDuplicateProductSetName(name)
+                                  // confirm function  memoize the callback function and it leads to bugs
+                                  confirm(() => {})
                                 }}
                                 name={t('duplicate')}
                                 className='product-set-card-menu-item-text'

package/src/product-set/form/ProductSetForm.tsx

@@ -12,6 +12,7 @@ import { isEqual } from 'lodash'
 import { ProviderBookingManagementSetting } from '@licklist/core/dist/DataMapper/Provider/ProviderBookingManagementSettingDataMapper'
 import { Zone } from '@licklist/core/dist/DataMapper/Provider/ZoneDataMapper'
 import { WorkHour } from '@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper'
+import { transformErrorToMessage } from '@licklist/plugins'
 import { Dialog, useDialogContext } from '../../modals/dialog'
 import {
   ProductSetControl,
@@ -121,6 +122,15 @@ export function ProductSetForm({
     if (!serverErrors) {
       return
     }
+    if (!Array.isArray(serverErrors)) {
+      setErrorMessage(transformErrorToMessage(serverErrors))
+      return
+    }
+
+    if (Array.isArray(serverErrors) && serverErrors[0]) {
+      setErrorMessage(serverErrors[0])
+    }
+
     FormErrorService.handleServerErrors(serverErrors, setError)
   }, [serverErrors, setError])
 

package/src/product-set/form/ProductSetNameControl.tsx

@@ -0,0 +1,27 @@
+import { Form } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+
+export const ProductSetNameControl = ({
+  value,
+  onChange,
+  error,
+}: {
+  value: string
+  onChange: (value: string) => void
+  error?: string
+}) => {
+  const { t } = useTranslation(['Design'])
+  return (
+    <Form.Group>
+      <Form.Label>{t('Design:ProductSetName')}*</Form.Label>
+      <Form.Control
+        value={value}
+        maxLength={255}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={t('Design:placeholderProductSetName')}
+        isInvalid={Boolean(error)}
+      />
+      <Form.Control.Feedback type='invalid'>{error}</Form.Control.Feedback>
+    </Form.Group>
+  )
+}

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

@@ -1 +1,2 @@
 export * from './ProductSetForm'
+export * from './ProductSetNameControl'

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

@@ -3,6 +3,7 @@ import { SmsTemplate } from '@licklist/core/dist/DataMapper/Notification/SmsTemp
 import { TFunction } from 'react-i18next'
 import { UseFormSetError } from 'react-hook-form'
 import { checkIfZoneCategory } from '@licklist/plugins'
+import { ProductSet } from '@licklist/core/dist/DataMapper/Product/ProductSetDataMapper'
 import { TemplateItem } from '../control/ProductSetControl'
 import { ProductSetFormValues } from '../form/ProductSetForm'
 
@@ -12,6 +13,11 @@ interface CheckAvailableTimesErrors {
   t: TFunction
 }
 
+export interface MenuTypeheadItem {
+  id: number
+  label: string
+  value: number
+}
 export const moveArrayElements = <T>(
   array: T[],
   prevIndex: number,
@@ -83,3 +89,8 @@ export const checkAvailableTimesErrors = ({
   })
   return hasError
 }
+
+export const getTypeHeadItemsFromMenus = (
+  menus?: (ProductSet | ProductSetFormValues)[],
+): MenuTypeheadItem[] =>
+  menus?.map((menu) => ({ id: menu.id, value: menu.id, label: menu.name }))

package/src/typeahead/Typeahead.tsx

@@ -12,10 +12,13 @@ export interface TypeaheadProps {
   placeholder: string
   isRequired?: boolean
   name: string
+  value?: TypeaheadOptions
   isMultipleChoise?: boolean
   noOptionsMessage: string
   isInvalid?: boolean
   isCouponForm?: boolean
+  containerStyles?: CSSObjectWithLabel
+  onChangeValue?: (value: TypeaheadOptions) => void
 }
 
 function Typeahead({
@@ -24,6 +27,9 @@ function Typeahead({
   isRequired = false,
   isMultipleChoise,
   name = '',
+  value,
+  onChangeValue,
+  containerStyles,
   isCouponForm = false,
   noOptionsMessage = '',
   isInvalid,
@@ -53,15 +59,23 @@ function Typeahead({
         render={({ field }) => (
           <Select
             placeholder={placeholder}
-            value={field.value}
+            value={value ?? field.value}
             isMulti={isMultipleChoise}
             styles={{
+              container: (base) => ({
+                ...base,
+                ...containerStyles,
+              }),
               control: (base) => ({
                 ...base,
                 ...getStyle(),
               }),
             }}
             onChange={(value) => {
+              if (onChangeValue) {
+                onChangeValue(value)
+                return
+              }
               field.onChange(value)
             }}
             options={options}

package/yarn.lock

@@ -2518,7 +2518,7 @@ __metadata:
     "@fortawesome/free-solid-svg-icons": "npm:5.15.2"
     "@licklist/core": "npm:0.30.3"
     "@licklist/eslint-config": "npm:0.5.6"
-    "@licklist/plugins": "npm:0.33.1"
+    "@licklist/plugins": "npm:0.33.4"
     "@mantine/core": "npm:6.0.22"
     "@mantine/hooks": "npm:6.0.22"
     "@mdx-js/react": "npm:1.6.22"
@@ -2649,7 +2649,7 @@ __metadata:
   peerDependencies:
     "@licklist/core": 0.30.3
     "@licklist/eslint-config": 0.5.6
-    "@licklist/plugins": 0.33.1
+    "@licklist/plugins": 0.33.4
     lodash: 4.17.21
     luxon: 3.5.0
     react: 17.0.2
@@ -2679,12 +2679,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@licklist/plugins@npm:0.33.1":
-  version: 0.33.1
-  resolution: "@licklist/plugins@npm:0.33.1"
+"@licklist/plugins@npm:0.33.4":
+  version: 0.33.4
+  resolution: "@licklist/plugins@npm:0.33.4"
   dependencies:
     "@licklist/core": "npm:0.30.1"
-    "@ungap/url-search-params": "npm:0.2.2"
     axios: "npm:0.26.0"
     history: "npm:4.10.1"
     laravel-echo: "npm:1.15.1"
@@ -2716,7 +2715,7 @@ __metadata:
     react-loader: 2.4.7
     react-query: 3.34.12
     react-router-dom: 5.2.0
-  checksum: 10c0/9f9cba3fcf3b2543c1b781233c0cfa2d6638ff47edde93ed3500ea4dfe12f7940380e9d79b6051b6cc8eb5cb26cdbb97fcd412b83bfd3dce7cd1c34835f975a7
+  checksum: 10c0/d5be4b905709545cd7e936f19e84ad0b28b4b7ffcec3950366715dc4a4ca1a6fe023368cb6a348017626c1081b408d60261050141cee56666578afa1a35cb213
   languageName: node
   linkType: hard
 
@@ -6179,13 +6178,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ungap/url-search-params@npm:0.2.2":
-  version: 0.2.2
-  resolution: "@ungap/url-search-params@npm:0.2.2"
-  checksum: 10c0/0ee84b8eff65b8f2af187d8487226c6358da2bd4f9036dea317fb5859c03dfbe1799864ade13127ba3d0b7069187c56a37596481983812e62929d8103e071690
-  languageName: node
-  linkType: hard
-
 "@vitejs/plugin-react@npm:4.3.1":
   version: 4.3.1
   resolution: "@vitejs/plugin-react@npm:4.3.1"