@licklist/design 0.78.5-dev.91 → 0.78.5-dev.93

package/src/v2/shadcn/_reference/ai/parseInteractiveBlocks.ts

@@ -0,0 +1,142 @@
+/**
+ * Parses AI chat message content into segments of plain text and interactive blocks.
+ *
+ * Interactive blocks are delimited by :::interactive:<type> … ::: markers.
+ * Supported types: radio-select, user-card, action-buttons
+ */
+
+export type RadioOption = {
+  value: string;
+  label: string;
+  description?: string;
+};
+
+export type RadioSelectBlock = {
+  type: 'radio-select';
+  field: string;
+  options: RadioOption[];
+};
+
+export type UserCardBlock = {
+  type: 'user-card';
+  firstName: string;
+  lastName: string;
+  email: string;
+  role: string;
+  roleLabel?: string;
+  providerName?: string;
+  companyName?: string;
+};
+
+export type ActionButton = {
+  label: string;
+  action: string;
+  variant: 'primary' | 'ghost' | 'cancel' | 'destructive';
+  data?: Record<string, any>;
+};
+
+export type ActionButtonsBlock = {
+  type: 'action-buttons';
+  buttons: ActionButton[];
+};
+
+export type QuickAction = {
+  label: string;
+  action: string;
+  type?: 'message' | 'date-picker';
+};
+
+export type QuickActionsBlock = {
+  type: 'quick-actions';
+  actions: QuickAction[];
+};
+
+export type EntityCardItem = {
+  id: string;
+  name: string;
+  subtitle?: string;
+  badge?: string;
+  entityType: 'customer' | 'user' | 'provider' | 'company';
+  providerId?: string;
+  providerType?: 'venue' | 'promoter';
+};
+
+export type EntityCardBlock = {
+  type: 'entity-card';
+  items: EntityCardItem[];
+};
+
+export type InteractiveBlock = RadioSelectBlock | UserCardBlock | ActionButtonsBlock | QuickActionsBlock | EntityCardBlock;
+
+export type MessageSegment =
+  | { kind: 'text'; content: string }
+  | { kind: 'interactive'; block: InteractiveBlock };
+
+const BLOCK_REGEX = /:::interactive:([\w-]+)\n([\s\S]*?)\n:::/g;
+
+export function parseMessageContent(content: string): MessageSegment[] {
+  const segments: MessageSegment[] = [];
+  let lastIndex = 0;
+
+  for (const match of content.matchAll(BLOCK_REGEX)) {
+    const beforeText = content.slice(lastIndex, match.index);
+    if (beforeText.trim()) {
+      segments.push({ kind: 'text', content: beforeText.trim() });
+    }
+
+    const blockType = match[1];
+    const blockJson = match[2].trim();
+
+    try {
+      const parsed = JSON.parse(blockJson);
+
+      switch (blockType) {
+        case 'radio-select':
+          segments.push({
+            kind: 'interactive',
+            block: { type: 'radio-select', field: parsed.field, options: parsed.options } as RadioSelectBlock,
+          });
+          break;
+        case 'user-card':
+          segments.push({
+            kind: 'interactive',
+            block: { type: 'user-card', ...parsed } as UserCardBlock,
+          });
+          break;
+        case 'action-buttons':
+          segments.push({
+            kind: 'interactive',
+            block: { type: 'action-buttons', buttons: Array.isArray(parsed) ? parsed : parsed.buttons } as ActionButtonsBlock,
+          });
+          break;
+        case 'quick-actions':
+          segments.push({
+            kind: 'interactive',
+            block: { type: 'quick-actions', actions: Array.isArray(parsed) ? parsed : parsed.actions } as QuickActionsBlock,
+          });
+          break;
+        case 'entity-card':
+          segments.push({
+            kind: 'interactive',
+            block: { type: 'entity-card', items: Array.isArray(parsed) ? parsed : parsed.items } as EntityCardBlock,
+          });
+          break;
+        default:
+          // Unknown block type – render as text
+          segments.push({ kind: 'text', content: match[0] });
+      }
+    } catch {
+      // Invalid JSON – render as text
+      segments.push({ kind: 'text', content: match[0] });
+    }
+
+    lastIndex = (match.index ?? 0) + match[0].length;
+  }
+
+  const trailing = content.slice(lastIndex);
+  if (trailing.trim()) {
+    segments.push({ kind: 'text', content: trailing.trim() });
+  }
+
+  return segments.length > 0 ? segments : [{ kind: 'text', content }];
+}

