@colabcommerce/elements 0.0.4 → 0.9.1

package/src/components/LeadForm/index.jsx

@@ -0,0 +1,241 @@
+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

@@ -0,0 +1,169 @@
+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

package/src/components/QuoteForm/index.jsx

@@ -0,0 +1,82 @@
+import { useState } from "react"
+import { QuoteFormProvider, useQuoteForm } from "@/contexts/quote-form"
+import QuoteFormSearch from "@/components/QuoteFormSearch"
+import QuoteMap from "@/components/QuoteMap"
+import QuoteFormStoreList from "@/components/QuoteFormStoreList"
+import TranslationsProvider from "@/contexts/translations"
+import QuoteLeadForm from "@/components/QuoteLeadForm"
+import { APIProvider } from "@vis.gl/react-google-maps"
+import Panel from "@/components/ui/Panel"
+import { Button } from "@/components/ui/Button"
+import cn from "@/lib/utils/cn"
+
+const QuoteFormPanels = ({ organizationId, products, locale, onClose, onSuccess }) => {
+
+  const { stepIndex: panelIndex, setStepIndex } = useQuoteForm()
+
+  const handleClose = () => {
+    onClose && onClose()
+  }
+
+  const handleSuccess = (emittedValues) => {
+    setStepIndex(2)
+    onSuccess && onSuccess(emittedValues)
+  }
+
+  return (
+    <div className="relative overflow-hidden h-[100%] py-1">
+      <div className="h-[100%] relative">
+        <Panel active={panelIndex === 0} className={cn(
+          "data-[state=open]:opacity-100 data-[state=open]:translate-x-0",
+          "data-[state=closed]:opacity-0 data-[state=closed]:-translate-x-6"
+        )}>
+          <div className="relative px-1 h-screen overflow-y-scroll">
+            <QuoteFormSearch />
+            <div className="pb-8">
+              <APIProvider apiKey={'AIzaSyAnJmWEU1r63DiRWHkjczxzHyIEq3dhj4M'}>
+                <QuoteMap />
+              </APIProvider>
+            </div>
+            <QuoteFormStoreList />
+          </div>
+        </Panel>
+        <Panel active={panelIndex === 1} className={cn(
+          "data-[state=open]:opacity-100 data-[state=open]:translate-x-0",
+          "data-[state=closed]:opacity-0 data-[state=closed]:-translate-x-6",
+          "flex items-center"
+        )}>
+          <div className="px-1">
+            <QuoteLeadForm onClose={() => setStepIndex(0)} onSuccess={handleSuccess} />
+          </div>
+        </Panel>
+        <Panel active={panelIndex === 2} className={cn(
+          "data-[state=open]:opacity-100 data-[state=open]:translate-x-0",
+          "data-[state=closed]:opacity-0 data-[state=closed]:-translate-x-6",
+          "flex items-center"
+        )}>
+          <div className="px-1">
+            <div className="text-center py-20 px-4">
+              <h2 className="text-2xl font-semibold mb-4">Thank you!</h2>
+              <p className="mb-8">Your quote request has been submitted successfully. We will get back to you shortly.</p>
+              <Button onClick={handleClose}>Close</Button>
+            </div>
+          </div>
+        </Panel>
+      </div>
+    </div>
+  )
+}
+
+const QuoteForm = ({ organizationId, products, locale, onClose, onSuccess }) => {
+  return (
+    <TranslationsProvider options={{ lng: locale }}>
+      <QuoteFormProvider organizationId={organizationId} products={products} locale={locale}>
+        <div className="cc" style={{ height: '100%' }}>
+          <QuoteFormPanels organizationId={organizationId} products={products} locale={locale} onClose={onClose} onSuccess={onSuccess} />
+        </div>
+      </QuoteFormProvider>
+    </TranslationsProvider>
+  )
+}
+
+export default QuoteForm