@licklist/design 0.78.27 → 0.78.29

package/src/v2/pages/Settings/SettingsPage.scss

@@ -0,0 +1,52 @@
+@import '../../styles/tokens/typography';
+@import '../../styles/tokens/colors';
+
+.settings-page {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
+  font-family: var(--font-family-sans);
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+    border-bottom: 1px solid var(--border-primary);
+  }
+
+  &__title-row {
+    display: flex;
+    height: 72px;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+    padding: 24px 0 8px 8px;
+
+    @media (max-width: $bp-mobile-max) {
+      height: auto;
+      padding: 16px 0 8px 8px;
+    }
+  }
+
+  &__title {
+    @include typography('heading.h1');
+    margin: 0;
+
+    @media (max-width: $bp-mobile-max) {
+      @include typography('heading.h1.mobile');
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+    align-self: stretch;
+    width: 100%;
+    padding: 0 8px;
+  }
+}

package/src/v2/pages/Settings/SettingsPage.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import './SettingsPage.scss'
+import { SettingsTabs, SettingsTab } from './SettingsTabs'
+
+export interface SettingsPageProps {
+  title?: string
+  tabs: SettingsTab[]
+  defaultTab?: string
+  onTabChange?: (tabId: string) => void
+  children?: React.ReactNode
+}
+
+export const SettingsPage: React.FC<SettingsPageProps> = ({
+  title = 'Settings',
+  tabs,
+  defaultTab,
+  onTabChange,
+  children,
+}) => {
+  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id || '')
+
+  const handleTabChange = (tabId: string) => {
+    setActiveTab(tabId)
+    onTabChange?.(tabId)
+  }
+
+  return (
+    <div className="settings-page">
+      <header className="settings-page__header">
+        <div className="settings-page__title-row">
+          <h1 className="settings-page__title">{title}</h1>
+        </div>
+        <SettingsTabs
+          tabs={tabs}
+          activeTab={activeTab}
+          onTabChange={handleTabChange}
+        />
+      </header>
+      <div className="settings-page__content">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default SettingsPage

package/src/v2/pages/Settings/SettingsTabs.scss

@@ -0,0 +1,44 @@
+@import '../../styles/tokens/typography';
+@import '../../styles/tokens/colors';
+
+.settings-tabs {
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
+  font-family: var(--font-family-sans);
+
+  &__tab {
+    display: flex;
+    padding: 12px 0;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    transition: border-color 0.2s ease, color 0.2s ease;
+
+    &:hover {
+      .settings-tabs__tab-label {
+        color: var(--label-primary);
+      }
+    }
+
+    &--active {
+      border-bottom-color: var(--fill-primary);
+
+      .settings-tabs__tab-label {
+        color: var(--label-primary);
+        font-weight: 600;
+      }
+    }
+  }
+
+  &__tab-label {
+    @include typography('text.regular');
+    color: var(--label-secondary);
+    transition: color 0.2s ease;
+  }
+}

package/src/v2/pages/Settings/SettingsTabs.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import './SettingsTabs.scss'
+
+export interface SettingsTab {
+  id: string
+  label: string
+}
+
+export interface SettingsTabsProps {
+  tabs: SettingsTab[]
+  activeTab: string
+  onTabChange: (tabId: string) => void
+}
+
+export const SettingsTabs: React.FC<SettingsTabsProps> = ({
+  tabs,
+  activeTab,
+  onTabChange,
+}) => {
+  return (
+    <nav className="settings-tabs">
+      {tabs.map((tab) => (
+        <button
+          key={tab.id}
+          onClick={() => onTabChange(tab.id)}
+          className={`settings-tabs__tab ${activeTab === tab.id ? 'settings-tabs__tab--active' : ''}`}
+        >
+          <span className="settings-tabs__label">{tab.label}</span>
+          <div className="settings-tabs__indicator" />
+        </button>
+      ))}
+    </nav>
+  )
+}
+
+export default SettingsTabs

package/src/v2/pages/Settings/components/SidebarCustomisation.scss

@@ -0,0 +1,204 @@
+@import '../../../styles/tokens/typography';
+@import '../../../styles/tokens/colors';
+
+.sidebar-customisation {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  font-family: var(--font-family-sans);
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__title {
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.2;
+    color: var(--label-primary);
+    margin: 0;
+  }
+
+  &__cancel-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 36px;
+    padding: 0 12px;
+    border-radius: 6px;
+    border: none;
+    background: transparent;
+    color: var(--label-danger);
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--surface-danger-soft, rgba(239, 68, 68, 0.1));
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--border-action);
+      outline-offset: 2px;
+    }
+  }
+
+  &__edit-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    height: 36px;
+    padding: 0 12px 0 4px;
+    border-radius: 6px;
+    border: none;
+    background: transparent;
+    color: var(--label-primary);
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    svg {
+      width: 20px;
+      height: 20px;
+      flex-shrink: 0;
+      fill: var(--fill-primary);
+    }
+
+    &:hover {
+      background-color: var(--surface-tertiary);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--border-action);
+      outline-offset: 2px;
+    }
+  }
+
+  // Edit mode grid - responsive columns
+  &__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 16px;
+    width: 100%;
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: 1024px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    @media (min-width: 1536px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+
+  // View mode grid - responsive columns
+  &__view-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 12px;
+    width: 100%;
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: 1024px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    @media (min-width: 1536px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+
+  &__view-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    border: 1px solid var(--border-primary);
+    border-radius: 8px;
+    background-color: var(--surface-secondary);
+    min-width: 0;
+
+    &--hidden {
+      opacity: 0.5;
+    }
+  }
+
+  &__view-icon {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--fill-primary);
+    flex-shrink: 0;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &__view-label {
+    @include typography('text.small.emphasis');
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    margin-top: 8px;
+  }
+
+  &__save-btn {
+    @include typography('text.regular');
+    font-weight: 600;
+    padding: 10px 20px;
+    border-radius: 8px;
+    border: none;
+    background-color: var(--fill-action);
+    color: var(--label-white);
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--actions-dark);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--border-action);
+      outline-offset: 2px;
+    }
+  }
+
+  &__reset-btn {
+    @include typography('text.small');
+    font-weight: 500;
+    color: var(--label-secondary);
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+
+    &:hover {
+      color: var(--label-primary);
+      text-decoration: underline;
+    }
+  }
+}