package/src/v2/shadcn/_reference/auth/AuthLayout.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { AuthBackgroundGraphic } from '../../../../icons';
+import { BookedLogoNew } from '../logos/BookedLogoNew';
+
+interface AuthLayoutProps {
+  badgeLabel: string;
+  icon: React.ReactNode;
+  title: string;
+  subtitle: string;
+  children: React.ReactNode;
+}
+
+export const AuthLayout: React.FC<AuthLayoutProps> = ({
+  badgeLabel,
+  icon,
+  title,
+  subtitle,
+  children
+}) => {
+  return (
+    <>
+      <AuthBackgroundGraphic className="fixed top-0 left-0 w-[489px] h-[588px] pointer-events-none z-0" />
+      
+      <main className="shadow-lg self-center min-h-[400px] w-[846px] max-w-[calc(100%-32px)] md:max-w-[calc(100%-64px)] overflow-hidden bg-surface-primary mt-20 rounded-2xl max-md:mt-10 relative z-10">
+        {/* Header with logo and badge */}
+        <div className="flex items-center justify-between p-4 border-b border-border-primary">
+          <BookedLogoNew className="h-6" />
+          <div className="inline-flex justify-center items-center gap-2 border px-2 py-1 rounded-3xl border-colour-overlay bg-surface-tertiary">
+            <span className="text-label-primary text-[10px] font-mono font-medium leading-[13px] whitespace-nowrap">
+              {badgeLabel}
+            </span>
+          </div>
+        </div>
+        
+        <div className="pt-[42px] max-md:pt-5 pb-6 px-[42px] max-md:px-5">
+          <section className="flex w-full gap-16 max-md:gap-8 flex-wrap max-md:max-w-full relative z-10">
+            <div className="min-w-60 text-neutral-600 flex-1 shrink basis-[0%] max-w-[260px]">
+              <div className="w-full">
+                {icon}
+                <h1 className="text-label-primary text-[32px] font-bold leading-none mt-2">
+                  {title}
+                </h1>
+                <p className="text-label-secondary text-lg font-normal leading-none mt-2 max-md:mt-1">
+                  {subtitle}
+                </p>
+              </div>
+            </div>
+            
+            {children}
+          </section>
+        </div>
+      </main>
+    </>
+  );
+};

package/src/v2/shadcn/_reference/auth/CreatePasswordForm.tsx

