@licklist/design 0.78.5-dev.55 → 0.78.5-dev.56

package/src/v2/components/Customer/CustomerForm/CustomerForm.tsx

@@ -1,434 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { showAlert } from '@licklist/plugins/dist/context/app/AlertContext'
-import { NewInput } from '../../NewInput'
-import { Select } from '../../Select'
-import { Checkbox } from '../../Checkbox'
-import { Button } from '../../Button'
-import {useTranslation} from "react-i18next";
-
-export interface CustomerData {
-  firstName: string
-  lastName: string
-  email: string
-  dobDay: string
-  dobMonth: string
-  dobYear: string
-  phone: string
-  optIn: boolean
-  postcode: string
-  gender: string
-}
-
-export interface CustomerFormProps {
-  onSave: (data: CustomerData) => void
-  initialData?: Partial<CustomerData>
-  isLoading?: boolean
-  submitButtonLabel?: string
-  isEditing?: boolean
-}
-
-export const CustomerForm: React.FC<CustomerFormProps> = ({
-  onSave,
-  initialData,
-  isLoading,
-  submitButtonLabel = 'Save Changes',
-  isEditing = false,
-}) => {
-  const STORAGE_KEY = 'customer_form_draft'
-
-  const [formData, setFormData] = useState<CustomerData>(() => {
-    // Try to restore from sessionStorage first
-    try {
-      const savedData = sessionStorage.getItem(STORAGE_KEY)
-      if (savedData) {
-        const parsed = JSON.parse(savedData)
-        // If we have initialData (editing), prefer that over saved draft
-        if (initialData?.email) {
-          sessionStorage.removeItem(STORAGE_KEY) // Clear draft when editing
-          return {
-            firstName: '',
-            lastName: '',
-            email: '',
-            dobDay: '',
-            dobMonth: '',
-            dobYear: '',
-            phone: '',
-            optIn: false,
-            postcode: '',
-            gender: '',
-            ...initialData,
-          }
-        }
-        return parsed
-      }
-    } catch (error) {
-      console.error('Failed to restore form data:', error)
-    }
-
-    return {
-      firstName: '',
-      lastName: '',
-      email: '',
-      dobDay: '',
-      dobMonth: '',
-      dobYear: '',
-      phone: '',
-      optIn: false,
-      postcode: '',
-      gender: '',
-      ...initialData,
-    }
-  })
-
-  const [errors, setErrors] = useState<Partial<Record<keyof CustomerData, string>>>({})
-  const { t } = useTranslation(['App'])
-
-  // Save to sessionStorage whenever form data changes (but not when editing)
-  useEffect(() => {
-    if (!initialData?.email) { // Only save drafts for new customers
-      try {
-        sessionStorage.setItem(STORAGE_KEY, JSON.stringify(formData))
-      } catch (error) {
-        console.error('Failed to save form data:', error)
-      }
-    }
-  }, [formData, initialData])
-
-  useEffect(() => {
-    if (initialData) {
-      setFormData((prev) => ({ ...prev, ...initialData }))
-    }
-  }, [initialData])
-
-  // Clear sessionStorage when component unmounts successfully (form submitted)
-  useEffect(() => {
-    return () => {
-      // Only clear if we're not in the middle of validation error
-      if (Object.keys(errors).length === 0) {
-        sessionStorage.removeItem(STORAGE_KEY)
-      }
-    }
-  }, [errors])
-
-  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
-  ) => {
-    const { name, value, type } = e.target
-    const checked = (e.target as HTMLInputElement).checked
-
-    setFormData((prev) => ({
-      ...prev,
-      [name]: type === 'checkbox' ? checked : value,
-    }))
-
-    // Clear error when user types
-    if (errors[name as keyof CustomerData]) {
-      setErrors((prev) => {
-        const newErrors = { ...prev }
-        delete newErrors[name as keyof CustomerData]
-        return newErrors
-      })
-    }
-  }
-
-  const handleSelectChange = (e: React.FormEvent<HTMLSelectElement>) => {
-    const { name, value } = e.currentTarget
-    setFormData((prev) => ({
-      ...prev,
-      [name]: value,
-    }))
-
-    // Clear error when user selects
-    if (errors[name as keyof CustomerData]) {
-      setErrors((prev) => {
-        const newErrors = { ...prev }
-        delete newErrors[name as keyof CustomerData]
-        return newErrors
-      })
-    }
-  }
-
-  const validate = () => {
-    const fieldErrors: Partial<Record<keyof CustomerData, string>> = {}
-    const messages: string[] = []
-
-    if (!formData.firstName.trim()) {
-      fieldErrors.firstName = ' '
-      //messages.push('First Name is required')
-      messages.push(t('Validation:fieldRequired', { attribute: t('App:firstName') }))
-    }
-    if (!formData.lastName.trim()) {
-      fieldErrors.lastName = ' '
-      messages.push(t('Validation:fieldRequired', { attribute: t('App:lastName') }))
-    }
-
-    // Skip email validation when editing (field is readonly)
-    if (!isEditing) {
-      if (!formData.email.trim()) {
-        fieldErrors.email = ' '
-        messages.push(t('Validation:fieldRequired', { attribute: t('App:emailAddress') }))
-      } else {
-        // Basic email format check
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-        if (!emailRegex.test(formData.email)) {
-          fieldErrors.email = ' '
-          messages.push(t('App:emailAddressInvalid'))
-        } else {
-          // Additional validation for domain quality
-          const parts = formData.email.split('@')
-          if (parts.length === 2) {
-            const domain = parts[1]
-
-            // Check for valid TLD (at least 2 characters after last dot - allows .it, .co, etc.)
-            const domainParts = domain.split('.')
-            const tld = domainParts[domainParts.length - 1]
-
-            // TLD must be at least 2 characters (allows .it, .co) but rejects single char like .c
-            if (tld.length < 2 || !/^[a-zA-Z]+$/.test(tld)) {
-              fieldErrors.email = ' '
-              messages.push(t('App:emailAddressInvalid'))
-            }
-
-            // Check for consecutive dots or dots at wrong positions
-            if (domain.includes('..') || domain.startsWith('.') || domain.endsWith('.')) {
-              fieldErrors.email = ' '
-              messages.push(t('App:emailAddressInvalid'))
-            }
-          }
-        }
-      }
-    }
-
-    // Optional Date of Birth validation
-    const day = formData.dobDay?.trim()
-    const month = formData.dobMonth?.trim()
-    const year = formData.dobYear?.trim()
-    const anyDobPart = !!(day || month || year)
-
-    if (anyDobPart) {
-      t('App:dateOfBirth', 'Date of Birth');
-      const dayLabel = t('App:day', 'Day')
-      const monthLabel = t('App:month', 'Month')
-      const yearLabel = t('App:year', 'Year')
-
-      // Require all three parts if any is provided
-      if (!day) {
-        fieldErrors.dobDay = ' '
-      }
-      if (!month) {
-        fieldErrors.dobMonth = ' '
-      }
-      if (!year) {
-        fieldErrors.dobYear = ' '
-      }
-      if (!day || !month || !year) {
-        messages.push(t('Validation:fieldValidDate'))
-      } else {
-        // Numeric only checks
-        const numOnly = /^\d+$/
-        if (!numOnly.test(day)) {
-          fieldErrors.dobDay = ' '
-          messages.push(t('Validation:fieldOnlyNumbers', { attribute: dayLabel }))
-        }
-        if (!numOnly.test(month)) {
-          fieldErrors.dobMonth = ' '
-          messages.push(t('Validation:fieldOnlyNumbers', { attribute: monthLabel }))
-        }
-        if (!/^\d{4}$/.test(year)) {
-          fieldErrors.dobYear = ' '
-          // Prefer explicit invalid year formatting over generic numbers message to enforce 4 digits
-          messages.push(t('Validation:fieldInvalid', { attribute: yearLabel }))
-        } else if (!numOnly.test(year)) {
-          fieldErrors.dobYear = ' '
-          messages.push(t('Validation:fieldOnlyNumbers', { attribute: yearLabel }))
-        }
-
-        // Range checks if numeric
-        const d = parseInt(day, 10)
-        const m = parseInt(month, 10)
-        const y = parseInt(year, 10)
-
-        if (numOnly.test(day) && (d < 1 || d > 31)) {
-          fieldErrors.dobDay = ' '
-          messages.push(t('Validation:fieldValidDay', { attribute: dayLabel }))
-        }
-        if (numOnly.test(month) && (m < 1 || m > 12)) {
-          fieldErrors.dobMonth = ' '
-          messages.push(t('Validation:fieldValidMonth', { attribute: monthLabel }))
-        }
-
-        // Validate actual calendar date and future constraint
-        if (numOnly.test(day) && numOnly.test(month) && /^\d{4}$/.test(year)) {
-          const date = new Date(y, m - 1, d)
-          const isValidDate =
-            date.getFullYear() === y && date.getMonth() === m - 1 && date.getDate() === d
-          if (!isValidDate) {
-            fieldErrors.dobDay = ' '
-            fieldErrors.dobMonth = ' '
-            fieldErrors.dobYear = ' '
-            messages.push(t('Validation:fieldValidDate'))
-          } else {
-            const today = new Date()
-            const todayOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate())
-            if (date > todayOnly) {
-              fieldErrors.dobDay = ' '
-              fieldErrors.dobMonth = ' '
-              fieldErrors.dobYear = ' '
-              messages.push(t('Validation:birthdayInFuture'))
-            }
-          }
-        }
-      }
-    }
-
-    // Phone validation (Optional field, but must match format if provided)
-    if (formData.phone?.trim()) {
-      const phoneRegex = /^[+\-()\d\s]*$/
-      if (!phoneRegex.test(formData.phone)) {
-        fieldErrors.phone = ' '
-        messages.push(t('Validation:fieldValidPhone', { attribute: t('App:phone') }))
-      } else {
-        // Enforce max of 15 numeric digits in total (ignoring spaces and symbols)
-        const digitsCount = formData.phone.replace(/\D/g, '').length
-        if (digitsCount > 15) {
-          fieldErrors.phone = ' '
-          messages.push(t('Validation:fieldMaxLength', { attribute: t('App:phone'), max: 15 }))
-        }
-      }
-    }
-
-    setErrors(fieldErrors)
-    return { isValid: messages.length === 0, messages }
-  }
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    const { isValid, messages } = validate()
-    if (isValid) {
-      // Clear draft from storage on successful validation
-      try {
-        sessionStorage.removeItem(STORAGE_KEY)
-      } catch (error) {
-        console.error('Failed to clear form data:', error)
-      }
-      onSave(formData)
-    } else {
-      showAlert({
-        type: 'error',
-        title: 'Form Error',
-        message: messages,
-      })
-    }
-  }
-
-  return (
-    <form onSubmit={handleSubmit} noValidate className="tw-flex tw-flex-col tw-gap-6">
-      <NewInput
-        label={t('App:firstName', "First")}
-        name="firstName"
-        value={formData.firstName}
-        onChange={handleChange}
-        error={errors.firstName}
-        required
-      />
-
-      <NewInput
-        label={t('App:lastName', "Last Name")}
-        name="lastName"
-        value={formData.lastName}
-        onChange={handleChange}
-        error={errors.lastName}
-        required
-      />
-
-      <NewInput
-        label={t('App:emailAddress', "Email Address")}
-        name="email"
-        type="text"
-        value={formData.email}
-        onChange={handleChange}
-        error={errors.email}
-        required
-        readOnly={isEditing}
-        disabled={isEditing}
-        helperText={isEditing ? t('App:emailCannotBeEdited') : undefined}
-      />
-
-      <div className="tw-flex tw-flex-col tw-gap-2">
-        <div className="tw-flex tw-items-center tw-gap-1">
-          <label className="tw-text-[15px] tw-font-semibold tw-text-[#121E52] tw-leading-5">Date of Birth (Optional)</label>
-        </div>
-        <div className="tw-grid tw-grid-cols-3 tw-gap-4">
-          <NewInput
-            label={t("App:day", "Day")}
-            name="dobDay"
-            value={formData.dobDay}
-            onChange={handleChange}
-            error={errors.dobDay}
-            className="dob-input"
-          />
-          <NewInput
-            label={t("App:month", "Month")}
-            name="dobMonth"
-            value={formData.dobMonth}
-            onChange={handleChange}
-            error={errors.dobMonth}
-            className="dob-input"
-          />
-          <NewInput
-            label={t("App:year", "Year")}
-            name="dobYear"
-            value={formData.dobYear}
-            onChange={handleChange}
-            error={errors.dobYear}
-            className="dob-input"
-          />
-        </div>
-      </div>
-
-      <NewInput
-        label={t('App:phone', "Phone Number")}
-        name="phone"
-        value={formData.phone}
-        onChange={handleChange}
-        error={errors.phone}
-        optional
-      />
-
-      <Checkbox
-        label="Opt-in to marketing communications"
-        name="optIn"
-        checked={formData.optIn}
-        onChange={handleChange}
-      />
-
-      <NewInput
-        label={t('App:postcode', "Postcode")}
-        name="postcode"
-        value={formData.postcode}
-        onChange={handleChange}
-        optional
-      />
-
-      <Select
-        label={t('App:gender', "Gender")}
-        name="gender"
-        value={formData.gender}
-        onChange={handleSelectChange}
-        optional
-      >
-        <option value="">{t('App:selectGender', "Select gender")}</option>
-        <option value="female">{t('App:female', "Female")}</option>
-        <option value="male">{t('App:male', "Male")}</option>
-        <option value="prefer_not_to_say">{t('App:preferNotToSay', "Prefer not to say")}</option>
-      </Select>
-
-
-      <div className="tw-pt-4">
-        <Button type="submit" disabled={isLoading} className="tw-px-8">
-          {isLoading ? 'Saving...' : submitButtonLabel}
-        </Button>
-      </div>
-    </form>
-  )
-}

