@colabcommerce/elements 0.9.1 → 0.9.3

package/src/components/HoursList/index.jsx

@@ -1,225 +0,0 @@
-import * as React from "react";
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { ChevronDown } from "lucide-react";
-import { useTranslation } from "react-i18next";
-
-const DAY_LABELS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-
-export default function HoursList({
-  hours,
-  openingSoonMinutes = 60,
-  closingSoonMinutes = 60,
-  className = "",
-}) {
-  const { t } = useTranslation();
-  const [open, setOpen] = React.useState(false);
-
-  const computed = React.useMemo(() => {
-    const safeHours = Array.isArray(hours) ? hours : [];
-    const storeTz =
-      safeHours.find((h) => h?.timezone)?.timezone ||
-      Intl.DateTimeFormat().resolvedOptions().timeZone;
-
-    const now = new Date();
-    const storeWeekdayIndex = getWeekdayIndexInTimeZone(now, storeTz); // 0..6
-    const today = safeHours.find((h) => h?.day === storeWeekdayIndex);
-
-    const status = computeStatus({
-      now,
-      today,
-      openingSoonMinutes,
-      closingSoonMinutes,
-      t,
-    });
-
-    // Display Monday..Sunday
-    const displayOrder = [1, 2, 3, 4, 5, 6, 0];
-    const byDay = new Map(safeHours.map((h) => [h.day, h]));
-    const rows = displayOrder.map((dayIdx) => {
-      const h = byDay.get(dayIdx);
-      const label = t(`default:${DAY_LABELS[dayIdx].toLowerCase()}`);
-      const isToday = dayIdx === storeWeekdayIndex;
-
-      let text = t("default:closed");
-      if (h?.open) {
-        const openDate = buildOpenDateForDisplay(h);
-        const closeDate = buildCloseDateForDisplay(h, openDate);
-        if (openDate && closeDate) {
-          text = `${formatTimeLocal(openDate)} - ${formatTimeLocal(closeDate)}`;
-        } else {
-          text = t("default:open");
-        }
-      }
-
-      return { dayIdx, label, text, isToday };
-    });
-
-    return {
-      statusLabel: t(`default:${status.label.toLowerCase().replace(" ", "_")}`), // "Closed" | "Opening Soon" | "Open" | "Closing Soon"
-      statusDetail: status.detail, // "Opens at 9am" | "Closes at 4:30pm" | ""
-      rows,
-    };
-  }, [hours, openingSoonMinutes, closingSoonMinutes]);
-
-  return (
-    <>
-      {computed.rows.map((row) => (
-        <>
-          <div
-            key={row.dayIdx}
-            className={`flex justify-between items-center py-2 ${row.isToday ? "bg-primary/5 -mx-4 px-4 rounded-lg" : ""
-              }`}
-          >
-            <span className={`font-medium ${row.isToday ? "text-primary" : ""}`}>
-              {row.label}
-              {row.isToday && <span className="ml-2 text-xs">(Today)</span>}
-            </span>
-            <span className="text-muted-foreground">{row.text}</span>
-          </div>
-        </>
-      ))}
-    </>
-  );
-}
-
-/**
- * Toggle label logic based on today's schedule (store timezone for "today",
- * comparisons against the user's current instant).
- *
- * Adds a detail line:
- * - Closed / Opening Soon -> "Opens at X"
- * - Open / Closing Soon -> "Closes at Y"
- */
-function computeStatus({ now, today, openingSoonMinutes, closingSoonMinutes, t }) {
-  if (!today || !today.open) return { label: t('default:closed'), detail: "" };
-
-  const openDate = buildOpenDateForDisplay(today);
-  const closeDate = buildCloseDateForDisplay(today, openDate);
-
-  // If schedule incomplete, still show basic label
-  if (!openDate || !closeDate) return { label: t('default:open'), detail: "" };
-
-  const nowMs = now.getTime();
-  const openMs = openDate.getTime();
-  const closeMs = closeDate.getTime();
-
-  const openingSoonStart = openMs - openingSoonMinutes * 60 * 1000;
-  const closingSoonStart = closeMs - closingSoonMinutes * 60 * 1000;
-
-  const opensDetail = t('default:opens_at', { time: formatTimeLocal(openDate) });
-  const closesDetail = t('default:closes_at', { time: formatTimeLocal(closeDate) });
-
-  if (nowMs < openMs) {
-    if (nowMs >= openingSoonStart) return { label: t('default:opening_soon'), detail: opensDetail };
-    return { label: t('default:closed'), detail: opensDetail };
-  }
-
-  if (nowMs >= openMs && nowMs < closeMs) {
-    if (nowMs >= closingSoonStart) return { label: t('default:closing_soon'), detail: closesDetail };
-    return { label: t('default:open'), detail: closesDetail };
-  }
-
-  return { label: t('default:closed'), detail: opensDetail };
-}
-
-/** Returns weekday index (0=Sun..6=Sat) for a Date, as seen in `timeZone`. */
-function getWeekdayIndexInTimeZone(date, timeZone) {
-  const weekday = new Intl.DateTimeFormat("en-US", { weekday: "short", timeZone }).format(date);
-  switch (weekday) {
-    case "Sun":
-      return 0;
-    case "Mon":
-      return 1;
-    case "Tue":
-      return 2;
-    case "Wed":
-      return 3;
-    case "Thu":
-      return 4;
-    case "Fri":
-      return 5;
-    case "Sat":
-      return 6;
-    default:
-      return new Date(date).getDay();
-  }
-}
-
-/**
- * Build "open" Date (instant) for display in user's local time.
- * Prefer `open_at` because it encodes offset and is DST-correct for that date.
- */
-function buildOpenDateForDisplay(h) {
-  if (!h) return null;
-
-  if (h.open_at) {
-    const d = new Date(h.open_at);
-    return isValidDate(d) ? d : null;
-  }
-
-  if (typeof h.open_at_hour === "number" && typeof h.open_at_minute === "number") {
-    return buildDateFromLocalStoreTime({
-      storeHour: h.open_at_hour,
-      storeMinute: h.open_at_minute,
-      utcOffsetMinute: h.utc_offset_minute,
-    });
-  }
-
-  return null;
-}
-
-/**
- * Build "close" Date (instant). If close <= open, assume next day.
- */
-function buildCloseDateForDisplay(h, openDate) {
-  if (!h) return null;
-
-  if (typeof h.close_at_hour !== "number" || typeof h.close_at_minute !== "number") return null;
-
-  let closeDate = buildDateFromLocalStoreTime({
-    storeHour: h.close_at_hour,
-    storeMinute: h.close_at_minute,
-    utcOffsetMinute: h.utc_offset_minute,
-    anchorDate: openDate || undefined,
-  });
-
-  if (!closeDate || !openDate) return closeDate;
-
-  if (closeDate.getTime() <= openDate.getTime()) {
-    closeDate = new Date(closeDate.getTime() + 24 * 60 * 60 * 1000);
-  }
-
-  return closeDate;
-}
-
-/**
- * Build an instant from a store-local time-of-day plus a fixed UTC offset.
- * storeLocal = UTC + offset => UTC = storeLocal - offset
- */
-function buildDateFromLocalStoreTime({ storeHour, storeMinute, utcOffsetMinute, anchorDate }) {
-  const base = anchorDate ? new Date(anchorDate) : new Date();
-  const y = base.getFullYear();
-  const m = base.getMonth();
-  const d = base.getDate();
-
-  const utcMillis = Date.UTC(y, m, d, storeHour, storeMinute, 0) - utcOffsetMinute * 60 * 1000;
-  const out = new Date(utcMillis);
-
-  return isValidDate(out) ? out : null;
-}
-
-function isValidDate(d) {
-  return d instanceof Date && !Number.isNaN(d.getTime());
-}
-
-/** Format in user's local timezone as "9am" or "4:30pm". */
-function formatTimeLocal(date) {
-  return new Intl.DateTimeFormat("en-US", {
-    hour: "numeric",
-    minute: "2-digit",
-  })
-    .format(date)
-    .replace(":00", "")
-    .replace(" AM", "am")
-    .replace(" PM", "pm");
-}

