@spacemade/ui 0.0.1

package/src/components/billing/modal/UpdateCardDetailsModal.tsx

@@ -0,0 +1,451 @@
+import { useEffect, useMemo, useState } from 'react';
+import {
+  Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay,
+} from '@chakra-ui/react'
+import { StripeElementStyle, StripeError } from '@stripe/stripe-js';
+import {
+  useStripe,
+  useElements,
+  CardCvcElement,
+  CardExpiryElement,
+  CardNumberElement,
+} from '@stripe/react-stripe-js';
+import { StripeElementType } from '@stripe/stripe-js';
+import { toast } from 'react-toastify';
+import { UsaStates } from 'usa-states'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form';
+import { useAccountStore, useCountries } from '@hooks';
+import Button from '@components/common/button/Button'
+import { WithStripe } from '@components/hoc/WithStripe';
+import { colors } from '@helpers/theme/colors';
+import Select from '@components/common/forms/Select';
+import Input from '@components/common/forms/Input';
+import { useGetUserPaymentMethodQuery, useUpdatePaymentDetailsMutation } from '@store/slice/api/userApiSlice';
+import { useUserAuthContext } from '@context/UserAuthContext';
+
+const commonInputStyle: StripeElementStyle = {
+  base: {
+    backgroundColor: colors.white,
+    color: colors.dark,
+    fontFamily: 'Inter, Arial, sans-serif',
+    fontSize: '16px',
+    '::placeholder': { color: '#9aa3b2' },
+  }
+}
+
+enum CardElementTypes {
+  CardNumber = 'cardNumber',
+  CardExpiry = 'cardExpiry',
+  CardCvc = 'cardCvc',
+}
+
+interface FormValues extends FieldValues {
+  fullName: string
+  line1: string
+  line2: string
+  city: string
+  state: string
+  postalCode: string
+  country: string
+}
+
+interface UpdateCardDetailsModalProps {
+  isOpen: boolean
+  onClose: () => void
+  clientSecret?: string
+}
+
+export const UpdateCardDetailsModal = WithStripe(({
+  isOpen,
+  onClose,
+}: UpdateCardDetailsModalProps) => {
+  const stripe = useStripe()
+  const elements = useElements()
+  const { countries } = useCountries()
+  const { states } = new UsaStates()
+  const { user } = useUserAuthContext()
+  const { saveProfileForAccount } = useAccountStore()
+
+  const userId = user?.id
+  const { data: paymentMethod, isLoading: pmLoading } = useGetUserPaymentMethodQuery(
+    { userId: userId! },
+    { skip: !userId, refetchOnMountOrArgChange: false, refetchOnFocus: false, refetchOnReconnect: false }
+  )
+
+  const [updatePaymentDetails] = useUpdatePaymentDetailsMutation()
+
+  const [inputFocused, setInputFocused] = useState<StripeElementType | null>(null)
+  const [creditCardNumberErrorMessage, setCreditCardNumberErrorMessage] = useState<string | null>(null)
+  const [creditCardExpirationErrorMessage, setCreditCardExpirationErrorMessage] = useState<string | null>(null)
+  const [creditCardCVCErrorMessage, setCreditCardCVCErrorMessage] = useState<string | null>(null)
+
+  const [numberComplete, setNumberComplete] = useState(false)
+  const [expiryComplete, setExpiryComplete] = useState(false)
+  const [cvcComplete, setCvcComplete] = useState(false)
+
+  const [editingCard, setEditingCard] = useState(false)
+
+  useEffect(() => {
+    if (!isOpen) return;
+    setEditingCard(false)
+    setNumberComplete(false)
+    setExpiryComplete(false)
+    setCvcComplete(false)
+    setCreditCardNumberErrorMessage(null)
+    setCreditCardExpirationErrorMessage(null)
+    setCreditCardCVCErrorMessage(null)
+  }, [isOpen])
+
+  // 🔹 Autofocus when switching to edit mode
+  useEffect(() => {
+    if (!editingCard || !elements) return
+    const timer = setTimeout(() => {
+      const cardEl = elements.getElement(CardNumberElement)
+      if (cardEl) cardEl.focus()
+    }, 300)
+    return () => clearTimeout(timer)
+  }, [editingCard, elements])
+
+  const defaultCountry = useMemo(
+    () => user?.address?.country || countries[0]?.id || 'US',
+    [countries, user?.address?.country]
+  )
+
+  const {
+    register,
+    handleSubmit,
+    setError,
+    clearErrors,
+    control,
+    getValues,
+    watch,
+    reset,
+    formState: { isSubmitting, errors },
+  } = useForm<FormValues>({
+    defaultValues: {
+      fullName: (paymentMethod?.cardName) || `${user?.firstName || ''} ${user?.lastName || ''}`.trim(),
+      line1: user?.address?.streetAddress || '',
+      line2: user?.address?.streetAddress2 || '',
+      city: user?.address?.city || '',
+      state: user?.address?.state || '',
+      postalCode: user?.address?.postalCode || '',
+      country: defaultCountry,
+    },
+  })
+
+  useEffect(() => {
+    if (!isOpen) return;
+    reset({
+      fullName: (paymentMethod?.cardName) || `${user?.firstName || ''} ${user?.lastName || ''}`.trim(),
+      line1: user?.address?.streetAddress || '',
+      line2: user?.address?.streetAddress2 || '',
+      city: user?.address?.city || '',
+      state: user?.address?.state || '',
+      postalCode: user?.address?.postalCode || '',
+      country: user?.address?.country || defaultCountry,
+    })
+  }, [paymentMethod?.cardName, user?.address, isOpen, reset, defaultCountry])
+
+  const onError = (error: StripeError) => {
+    setError('stripeError', { type: 'custom', message: error.message })
+    toast.error(error.message || 'An unexpected error occurred.')
+  }
+
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    if (!stripe || !elements) {
+      toast.error('Payments are still loading. Please try again in a moment.')
+      return
+    }
+
+    if (editingCard && (!numberComplete || !expiryComplete || !cvcComplete)) {
+      toast.error('Please complete your card details.')
+      return
+    }
+
+    const cardNumberElement = elements.getElement(CardNumberElement)
+    try {
+      let createdPmId: string | undefined
+
+      if (editingCard && cardNumberElement) {
+        const { error, paymentMethod: createdPm } = await stripe.createPaymentMethod({
+          type: 'card',
+          card: cardNumberElement,
+          billing_details: {
+            name: data.fullName || undefined,
+            address: {
+              line1: data.line1 || undefined,
+              line2: data.line2 || undefined,
+              city: data.city || undefined,
+              state: data.state || undefined,
+              postal_code: data.postalCode || undefined,
+              country: data.country || defaultCountry || undefined,
+            },
+          },
+        })
+        if (error) return onError(error)
+        createdPmId = createdPm?.id
+      }
+
+      if (editingCard && createdPmId) {
+        await updatePaymentDetails({ paymentMethodId: createdPmId, userId: user?.id || '' }).unwrap()
+      }
+
+      saveProfileForAccount({
+        streetAddress: data.line1,
+        streetAddress2: data.line2,
+        city: data.city,
+        state: data.state,
+        postalCode: data.postalCode,
+        country: data.country,
+      })
+
+      toast.success('Your billing details have been updated')
+      onClose()
+    } catch (e) {
+      console.error(e)
+      toast.error('An unexpected error occurred. Please try again later')
+    }
+  };
+
+  const onInputFocus = (elementType: StripeElementType) => setInputFocused(elementType)
+  const onInputBlur = () => setInputFocused(null)
+
+  const current = useMemo(() => {
+    const brand = paymentMethod?.brand?.toUpperCase() || 'CARD'
+    const masked = paymentMethod?.last4 ? `•••• •••• •••• ${paymentMethod.last4}` : '—'
+    const expiry = paymentMethod?.expMonth && paymentMethod?.expYear
+      ? `${String(paymentMethod.expMonth).padStart(2, '0')}/${String(paymentMethod.expYear).slice(-2)}`
+      : '—'
+    const holder =
+      paymentMethod?.cardName ||
+      [user?.firstName, user?.lastName].filter(Boolean).join(' ') ||
+      user?.name ||
+      '—'
+    return { brand, masked, expiry, holder }
+  }, [paymentMethod, user])
+
+  const clickableWrapperStyle: React.CSSProperties = {
+    minHeight: 48,
+    padding: '10px 12px',
+    borderRadius: 8,
+    position: 'relative',
+    zIndex: 2,
+    pointerEvents: 'auto',
+  }
+
+  return (
+    <Drawer isOpen={isOpen} onClose={onClose} size='xl'>
+      <DrawerOverlay />
+      <DrawerContent className='drawer'>
+        <DrawerCloseButton />
+        <DrawerHeader>Update Payment Details</DrawerHeader>
+
+        <DrawerBody>
+          <form id='card-update-form' onSubmit={handleSubmit(onSubmit)}>
+            {/* CARD SECTION */}
+            <h2 className='h5 mb-3 mt-3'>Card on File</h2>
+
+            {!editingCard ? (
+              <div className="mb-4 p-3 border rounded-2">
+                {pmLoading ? (
+                  <div className="small text-muted">Loading current card…</div>
+                ) : (
+                  <div className="d-flex justify-content-between align-items-center">
+                    <div>
+                      <div className="fw-semibold">Current card</div>
+                      <div className="small">
+                        {current.brand} {current.masked} — exp {current.expiry}
+                      </div>
+                      <div className="small text-muted">Name on card: {current.holder}</div>
+                    </div>
+                    <div className="d-flex align-items-center gap-3">
+                      <span className="badge bg-secondary">on file</span>
+                      <button
+                        type="button"
+                        className="btn btn-link p-0 small"
+                        onClick={() => setEditingCard(true)}
+                      >
+                        Edit
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <>
+                <div className={`field-container mb-4 ${creditCardNumberErrorMessage ? 'is-invalid' : ''}`}>
+                  <label className='field-label' htmlFor='cardNumber'>Card Number</label>
+                  <div
+                    id="card-number-wrapper"
+                    className={`w-100 Input h-xs-70p d-flex align-items-end ${inputFocused === CardElementTypes.CardNumber ? 'Input--focused' : ''}`}
+                    style={clickableWrapperStyle}
+                  >
+                    {isOpen && (
+                      <CardNumberElement
+                        id='cardNumber'
+                        options={{ style: commonInputStyle }}
+                        className="w-100"
+                        onFocus={({ elementType }) => onInputFocus(elementType)}
+                        onBlur={onInputBlur}
+                        onChange={(event) => {
+                          setCreditCardNumberErrorMessage(event.error?.message || null)
+                          setNumberComplete(!!event.complete)
+                        }}
+                      />
+                    )}
+                  </div>
+                  {creditCardNumberErrorMessage && <span className='invalid-feedback'>{creditCardNumberErrorMessage}</span>}
+                </div>
+
+                <div className='d-flex gap-4 mb-4'>
+                  <div className={`field-container w-100 ${creditCardExpirationErrorMessage ? 'is-invalid' : ''}`}>
+                    <label className='field-label' htmlFor='cardExpiry'>Expiration</label>
+                    <div
+                      id="card-expiry-wrapper"
+                      className={`w-100 Input h-xs-70p d-flex align-items-end ${inputFocused === CardElementTypes.CardExpiry ? 'Input--focused' : ''}`}
+                      style={clickableWrapperStyle}
+                    >
+                      <CardExpiryElement
+                        id='cardExpiry'
+                        options={{ style: commonInputStyle }}
+                        className='w-100'
+                        onFocus={({ elementType }) => onInputFocus(elementType)}
+                        onBlur={onInputBlur}
+                        onChange={(event) => {
+                          setCreditCardExpirationErrorMessage(event.error?.message || null)
+                          setExpiryComplete(!!event.complete)
+                        }}
+                      />
+                    </div>
+                    {creditCardExpirationErrorMessage && <span className='invalid-feedback'>{creditCardExpirationErrorMessage}</span>}
+                  </div>
+
+                  <div className={`field-container w-100 ${creditCardCVCErrorMessage ? 'is-invalid' : ''}`}>
+                    <label className='field-label' htmlFor='cardCvc'>CVC</label>
+                    <div
+                      id="card-cvc-wrapper"
+                      className={`w-100 Input h-xs-70p d-flex align-items-end ${inputFocused === CardElementTypes.CardCvc ? 'Input--focused' : ''}`}
+                      style={clickableWrapperStyle}
+                    >
+                      <CardCvcElement
+                        id='cardCvc'
+                        options={{ style: commonInputStyle }}
+                        className='w-100'
+                        onFocus={({ elementType }) => onInputFocus(elementType)}
+                        onBlur={onInputBlur}
+                        onChange={(event) => {
+                          setCreditCardCVCErrorMessage(event.error?.message || null)
+                          setCvcComplete(!!event.complete)
+                        }}
+                      />
+                    </div>
+                    {creditCardCVCErrorMessage && <span className='invalid-feedback'>{creditCardCVCErrorMessage}</span>}
+                  </div>
+                </div>
+              </>
+            )}
+
+            {/* BILLING INFORMATION (ALWAYS VISIBLE) */}
+            <h2 className='h5 mb-3 mt-3'>Billing Address</h2>
+            <div className='mb-4'>
+              <Input
+                register={register('fullName', { required: 'This field is required' })}
+                placeholder='Enter your billing name'
+                label='Full Name'
+                getValues={getValues}
+                errors={errors}
+              />
+            </div>
+            <div className='mb-4'>
+              <Input
+                register={register('line1', { required: 'This field is required' })}
+                placeholder='Enter your address line 1'
+                label='Address Line 1'
+                getValues={getValues}
+                errors={errors}
+              />
+            </div>
+            <div className='mb-4'>
+              <Input
+                register={register('line2')}
+                placeholder='Enter your address line 2'
+                label='Address Line 2'
+                getValues={getValues}
+                errors={errors}
+              />
+            </div>
+            <div className='row mb-4'>
+              <div className='col-lg-6'>
+                <Input
+                  register={register('city', { required: 'This field is required' })}
+                  placeholder='Enter Your City'
+                  label='City'
+                  getValues={getValues}
+                  errors={errors}
+                />
+              </div>
+              <div className='col-lg-6'>
+                {watch('country') === 'US' ? (
+                  <Select
+                    register={register('state', { required: 'This field is required' })}
+                    label='State'
+                    options={states.map((state) => ({ value: state.name, label: state.name }))}
+                    control={control}
+                    getValues={getValues}
+                    setFirstAsDefault={false}
+                    errors={errors}
+                  />
+                ) : (
+                  <Input
+                    register={register('state', { required: 'This field is required' })}
+                    placeholder='Enter your state'
+                    label='State'
+                    getValues={getValues}
+                    errors={errors}
+                  />
+                )}
+              </div>
+            </div>
+            <div className='row mb-4'>
+              <div className='col-lg-6'>
+                <Select
+                  register={register('country', { required: 'This field is required' })}
+                  label='Country'
+                  options={countries.map((country) => ({ value: country.id, label: country.name }))}
+                  control={control}
+                  getValues={getValues}
+                  setFirstAsDefault={false}
+                  errors={errors}
+                />
+              </div>
+              <div className='col-lg-6'>
+                <Input
+                  register={register('postalCode', { required: 'This field is required' })}
+                  placeholder='Enter your postal code'
+                  label='Postal Code'
+                  getValues={getValues}
+                  errors={errors}
+                />
+              </div>
+            </div>
+          </form>
+        </DrawerBody>
+
+        <DrawerFooter>
+          <Button ariaLabel='Cancel' onClick={onClose}>Cancel</Button>
+          <Button
+            type='submit'
+            className='text-white'
+            color='primary'
+            form='card-update-form'
+            isLoading={isSubmitting}
+            disabled={isSubmitting || pmLoading}
+            onClick={() => clearErrors('stripeError')}
+          >
+            Save
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+})

package/src/components/billing/modal/UpdatePlanModal.tsx

@@ -0,0 +1,194 @@
+import {
+	AlertDialog,
+	AlertDialogBody,
+	AlertDialogContent,
+	AlertDialogHeader,
+	AlertDialogOverlay,
+} from '@chakra-ui/react'
+import { useGetSubscriptionQuery } from '@store/slice/api/stripeApiSlice';
+import Button from '@components/common/button/Button'
+import React, { useMemo, useRef } from 'react';
+import { useGetProductsQuery } from '@store/slice/api/productsApiSlice';
+import PricingCard from '@components/pricing/card/PricingCard';
+import Spinner from '@components/common/loading/Spinner';
+import { Product, ProductType } from '@store/model';
+import { useUserAuthContext } from '@context/UserAuthContext';
+import { useListOrgsQuery } from '@store/slice/api/orgApiSlice';
+
+const getPlanAmount = (plan: any): number => {
+	if (!plan) return Number.POSITIVE_INFINITY
+	const amt = plan.amount
+	if (typeof amt === 'number') return amt
+	if (typeof amt === 'string') {
+		const n = Number(amt)
+		return Number.isNaN(n) ? Number.POSITIVE_INFINITY : n
+	}
+	const unitAmount = plan?.price?.unitAmount
+	if (typeof unitAmount === 'number') return unitAmount / 100
+	return Number.POSITIVE_INFINITY
+}
+
+const minProductPrice = (product: Product): number => {
+	const plans = Array.isArray((product as any)?.plans) ? (product as any).plans : []
+	if (plans.length === 0) return Number.POSITIVE_INFINITY
+	return plans.reduce((min: number, plan: any) => Math.min(min, getPlanAmount(plan)), Number.POSITIVE_INFINITY)
+}
+
+export const UpdatePlanModal = ({
+	isOpen,
+	onClose,
+}: {
+	isOpen: boolean
+	onClose: () => void
+}) => {
+	const cancelRef = useRef<HTMLButtonElement>(null)
+
+	const {
+		activeOrgId,
+	} = useUserAuthContext()
+
+	const { data: orgMemberships } = useListOrgsQuery()
+
+	const isBusinessOrg = useMemo(() => {
+		if (!orgMemberships || !activeOrgId) return false
+		const membership = orgMemberships.find((m) => m.orgId === activeOrgId)
+		return membership?.org?.orgType === 'business'
+	}, [orgMemberships, activeOrgId])
+
+	const {
+		data: subscriptionProducts,
+		isFetching,
+	} = useGetProductsQuery({
+		isAdmin: false,
+		type: ProductType.Plan,
+		showAll: true,
+		include: ['plans', 'plans.usageTiers', 'featureEntitlements'],
+		orderBy: 'rank',
+		sort: 'asc',
+	}, { skip: !isOpen })
+
+	const {
+		data: subscriptionData,
+	} = useGetSubscriptionQuery(undefined, { skip: !isOpen })
+
+	const products: Product[] = useMemo(() => {
+		const all = subscriptionProducts?.results ?? []
+		// Business orgs see non-public plans (org/team); personal orgs see public plans
+		const visible = all.filter((p) =>
+			isBusinessOrg ? !p.isPublic : p.isPublic
+		)
+
+		return visible
+			.slice()
+			.sort((a, b) => {
+				const aMin = minProductPrice(a)
+				const bMin = minProductPrice(b)
+				if (aMin !== bMin) return aMin - bMin
+
+				const ar = (a as any)?.rank ?? 9999
+				const br = (b as any)?.rank ?? 9999
+				if (ar !== br) return ar - br
+				return (a.name || '').localeCompare(b.name || '')
+			})
+	}, [subscriptionProducts, isBusinessOrg])
+
+	const subscriptionsArr = Array.isArray((subscriptionData as any)?.subscriptions)
+		? (subscriptionData as any).subscriptions
+		: []
+
+	const primarySub = useMemo(() => {
+		return (
+			subscriptionsArr.find(
+				(s: any) =>
+					(s?.status === 'active' || s?.status === 'trialing') &&
+					Array.isArray(s?.productPlans) &&
+					s.productPlans.some((p: any) => (p?.product?.type ?? p?.type) === 'plan')
+			) ?? null
+		)
+	}, [subscriptionsArr])
+
+	const currentPriceDollars: number = useMemo(() => {
+		if (!primarySub) return 0
+		const cents = typeof primarySub.amount === 'number'
+			? primarySub.amount
+			: Number(primarySub.amount ?? 0)
+		return (Number.isFinite(cents) ? cents : 0) / 100
+	}, [primarySub])
+
+	const currentProductSlug: string | null = useMemo(() => {
+		if (!primarySub) return null
+		const plan = (primarySub.productPlans || [])[0]
+		const product = plan?.product ?? null
+		return product?.slug ? String(product.slug).toLowerCase() : null
+	}, [primarySub])
+
+	const hasAnySubscription = !!primarySub
+
+	return (
+		<AlertDialog
+			isOpen={isOpen}
+			leastDestructiveRef={cancelRef}
+			onClose={onClose}
+		>
+			<AlertDialogOverlay className='dialog'>
+				<AlertDialogContent
+					className='w-100'
+					style={{
+						maxHeight: '90vh',
+						overflowY: 'auto',
+						maxWidth: 'min(1000px, 90vw)',
+						minWidth: 'min(300px, 90vw)',
+					}}
+				>
+					<AlertDialogHeader className='minw-lg-1000p bg-white w-100'>
+						Upgrade Plan
+						<Button
+							className='position-absolute top-0 right-0 no-min-size m-2'
+							ariaLabel='Close Dialog'
+							buttonRef={cancelRef}
+							onClick={onClose}
+						>
+							<span className='bi bi-x fs-4'></span>
+						</Button>
+					</AlertDialogHeader>
+					<AlertDialogBody
+						className='w-100 rounded-0'
+						style={{
+							maxWidth: 'min(1000px, 90vw)',
+							minWidth: 'min(300px, 90vw)',
+						}}
+					>
+						<>
+							{isFetching ? (
+								<div className='w-100 d-flex justify-content-center py-4'>
+									<Spinner color='primary' />
+								</div>
+							) : (
+								<>
+									{products.length === 0 ? (
+										<div className='text-center text-muted py-4'>
+											No plans available right now.
+										</div>
+									) : (
+										<div className='d-flex justify-content-center align-items-stretch flex-column flex-lg-row gap-4 gap-lg-5'>
+											{products.map((product) => (
+												<PricingCard
+													key={product.id}
+													product={product}
+													hasAnySubscription={hasAnySubscription}
+													currentPriceDollars={currentPriceDollars}
+													currentProductSlug={currentProductSlug}
+													goto='checkout'
+												/>
+											))}
+										</div>
+									)}
+								</>
+							)}
+						</>
+					</AlertDialogBody>
+				</AlertDialogContent>
+			</AlertDialogOverlay>
+		</AlertDialog>
+	)
+}