package/src/v2/components/Customer/CustomerForm/index.ts

@@ -1 +0,0 @@
-export * from './CustomerForm'

package/src/v2/components/Customer/CustomersList.tsx

@@ -1,193 +0,0 @@
-import React from 'react'
-import { QuickFilter, QuickFilterOption } from '../QuickFilter'
-import { NewTable, NewTableColumn } from '../NewTable'
-import { NewInput } from '../NewInput'
-import { Pagination } from '../Pagination'
-import { SearchIcon, RefreshIcon, SendIcon, ExternalLinkIcon, ExportIcon, ClearIcon } from '../../icons'
-import './CustomersList.scss'
-
-export interface CustomersListProps {
-  t: (key: string, options?: any) => string
-  customers: any[]
-  isLoading: boolean
-  kioskLink?: string
-  waiversEnabled?: boolean
-  search: string
-  onSearchChange: (value: string) => void
-  onSearchIconClick?: () => void
-  onClearSearch?: () => void
-  quickFilters: string[]
-  onQuickFiltersChange: (values: string[]) => void
-  onRefresh: () => void
-  onExport: () => void
-  onSendWaiverRequest: () => void
-  onAddCustomer?: () => void
-  onTabChange?: (tabId: string) => void
-  activeTab?: string
-  tabs?: { id: string; label: string; path: string }[]
-  columns: NewTableColumn<any>[]
-  pagination?: {
-    currentPage: number
-    totalPages: number
-    onPageChange: (page: number) => void
-    totalItems?: number
-    itemsPerPage?: number
-  }
-}
-
-
-export const CustomersList: React.FC<CustomersListProps> = ({
-  t,
-  customers,
-  isLoading,
-  kioskLink,
-  search,
-  onSearchChange,
-  quickFilters,
-  onSearchIconClick,
-  onClearSearch,
-  onQuickFiltersChange,
-  onRefresh,
-  onExport,
-  onSendWaiverRequest,
-  onTabChange,
-  activeTab,
-  tabs,
-  columns,
-  pagination,
-  waiversEnabled,
-  onAddCustomer,
-}) => {
-  const quickFilterOptions: QuickFilterOption[] = waiversEnabled ? [
-    { label: t('App:todayBookings'), value: 'today' },
-    { label: t('App:signed', 'Signed'), value: 'signed' },
-    { label: t('App:unsigned', 'Unsigned'), value: 'unsigned' },
-  ] : [
-    { label: t('App:todayBookings', 'Bookings for: Today'), value: 'today' },
-  ]
-
-  // Handle mutually exclusive signed/unsigned filters
-  const handleQuickFiltersChange = (newFilters: string[]) => {
-    const hasSigned = newFilters.includes('signed')
-    const hasUnsigned = newFilters.includes('unsigned')
-    const hadSigned = quickFilters.includes('signed')
-    const hadUnsigned = quickFilters.includes('unsigned')
-
-    // If both signed and unsigned are being selected, keep only the newly selected one
-    if (hasSigned && hasUnsigned) {
-      if (!hadSigned && hasUnsigned) {
-        // signed was just added, remove unsigned
-        onQuickFiltersChange(newFilters.filter(f => f !== 'unsigned'))
-      } else if (hasSigned && !hadUnsigned) {
-        // unsigned was just added, remove signed
-        onQuickFiltersChange(newFilters.filter(f => f !== 'signed'))
-      }
-    } else {
-      onQuickFiltersChange(newFilters)
-    }
-  }
-
-  return (
-    <div className="waivers-page">
-        <header className="waivers-page__header">
-          {tabs && tabs.length > 0 ? (
-            <div className="waivers-page__tabs-container">
-              <nav className="waivers-page__tabs">
-                {tabs.map((tab) => (
-                  <button
-                    key={tab.id}
-                    className={`waivers-page__tab ${tab.id === activeTab ? 'waivers-page__tab--active' : ''}`}
-                    onClick={() => onTabChange?.(tab.id)}
-                  >
-                    {tab.label}
-                    {tab.id === activeTab && <div className="waivers-page__tab-indicator" />}
-                  </button>
-                ))}
-              </nav>
-              {kioskLink && (
-                <a href={kioskLink} target="_blank" rel="noopener noreferrer" className="kiosk-link">
-                  <ExternalLinkIcon />
-                  {t('App:launchKiosk', 'Launch Kiosk')}
-                </a>
-              )}
-            </div>
-          ) : (
-            <div className="waivers-page__simple-header">
-
-              {onAddCustomer && (
-                <button className="waivers-page__add-customer-btn" onClick={onAddCustomer}>
-                  + {t('App:addCustomer', 'Add Customer')}
-                </button>
-              )}
-            </div>
-          )}
-        </header>
-
-      <main className="waivers-page__content">
-        <section className="filter-section">
-          <div className="search-row">
-            <div className="search-input-wrapper">
-              <NewInput
-                label={t('App:search', 'Search')}
-                value={search}
-                onChange={(e) => onSearchChange(e.target.value)}
-                onIconClick={search ? onClearSearch : onSearchIconClick}
-                icon={search ? <ClearIcon /> : <SearchIcon />}
-                iconPosition={search ? 'right' : 'left'}
-              />
-              <p className="search-helper-text">{t('App:searchPlaceholder')}</p>
-            </div>
-          </div>
-
-          <div className="filters-actions-row">
-            <div className="quick-filters-wrapper">
-              <QuickFilter
-                label={t('App:quickFilters', 'Quick Filters:')}
-                options={quickFilterOptions}
-                selectedValues={quickFilters}
-                onChange={handleQuickFiltersChange}
-              />
-            </div>
-            <div className="action-buttons">
-              <button className="action-btn" onClick={onExport}>
-                <ExportIcon />
-                {t('App:exportData', 'Export')}
-              </button>
-              {waiversEnabled && (
-                <button className="action-btn" onClick={onSendWaiverRequest}>
-                  <SendIcon />
-                  {t('App:requestWaiver', 'Request Waiver')}
-                </button>
-              )}
-              <button className="action-btn" onClick={onRefresh}>
-                <RefreshIcon />
-                {t('App:refresh', 'Refresh')}
-              </button>
-            </div>
-          </div>
-        </section>
-
-        <section className="table-section">
-          <NewTable
-            columns={columns}
-            data={customers}
-            noDataText={!isLoading && customers.length === 0 ? t('App:noResultsFound') : undefined}
-          />
-          {pagination && customers.length > 0 && (
-            <div className="waivers-page__pagination">
-              <Pagination
-                currentPage={pagination.currentPage}
-                totalPages={pagination.totalPages}
-                totalItems={pagination.totalItems ?? 0}
-                itemsPerPage={pagination.itemsPerPage ?? 24}
-                onPageChange={pagination.onPageChange}
-                t={t}
-                entityName={t('App:customersLowerCase', 'customers')}
-              />
-            </div>
-          )}
-        </section>
-      </main>
-    </div>
-  )
-}

package/src/v2/components/Customer/index.ts

@@ -1,5 +0,0 @@
-export * from './CustomersList'
-export * from './CustomerCreate'
-export * from './CustomerDetail'
-export * from './CustomerEdit'
-export * from './CustomerForm'