package/src/components/LeadForm/index.jsx

@@ -1,241 +0,0 @@
-import { Dialog } from 'radix-ui'
-import { useFormik } from 'formik'
-import { Button } from '@/components/ui/button'
-import { CircleAlert, User, Mail, Phone, StickyNote } from 'lucide-react'
-import PhoneInput from 'react-phone-number-input'
-import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js'
-import { PhoneNumberInput } from '@/components/ui/PhoneNumberInput'
-import Input from '@/components/ui/input'
-import * as Yup from 'yup'
-import cn from '@/lib/utils/cn'
-import { useTranslation } from 'react-i18next'
-
-const LeadForm = ({
-  organizationId,
-  selectedLocationId,
-  storeName,
-  location = {},
-  activityType,
-  products,
-  isOpen,
-  onClose,
-  onSuccess
-}) => {
-  console.log('LeadForm selectedLocation:', selectedLocationId)
-
-  const { t, lng } = useTranslation()
-
-  const initialValues = {
-    name: '',
-    email: '',
-    phoneNumber: '',
-    message: '',
-    consent: false,
-  }
-
-  const validationSchema = Yup.object({
-    name: Yup.string().required(t('default:name.required')),
-    email: Yup.string().email(t('default:email.invalid')).required(t('default:email.required')),
-    phoneNumber: Yup.string().test('is-valid-phone', t('default:phone_number.invalid'), value => isValidPhoneNumber(value || '')).required(t('default:phone_number.required')),
-    consent: Yup.boolean().oneOf([true], t('default:consent.required')).required(t('default:consent.required')),
-  })
-
-  const getNationalNumber = (phoneNumber) => {
-    try {
-      const parsedNumber = parsePhoneNumber(phoneNumber)
-      return parsedNumber.nationalNumber
-    } catch (error) {
-      return phoneNumber
-    }
-  }
-
-  const handleSubmit = async (values, { setSubmitting, resetForm }) => {
-    const payload = {
-      id: organizationId,
-      lead: {
-        name: values.name,
-        emails_attributes: [{ email: values.email }],
-        phone_numbers_attributes: [{ phone_number: getNationalNumber(values.phoneNumber), country_code: 'US' }],
-        message: values.message,
-        opt_in: values.consent,
-        locale: lng,
-        location_attributes: {
-          city: location?.city,
-          province: location?.province,
-          postal_code: location?.postal,
-          country: location?.country,
-          latitude: location?.latitude || null,
-          longitude: location?.longitude || null
-        },
-        assignee_id: selectedLocationId || null,
-        assignee_type: 'CompanyRetailerLocation',
-      }
-    }
-    if (activityType) {
-      payload.lead.lead_activities_attributes = [{
-        type: activityType,
-        products: products,
-        notes: values.message,
-        source_type: 'Company',
-        source_id: organizationId
-      }]
-    }
-    const req = await fetch(`${import.meta.env.VITE_PUBLIC_API_URL}/widget_api/leads`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(payload)
-    })
-    if (!req.ok) {
-      if (req.status === 422) {
-        const data = await req.json()
-        const errors = data.errors || {}
-        const formattedErrors = {}
-        if (errors['phone_numbers.phone_number']) {
-          formattedErrors.phone = t('quote_form.invalid_phone')
-        }
-        formik.setErrors(formattedErrors)
-      }
-      setError(true)
-      return
-    }
-    const data = await req.json()
-    onSuccess && onSuccess(values, data)
-  }
-
-  const formik = useFormik({
-    initialValues,
-    validationSchema,
-    onSubmit: handleSubmit,
-    enableReinitialize: true,
-    validateOnBlur: false,
-  })
-
-  return (
-    <form onSubmit={formik.handleSubmit} className="space-y-4">
-      <div>
-        <div className="flex-1 relative">
-          <User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
-          <Input
-            type="text"
-            id="name"
-            name="name"
-            placeholder={t('default:name.placeholder')}
-            aria-invalid={formik.touched.name && formik.errors.name ? 'true' : 'false'}
-            value={formik.values.name}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            className="pl-10 h-12"
-          />
-          {formik.touched.name && formik.errors.name ? (
-            <CircleAlert className="absolute text-red-600 right-3 top-1/2 -translate-y-1/2 w-5 h-5" />
-          ) : null}
-        </div>
-        {formik.touched.name && formik.errors.name ? (
-          <div className="text-sm text-left text-red-600 mt-1">{formik.errors.name}</div>
-        ) : null}
-      </div>
-      <div>
-        <div className="flex-1 relative">
-          <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
-          <Input
-            type="email"
-            id="email"
-            name="email"
-            placeholder={t('default:email.placeholder')}
-            value={formik.values.email}
-            aria-invalid={formik.touched.email && formik.errors.email ? 'true' : 'false'}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            className="pl-10 h-12"
-          />
-          {formik.touched.email && formik.errors.email ? (
-            <CircleAlert className="absolute text-red-600 right-3 top-1/2 -translate-y-1/2 w-5 h-5" />
-          ) : null}
-        </div>
-        {formik.touched.email && formik.errors.email ? (
-          <div className="text-sm text-left text-red-600 mt-1">{formik.errors.email}</div>
-        ) : null}
-      </div>
-      <div>
-        <div className="flex-1 relative">
-          <Phone className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
-          <PhoneInput
-            international
-            defaultCountry="US"
-            countryCallingCodeEditable={false}
-            value={formik.values.phoneNumber}
-            onChange={(value) => formik.setFieldValue('phoneNumber', value)}
-            onBlur={() => formik.setFieldTouched('phoneNumber', true)}
-            inputComponent={PhoneNumberInput}
-            inputProps={{
-              id: 'phoneNumber',
-              name: 'phoneNumber',
-              placeholder: t('default:phone_number.placeholder'),
-              'aria-invalid':
-                formik.touched.phoneNumber && formik.errors.phoneNumber
-                  ? 'true'
-                  : 'false',
-            }}
-          />
-          {formik.touched.phoneNumber && formik.errors.phoneNumber ? (
-            <CircleAlert className="absolute text-red-600 right-3 top-1/2 -translate-y-1/2 w-5 h-5" />
-          ) : null}
-        </div>
-        {formik.touched.phoneNumber && formik.errors.phoneNumber ? (
-          <div className="text-sm text-left text-red-600 mt-1">{formik.errors.phoneNumber}</div>
-        ) : null}
-      </div>
-      <div>
-        <div className="flex-1 relative">
-          <StickyNote className="absolute left-3 top-5 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
-          <textarea
-            id="message"
-            name="message"
-            placeholder={t('default:quote_message.placeholder')}
-            aria-invalid={formik.touched.message && formik.errors.message ? 'true' : 'false'}
-            value={formik.values.message}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            className={cn(
-              'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-              'focus-visible:border-ring focus-visible:ring-ring/20 focus-visible:ring-[3px]',
-              'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-              'h-36 pt-2.5 pl-10',
-            )}
-          ></textarea>
-          {formik.touched.message && formik.errors.message ? (
-            <CircleAlert className="absolute text-red-600 right-3 top-5 -translate-y-1/2 w-5 h-5" />
-          ) : null}
-        </div>
-        {formik.touched.message && formik.errors.message ? (
-          <div className="text-sm text-left text-red-600 mt-1">{formik.errors.message}</div>
-        ) : null}
-      </div>
-      <div className="flex items-start">
-        <input
-          type="checkbox"
-          id="consent"
-          name="consent"
-          checked={formik.values.consent}
-          onChange={formik.handleChange}
-          onBlur={formik.handleBlur}
-          aria-invalid={formik.touched.consent && formik.errors.consent ? 'true' : 'false'}
-          className="mt-0.5 h-4 w-4 rounded border-gray-300 text-purple-600 focus:ring-purple-600 cursor-pointer aria-invalid:text-red-600 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
-        />
-        <label htmlFor="consent" className={`ml-2 block text-left text-sm text-gray-700 cursor-pointer ${formik.touched.consent && formik.errors.consent ? 'text-red-600' : ''}`}>
-          {t('default:consent.label', { storeName: storeName || t('default:storeName') })}
-        </label>
-      </div>
-      <div className="flex justify-end gap-2">
-        <Button variant="outline" onClick={onClose} type="button">{t('default:cancel')}</Button>
-        <Button type="submit" disabled={formik.isSubmitting}>
-          {formik.isSubmitting ? t('default:sending') : t('default:quote_submit')}
-        </Button>
-      </div>
-    </form>
-  )
-}
-
-export default LeadForm

