blocks-dusted 0.1.9 → 0.1.11

package/templates/blocks/DD-BookCall/Component.tsx

@@ -8,9 +8,8 @@ import {
   Globe,
   Clock,
   AlertCircle,
-  CalendarCheck,
+  CalendarCheck
 } from 'lucide-react'
-import { Input } from '@/components/ui/input'
 import { getClientSideURL } from '@/utilities/getURL'
 
 type Status = 'idle' | 'submitting' | 'success' | 'error'
@@ -70,7 +69,7 @@ export const DDBookCall: React.FC<DDBookCallProps> = ({
   timeSlots,
   footerNote,
   sectionId,
-  customCSS,
+  customCSS
 }) => {
   const [status, setStatus] = useState<Status>('idle')
   const [selectedType, setSelectedType] = useState<string>(callTypes?.[0]?.value ?? 'discovery')
@@ -108,14 +107,14 @@ export const DDBookCall: React.FC<DDBookCallProps> = ({
       { field: 'call_type', value: selectedType },
       { field: 'preferred_date', value: selectedDate },
       { field: 'preferred_time', value: selectedSlot },
-      { field: 'notes', value: data.get('notes') },
+      { field: 'notes', value: data.get('notes') }
     ]
 
     try {
       const res = await fetch(`${getClientSideURL()}/api/form-submissions`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ form: formID, submissionData }),
+        body: JSON.stringify({ form: formID, submissionData })
       })
 
       if (res.ok) {
@@ -138,7 +137,7 @@ export const DDBookCall: React.FC<DDBookCallProps> = ({
 
       <section
         id={sectionId ?? 'book-call'}
-        className="py-28 bg-stone-50 dark:bg-stone-950 relative overflow-hidden"
+        className="container-fluid mx-auto py-28 relative overflow-hidden"
       >
         {/* Background gradients – light & dark variants */}
         <div
@@ -157,8 +156,8 @@ export const DDBookCall: React.FC<DDBookCallProps> = ({
       bg-size-[60px_60px]"
         />
 
-        <div className="relative max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
-          {/* Header */}#BlockName-DDBookCall
+        <div className="relative max-w-7xl lg:max-w-8xl mx-auto px-4 md:px-6">
+          {/* Header */}
           <div className="text-center mb-16">
             {eyebrow && (
               <div className="inline-flex items-center gap-2 mb-4">
@@ -406,12 +405,12 @@ export const DDBookCall: React.FC<DDBookCallProps> = ({
                         <label className="block text-xs text-stone-500 dark:text-stone-500 mb-1.5">
                           Time Zone
                         </label>
-                        <div className="flex items-center gap-2.5 w-full rounded-sm  border border-stone-300 dark:border-stone-600 bg-stone-50/80 dark:bg-black/80 px-3 py-2 backdrop-blur-[22px]">
+                        <div className="flex h-10 w-full items-center gap-2.5 rounded-2xl squircle border border-stone-300 bg-stone-50/80 px-3 py-2 text-sm text-stone-900 outline-none backdrop-blur-[22px] transition-all duration-300 dark:border-stone-600 dark:bg-[#0e0e13] dark:text-stone-200">
                           <Globe
                             size={14}
                             className="text-stone-400 dark:text-stone-500 shrink-0"
                           />
-                          <span className="text-sm text-stone-700 dark:text-stone-400 truncate">
+                          <span className="truncate text-sm text-stone-900 dark:text-stone-200">
                             {Intl.DateTimeFormat().resolvedOptions().timeZone}
                           </span>
                         </div>
@@ -432,7 +431,7 @@ export const DDBookCall: React.FC<DDBookCallProps> = ({
                               onClick={() => setSelectedSlot(slot)}
                               className={`py-2 rounded-lg text-xs font-medium border transition-all cursor-pointer whitespace-nowrap ${
                                 selectedSlot === slot
-                                  ? 'bg-stone-900 dark:bg-stone-50 text-stone-50 dark:text-stone-900 border-stone-900 dark:border-white'
+                                  ? 'bg-stone-900 dark:!bg-lime-950/50 text-stone-50 dark:text-lime-500 border-stone-900 dark:border-lime-500'
                                   : 'bg-stone-100 dark:bg-stone-950 border-stone-200 dark:border-stone-700 text-stone-600 dark:text-stone-400 hover:border-stone-300 dark:hover:border-stone-500 hover:text-stone-900 dark:hover:text-stone-200'
                               }`}
                             >

package/templates/blocks/DD-BookCall/config.ts

@@ -1,239 +1,239 @@
-import type { Block } from 'payload'
-
-export const DDBookCall: Block = {
-  slug: 'DD-BookCall',
-  interfaceName: 'DDBookCall',
-  labels: {
-    singular: 'Studio Book Call',
-    plural: 'Studio Book Call Sections'
-  },
-  fields: [
-    {
-      type: 'tabs',
-      tabs: [
-        {
-          label: 'Info',
-          fields: [
-            {
-              name: 'eyebrow',
-              type: 'text',
-              label: 'Eyebrow Label',
-              defaultValue: 'Schedule a Call'
-            },
-            {
-              name: 'headlineMain',
-              type: 'text',
-              label: 'Headline (Main)',
-              required: true,
-              defaultValue: 'Book a call with'
-            },
-            {
-              name: 'headlineAccent',
-              type: 'text',
-              label: 'Headline (Accent)',
-              defaultValue: 'our team'
-            },
-            {
-              name: 'description',
-              type: 'textarea',
-              label: 'Description',
-              defaultValue:
-                "Pick a time that works for you. We'll send a calendar invite with everything you need."
-            },
-            {
-              name: 'callTypes',
-              type: 'array',
-              label: 'Call Types',
-              minRows: 1,
-              maxRows: 6,
-              admin: {
-                description: 'Session types the user can pick from in the left sidebar.'
-              },
-              fields: [
-                {
-                  type: 'row',
-                  fields: [
-                    {
-                      name: 'value',
-                      type: 'text',
-                      label: 'Value (slug)',
-                      required: true,
-                      admin: {
-                        width: '33%',
-                        description: 'Internal key, e.g. discovery'
-                      }
-                    },
-                    {
-                      name: 'label',
-                      type: 'text',
-                      label: 'Label',
-                      required: true,
-                      admin: { width: '34%' }
-                    },
-                    {
-                      name: 'duration',
-                      type: 'text',
-                      label: 'Duration',
-                      required: true,
-                      admin: { width: '33%', description: 'e.g. 30 min' }
-                    }
-                  ]
-                },
-                {
-                  type: 'row',
-                  fields: [
-                    {
-                      name: 'iconName',
-                      type: 'text',
-                      label: 'Lucide Icon Name',
-                      admin: {
-                        width: '50%',
-                        description: 'e.g. Search, Compass, Code2'
-                      }
-                    },
-                    {
-                      name: 'desc',
-                      type: 'text',
-                      label: 'Short Description',
-                      admin: { width: '50%', description: 'e.g. Explore scope & fit' }
-                    }
-                  ]
-                }
-              ],
-              defaultValue: [
-                {
-                  value: 'discovery',
-                  label: 'Discovery Call',
-                  duration: '30 min',
-                  iconName: 'Search',
-                  desc: 'Explore scope & fit'
-                },
-                {
-                  value: 'strategy',
-                  label: 'Strategy Session',
-                  duration: '60 min',
-                  iconName: 'Compass',
-                  desc: 'Deep dive into your project'
-                },
-                {
-                  value: 'technical',
-                  label: 'Technical Review',
-                  duration: '45 min',
-                  iconName: 'Code2',
-                  desc: 'Architecture & implementation'
-                }
-              ]
-            },
-            {
-              name: 'features',
-              type: 'array',
-              label: '"What to Expect" Items',
-              admin: {
-                description: 'Bullet points in the left sidebar below call types.'
-              },
-              fields: [
-                {
-                  type: 'row',
-                  fields: [
-                    {
-                      name: 'iconName',
-                      type: 'text',
-                      label: 'Lucide Icon Name',
-                      admin: { width: '50%', description: 'e.g. Video, CalendarCheck, FileText' }
-                    },
-                    {
-                      name: 'text',
-                      type: 'text',
-                      label: 'Text',
-                      required: true,
-                      admin: { width: '50%' }
-                    }
-                  ]
-                }
-              ],
-              defaultValue: [
-                { iconName: 'Video', text: 'Google Meet or Zoom' },
-                { iconName: 'CalendarCheck', text: 'Calendar invite sent instantly' },
-                { iconName: 'FileText', text: 'Pre-call briefing document' },
-                { iconName: 'Lock', text: 'NDA available on request' }
-              ]
-            }
-          ]
-        },
-        {
-          label: 'Form',
-          fields: [
-            {
-              name: 'form',
-              type: 'relationship',
-              relationTo: 'forms',
-              label: 'Payload Form',
-              required: true,
-              admin: {
-                description:
-                  'Select the Payload Form Builder form used to store Book Call submissions. Fields must include: name, email, company, call_type, preferred_date, preferred_time, notes.'
-              }
-            },
-            {
-              name: 'timeSlots',
-              type: 'array',
-              label: 'Available Time Slots',
-              admin: {
-                description: 'Time slots shown in the booking grid.'
-              },
-              fields: [
-                {
-                  name: 'slot',
-                  type: 'text',
-                  label: 'Time Slot',
-                  required: true,
-                  admin: { description: 'e.g. 9:00 AM' }
-                }
-              ],
-              defaultValue: [
-                { slot: '9:00 AM' },
-                { slot: '9:30 AM' },
-                { slot: '10:00 AM' },
-                { slot: '10:30 AM' },
-                { slot: '11:00 AM' },
-                { slot: '11:30 AM' },
-                { slot: '1:00 PM' },
-                { slot: '1:30 PM' },
-                { slot: '2:00 PM' },
-                { slot: '2:30 PM' },
-                { slot: '3:00 PM' },
-                { slot: '3:30 PM' },
-                { slot: '4:00 PM' },
-                { slot: '4:30 PM' }
-              ]
-            },
-            {
-              name: 'footerNote',
-              type: 'text',
-              label: 'Form Footer Note',
-              defaultValue: `No charge. No commitment. We'll confirm within a few hours.`
-            }
-          ]
-        },
-        {
-          label: 'Settings',
-          fields: [
-            {
-              name: 'sectionId',
-              type: 'text',
-              label: 'Section ID',
-              defaultValue: 'book-call'
-            },
-            {
-              name: 'customCSS',
-              type: 'code',
-              label: 'Custom CSS',
-              admin: { language: 'css' }
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
+import type { Block } from 'payload'
+
+export const DDBookCall: Block = {
+  slug: 'DD-BookCall',
+  interfaceName: 'DDBookCall',
+  labels: {
+    singular: 'Studio Book Call',
+    plural: 'Studio Book Call Sections'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Info',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              label: 'Eyebrow Label',
+              defaultValue: 'Schedule a Call'
+            },
+            {
+              name: 'headlineMain',
+              type: 'text',
+              label: 'Headline (Main)',
+              required: true,
+              defaultValue: 'Book a call with'
+            },
+            {
+              name: 'headlineAccent',
+              type: 'text',
+              label: 'Headline (Accent)',
+              defaultValue: 'our team'
+            },
+            {
+              name: 'description',
+              type: 'textarea',
+              label: 'Description',
+              defaultValue:
+                "Pick a time that works for you. We'll send a calendar invite with everything you need."
+            },
+            {
+              name: 'callTypes',
+              type: 'array',
+              label: 'Call Types',
+              minRows: 1,
+              maxRows: 6,
+              admin: {
+                description: 'Session types the user can pick from in the left sidebar.'
+              },
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'value',
+                      type: 'text',
+                      label: 'Value (slug)',
+                      required: true,
+                      admin: {
+                        width: '33%',
+                        description: 'Internal key, e.g. discovery'
+                      }
+                    },
+                    {
+                      name: 'label',
+                      type: 'text',
+                      label: 'Label',
+                      required: true,
+                      admin: { width: '34%' }
+                    },
+                    {
+                      name: 'duration',
+                      type: 'text',
+                      label: 'Duration',
+                      required: true,
+                      admin: { width: '33%', description: 'e.g. 30 min' }
+                    }
+                  ]
+                },
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'iconName',
+                      type: 'text',
+                      label: 'Lucide Icon Name',
+                      admin: {
+                        width: '50%',
+                        description: 'e.g. Search, Compass, Code2'
+                      }
+                    },
+                    {
+                      name: 'desc',
+                      type: 'text',
+                      label: 'Short Description',
+                      admin: { width: '50%', description: 'e.g. Explore scope & fit' }
+                    }
+                  ]
+                }
+              ],
+              defaultValue: [
+                {
+                  value: 'discovery',
+                  label: 'Discovery Call',
+                  duration: '30 min',
+                  iconName: 'Search',
+                  desc: 'Explore scope & fit'
+                },
+                {
+                  value: 'strategy',
+                  label: 'Strategy Session',
+                  duration: '60 min',
+                  iconName: 'Compass',
+                  desc: 'Deep dive into your project'
+                },
+                {
+                  value: 'technical',
+                  label: 'Technical Review',
+                  duration: '45 min',
+                  iconName: 'Code2',
+                  desc: 'Architecture & implementation'
+                }
+              ]
+            },
+            {
+              name: 'features',
+              type: 'array',
+              label: '"What to Expect" Items',
+              admin: {
+                description: 'Bullet points in the left sidebar below call types.'
+              },
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'iconName',
+                      type: 'text',
+                      label: 'Lucide Icon Name',
+                      admin: { width: '50%', description: 'e.g. Video, CalendarCheck, FileText' }
+                    },
+                    {
+                      name: 'text',
+                      type: 'text',
+                      label: 'Text',
+                      required: true,
+                      admin: { width: '50%' }
+                    }
+                  ]
+                }
+              ],
+              defaultValue: [
+                { iconName: 'Video', text: 'Google Meet or Zoom' },
+                { iconName: 'CalendarCheck', text: 'Calendar invite sent instantly' },
+                { iconName: 'FileText', text: 'Pre-call briefing document' },
+                { iconName: 'Lock', text: 'NDA available on request' }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Form',
+          fields: [
+            {
+              name: 'form',
+              type: 'relationship',
+              relationTo: 'forms',
+              label: 'Payload Form',
+              required: true,
+              admin: {
+                description:
+                  'Select the Payload Form Builder form used to store Book Call submissions. Fields must include: name, email, company, call_type, preferred_date, preferred_time, notes.'
+              }
+            },
+            {
+              name: 'timeSlots',
+              type: 'array',
+              label: 'Available Time Slots',
+              admin: {
+                description: 'Time slots shown in the booking grid.'
+              },
+              fields: [
+                {
+                  name: 'slot',
+                  type: 'text',
+                  label: 'Time Slot',
+                  required: true,
+                  admin: { description: 'e.g. 9:00 AM' }
+                }
+              ],
+              defaultValue: [
+                { slot: '9:00 AM' },
+                { slot: '9:30 AM' },
+                { slot: '10:00 AM' },
+                { slot: '10:30 AM' },
+                { slot: '11:00 AM' },
+                { slot: '11:30 AM' },
+                { slot: '1:00 PM' },
+                { slot: '1:30 PM' },
+                { slot: '2:00 PM' },
+                { slot: '2:30 PM' },
+                { slot: '3:00 PM' },
+                { slot: '3:30 PM' },
+                { slot: '4:00 PM' },
+                { slot: '4:30 PM' }
+              ]
+            },
+            {
+              name: 'footerNote',
+              type: 'text',
+              label: 'Form Footer Note',
+              defaultValue: `No charge. No commitment. We'll confirm within a few hours.`
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              defaultValue: 'book-call'
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: { language: 'css' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}