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

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

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

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

package/src/v2/components/Modal/DeleteModal.scss

@@ -0,0 +1,254 @@
+.delete-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.2s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.delete-modal {
+  background: white;
+  border-radius: 12px;
+  width: 95%;
+  max-width: 800px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  animation: slideUp 0.2s ease-in-out;
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.delete-modal__content {
+  padding: 48px;
+}
+
+.delete-modal__title {
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  font-size: 32px;
+  font-weight: 700;
+  color: #14215A;
+  margin: 0 0 24px 0;
+  line-height: 40px;
+}
+
+.delete-modal__description-group {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin-bottom: 32px;
+}
+
+.delete-modal__description {
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  font-size: 20px;
+  font-weight: 400;
+  color: #626A90;
+  margin: 0;
+  line-height: 28px;
+}
+
+.delete-modal__confirmation {
+  margin-bottom: 40px;
+}
+
+.delete-modal__label {
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  display: block;
+  font-size: 20px;
+  color: #14215A;
+  margin-bottom: 16px;
+  font-weight: 600;
+
+  strong {
+    font-weight: 700;
+  }
+}
+
+.delete-modal__input {
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  width: 100%;
+  padding: 16px 24px;
+  font-size: 20px;
+  border: 1px solid #E8E9EF;
+  border-radius: 12px;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+  font-family: inherit;
+  color: #14215A;
+
+  &::placeholder {
+    color: #626A90;
+    opacity: 0.6;
+  }
+
+  &:focus {
+    border-color: #D2D5E3;
+  }
+}
+
+.delete-modal__actions {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.delete-modal__button {
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  padding: 12px 32px;
+  font-size: 20px;
+  font-weight: 600;
+  border-radius: 12px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  font-family: inherit;
+  outline: none;
+  min-height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  &--delete {
+    background-color: #CC3C35;
+    color: white;
+
+    &:disabled {
+      opacity: 0.5;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: #b33630;
+    }
+  }
+
+  &--cancel {
+    background-color: transparent;
+    color: var(--label-primary);
+    border: 2px solid #D2D5E3;
+
+    &:hover:not(:disabled) {
+      background-color: var(--surface-secondary);
+    }
+  }
+}
+
+// Mobile styles
+@media (max-width: 768px) {
+  .delete-modal {
+    max-width: 90%;
+    width: 90%;
+  }
+
+  .delete-modal__content {
+    padding: 32px 24px;
+  }
+
+  .delete-modal__title {
+    font-size: 24px;
+    line-height: 32px;
+    margin-bottom: 16px;
+  }
+
+  .delete-modal__description-group {
+    gap: 16px;
+    margin-bottom: 24px;
+  }
+
+  .delete-modal__description {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  .delete-modal__confirmation {
+    margin-bottom: 32px;
+  }
+
+  .delete-modal__label {
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+
+  .delete-modal__actions {
+    gap: 12px;
+  }
+
+  .delete-modal__button {
+    padding: 10px 24px;
+    font-size: 16px;
+    min-height: 52px;
+  }
+}
+
+@media (max-width: 480px) {
+  .delete-modal {
+    max-width: 95%;
+    width: 95%;
+  }
+
+  .delete-modal__content {
+    padding: 24px 16px;
+  }
+
+  .delete-modal__title {
+    font-size: 20px;
+    line-height: 28px;
+    margin-bottom: 12px;
+  }
+
+  .delete-modal__description-group {
+    gap: 12px;
+    margin-bottom: 20px;
+  }
+
+  .delete-modal__description {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .delete-modal__confirmation {
+    margin-bottom: 24px;
+  }
+
+  .delete-modal__label {
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+
+  .delete-modal__actions {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .delete-modal__button {
+    width: 100%;
+    padding: 8px 20px;
+    font-size: 14px;
+    min-height: 48px;
+  }
+}
+

package/src/v2/components/Modal/DeleteModal.tsx

@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react'
+import './DeleteModal.scss'
+import { NewInput } from '../NewInput'
+
+export interface DeleteModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onConfirm: () => void
+  title: string
+  description?: string
+  description_1?: string
+  confirmationText: string
+  confirmationPlaceholder?: string
+  isDeleting?: boolean
+}
+
+export const DeleteModal: React.FC<DeleteModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  description_1,
+  confirmationText,
+  confirmationPlaceholder,
+  isDeleting = false,
+}) => {
+  const [inputValue, setInputValue] = useState('')
+
+  useEffect(() => {
+    if (!isOpen) {
+      setInputValue('')
+    }
+  }, [isOpen])
+
+  const handleClose = () => {
+    onClose()
+  }
+
+  const handleConfirm = () => {
+    if (inputValue === confirmationText) {
+      onConfirm()
+    }
+  }
+
+  const isConfirmDisabled = inputValue !== confirmationText || isDeleting
+
+  if (!isOpen) return null
+
+  return (
+    <div className="delete-modal-overlay" onClick={handleClose}>
+      <div className="delete-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="delete-modal__content">
+          <h2 className="delete-modal__title">{title}</h2>
+
+          <div className="delete-modal__description-group">
+            {description && (
+              <p className="delete-modal__description">{description}</p>
+            )}
+
+            {description_1 && (
+              <p className="delete-modal__description">{description_1}</p>
+            )}
+          </div>
+
+          <div className="delete-modal__confirmation">
+            <p className="delete-modal__label">
+              Type <strong>{confirmationText}</strong> to confirm deletion
+            </p>
+            <NewInput
+              type="text"
+              placeholder={confirmationPlaceholder || confirmationText}
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              autoFocus
+            />
+          </div>
+
+          <div className="delete-modal__actions">
+            <button
+              className="delete-modal__button delete-modal__button--delete"
+              onClick={handleConfirm}
+              disabled={isConfirmDisabled}
+            >
+              {isDeleting ? 'Deleting...' : 'Delete'}
+            </button>
+            <button
+              className="delete-modal__button delete-modal__button--cancel"
+              onClick={handleClose}
+              disabled={isDeleting}
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+

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

@@ -0,0 +1,3 @@
+export { DeleteModal } from './DeleteModal'
+export type { DeleteModalProps } from './DeleteModal'
+

package/src/v2/components/NewInput/NewInput.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { NewInput } from './NewInput'
 import { useState } from 'react'
+import { SearchIcon, CalendarSmallIcon } from '../../icons'
 
 const meta: Meta<typeof NewInput> = {
   title: 'V2/Components/NewInput',
@@ -121,6 +122,7 @@ export const DateInput: Story = {
   args: {
     label: 'Date of Birth',
     type: 'date',
+    icon: <CalendarSmallIcon />,
   },
 }
 
@@ -202,24 +204,7 @@ export const RequiredField: Story = {
 export const WithIcon: Story = {
   args: {
     label: 'Search',
-    placeholder: 'Search...',
-    icon: (
-      <svg
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16zM18 18l-4.35-4.35"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    ),
+    icon: <SearchIcon />,
   },
 }
 

package/src/v2/components/NewInput/NewInput.tsx

@@ -7,7 +7,9 @@ type CommonInputProps = {
   helperText?: string;
   error?: string;
   icon?: ReactNode;
+  iconPosition?: 'left' | 'right';
   required?: boolean;
+  onIconClick?: () => void;
 }
 
 type InputProps = CommonInputProps & {
@@ -21,7 +23,8 @@ type TextareaProps = CommonInputProps & {
 export type NewInputProps = InputProps | TextareaProps
 
 export const NewInput = forwardRef<HTMLInputElement | HTMLTextAreaElement, NewInputProps>(
-  ({label, optional, helperText, error, icon, as = 'input', required, className = '', ...props}, ref) => {
+  ({label, optional, helperText, error, icon, iconPosition = 'left', as = 'input', required, className = '', onIconClick, ...props}, ref) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
     const isError = !!error;
     const containerClasses = [
       'new-form-input',
@@ -30,6 +33,17 @@ export const NewInput = forwardRef<HTMLInputElement | HTMLTextAreaElement, NewIn
       className
     ].filter(Boolean).join(' ');
 
+    // Merge refs
+    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
+
+    const handleIconClick = () => {
+      if (onIconClick) {
+        onIconClick();
+      } else if (inputRef.current && (props as any).type === 'date') {
+        inputRef.current.showPicker?.();
+      }
+    };
+
     const renderInput = () => {
       if (as === 'textarea') {
         return (
@@ -43,12 +57,14 @@ export const NewInput = forwardRef<HTMLInputElement | HTMLTextAreaElement, NewIn
 
       if (icon) {
         return (
-          <div className="new-form-input__input-with-icon">
+          <div className={`new-form-input__input-with-icon new-form-input__input-with-icon--${iconPosition}`}>
             <input
-              ref={ref as React.Ref<HTMLInputElement>}
+              ref={inputRef}
               {...(props as React.InputHTMLAttributes<HTMLInputElement>)}
             />
-            <div className="icon">{icon}</div>
+            <div className="icon" onClick={handleIconClick} style={{ cursor: (onIconClick || (props as any).type === 'date') ? 'pointer' : 'default' }}>
+              {icon}
+            </div>
           </div>
         );
       }
@@ -65,14 +81,9 @@ export const NewInput = forwardRef<HTMLInputElement | HTMLTextAreaElement, NewIn
     return (
       <div className={containerClasses}>
         {(label || optional) && (
-          <div className="new-form-input__label-row">
-            {label && (
-              <label className="new-form-input__label">
-                {label}
-              </label>
-            )}
-            {optional && <span className="new-form-input__label-optional">Optional</span>}
-          </div>
+          <label className="new-form-input__label">
+            {label} {optional && <span className="new-form-input__label-optional">(Optional)</span>}
+          </label>
         )}
 
         {renderInput()}