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

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

@@ -1,315 +0,0 @@
-.customer-detail {
-  padding: 40px;
-  background-color: #fff;
-  min-height: 100vh;
-  font-family: var(--font-family-sans, 'Geist', sans-serif);
-
-  &__back {
-    color: #6200EE;
-    font-weight: 500;
-    cursor: pointer;
-    margin-bottom: 30px;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 14px;
-    padding: 8px 16px;
-    border-radius: 8px;
-    transition: all 0.2s ease;
-    border: 1px solid transparent;
-
-    &:hover {
-      background-color: #F3E5FF;
-      border: 1px solid #E0C7FF;
-    }
-  }
-
-  &__header {
-    margin-bottom: 40px;
-  }
-
-  &__name {
-    font-size: 32px;
-    font-weight: 700;
-    color: #121E52;
-    margin: 0 0 16px 0;
-  }
-
-  &__badges-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  &__badges {
-    display: flex;
-    gap: 12px;
-    align-items: center;
-  }
-
-  &__id-badge {
-    background-color: #F4F5F9;
-    color: #121E52;
-    padding: 4px 12px;
-    border-radius: 100px;
-    font-size: 12px;
-    font-weight: 600;
-    border: 1px solid #E2E4ED;
-  }
-
-  &__edit {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    color: #121E52;
-    font-weight: 600;
-    cursor: pointer;
-    font-size: 14px;
-    padding: 8px 16px;
-    border-radius: 8px;
-    transition: all 0.2s ease;
-    border: 1px solid transparent;
-
-    &:hover {
-      background-color: #E8EAF0;
-      border: 1px solid #D1D5E0;
-    }
-  }
-
-  &__grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 24px;
-    margin-bottom: 24px;
-  }
-
-  &__card {
-    background: #FFFFFF;
-    border: 1px solid #E2E4ED;
-    border-radius: 12px;
-    padding: 24px;
-
-    &--full {
-      grid-column: 1 / -1;
-    }
-  }
-
-  &__card-title {
-    font-size: 18px;
-    font-weight: 700;
-    color: #121E52;
-    margin: 0 0 24px 0;
-  }
-
-  &__info-group {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    margin-bottom: 16px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    label {
-      font-size: 12px;
-      color: #9399B3;
-      margin: 0;
-    }
-
-    span {
-      font-size: 14px;
-      font-weight: 500;
-      display: inline-flex;
-      align-items: center;
-    }
-  }
-
-
-  &__minor-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px 0;
-    border-bottom: 1px solid #F4F5F9;
-
-    &:last-child {
-      border-bottom: none;
-      padding-bottom: 0;
-    }
-
-    &:first-of-type {
-        padding-top: 0;
-    }
-  }
-
-  &__minor-info {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  &__minor-name {
-    font-size: 14px;
-    font-weight: 600;
-    color: #121E52;
-  }
-
-  &__minor-age {
-    font-size: 12px;
-    color: #9399B3;
-  }
-
-  &__minor-status-group {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  &__minor-expires {
-    font-size: 12px;
-    color: #9399B3;
-  }
-
-  &__footer {
-    margin-top: 40px;
-    font-size: 12px;
-    color: #9399B3;
-  }
-}
-
-// Mobile styles
-@media (max-width: 768px) {
-  .customer-detail {
-    padding: 20px 16px;
-
-    &__back {
-      font-size: 13px;
-      padding: 6px 12px;
-      margin-bottom: 20px;
-    }
-
-    &__header {
-      margin-bottom: 24px;
-    }
-
-    &__name {
-      font-size: 24px;
-      margin-bottom: 12px;
-    }
-
-    &__badges-row {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 12px;
-    }
-
-    &__badges {
-      flex-wrap: wrap;
-    }
-
-    &__id-badge {
-      font-size: 11px;
-      padding: 3px 10px;
-    }
-
-    &__edit {
-      font-size: 13px;
-      padding: 6px 12px;
-      align-self: flex-start;
-    }
-
-    &__grid {
-      grid-template-columns: 1fr;
-      gap: 16px;
-      margin-bottom: 16px;
-    }
-
-    &__card {
-      padding: 20px;
-
-      &--full {
-        grid-column: 1;
-      }
-    }
-
-    &__card-title {
-      font-size: 16px;
-      margin-bottom: 16px;
-    }
-
-    &__info-group {
-      margin-bottom: 14px;
-
-      label {
-        font-size: 11px;
-      }
-
-      span {
-        font-size: 13px;
-      }
-    }
-
-    &__minor-row {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 12px;
-      padding: 12px 0;
-    }
-
-    &__minor-name {
-      font-size: 13px;
-    }
-
-    &__minor-age,
-    &__minor-expires {
-      font-size: 11px;
-    }
-
-    &__minor-status-group {
-      width: 100%;
-      justify-content: space-between;
-    }
-
-    &__footer {
-      margin-top: 24px;
-      font-size: 11px;
-    }
-  }
-}
-
-// Extra small mobile devices
-@media (max-width: 480px) {
-  .customer-detail {
-    padding: 16px 12px;
-
-    &__back {
-      font-size: 12px;
-      padding: 4px 8px;
-      margin-bottom: 16px;
-    }
-
-    &__name {
-      font-size: 20px;
-    }
-
-    &__card {
-      padding: 16px;
-      border-radius: 8px;
-    }
-
-    &__card-title {
-      font-size: 15px;
-      margin-bottom: 12px;
-    }
-
-    &__badges {
-      gap: 8px;
-    }
-
-    &__minor-row {
-      padding: 10px 0;
-    }
-  }
-}
-

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

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

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

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

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

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