@@ -0,0 +1,285 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../ui/button';
+import { Label } from '../ui/label';
+import { Input } from '../ui/input';
+import { useNotify } from '../../hooks/useNotify';
+import { useNavigate } from 'react-router-dom';
+import IconTick from '@/assets/Icon_Tick.svg';
+import IconCross from '@/assets/Icon_Cross.svg';
+import { supabase } from '@/integrations/supabase/client';
+
+export const CreatePasswordForm: React.FC = () => {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showError, setShowError] = useState(false);
+  const navigate = useNavigate();
+  const { showSuccess, showError: showNotifyError } = useNotify();
+  const { t } = useTranslation(['Design', 'Validation']);
+  
+  // Password strength calculation
+  const hasNumber = /\d/.test(password);
+  const hasCapital = /[A-Z]/.test(password);
+  const hasMinLength = password.length >= 8;
+  
+  const criteriaCount = [hasNumber, hasCapital, hasMinLength].filter(Boolean).length;
+  const allCriteriaMet = hasNumber && hasCapital && hasMinLength;
+  
+  // Strength bar color and width
+  const getStrengthColor = () => {
+    if (password.length === 0) return 'transparent';
+    if (criteriaCount <= 1) return 'var(--red-600)';
+    if (criteriaCount === 2) return 'var(--orange-500)';
+    return 'var(--green-600)';
+  };
+  
+  const getStrengthWidth = () => {
+    if (password.length === 0) return '0%';
+    if (criteriaCount <= 1) return '33%';
+    if (criteriaCount === 2) return '66%';
+    return '100%';
+  };
+  
+  const getStrengthLabel = () => {
+    if (password.length === 0) return '';
+    if (criteriaCount <= 1) return t('passwordStrengthWeak');
+    if (criteriaCount === 2) return t('passwordStrengthMedium');
+    return t('passwordStrengthStrong');
+  };
+  
+  // Password match validation
+  const passwordsMatch = password === confirmPassword && confirmPassword.length > 0;
+  const showMatchIndicator = confirmPassword.length > 0;
+  
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!allCriteriaMet) {
+      setShowError(true);
+      showNotifyError(t('pleaseMeetAllPasswordRequirements', { ns: 'Validation' }));
+      return;
+    }
+    
+    if (!passwordsMatch) {
+      setShowError(true);
+      showNotifyError(t('passwordsDoNotMatch', { ns: 'Validation' }));
+      return;
+    }
+
+    setShowError(false);
+    setIsSubmitting(true);
+    try {
+      const { error } = await supabase.auth.updateUser({
+        password: password,
+      });
+
+      if (error) {
+        showNotifyError('Update failed', error.message || 'Failed to update password');
+        return;
+      }
+
+      // Clear force_password_reset flag and update password_last_changed_at
+      const { data: { user: currentUser } } = await supabase.auth.getUser();
+      if (currentUser) {
+        const { error: profileError } = await supabase
+          .from('profiles')
+          .update({ 
+            force_password_reset: false,
+            password_last_changed_at: new Date().toISOString()
+          })
+          .eq('id', currentUser.id);
+
+        if (profileError) {
+          console.error('Error updating profile:', profileError);
+        }
+      }
+
+      showSuccess('Password updated successfully!');
+      
+      // Get user's primary role and assignments to determine dashboard
+      const { data: { user } } = await supabase.auth.getUser();
+      if (!user) {
+        showNotifyError('Authentication failed');
+        navigate('/auth');
+        return;
+      }
+
+      const { data: primaryRole, error: roleError } = await supabase
+        .rpc('get_user_primary_role', { _user_id: user.id });
+
+      if (roleError) {
+        console.error('Error fetching role:', roleError);
+        showNotifyError('Failed to determine user permissions');
+        navigate('/auth');
+        return;
+      }
+
+      // Super admins and system admins go to admin dashboard
+      if (primaryRole === 'super_admin' || primaryRole === 'system_admin') {
+        navigate('/admin');
+        return;
+      }
+
+      // For other roles, check their assignments
+      // First check for company assignments
+      const { data: companyAssignments } = await supabase
+        .from('user_companies')
+        .select('company_id')
+        .eq('user_id', user.id)
+        .limit(1);
+
+      if (companyAssignments && companyAssignments.length > 0) {
+        const companyId = companyAssignments[0].company_id;
+        navigate(`/company/${companyId}`);
+        return;
+      }
+
+      // Then check for provider assignments
+      const { data: providerAssignments } = await supabase
+        .from('user_providers')
+        .select('provider_id')
+        .eq('user_id', user.id)
+        .limit(1);
+
+      if (providerAssignments && providerAssignments.length > 0) {
+        const providerId = providerAssignments[0].provider_id;
+        
+        // Fetch provider details to get the friendly ID and type
+        const { data: provider } = await supabase
+          .from('providers')
+          .select('venue_id, type')
+          .eq('id', providerId)
+          .single();
+        
+        if (provider) {
+          const providerType = provider.type === 'venue' ? 'venue' : 'promoter';
+          const friendlyId = provider.venue_id || '01';
+          navigate(`/${providerType}/${friendlyId}`);
+          return;
+        }
+      }
+
+      // No assignments found - show error
+      showNotifyError('No dashboard access configured. Please contact your administrator.');
+      navigate('/auth');
+    } catch (error) {
+      showNotifyError('An unexpected error occurred');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={onSubmit} className="flex min-w-60 flex-col items-stretch flex-1 shrink basis-[0%] max-md:max-w-full">
+      <div className="mb-6">
+        <p className="text-label-primary text-[15px] font-semibold leading-[1.4] mb-2">
+          {t('passwordsMustContain')}
+        </p>
+        <ul className="text-label-primary text-[15px] font-normal leading-[1.6] list-none pl-0 space-y-1">
+          <li className="flex items-center gap-2">
+            <img 
+              src={hasNumber ? IconTick : IconCross} 
+              alt="" 
+              className="w-4 h-4"
+            />
+            {t('passwordAtLeastOneNumber')}
+          </li>
+          <li className="flex items-center gap-2">
+            <img 
+              src={hasCapital ? IconTick : IconCross} 
+              alt="" 
+              className="w-4 h-4"
+            />
+            {t('passwordAtLeastOneCapital')}
+          </li>
+          <li className="flex items-center gap-2">
+            <img 
+              src={hasMinLength ? IconTick : IconCross} 
+              alt="" 
+              className="w-4 h-4"
+            />
+            {t('passwordAtLeastEightChars')}
+          </li>
+        </ul>
+      </div>
+
+      <div className="mb-4">
+        <Label htmlFor="password" className="text-label-primary text-[15px] font-semibold leading-[1.4] mb-2 block">
+          {t('password')}
+        </Label>
+        <Input
+          id="password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className="border-stroke-primary bg-surface-primary text-label-primary"
+          
+        />
+        
+        {password.length > 0 && (
+          <div className="mt-2">
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-label-secondary text-xs">{t('passwordStrength')}</span>
+              <span className="text-label-secondary text-xs">{getStrengthLabel()}</span>
+            </div>
+            <div className="h-1 bg-neutral-100 rounded-full overflow-hidden">
+              <div 
+                className="h-full transition-all duration-300"
+                style={{ 
+                  width: getStrengthWidth(),
+                  backgroundColor: getStrengthColor()
+                }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="mb-6">
+        <Label htmlFor="confirmPassword" className="text-label-primary text-[15px] font-semibold leading-[1.4] mb-2 block">
+          {t('confirmPassword')}
+        </Label>
+        <Input
+          id="confirmPassword"
+          type="password"
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          className="border-stroke-primary bg-surface-primary text-label-primary"
+          
+        />
+        
+        {showMatchIndicator && (
+          <div className="flex items-center gap-2 mt-2">
+            <img 
+              src={passwordsMatch ? IconTick : IconCross} 
+              alt="" 
+              className="w-4 h-4"
+            />
+            <span className={passwordsMatch ? 'text-feedback-success' : 'text-feedback-error'} style={{ fontSize: '13px' }}>
+              {passwordsMatch ? t('passwordsMatch') : t('passwordsDoNotMatch')}
+            </span>
+          </div>
+        )}
+      </div>
+      
+      <Button
+        type="submit"
+        disabled={isSubmitting}
+        size="lg"
+        className="min-w-[150px] w-fit"
+      >
+        {isSubmitting ? t('updatingPassword') : t('updatePassword')}
+      </Button>
+      
+      <Button
+        type="button"
+        variant="link"
+        onClick={() => navigate('/auth/reset-password')}
+        className="mt-4 p-0 h-auto"
+      >
+        {t('resetPasswordInstead')}
+      </Button>
+    </form>
+  );
+};

package/src/v2/shadcn/_reference/auth/CreatePasswordPanel.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { CreatePasswordForm } from './CreatePasswordForm';
+import { AuthLayout } from './AuthLayout';
+import { IconUser } from '../../../icons';
+export const CreatePasswordPanel: React.FC = () => {
+  return (
+    <AuthLayout
+      badgeLabel="Create new password"
+      icon={
+        <IconUser className="w-16 h-16 text-fill-primary" />
+      }
+      title="Create new password"
+      subtitle="Secure your account."
+    >
+      <CreatePasswordForm />
+    </AuthLayout>
+  );
+};

package/src/v2/shadcn/_reference/auth/LoginFooter.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+
+export const LoginFooter: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const isLoginPage = location.pathname === '/auth' || location.pathname === '/auth/';
+
+  if (!isLoginPage) {
+    return null;
+  }
+
+  return null;
+};