@spacemade/ui 0.0.1

package/src/components/common/button/UserButton.tsx

@@ -0,0 +1,209 @@
+// components/common/UserButton.tsx
+import { Fragment, useMemo } from 'react'
+import Link from 'next/link'
+import { useRouter } from '@lib/next-router'
+import {
+  Button,
+  Divider,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Portal,
+  useDisclosure,
+} from '@chakra-ui/react'
+import { useUserAuthContext } from '@context'
+import MSButton from '@components/common/button/Button'
+import { colorCirclePNG } from '@helpers/images'
+import { OptimizedImage } from '../Image/OptimizedImage'
+import { useNavOptions } from '@hooks'
+import { useListOrgsQuery, useSetActiveOrgMutation } from '@store/slice/api/orgApiSlice'
+
+const UserButton = ({ isbBgWhite = false }: { isbBgWhite?: boolean }) => {
+  const router = useRouter()
+  const { push: redirect } = router
+  const { signOut, user, isConnected, activeOrgId, setActiveOrgId } = useUserAuthContext()
+  const pathname = router.pathname
+  const isPublicAuthRoute =
+    pathname === '/' ||
+    pathname.startsWith('/login') ||
+    pathname.startsWith('/signup') ||
+    pathname.startsWith('/forgot') ||
+    pathname.startsWith('/reset') ||
+    pathname.startsWith('/update')
+  const { USER_NAV_OPTIONS } = useNavOptions()
+  const { data: orgMemberships = [] } = useListOrgsQuery(undefined, {
+    skip: !isConnected || !user?.id || isPublicAuthRoute,
+    refetchOnMountOrArgChange: true,
+  })
+  const [setActiveOrg, { isLoading: isSettingOrg }] = useSetActiveOrgMutation()
+
+  const { isOpen: isOpenPopover, onToggle, onClose } = useDisclosure()
+
+  const onSignOut = async () => {
+    await signOut()
+    onClose()
+    router.reload()
+  }
+
+  const handleOrgSwitch = async (orgId: string) => {
+    if (!orgId || orgId === activeOrgId || isSettingOrg) return
+    await setActiveOrg({ orgId }).unwrap()
+    setActiveOrgId(orgId)
+    onClose()
+    router.replace(router.asPath)
+  }
+
+  const profileImage = useMemo(
+    () => user?.profileMedia?.media?.sourceUrl,
+    [user?.profileMedia?.media?.sourceUrl]
+  )
+
+  const currentPath = encodeURIComponent(router.asPath)
+  const loginRedirect =
+    router.asPath === '/' ? '/login' : `/login?redirect=${currentPath}`
+  const isDarkHeroMode = !isbBgWhite
+
+  // If session says connected but user hasn't arrived yet, show a small placeholder
+  if (isConnected && !user) {
+    return (
+      <div
+        className="rounded-circle bg-light"
+        style={{ width: 50, height: 50 }}
+        aria-busy="true"
+      />
+    )
+  }
+
+  return (
+    <>
+      {isConnected && user ? (
+        <>
+          <Popover placement="bottom-end" isOpen={isOpenPopover} onClose={onClose}>
+            <PopoverTrigger>
+              <Button
+                className={`btn p-0 no-min-size d-flex align-items-center justify-content-center ${isDarkHeroMode ? 'top-nav-user-trigger-on-dark' : ''}`}
+                style={{ width: '50px', height: '50px' }}
+                onClick={onToggle}
+              >
+                <OptimizedImage
+                  src={profileImage || colorCirclePNG}
+                  alt={user?.profileMedia?.media?.details?.altText || 'Profile Icon'}
+                  width={40}
+                  height={40}
+                  className="rounded-circle object-fit-cover"
+                />
+              </Button>
+            </PopoverTrigger>
+
+            <Portal>
+              <PopoverContent
+                className="shadow"
+                style={{
+                  position: 'absolute',
+                  zIndex: 9999,
+                  maxWidth: '280px',
+                  right: '-25px',
+                }}
+              >
+                <PopoverBody>
+                  <ul className="list-unstyled mb-0">
+                    {USER_NAV_OPTIONS.map((item, key) => (
+                      <Fragment key={key}>
+                        {!item.isHidden && (
+                          <li className="py-2" onClick={onClose}>
+                            <Link
+                              href={item.path}
+                              className="d-block text-dark-900 fw-600"
+                              aria-label={`Link to ${item.label}`}
+                            >
+                              <span className={`${item.icon} me-1`} />
+                              <span>{item.label}</span>
+                            </Link>
+                          </li>
+                        )}
+                      </Fragment>
+                    ))}
+
+                    <li className="py-2">
+                      <MSButton
+                        ariaLabel="Log out"
+                        className="d-block w-100 p-0 text-dark-900 text-start no-min-size"
+                        onClick={onSignOut}
+                      >
+                        <span className="bi bi-box-arrow-right me-1" />
+                        Log Out
+                      </MSButton>
+                    </li>
+                  </ul>
+
+                  {orgMemberships.length > 0 && (
+                    <>
+                      <Divider my={2} />
+                      <div className="small text-muted px-1 mb-1">Organizations</div>
+                      <ul className="list-unstyled mb-0">
+                        {orgMemberships.map((membership) => {
+                          const orgId = membership.orgId
+                          const orgName = membership.org?.name || membership.org?.slug || 'Organization'
+                          const isActive = orgId === activeOrgId
+                          const org = membership.org
+                          const isPersonalOrg =
+                            org?.orgType === 'personal' ||
+                            (!!org?.slug && !!user?.name && org.slug === user.name)
+                          const icon = isPersonalOrg
+                            ? user?.profileMedia?.media?.sourceUrl || colorCirclePNG
+                            : org?.profileMedia?.media?.sourceUrl ||
+                              org?.profileImageUrl ||
+                              colorCirclePNG
+                          return (
+                            <li key={membership.id}>
+                              <button
+                                type="button"
+                                className="w-100 border-0 bg-transparent d-flex align-items-center gap-2 px-1 py-1 rounded text-start"
+                                onClick={() => handleOrgSwitch(orgId)}
+                                disabled={isSettingOrg}
+                              >
+                                <OptimizedImage
+                                  src={icon}
+                                  alt={orgName}
+                                  width={20}
+                                  height={20}
+                                  className="rounded-circle object-fit-cover"
+                                />
+                                <span className="flex-grow-1 text-truncate">{orgName}</span>
+                                {isActive && <i className="bi bi-check2 text-primary" />}
+                              </button>
+                            </li>
+                          )
+                        })}
+                      </ul>
+                    </>
+                  )}
+
+                </PopoverBody>
+              </PopoverContent>
+            </Portal>
+          </Popover>
+        </>
+      ) : (
+        <div className={`justify-content-end d-flex gap-2 flex-wrap p-2 ${isDarkHeroMode ? 'top-nav-auth-wrap-on-dark' : ''}`}>
+          <MSButton
+            className={`no-min-size px-3 py-2 px-sm-2 py-sm-1 fs-6 fs-sm-7 ${isDarkHeroMode ? 'top-nav-auth-btn-on-dark' : 'text-black'}`}
+            onClick={() => redirect(loginRedirect)}
+          >
+            Log In
+          </MSButton>
+          <MSButton
+            className={`no-min-size px-3 py-2 px-sm-2 py-sm-1 fs-6 fs-sm-7 d-none d-xl-inline rounded-pill ${isDarkHeroMode ? 'top-nav-signup-btn-on-dark' : 'text-white'}`}
+            color="dark"
+            onClick={() => redirect('/signup')}
+          >
+            Sign Up
+          </MSButton>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default UserButton

package/src/components/common/contact/ContactForm.tsx

@@ -0,0 +1,214 @@
+import { useEffect, useMemo } from 'react'
+import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { useCountries } from '@hooks'
+import { useUserAuthContext } from '@context/UserAuthContext'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import Select from '@components/common/forms/Select'
+import Textarea from '@components/common/forms/Textarea'
+import { EMAIL_REGEX } from '@helpers/constants'
+import { useSubmitContactFormMutation } from '@store/slice/api/leadApiSlice'
+import {
+	ReCaptchaActions,
+	WithReCaptcha,
+	isReCaptchaAvailable,
+} from '@components/hoc/WithReCaptcha'
+import { formErrorHandler } from '@helpers/error/formErrorHandler'
+
+type ContactFormProps = {
+  fieldsPerRow?: number
+  afterSubmit?: () => void
+}
+
+interface FormValues extends FieldValues {
+  firstName: string
+  lastName: string
+  email: string
+  company: string
+  country: string
+  questions: string
+}
+
+const ContactForm = WithReCaptcha(({
+  fieldsPerRow = 2,
+  afterSubmit,
+}: ContactFormProps) => {
+  const { executeRecaptcha } = useGoogleReCaptcha()
+  const [submitContactForm] = useSubmitContactFormMutation()
+  const { user } = useUserAuthContext()
+  const { countries } = useCountries()
+  const countryOptions = useMemo(() => {
+    return [...countries].sort((a, b) => a.name.localeCompare(b.name))
+  }, [countries])
+  const {
+    register,
+    handleSubmit,
+    clearErrors,
+    getValues,
+    reset,
+    control,
+    setError,
+    formState: { errors, isSubmitting, isSubmitSuccessful },
+  } = useForm<FormValues>({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+      company: '',
+      country: 'US',
+      questions: '',
+    },
+  })
+
+  useEffect(() => {
+    if (!user) return
+    reset({
+      firstName: user.firstName || '',
+      lastName: user.lastName || '',
+      email: user.email || '',
+      company: '',
+      country: user.address?.country || 'US',
+      questions: '',
+    })
+  }, [reset, user])
+
+  const formErrorMessage =
+    (errors['recaptcha-error' as keyof typeof errors]?.message as string | undefined) ||
+    (errors['server-error' as keyof typeof errors]?.message as string | undefined) ||
+    ''
+
+  const onSubmit: SubmitHandler<FormValues> = async (payload) => {
+    try {
+      if (!executeRecaptcha && isReCaptchaAvailable) {
+        setError('recaptcha-error' as any, {
+          type: 'custom',
+          message: 'Execute recaptcha not yet available',
+        })
+        return
+      }
+
+      const captcha = executeRecaptcha
+        ? await executeRecaptcha(ReCaptchaActions.contact_form_submit)
+        : null
+
+      await submitContactForm({
+        payload: {
+          ...payload,
+          captcha,
+        },
+      }).unwrap()
+
+      afterSubmit?.()
+    } catch (error: any) {
+      formErrorHandler(error, setError)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className='my-4'>
+      <div className={`row row-cols-1 row-cols-md-${fieldsPerRow || 2} g-4`}>
+        <div className='col'>
+          <Input
+            register={register('firstName', {
+              required: 'This field is required',
+            })}
+            errors={errors}
+            placeholder='Enter Your First Name'
+            label='First Name'
+            getValues={getValues}
+          />
+        </div>
+
+        <div className='col'>
+          <Input
+            register={register('lastName', {
+              required: 'This field is required',
+            })}
+            errors={errors}
+            placeholder='Enter Your Last Name'
+            label='Last Name'
+            getValues={getValues}
+          />
+        </div>
+
+        <div className='col'>
+          <Input
+            register={register('email', {
+              required: 'This field is required',
+              pattern: {
+                value: EMAIL_REGEX,
+                message: 'This value is not a valid email',
+              },
+            })}
+            errors={errors}
+            placeholder='Enter Your Email'
+            label='Email'
+            getValues={getValues}
+          />
+        </div>
+
+        <div className='col'>
+          <Input
+            register={register('company')}
+            errors={errors}
+            placeholder='Enter Your Company'
+            label='Company'
+            getValues={getValues}
+          />
+        </div>
+      </div>
+
+      <div className='mt-4'>
+        <Select
+          register={register('country', {
+            required: 'This field is required',
+          })}
+          label='Country'
+          options={countryOptions.map((country) => ({
+            value: country.id,
+            label: country.name,
+          }))}
+          control={control}
+          getValues={getValues}
+          setFirstAsDefault={false}
+          errors={errors}
+        />
+      </div>
+
+      <div className='mt-4'>
+        <Textarea
+          register={register('questions', {
+            required: 'This field is required',
+          })}
+          errors={errors}
+          placeholder='Message'
+          label='Message'
+          getValues={getValues}
+          rows={5}
+          cols={30}
+        />
+      </div>
+
+      {formErrorMessage && (
+        <span className='text-warning small d-block mt-3'>{formErrorMessage}</span>
+      )}
+
+      <div className='text-center'>
+        <Button
+          type='submit'
+          className='w-100 text-white fw-bold mt-4 py-2'
+          ariaLabel='Submit contact form'
+          color='primary'
+          isLoading={isSubmitting}
+          disabled={isSubmitting || isSubmitSuccessful}
+          onClick={() => clearErrors(['server-error', 'recaptcha-error'])}
+        >
+          Submit
+        </Button>
+      </div>
+    </form>
+  )
+})
+
+export default ContactForm

package/src/components/common/cta/Cta.tsx

@@ -0,0 +1,18 @@
+export const Cta = ({
+	content,
+} : {
+	content: JSX.Element,
+}) => {
+	return (
+		<>
+			<div className='container mt-5'>
+				<div className='blue-to-pink-gradient p-5 text-white text-center rounded-30'>
+					{ content }
+				</div>
+			</div>
+			<br></br>
+		</>
+	)
+}
+
+export default Cta

package/src/components/common/dialog/ConversationFullscreenModal.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { ReactNode, useEffect } from 'react';
+
+type Props = {
+  title?: string;
+  children: ReactNode;
+  footer?: ReactNode;
+  headerLeft?: ReactNode;
+  headerRight?: ReactNode;
+  zIndex?: number;
+};
+
+export function ConversationFullscreenModal({
+  title,
+  children,
+  footer,
+  headerLeft,
+  headerRight,
+  zIndex = 2200,
+}: Props) {
+  useEffect(() => {
+    const prevOverflow = document.body.style.overflow;
+    const prevTouchAction = document.body.style.touchAction;
+    document.body.style.overflow = 'hidden';
+    document.body.style.touchAction = 'none';
+    return () => {
+      document.body.style.overflow = prevOverflow;
+      document.body.style.touchAction = prevTouchAction;
+    };
+  }, []);
+
+  return (
+    <div aria-label="Conversation modal" className="conv-overlay">
+      <style jsx>{`
+        .conv-overlay {
+          position: fixed;
+          inset: 0;
+          z-index: ${zIndex};
+          display: flex;
+          flex-direction: column;
+          align-items: stretch;
+          justify-content: space-between;
+          gap: 16px;
+          padding: 18px 20px calc(28px + env(safe-area-inset-bottom, 0px));
+          background:
+            radial-gradient(circle at 15% 10%, rgba(13, 110, 253, 0.14), transparent 40%),
+            radial-gradient(circle at 85% 0%, rgba(25, 135, 84, 0.14), transparent 35%),
+            #f7f9fc;
+        }
+        .conv-title {
+          text-align: center;
+          font-size: 15px;
+          font-weight: 600;
+          color: #374151;
+          letter-spacing: 0.02em;
+          text-transform: uppercase;
+        }
+        .conv-header {
+          display: grid;
+          grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+          align-items: center;
+          gap: 12px;
+          min-height: 40px;
+        }
+        .conv-header-left {
+          justify-self: start;
+          min-width: 0;
+        }
+        .conv-header-right {
+          justify-self: end;
+          min-width: 0;
+        }
+        .conv-body {
+          flex: 1;
+          min-height: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .conv-footer {
+          display: flex;
+          justify-content: center;
+        }
+      `}</style>
+      <div className="conv-header">
+        <div className="conv-header-left">{headerLeft || null}</div>
+        {title ? <div className="conv-title">{title}</div> : <div />}
+        <div className="conv-header-right">{headerRight || null}</div>
+      </div>
+      <div className="conv-body">{children}</div>
+      <div className="conv-footer">{footer}</div>
+    </div>
+  );
+}

package/src/components/common/dialog/DeleteDialog.tsx

@@ -0,0 +1,90 @@
+import { useRef, useState } from 'react'
+import {
+	AlertDialog,
+	AlertDialogBody,
+	AlertDialogContent,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogOverlay,
+} from '@chakra-ui/react'
+import { toast } from 'react-toastify'
+import Button from '@components/common/button/Button'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+
+export const DeleteDialog = ({
+	isOpen,
+	onClose,
+	titleOverride,
+	entityDescription,
+	descriptionOverride,
+	mainActionLabelOverride = 'Delete',
+	skipActionLabelOverride = 'Cancel',
+	onDelete,
+}: {
+	titleOverride?: string
+	descriptionOverride?: string
+	mainActionLabelOverride?: string
+	skipActionLabelOverride?: string
+	entityDescription: string
+	isOpen: boolean
+	onClose: () => void
+	onDelete: () => void | Promise<void>
+}) => {
+	const cancelRef = useRef<HTMLButtonElement>(null!)
+	const [isLoading, setIsLoading] = useState(false)
+
+	const deleteEntity = async () => {
+		try {
+			setIsLoading(true)
+			await onDelete()
+			setIsLoading(false)
+			onClose()
+		} catch (error) {
+			setIsLoading(false)
+			toast.error(DEFAULT_ERROR_MESSAGE)
+		}
+	}
+
+	return (
+		<AlertDialog
+			isOpen={isOpen}
+			leastDestructiveRef={cancelRef}
+			onClose={onClose}
+			isCentered
+		>
+			<AlertDialogOverlay className='dialog'>
+				<AlertDialogContent>
+					<div className='text-center'>
+						<AlertDialogHeader>
+							{titleOverride ? titleOverride : `Delete "${entityDescription}"`}
+						</AlertDialogHeader>
+
+						<AlertDialogBody>{ descriptionOverride ? descriptionOverride : 'You cannot undo this action.' }</AlertDialogBody>
+
+						<AlertDialogFooter className='d-flex justify-content-center gap-3'>
+							<Button
+								className='me-2'
+								ariaLabel='Close Delete Dialog'
+								buttonRef={cancelRef}
+								onClick={onClose}
+							>
+								{skipActionLabelOverride}
+							</Button>
+
+							<Button
+								className='text-white'
+								ariaLabel={`Delete ${entityDescription}`}
+								color='danger'
+								onClick={deleteEntity}
+								isLoading={isLoading}
+								disabled={isLoading}
+							>
+								{mainActionLabelOverride}
+							</Button>
+						</AlertDialogFooter>
+					</div>
+				</AlertDialogContent>
+			</AlertDialogOverlay>
+		</AlertDialog>
+	)
+}

package/src/components/common/dialog/MobileFiltersDrawer.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import {
+	Drawer,
+	DrawerBody,
+	DrawerContent,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerOverlay,
+	useDisclosure,
+} from '@chakra-ui/react'
+import Button from '@components/common/button/Button'
+
+const MobileFiltersDrawer = ({ children }: { children: React.ReactNode }) => {
+	const { isOpen, onOpen, onClose } = useDisclosure()
+
+	return (
+		<>
+			<div className='position-fixed z-index-10 d-flex justify-content-center align-items-center left-0 right-0 bottom-5r d-lg-none'>
+				<Button
+					color='primary'
+					className='text-white fw-bold rounded-xl'
+					onClick={onOpen}
+				>
+					<span className='bi bi-sliders me-2'></span>
+					<span>Filters</span>
+				</Button>
+			</div>
+
+			<Drawer placement='bottom' onClose={onClose} isOpen={isOpen} size='xl'>
+				<DrawerOverlay />
+				<DrawerContent className='drawer mt-10'>
+					<DrawerHeader>
+						<div className='d-flex align-items-center'>
+							<Button
+								className='text-white no-min-size p-0 me-4'
+								onClick={onClose}
+							>
+								<span className='bi bi-chevron-down text-dark'></span>
+							</Button>
+							<span className='lead'>Filters</span>
+						</div>
+					</DrawerHeader>
+					<DrawerBody className='px-0'>{children}</DrawerBody>
+					<DrawerFooter>
+						<Button
+							ariaLabel='Close modal'
+							color='primary'
+							className='text-white w-100'
+							onClick={onClose}
+						>
+							Done
+						</Button>
+					</DrawerFooter>
+				</DrawerContent>
+			</Drawer>
+		</>
+	)
+}
+
+export default MobileFiltersDrawer