@licklist/design 0.78.5-dev.49 → 0.78.5-dev.50

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

@@ -0,0 +1,161 @@
+import React from 'react'
+import { Badge } from '../../Badge'
+import { EditIcon, ArrowLeftIcon, InfoIcon } from '../../../icons'
+import './CustomerDetail.scss'
+
+export interface CustomerDetailProps {
+  onBack: () => void
+  onEdit?: () => void
+  name: string
+  customerId: string
+  waiverStatus: string
+  waiversEnabled?: boolean
+  waiverStatusVariant?: 'success' | 'danger' | 'warning' | 'neutral'
+  contactDetails: {
+    email: string
+    phone?: string
+    age?: string
+  }
+  bookingDetails: {
+    nextBooking: string
+    customerSince: string
+  }
+  waiverDetails: {
+    status: string
+    statusVariant?: 'success' | 'danger' | 'warning' | 'neutral'
+    expires: string
+  }
+  minors?: Array<{
+    name: string
+    age: string
+    expires: string
+    status: string
+    statusVariant?: 'success' | 'danger' | 'warning' | 'neutral'
+  }>
+  customerSinceFooter: string
+}
+
+export const CustomerDetail: React.FC<CustomerDetailProps> = ({
+  onBack,
+  onEdit,
+  name,
+  customerId,
+  waiverStatus,
+  waiverStatusVariant = 'success',
+  waiversEnabled = true,
+  contactDetails,
+  bookingDetails,
+  waiverDetails,
+  minors,
+  customerSinceFooter,
+}) => {
+  return (
+    <div className="customer-detail">
+      <div className="customer-detail__back" onClick={onBack}>
+        <span className="customer-detail__back-icon"><ArrowLeftIcon width={24} height={24} /></span> Back to Customers
+      </div>
+
+      <div className="customer-detail__header">
+        <div className="customer-detail__title-row">
+          <h1 className="customer-detail__name">{name}</h1>
+        </div>
+        <div className="customer-detail__badges-row">
+          <div className="customer-detail__badges">
+            <span className="customer-detail__id-badge">{customerId}</span>
+            {waiversEnabled && (
+              <Badge
+                variant={waiverStatusVariant}
+                icon={(waiverStatus === 'Expired' || waiverStatus === 'Not Signed') ? <InfoIcon /> : undefined}
+              >
+                {waiverStatus}
+              </Badge>
+            )}
+          </div>
+          {onEdit && (
+            <div className="customer-detail__edit" onClick={onEdit}>
+              <EditIcon /> Edit
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="customer-detail__grid">
+        <div className="customer-detail__card">
+          <h2 className="customer-detail__card-title">Contact Details</h2>
+          <div className="customer-detail__info-group">
+            <label>Email</label>
+            <span>{contactDetails.email}</span>
+          </div>
+          <div className="customer-detail__info-group">
+            <label>Phone</label>
+            <span>{contactDetails.phone || '-'}</span>
+          </div>
+          <div className="customer-detail__info-group">
+            <label>Age</label>
+            <span>{contactDetails.age || '-'}</span>
+          </div>
+        </div>
+
+        <div className="customer-detail__card">
+          <h2 className="customer-detail__card-title">Booking Details</h2>
+          <div className="customer-detail__info-group">
+            <label>Next Booking</label>
+            <span>{bookingDetails.nextBooking}</span>
+          </div>
+          <div className="customer-detail__info-group">
+            <label>Customer Since</label>
+            <span>{bookingDetails.customerSince}</span>
+          </div>
+        </div>
+
+        {waiversEnabled && (
+          <div className="customer-detail__card">
+            <h2 className="customer-detail__card-title">Waiver Details</h2>
+            <div className="customer-detail__info-group">
+              <label>Status</label>
+              <span>
+                <Badge
+                  variant={waiverDetails.statusVariant}
+                  icon={(waiverDetails.status === 'Expired' || waiverDetails.status === 'Not Signed') ? <InfoIcon /> : undefined}
+                >
+                  {waiverDetails.status}
+                </Badge>
+              </span>
+            </div>
+            <div className="customer-detail__info-group">
+              <label>Expires</label>
+              <span>{waiverDetails.expires}</span>
+            </div>
+          </div>
+          )}
+      </div>
+
+      {waiversEnabled && minors && minors.length > 0 && (
+        <div className="customer-detail__card customer-detail__card--full">
+          <h2 className="customer-detail__card-title">Minors Signed For</h2>
+          {minors.map((minor, index) => (
+            <div key={index} className="customer-detail__minor-row">
+              <div className="customer-detail__minor-info">
+                <div className="customer-detail__minor-name">{minor.name}</div>
+                <div className="customer-detail__minor-age">{minor.age}</div>
+              </div>
+              <div className="customer-detail__minor-status-group">
+                <span className="customer-detail__minor-expires">Expires: {minor.expires}</span>
+                <Badge
+                  variant={minor.statusVariant}
+                  icon={(minor.status === 'Expired' || minor.status === 'Not Signed') ? <InfoIcon /> : undefined}
+                >
+                  {minor.status}
+                </Badge>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className="customer-detail__footer">
+        Customer since: {customerSinceFooter}
+      </div>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import { NewPageHeader } from '../../NewPageHeader'
+import { CustomerForm, CustomerData } from '../CustomerForm'
+
+export interface CustomerEditProps {
+  onBack: () => void
+  onCancel: () => void
+  onSave: (data: CustomerData) => void
+  initialData?: Partial<CustomerData>
+  isLoading?: boolean
+}
+
+export const CustomerEdit: React.FC<CustomerEditProps> = ({
+
+  onCancel,
+  onSave,
+  initialData,
+  isLoading,
+}) => {
+  return (
+    <div className="tw-bg-white tw-min-h-screen tw-font-sans">
+      <div className='tw-max-w-4xl tw-mx-auto tw-w-full'>
+        <NewPageHeader title="Edit Customer" onCancel={onCancel} />
+      </div>
+
+      <div className="tw-max-w-4xl tw-mx-auto tw-w-full tw-bg-white tw-border-2 tw-border-[#e8e9ef] tw-rounded-lg tw-p-4 md:tw-p-8 tw-mt-8">
+        <CustomerForm
+          onSave={onSave}
+          initialData={initialData}
+          isLoading={isLoading}
+          submitButtonLabel="Save Changes"
+          isEditing={true}
+        />
+      </div>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,434 @@
+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

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