@bailierich/booking-components 2.0.0

package/TENANT_SETUP.md

@@ -0,0 +1,316 @@
+# Using @oviah/booking-components in Your Tenant Template
+
+Quick guide for importing and using the booking/landing page components in your tenant template project.
+
+## Step-by-Step Setup
+
+### 1. Choose Your Installation Method
+
+#### Recommended: Local Link (for development)
+
+This is the easiest for development since it auto-updates when you rebuild.
+
+**Terminal 1 - In stylink-saas-dashboard:**
+```bash
+cd /Users/queenb/Desktop/stylink-saas-dashboard/packages/booking-components
+npm run build  # Build the package
+npm link       # Create global symlink
+```
+
+**Terminal 2 - In your tenant template project:**
+```bash
+cd /path/to/your/tenant-template
+npm link @oviah/booking-components
+```
+
+Done! The package is now available in your tenant project.
+
+### 2. Import Components
+
+In your tenant template's page component:
+
+```tsx
+// app/[slug]/page.tsx or wherever you render the tenant page
+
+import { SectionRenderer, BookingFlow } from '@oviah/booking-components';
+```
+
+### 3. Render the Landing Page
+
+```tsx
+'use client';
+
+import { SectionRenderer } from '@oviah/booking-components';
+
+export default function TenantLandingPage({ params }) {
+  // Fetch config from your API or database
+  const config = await fetchTenantConfig(params.slug);
+
+  const { theme, sections } = config;
+
+  return (
+    <div
+      className="min-h-screen"
+      style={{
+        backgroundColor: config.background?.value || '#FFFFFF',
+        color: theme.colors.text,
+        fontFamily: theme.typography.bodyFont
+      }}
+    >
+      {sections
+        .filter(s => s.enabled)
+        .sort((a, b) => a.position - b.position)
+        .map((section) => (
+          <SectionRenderer
+            key={section.id}
+            section={section}
+            theme={theme}
+            enableInlineEditing={false}
+          />
+        ))}
+    </div>
+  );
+}
+```
+
+### 4. Render the Booking Flow
+
+```tsx
+// app/[slug]/book/page.tsx
+
+'use client';
+
+import { BookingFlow } from '@oviah/booking-components';
+
+export default function BookingPage() {
+  const config = {
+    progressBar: {
+      type: 'stepped',
+      showStepNames: true
+    },
+    steps: {
+      service: { enabled: true },
+      datetime: { enabled: true },
+      contact: { enabled: true }
+    }
+  };
+
+  const colors = {
+    primary: '#D8C4FF',
+    secondary: '#014421',
+    text: '#000000'
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-16">
+      <BookingFlow
+        config={config}
+        colors={colors}
+        services={[
+          { id: '1', name: 'Haircut', price: 50, duration: 60 }
+        ]}
+        dates={['2025-10-15', '2025-10-16']}
+        times={['09:00', '10:00', '11:00']}
+        addons={[]}
+        onComplete={(bookingData) => {
+          console.log('Booking submitted:', bookingData);
+          // Handle booking submission to your API
+        }}
+      />
+    </div>
+  );
+}
+```
+
+## Important Notes
+
+### Peer Dependencies
+
+Make sure your tenant template has these dependencies:
+
+```json
+{
+  "dependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
+}
+```
+
+The package bundles `framer-motion`, `lucide-react`, and `clsx`, so you don't need to install them separately.
+
+### Rebuilding the Package
+
+Whenever you make changes to the components in stylink-saas-dashboard:
+
+```bash
+cd /Users/queenb/Desktop/stylink-saas-dashboard/packages/booking-components
+npm run build
+```
+
+Your tenant template will automatically use the updated version (with `npm link`).
+
+### TypeScript Support
+
+The package includes full TypeScript definitions:
+
+```tsx
+import type {
+  Section,
+  BookingFlowConfig,
+  Theme
+} from '@oviah/booking-components';
+
+const section: Section = {
+  id: 'hero-1',
+  type: 'hero',
+  enabled: true,
+  position: 0,
+  settings: {
+    headline: 'Welcome'
+  }
+};
+```
+
+## Example: Complete Tenant Page
+
+```tsx
+// app/[slug]/page.tsx
+
+'use client';
+
+import { use, useEffect, useState } from 'react';
+import { SectionRenderer } from '@oviah/booking-components';
+
+export default function TenantPage({ params }) {
+  const { slug } = use(params);
+  const [config, setConfig] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function loadConfig() {
+      try {
+        const res = await fetch(`/api/config/${slug}`);
+        const data = await res.json();
+        setConfig(data);
+      } catch (error) {
+        console.error('Failed to load config:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadConfig();
+  }, [slug]);
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  if (!config) {
+    return <div>Tenant not found</div>;
+  }
+
+  const { theme, background, sections } = config;
+
+  // Calculate background style
+  const backgroundStyle =
+    background?.type === 'gradient'
+      ? { background: background.value }
+      : background?.type === 'image'
+      ? {
+          backgroundImage: `url(${background.value})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center'
+        }
+      : { backgroundColor: background?.value || '#FFFFFF' };
+
+  return (
+    <div
+      className="min-h-screen"
+      style={{
+        ...backgroundStyle,
+        color: theme.colors.text,
+        fontFamily: theme.typography.bodyFont,
+        fontSize: theme.typography.bodySize
+      }}
+    >
+      {sections
+        .filter(s => s.enabled)
+        .sort((a, b) => a.position - b.position)
+        .map((section) => {
+          const marginTop = section.settings?.marginTop || 0;
+          const marginBottom = section.settings?.marginBottom || 0;
+          const paddingTop = section.settings?.paddingTop || 0;
+          const paddingBottom = section.settings?.paddingBottom || 0;
+
+          return (
+            <div
+              key={section.id}
+              style={{
+                marginTop: `${marginTop}px`,
+                marginBottom: `${marginBottom}px`,
+                paddingTop: `${paddingTop}px`,
+                paddingBottom: `${paddingBottom}px`
+              }}
+            >
+              <SectionRenderer
+                section={section}
+                theme={theme}
+                enableInlineEditing={false}
+              />
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+```
+
+## Troubleshooting
+
+### "Module not found: @oviah/booking-components"
+
+Make sure you've linked the package:
+```bash
+npm link @oviah/booking-components
+```
+
+### "React version mismatch"
+
+Ensure your tenant template uses React 18 or 19:
+```bash
+npm install react@^19 react-dom@^19
+```
+
+### Changes not reflecting
+
+Rebuild the package:
+```bash
+cd /Users/queenb/Desktop/stylink-saas-dashboard/packages/booking-components
+npm run build
+```
+
+### Want to use the file path method instead?
+
+**In your tenant template's package.json:**
+```json
+{
+  "dependencies": {
+    "@oviah/booking-components": "file:../stylink-saas-dashboard/packages/booking-components"
+  }
+}
+```
+
+Then:
+```bash
+npm install
+```
+
+## Next Steps
+
+1. Set up your API endpoints to fetch tenant configs
+2. Implement booking submission logic
+3. Add payment integration
+4. Customize styling to match your tenant's brand
+
+For more details, see the main [README.md](./README.md).