@spacemade/ui 0.0.1

package/src/components/auth/form/SignUpForm.tsx

@@ -0,0 +1,166 @@
+import Link from 'next/link'
+import { useRouter } from '@lib/next-router'
+import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { useState } from 'react'
+import { useAccountStore, useCountries } from '@hooks'
+import { useUserAuthContext } from '@context'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import {
+	ReCaptchaActions,
+	WithReCaptcha,
+	isReCaptchaAvailable,
+} from '@components/hoc/WithReCaptcha'
+import { EMAIL_REGEX, PASSWORD_REGEX } from '@helpers/constants'
+
+interface FormValues extends FieldValues {
+	firstName: string
+	lastName: string
+	email: string
+	password: string
+}
+
+const SignUpForm = WithReCaptcha(() => {
+	const { push: redirect } = useRouter()
+	const { startSignUp } = useUserAuthContext()
+	const { isUserEmailAvailable } = useAccountStore()
+	const { countries } = useCountries()
+	const { executeRecaptcha } = useGoogleReCaptcha()
+
+	const [agreedToTerms, setAgreedToTerms] = useState(false)
+
+	const {
+		register,
+		handleSubmit,
+		getValues,
+		setError,
+		clearErrors,
+		formState: { errors, isSubmitting, isSubmitSuccessful },
+	} = useForm<FormValues>({
+		defaultValues: {
+			country: countries[0].id,
+		},
+	})
+
+	const onSubmit: SubmitHandler<FormValues> = async (data) => {
+		if (!executeRecaptcha && isReCaptchaAvailable) {
+			setError('recaptcha-error', {
+				type: 'custom',
+				message: 'Execute recaptcha not yet available',
+			})
+			return
+		}
+
+		const captcha = executeRecaptcha
+			? await executeRecaptcha(ReCaptchaActions.sign_up)
+			: null
+
+		const success = await startSignUp({
+			...data,
+			captcha,
+		})
+
+		if (!success) {
+			setError('server-error', { type: 'custom', message: 'server-error' })
+			return
+		}
+
+		redirect('/signup/verify')
+	}
+
+	return (
+		<form onSubmit={handleSubmit(onSubmit)}>
+			<div className='mb-4'>
+				<Input
+					register={register('firstName', {
+						required: 'This field is required',
+					})}
+					errors={errors}
+					placeholder='Enter Your First Name'
+					label='First Name'
+					getValues={getValues}
+				/>
+			</div>
+			<div className='mb-4'>
+				<Input
+					register={register('lastName', {
+						required: 'This field is required',
+					})}
+					errors={errors}
+					placeholder='Enter Your Last Name'
+					label='Last Name'
+					getValues={getValues}
+				/>
+			</div>
+			<div className='mb-4'>
+				<Input
+					register={register('email', {
+						required: 'This field is required',
+						pattern: {
+							value: EMAIL_REGEX,
+							message: 'This value is not a valid email',
+						},
+						validate: async (value) => await isUserEmailAvailable(value),
+					})}
+					customErrorMessage='This email is already taken'
+					getValues={getValues}
+					placeholder='Enter Your Email'
+					label='Email'
+					errors={errors}
+				/>
+			</div>
+			<div className='mb-4'>
+				<Input
+					register={register('password', {
+						required: 'This field is required',
+						pattern: {
+							value: PASSWORD_REGEX,
+							message:
+								'Invalid password. Must be at least 6 characters long, and must contain letters (at least one uppercase), numbers and special characters.',
+						},
+					})}
+					getValues={getValues}
+					placeholder='Enter Your Password'
+					label='Password'
+					type='password'
+					isPassword
+					errors={errors}
+				/>
+			</div>
+
+			<div className="d-flex align-items-center justify-content-center mb-3">
+				<input
+					type='checkbox'
+					id='terms'
+					checked={agreedToTerms}
+					onChange={(e) => setAgreedToTerms(e.target.checked)}
+					className='me-2'
+				/>
+				<label htmlFor='terms' className='small'>
+					I agree to osirus.ai {' '}
+					<Link href='/terms' className='text-decoration-underline text-dark fw-bold'>
+						terms of use
+					</Link>
+					.
+				</label>
+			</div>
+
+			<div className='text-center'>
+				<Button
+					type='submit'
+					className='rounded-md text-white fw-bold btn-lg w-xs-150p mx-auto'
+					ariaLabel='Sign Up'
+					color='primary'
+					isLoading={isSubmitting}
+					disabled={isSubmitting || isSubmitSuccessful || !agreedToTerms}
+					onClick={() => clearErrors(['server-error', 'recaptcha-error'])}
+				>
+					Sign Up
+				</Button>
+			</div>
+		</form>
+	)
+})
+
+export default SignUpForm