package/src/components/MessageDialog/index.jsx

@@ -1,169 +0,0 @@
-import { Dialog } from 'radix-ui'
-import { useFormik } from 'formik'
-import { Button } from '@/components/ui/button'
-import { CircleAlert, User, Mail, Phone, StickyNote } from 'lucide-react'
-import Input from '@/components/ui/input'
-import * as Yup from 'yup'
-import cn from '@/lib/utils/cn'
-
-// Dialogs are special. They need to be rendered at the root level of the app. So we wrap
-// in a cc div and use a manual z-index to ensure it appears above other elements.
-const MessageDialog = ({ organizationId, storeName, isOpen, onClose, onSuccess }) => {
-
-  const initialValues = {
-    name: '',
-    email: '',
-    phoneNumber: '',
-    message: '',
-    consent: false,
-  }
-
-  const phoneNumberRegex = /^\+?[1-9]\d{1,14}$/
-
-  const validationSchema = Yup.object({
-    name: Yup.string().required('Name is required'),
-    email: Yup.string().email('Invalid email address').required('Email is required'),
-    phoneNumber: Yup.string().matches(phoneNumberRegex, 'Invalid phone number').required('Phone number is required'),
-    message: Yup.string().required('Message is required'),
-    consent: Yup.boolean().oneOf([true], 'You must agree to the terms').required('You must agree to the terms'),
-  })
-
-  const handleSubmit = async (values, { setSubmitting, resetForm }) => {
-  }
-
-  const formik = useFormik({
-    initialValues,
-    validationSchema,
-    onSubmit: handleSubmit,
-    enableReinitialize: true,
-    validateOnBlur: false,
-  })
-
-  return (
-    <div className="cc" style={{ zIndex: 1000, position: 'relative' }}>
-      <Dialog.Root open={isOpen} onOpenChange={onClose}>
-        <Dialog.Overlay className="fixed inset-0 bg-black/50" />
-        <Dialog.Content className="fixed top-1/2 left-1/2 max-h-[85vh] w-[90vw] max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-lg focus:outline-none">
-          <Dialog.Title className="text-lg text-left font-medium mb-4">Send a Message to {storeName || 'the store'}</Dialog.Title>
-          <form onSubmit={formik.handleSubmit} className="space-y-4">
-            <div>
-              <div className="flex-1 relative">
-                <User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
-                <Input
-                  type="text"
-                  id="name"
-                  name="name"
-                  placeholder={"Name"}
-                  aria-invalid={formik.touched.name && formik.errors.name ? 'true' : 'false'}
-                  value={formik.values.name}
-                  onChange={formik.handleChange}
-                  onBlur={formik.handleBlur}
-                  className="pl-10 h-12"
-                />
-                {formik.touched.name && formik.errors.name ? (
-                  <CircleAlert className="absolute text-red-600 right-3 top-1/2 -translate-y-1/2 w-5 h-5" />
-                ) : null}
-              </div>
-              {formik.touched.name && formik.errors.name ? (
-                <div className="text-sm text-left text-red-600 mt-1">{formik.errors.name}</div>
-              ) : null}
-            </div>
-            <div>
-              <div className="flex-1 relative">
-                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
-                <Input
-                  type="email"
-                  id="email"
-                  name="email"
-                  placeholder={"Email Address"}
-                  value={formik.values.email}
-                  aria-invalid={formik.touched.email && formik.errors.email ? 'true' : 'false'}
-                  onChange={formik.handleChange}
-                  onBlur={formik.handleBlur}
-                  className="pl-10 h-12"
-                />
-                {formik.touched.email && formik.errors.email ? (
-                  <CircleAlert className="absolute text-red-600 right-3 top-1/2 -translate-y-1/2 w-5 h-5" />
-                ) : null}
-              </div>
-              {formik.touched.email && formik.errors.email ? (
-                <div className="text-sm text-left text-red-600 mt-1">{formik.errors.email}</div>
-              ) : null}
-            </div>
-            <div>
-              <div className="flex-1 relative">
-                <Phone className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
-                <Input
-                  type="text"
-                  id="phoneNumber"
-                  name="phoneNumber"
-                  placeholder={"Phone Number"}
-                  value={formik.values.phoneNumber}
-                  onChange={formik.handleChange}
-                  onBlur={formik.handleBlur}
-                  aria-invalid={formik.touched.phoneNumber && formik.errors.phoneNumber ? 'true' : 'false'}
-                  className="pl-10 h-12"
-                />
-                {formik.touched.phoneNumber && formik.errors.phoneNumber ? (
-                  <CircleAlert className="absolute text-red-600 right-3 top-1/2 -translate-y-1/2 w-5 h-5" />
-                ) : null}
-              </div>
-              {formik.touched.phoneNumber && formik.errors.phoneNumber ? (
-                <div className="text-sm text-left text-red-600 mt-1">{formik.errors.phoneNumber}</div>
-              ) : null}
-            </div>
-            <div>
-              <div className="flex-1 relative">
-                <StickyNote className="absolute left-3 top-5 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
-                <textarea
-                  id="message"
-                  name="message"
-                  placeholder="Your Message"
-                  aria-invalid={formik.touched.message && formik.errors.message ? 'true' : 'false'}
-                  value={formik.values.message}
-                  onChange={formik.handleChange}
-                  onBlur={formik.handleBlur}
-                  className={cn(
-                    'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-                    'focus-visible:border-ring focus-visible:ring-ring/20 focus-visible:ring-[3px]',
-                    'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-                    'h-36 pt-2.5 pl-10',
-                  )}
-                ></textarea>
-                {formik.touched.message && formik.errors.message ? (
-                  <CircleAlert className="absolute text-red-600 right-3 top-5 -translate-y-1/2 w-5 h-5" />
-                ) : null}
-              </div>
-              {formik.touched.message && formik.errors.message ? (
-                <div className="text-sm text-left text-red-600 mt-1">{formik.errors.message}</div>
-              ) : null}
-            </div>
-            <div className="flex items-start">
-              <input
-                type="checkbox"
-                id="consent"
-                name="consent"
-                checked={formik.values.consent}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                aria-invalid={formik.touched.consent && formik.errors.consent ? 'true' : 'false'}
-                className="mt-0.5 h-4 w-4 rounded border-gray-300 text-purple-600 focus:ring-purple-600 cursor-pointer aria-invalid:text-red-600 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
-              />
-              <label htmlFor="consent" className={`ml-2 block text-left text-sm text-gray-700 cursor-pointer ${formik.touched.consent && formik.errors.consent ? 'text-red-600' : ''}`}>
-                I would like to receive communications from {storeName || 'the store'}.
-              </label>
-            </div>
-            <div className="flex justify-end gap-2">
-              <Button variant="outline" onClick={onClose} type="button">Cancel</Button>
-              <Button type="submit" disabled={formik.isSubmitting}>
-                {formik.isSubmitting ? 'Sending...' : 'Send Message'}
-              </Button>
-            </div>
-          </form>
-        </Dialog.Content>
-      </Dialog.Root>
-    </div>
-  )
-}
-
-export default MessageDialog