blocks-dusted 0.1.10 → 0.1.12

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' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
 

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

@@ -0,0 +1,117 @@
+'use client'
+
+import React, { useState, useRef } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { useClickOutside } from '@/hooks/useClickOutside'
+import { useBodyScrollLock } from '@/hooks/useBodyScrollLock'
+import { cn } from '@/utilities/ui'
+import RichText from '@/components/RichText'
+import DustSvg from './svg-icons/Dust2'
+
+interface PopButtonProps {
+  buttonLabel: string
+  richTextData: any
+  width?: string
+  height?: string
+  position?: 'left' | 'center' | 'right'
+  openMode?: 'popover' | 'modal'
+}
+
+export const DDButtonPop: React.FC<PopButtonProps> = ({
+  buttonLabel,
+  richTextData,
+  width = '360px',
+  height = '240px',
+  position = 'center',
+  openMode = 'popover'
+}) => {
+  const [open, setOpen] = useState(false)
+  const wrapperRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>
+
+  useClickOutside(wrapperRef, () => setOpen(false))
+
+  // Lock body scroll when modal mode is open
+  useBodyScrollLock(open && openMode === 'modal', 'buttonPopScrollY')
+
+  const alignmentClass =
+    position === 'left' ? 'justify-start' : position === 'right' ? 'justify-end' : 'justify-center'
+
+  return (
+    <div
+      className={cn('relative flex', alignmentClass)}
+      style={{ paddingBottom: open ? '50vh' : '1rem' }}
+    >
+      <motion.button
+        key={buttonLabel} // Fixed: Use buttonLabel as key instead of undefined idx
+        onClick={() => setOpen(true)}
+        className="rounded-md border bg-card px-4 py-2 text-sm font-medium shadow"
+      >
+        {buttonLabel}
+      </motion.button>
+
+      <AnimatePresence>
+        {open &&
+          (openMode === 'popover' ? (
+            <>
+              <motion.div
+                ref={wrapperRef}
+                key="popover"
+                initial={{ opacity: 0, y: -10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -10 }}
+                transition={{ duration: 0.2 }}
+                className={cn(
+                  'absolute z-20 rounded-sm bg-card p-4 shadow-lg border border-border'
+                )}
+                style={{ width, height, maxWidth: '100%', maxHeight: '100%' }}
+              >
+                <RichText data={richTextData} enableGutter={false} />
+              </motion.div>
+              {/* <TextFade direction="up" className="absolute z-10 w-full max-w-[8rem] h-auto"> */}
+              {/* <LottieFeathers className="absolute right-0 -top-[80px] z-0 rotate-[80deg] lottie-wrapper lottie popper-lottie" /> */}
+              {/* </TextFade> */}
+            </>
+          ) : (
+            <>
+              <motion.div
+                ref={wrapperRef}
+                key="modal"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.2 }}
+                className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+                style={{ backdropFilter: 'blur(4px)' }}
+              >
+                <div className="card-wrapper relative flex items-center justify-center mx-4 p-1 bgTransBlur-light rounded-lg ">
+                  <div
+                    className="pop-modal-card transition-all duration-300 ease-in-out group relative"
+                    style={{
+                      width: width || '80%',
+                      maxWidth: '500px',
+                      maxHeight: '90vh',
+                      overflowY: 'auto'
+                    }}
+                  >
+                    <button
+                      onClick={() => setOpen(false)}
+                      className="relative right-0 ml-auto flex justify-end text-sm text-gray-500 transition-colors duration-150 hover:text-gray-700"
+                      style={{ background: 'none', border: 'none', cursor: 'pointer' }}
+                    >
+                      Close
+                    </button>
+                    <RichText
+                      data={richTextData}
+                      className="pop-modal-richtext"
+                      enableGutter={false}
+                    />
+                    <DustSvg className="dustsvg dust-svg-modal absolute opacity-0 -z-10 -mt-24 ml-32 scale-0 transition-all duration-300 ease-in-out group-hover:scale-[3] group-hover:opacity-100" />
+                  </div>
+                </div>
+              </motion.div>
+            </>
+          ))}
+      </AnimatePresence>
+    </div>
+  )
+}