package/src/components/auth/form/UpdateForm.tsx

@@ -0,0 +1,165 @@
+'use client'
+
+import Link from 'next/link'
+import { useRouter } from '@lib/next-router'
+import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { useState } from 'react'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import {
+  ReCaptchaActions,
+  WithReCaptcha,
+  isReCaptchaAvailable,
+} from '@components/hoc/WithReCaptcha'
+import { PASSWORD_REGEX } from '@helpers/constants'
+import { useUpdateMutation } from '@store/slice/api/authApiSlice'
+
+interface FormValues extends FieldValues {
+  firstName: string
+  lastName: string
+  password: string
+}
+
+const UpdateForm = WithReCaptcha(({
+  token,
+  email,
+  userId,
+  orgId,
+}: {
+  token: string
+  email?: string
+  userId?: string
+  orgId?: string
+}) => {
+  const [update] = useUpdateMutation()
+  const { executeRecaptcha } = useGoogleReCaptcha()
+  const [agreedToTerms, setAgreedToTerms] = useState(false)
+  const router = useRouter()
+
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    setError,
+    clearErrors,
+    formState: { errors, isSubmitting, isSubmitSuccessful },
+  } = useForm<FormValues>()
+
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    if (!executeRecaptcha && isReCaptchaAvailable) {
+      setError('recaptcha-error', {
+        type: 'custom',
+        message: 'Execute recaptcha not yet available',
+      })
+      return
+    }
+
+    const captcha = executeRecaptcha
+      ? await executeRecaptcha(ReCaptchaActions.sign_up)
+      : null
+
+    await update({
+      token,
+      firstName: data.firstName,
+      lastName: data.lastName,
+      password: data.password,
+      captcha,
+      orgId,
+    }).unwrap()
+
+    router.push('/update/verify')
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="mb-4">
+        <Input
+          register={register('firstName', {
+            required: 'This field is required',
+          })}
+          errors={errors}
+          placeholder="Enter Your First Name"
+          label="First Name"
+          getValues={getValues}
+        />
+      </div>
+      <div className="mb-4">
+        <Input
+          register={register('lastName', {
+            required: 'This field is required',
+          })}
+          errors={errors}
+          placeholder="Enter Your Last Name"
+          label="Last Name"
+          getValues={getValues}
+        />
+      </div>
+      <div className="mb-4">
+        <Input
+          label="Email"
+          value={email ?? ''}
+          disabled
+          readOnly
+        />
+      </div>
+      {userId && (
+        <div className="mb-4">
+          <Input label="User ID" value={userId} disabled readOnly />
+        </div>
+      )}
+      <div className="mb-4">
+        <Input
+          register={register('password', {
+            required: 'This field is required',
+            pattern: {
+              value: PASSWORD_REGEX,
+              message:
+                'Invalid password. Must be at least 6 characters long, and must contain letters (at least one uppercase), numbers and special characters.',
+            },
+          })}
+          getValues={getValues}
+          placeholder="Enter Your Password"
+          label="Password"
+          type="password"
+          isPassword
+          errors={errors}
+        />
+      </div>
+      <div className="d-flex align-items-center justify-content-center mb-3">
+        <input
+          type="checkbox"
+          id="terms"
+          checked={agreedToTerms}
+          onChange={(e) => setAgreedToTerms(e.target.checked)}
+          className="me-2"
+        />
+        <label htmlFor="terms" className="small">
+          I agree to osirus.ai{' '}
+          <Link
+            href="/terms"
+            className="text-decoration-underline text-dark fw-bold"
+          >
+            terms of use
+          </Link>
+          .
+        </label>
+      </div>
+      <div className="text-center">
+        <Button
+          type="submit"
+          className="rounded-md text-white fw-bold btn-lg w-xs-150p mx-auto"
+          ariaLabel="Update"
+          color="primary"
+          isLoading={isSubmitting}
+          disabled={isSubmitting || isSubmitSuccessful || !agreedToTerms}
+          onClick={() => clearErrors(['server-error', 'recaptcha-error'])}
+        >
+          Update
+        </Button>
+      </div>
+    </form>
+  )
+})
+
+export default UpdateForm