package/src/v2/pages/Settings/components/SidebarCustomisation.stories.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { SidebarCustomisation, defaultSidebarItems, SidebarItem } from './SidebarCustomisation'
+
+const meta: Meta<typeof SidebarCustomisation> = {
+  title: 'V2/Pages/Settings/SidebarCustomisation',
+  component: SidebarCustomisation,
+  parameters: {
+    layout: 'padded',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof SidebarCustomisation>
+
+const InteractiveSidebarCustomisation = () => {
+  const [items, setItems] = useState<SidebarItem[]>(defaultSidebarItems)
+
+  const handleSave = (updatedItems: SidebarItem[]) => {
+    console.log('Saved items:', updatedItems)
+    alert('Settings saved!')
+  }
+
+  const handleReset = () => {
+    setItems(defaultSidebarItems)
+    console.log('Reset to defaults')
+  }
+
+  const handleCancel = () => {
+    console.log('Cancelled')
+  }
+
+  return (
+    <div style={{ maxWidth: '900px' }}>
+      <SidebarCustomisation
+        items={items}
+        onItemsChange={setItems}
+        onSave={handleSave}
+        onReset={handleReset}
+        onCancel={handleCancel}
+      />
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: () => <InteractiveSidebarCustomisation />,
+}

package/src/v2/pages/Settings/components/SidebarCustomisation.tsx

@@ -0,0 +1,172 @@
+import React, { useEffect, useState } from 'react'
+import { SidebarNavItem } from './SidebarNavItem'
+import './SidebarCustomisation.scss'
+import {
+  CalendarIcon,
+  BookingsIcon,
+  BookingTypesIcon,
+  LoyaltyIcon,
+  CustomersIcon,
+  MarketingIcon,
+  WaiversIcon,
+  SettingsIcon,
+  EditIcon,
+} from '../../../icons'
+
+export interface SidebarItem {
+  id: string
+  label: string
+  icon: React.ReactNode
+  visible: boolean
+  locked?: boolean
+}
+
+export interface SidebarCustomisationProps {
+  items: SidebarItem[]
+  onItemsChange?: (items: SidebarItem[]) => void
+  onSave?: (items: SidebarItem[]) => void
+  onReset?: () => void
+  onCancel?: () => void
+}
+
+// Default sidebar items - IDs must match useProviderNavigation.tsx
+export const defaultSidebarItems: SidebarItem[] = [
+  { id: 'events', label: 'Dates & Events', icon: <CalendarIcon />, visible: true },
+  { id: 'sales', label: 'Bookings & Enquiries', icon: <BookingsIcon />, visible: true },
+  { id: 'product-sets', label: 'Booking Types', icon: <BookingTypesIcon />, visible: true },
+  { id: 'loyalty', label: 'Loyalty', icon: <LoyaltyIcon />, visible: true },
+  { id: 'customers', label: 'Customers', icon: <CustomersIcon />, visible: true },
+  { id: 'emails', label: 'Email & SMS', icon: <MarketingIcon />, visible: true },
+  { id: 'waivers', label: 'Waivers', icon: <WaiversIcon />, visible: true },
+  { id: 'settings', label: 'Settings', icon: <SettingsIcon />, visible: true, locked: true },
+]
+
+export const SidebarCustomisation: React.FC<SidebarCustomisationProps> = ({
+  items: initialItems,
+  onItemsChange,
+  onSave,
+  onReset,
+  onCancel,
+}) => {
+  const [items, setItems] = useState<SidebarItem[]>(initialItems)
+  const [itemsBeforeEdit, setItemsBeforeEdit] = useState<SidebarItem[]>(initialItems)
+  const [isEditing, setIsEditing] = useState(false)
+
+  useEffect(() => {
+    setItems(initialItems)
+    if (!isEditing) {
+      setItemsBeforeEdit(initialItems)
+    }
+  }, [initialItems, isEditing])
+
+  const handleLabelChange = (id: string, newLabel: string) => {
+    const updatedItems = items.map((item) =>
+      item.id === id ? { ...item, label: newLabel } : item
+    )
+    setItems(updatedItems)
+  }
+
+  const handleSave = () => {
+    onItemsChange?.(items)
+    onSave?.(items)
+    setItemsBeforeEdit(items)
+    setIsEditing(false)
+  }
+
+  const handleReset = () => {
+    // Reset to defaults in UI - parent handles the actual default values
+    onReset?.()
+  }
+
+  const handleCancel = () => {
+    setItems(itemsBeforeEdit)
+    onCancel?.()
+    setIsEditing(false)
+  }
+
+  const handleEdit = () => {
+    setItemsBeforeEdit(items)
+    setIsEditing(true)
+  }
+
+  return (
+    <div className="sidebar-customisation">
+      <div className="sidebar-customisation__header">
+        <h3 className="sidebar-customisation__title">Sidebar Customisation</h3>
+        {isEditing ? (
+          <button
+            type="button"
+            className="sidebar-customisation__cancel-btn"
+            onClick={handleCancel}
+          >
+            Cancel
+          </button>
+        ) : (
+          <button
+            type="button"
+            className="sidebar-customisation__edit-btn"
+            onClick={handleEdit}
+          >
+            <EditIcon />
+            <span>Edit Side Bar</span>
+          </button>
+        )}
+      </div>
+
+      {isEditing ? (
+        <>
+          <div className="sidebar-customisation__grid">
+            {items.map((item) => {
+              const defaultItem = defaultSidebarItems.find(d => d.id === item.id)
+              return (
+                <SidebarNavItem
+                  key={item.id}
+                  id={item.id}
+                  label={item.label}
+                  defaultLabel={defaultItem?.label || item.label}
+                  icon={item.icon}
+                  onLabelChange={handleLabelChange}
+                />
+              )
+            })}
+          </div>
+
+          <div className="sidebar-customisation__actions">
+            <button
+              type="button"
+              className="sidebar-customisation__save-btn"
+              onClick={handleSave}
+            >
+              Save Changes
+            </button>
+            <button
+              type="button"
+              className="sidebar-customisation__reset-btn"
+              onClick={handleReset}
+            >
+              Reset to defaults
+            </button>
+          </div>
+        </>
+      ) : (
+        <div className="sidebar-customisation__view-grid">
+          {items.map((item) => (
+            <div
+              key={item.id}
+              className={`sidebar-customisation__view-item ${!item.visible ? 'sidebar-customisation__view-item--hidden' : ''}`}
+            >
+              <span className="sidebar-customisation__view-icon">
+                {item.icon}
+              </span>
+              <span className="sidebar-customisation__view-label">
+                {item.label}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default SidebarCustomisation

package/src/v2/pages/Settings/components/SidebarNavItem.scss

@@ -0,0 +1,76 @@
+@import '../../../styles/tokens/typography';
+@import '../../../styles/tokens/colors';
+
+.sidebar-nav-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-family: var(--font-family-sans);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &--disabled {
+      .sidebar-nav-item__icon {
+        color: var(--fill-disabled);
+      }
+
+      .sidebar-nav-item__name {
+        color: var(--label-status-disabled);
+      }
+    }
+  }
+
+  &__icon {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--fill-primary);
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &__name {
+    @include typography('text.small.emphasis');
+  }
+
+  &__input {
+    @include typography('text.small');
+    height: 40px;
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid var(--border-primary);
+    border-radius: 6px;
+    background-color: var(--surface-secondary);
+    color: var(--label-primary);
+    outline: none;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+    &::placeholder {
+      color: var(--label-secondary);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--surface-primary), 0 0 0 4px var(--actions-regular);
+    }
+
+    &--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}