package/src/components/auth/login-form-template.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import Button from '@/components/common/button/Button'
+import Input from '@/components/common/forms/Input'
+import { useForm } from 'react-hook-form'
+
+type FormValues = {
+  email: string
+  password: string
+}
+
+export function LoginFormTemplate() {
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    formState: { errors, isSubmitting },
+  } = useForm<FormValues>({ defaultValues: { email: '', password: '' } })
+
+  const onSubmit = async () => {
+    // placeholder for auth integration
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="d-flex flex-column gap-3">
+      <Input
+        register={register('email', { required: 'Email is required' })}
+        label="Email"
+        type="email"
+        errors={errors}
+        getValues={getValues}
+      />
+      <Input
+        register={register('password', { required: 'Password is required' })}
+        label="Password"
+        type="password"
+        errors={errors}
+        getValues={getValues}
+      />
+      <Button type="submit" color="primary" className="text-white" disabled={isSubmitting}>
+        Sign in
+      </Button>
+    </form>
+  )
+}

package/src/components/billing/CardBrandIcon.tsx

@@ -0,0 +1,126 @@
+// components/billing/CardBrandIcon.tsx
+import React from 'react';
+
+type Props = {
+  brand?: string | null;
+  size?: number; // px
+  className?: string;
+};
+
+const SvgWrapper: React.FC<React.PropsWithChildren<{ size: number; className?: string }>> = ({
+  size,
+  className,
+  children,
+}) => (
+  <span
+    className={className}
+    style={{ display: 'inline-flex', width: size, height: size, alignItems: 'center', justifyContent: 'center' }}
+    aria-hidden="true"
+  >
+    {children}
+  </span>
+);
+
+export const CardBrandIcon: React.FC<Props> = ({ brand, size = 32, className }) => {
+  const b = (brand || '').toLowerCase();
+
+  if (b.includes('visa')) {
+    return (
+      <SvgWrapper size={size} className={className}>
+        <svg viewBox="0 0 48 32" width="100%" height="100%" role="img" aria-label="Visa">
+          <rect fill="#1a1f36" width="48" height="32" rx="6" />
+          <text x="50%" y="55%" textAnchor="middle" fontFamily="Inter, Arial, sans-serif" fontWeight="800" fontSize="14" fill="#1a73e8">
+            VISA
+          </text>
+        </svg>
+      </SvgWrapper>
+    );
+  }
+
+  if (b.includes('mastercard')) {
+    return (
+      <SvgWrapper size={size} className={className}>
+        <svg viewBox="0 0 48 32" width="100%" height="100%" role="img" aria-label="Mastercard">
+          <rect fill="#1a1f36" width="48" height="32" rx="6" />
+          <circle cx="21" cy="16" r="9" fill="#ea001b" />
+          <circle cx="27" cy="16" r="9" fill="#ff9900" opacity="0.9" />
+        </svg>
+      </SvgWrapper>
+    );
+  }
+
+  if (b.includes('amex') || b.includes('american express')) {
+    return (
+      <SvgWrapper size={size} className={className}>
+        <svg viewBox="0 0 48 32" width="100%" height="100%" role="img" aria-label="American Express">
+          <rect fill="#016fd0" width="48" height="32" rx="6" />
+          <text x="50%" y="55%" textAnchor="middle" fontFamily="Inter, Arial, sans-serif" fontWeight="800" fontSize="9" fill="#fff">
+            AMEX
+          </text>
+        </svg>
+      </SvgWrapper>
+    );
+  }
+
+  if (b.includes('discover')) {
+    return (
+      <SvgWrapper size={size} className={className}>
+        <svg viewBox="0 0 48 32" width="100%" height="100%" role="img" aria-label="Discover">
+          <rect fill="#fff" width="48" height="32" rx="6" stroke="#1a1f36" />
+          <circle cx="24" cy="16" r="8" fill="#ff7a00" />
+          <text x="50%" y="28" textAnchor="middle" fontFamily="Inter, Arial, sans-serif" fontWeight="700" fontSize="7" fill="#1a1f36">
+            DISCOVER
+          </text>
+        </svg>
+      </SvgWrapper>
+    );
+  }
+
+  if (b.includes('jcb')) {
+    return (
+      <SvgWrapper size={size} className={className}>
+        <svg viewBox="0 0 48 32" width="100%" height="100%" role="img" aria-label="JCB">
+          <rect fill="#1a1f36" width="48" height="32" rx="6" />
+          <rect x="10" y="7" width="8" height="18" fill="#007bff" rx="2" />
+          <rect x="20" y="7" width="8" height="18" fill="#34c759" rx="2" />
+          <rect x="30" y="7" width="8" height="18" fill="#ff3b30" rx="2" />
+        </svg>
+      </SvgWrapper>
+    );
+  }
+
+  if (b.includes('diners')) {
+    return (
+      <SvgWrapper size={size} className={className}>
+        <svg viewBox="0 0 48 32" width="100%" height="100%" role="img" aria-label="Diners Club">
+          <rect fill="#e6f0ff" width="48" height="32" rx="6" stroke="#1a1f36" />
+          <circle cx="20" cy="16" r="7" fill="#1a73e8" opacity="0.85" />
+          <circle cx="28" cy="16" r="7" fill="#1a73e8" opacity="0.3" />
+        </svg>
+      </SvgWrapper>
+    );
+  }
+
+  if (b.includes('unionpay')) {
+    return (
+      <SvgWrapper size={size} className={className}>
+        <svg viewBox="0 0 48 32" width="100%" height="100%" role="img" aria-label="UnionPay">
+          <rect fill="#1a1f36" width="48" height="32" rx="6" />
+          <rect x="10" y="9" width="28" height="14" rx="3" fill="#0a84ff" />
+          <rect x="14" y="12" width="20" height="8" rx="2" fill="#fff" />
+        </svg>
+      </SvgWrapper>
+    );
+  }
+
+  // Fallback generic card
+  return (
+    <SvgWrapper size={size} className={className}>
+      <svg viewBox="0 0 48 32" width="100%" height="100%" role="img" aria-label="Card">
+        <rect fill="#1a1f36" width="48" height="32" rx="6" />
+        <rect x="6" y="9" width="36" height="6" rx="2" fill="#2d3650" />
+        <rect x="6" y="21" width="16" height="4" rx="2" fill="#2d3650" />
+      </svg>
+    </SvgWrapper>
+  );
+};

package/src/components/billing/block/BillingDetailsCard.tsx

@@ -0,0 +1,120 @@
+import { useMemo } from 'react'
+import { useDisclosure } from '@chakra-ui/react'
+import { UpdateCardDetailsModal } from '@components/billing/modal/UpdateCardDetailsModal'
+import { useUserAuthContext } from '@context/UserAuthContext'
+import { useGetUserPaymentMethodQuery } from '@store/slice/api/userApiSlice'
+import Spinner from '@components/common/loading/Spinner'
+import { CardBrandIcon } from '@components/billing/CardBrandIcon'
+
+interface BillingDetailsCardProps {
+  className?: string
+}
+
+const formatExpiry = (month?: number | null, year?: number | null) => {
+  if (!month || !year) return '—'
+  const mm = String(month).padStart(2, '0')
+  return `${mm}/${year}`
+}
+
+export const BillingDetailsCard = ({ className }: BillingDetailsCardProps) => {
+  const { user } = useUserAuthContext()
+  const userId = user?.id
+
+  const {
+    data: paymentMethod,
+    isLoading,
+  } = useGetUserPaymentMethodQuery(
+    { userId: userId || '' },
+    {
+      skip: !userId,
+      refetchOnMountOrArgChange: false,
+      refetchOnFocus: false,
+      refetchOnReconnect: false,
+    }
+  )
+
+  const brand = paymentMethod?.brand ?? null
+  const last4 = paymentMethod?.last4 ?? null
+  const holder = paymentMethod?.cardName ?? null
+  const expiry = formatExpiry(paymentMethod?.expMonth, paymentMethod?.expYear)
+
+  const masked = useMemo(
+    () =>
+      last4
+        ? (
+            <div className="d-flex align-items-center gap-1">
+              {Array.from({ length: 4 }, (_, i) => (
+                <span key={i} className="bi bi-dot fs-6" />
+              ))}
+              <span className="fw-bold">{last4}</span>
+            </div>
+          )
+        : <span className="small">No payment method on file</span>,
+    [last4]
+  )
+
+  const {
+    isOpen: isUpdateCardModalOpen,
+    onOpen: onOpenUpdateCardModal,
+    onClose: onCloseUpdateCardModal,
+  } = useDisclosure()
+
+  return (
+    <>
+      <div className={`shadow-xs p-4 rounded-md mw-xs-500p ${className || ''}`}>
+        <div className="d-flex align-items-center justify-content-between h-xs-25p">
+          <h3 className="h6 mb-0">Billing Details</h3>
+          <button
+            onClick={onOpenUpdateCardModal}
+            className="btn no-min-size p-0 bg-transparent"
+            type="button"
+            aria-label="Edit billing details"
+          >
+            <i className="bi bi-pencil text-primary"></i>
+          </button>
+        </div>
+
+        <div className="mt-3">
+          {userId ? (
+            !isLoading ? (
+              <>
+                <div className="d-flex align-items-center gap-3 mt-3">
+                  <CardBrandIcon brand={brand ?? undefined} size={36} />
+                  <div>
+                    <p className="mb-0 fw-bold small-sm">Card number</p>
+                    {masked}
+                  </div>
+                </div>
+
+                <div className="row pt-3 g-3">
+                  <div className="col-6">
+                    <p className="mb-0 fw-bold small-sm">Cardholder Name</p>
+                    <p className="fw-light mb-0">{holder || '—'}</p>
+                  </div>
+                  <div className="col-6">
+                    <p className="mb-0 fw-bold small-sm">Expiry Date</p>
+                    <p className="fw-light mb-0">{expiry}</p>
+                  </div>
+                  <div className="col-12">
+                    <p className="mb-0 fw-bold small-sm">Billing Contact</p>
+                    <p className="fw-light mb-0">{user?.email}</p>
+                  </div>
+                </div>
+              </>
+            ) : (
+              <div className="w-100 h-100 d-flex justify-content-center align-items-center">
+                <Spinner color="primary" />
+              </div>
+            )
+          ) : (
+            <span className="small">Sign in to view billing details</span>
+          )}
+        </div>
+      </div>
+
+      {isUpdateCardModalOpen && (
+        <UpdateCardDetailsModal isOpen onClose={onCloseUpdateCardModal} />
+      )}
+    </>
+  )
+}