@spacemade/ui 0.0.1

package/src/components/pricing/card/PricingCard.tsx

@@ -0,0 +1,291 @@
+// components/pricing/card/ProductPricingCard.tsx
+import Link from 'next/link'
+import Image from 'next/image'
+import { Fragment, useMemo } from 'react'
+import Button from '@components/common/button/Button'
+import { useUserAuthContext } from '@context/UserAuthContext'
+import {
+  Product,
+  ProductPlan,
+  getKeyFromProductPlanBillingPeriodValue,
+} from '@store/model'
+
+type FeatureEntitlementLite = {
+  slug: string
+  limit: number | null
+  hardCap?: boolean
+  overageUnitAmount?: number | null
+  featureName?: string
+}
+
+type UsageTierLite = {
+  rank: number
+  first: number
+  last: number | null
+  unitAmount: number | null
+  flatFee: number | null
+}
+
+type ProductPlanRow = ProductPlan & {
+  rank?: number | null
+  usageTiers?: any[]
+}
+
+const asNumber = (v: any) => (v == null || v === '' ? null : Number(v))
+
+// Amount in dollars (supports {amount} dollars or {price.unitAmount} cents)
+const getPlanAmount = (plan: any): number => {
+  if (!plan) return 0
+  const amt = plan.amount
+  if (typeof amt === 'number') return amt              // dollars
+  if (typeof amt === 'string') {
+    const n = Number(amt)
+    return Number.isNaN(n) ? 0 : n                     // dollars
+  }
+  const unitAmount = plan?.price?.unitAmount          // cents
+  if (typeof unitAmount === 'number') return unitAmount / 100
+  return 0
+}
+
+// Display whole dollars only, rounded UP
+const fmtWholeDollars = (dollars: number) => {
+  const rounded = dollars <= 0 ? 0 : Math.ceil(dollars)
+  return new Intl.NumberFormat(undefined, {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: 0,
+  }).format(rounded)
+}
+
+const prettyLabel = (slug: string): string => {
+  const s = slug?.toLowerCase?.() ?? ''
+  if (s === 'request' || s === 'requests') return 'request'
+  if (s === 'token' || s === 'tokens') return 'token'
+  return s.replace(/[-_]+/g, ' ').replace(/\b\w/g, (c: string) => c.toUpperCase())
+}
+const pluralize = (word: string, n: number | null) =>
+  !n || n === 1 ? word : `${word}${word.endsWith('s') ? '' : 's'}`
+const fmtNum = (n?: number | null) => (typeof n === 'number' ? n.toLocaleString() : undefined)
+const fmtTierRange = (first: number, last: number | null) => (last == null ? `${first}+` : `${first}–${last}`)
+
+export default function ProductPricingCard({
+  product,
+  hasAnySubscription,
+  currentPriceDollars = 0,
+  currentProductSlug = null,
+  goto = 'cart',
+}: {
+  product: Product
+  hasAnySubscription?: boolean
+  currentPriceDollars?: number
+  currentProductSlug?: string | null
+  goto?: 'cart' | 'checkout'
+}) {
+  const { user } = useUserAuthContext()
+
+  // Entitlements (product-level)
+  const featureEntitlements: FeatureEntitlementLite[] =
+    (product as any)?.featureEntitlements ??
+    (product as any)?.entitlements ??
+    []
+
+  // Plans (supports many; often one per product)
+  const plans: (ProductPlan & { usageTiers?: UsageTierLite[] })[] = useMemo(() => {
+    const raw: ProductPlanRow[] = Array.isArray((product as any)?.plans)
+      ? (product as any).plans
+      : []
+    const sorted = raw.slice().sort((a, b) => (a?.rank ?? 9999) - (b?.rank ?? 9999))
+    return sorted.map((plan: any) => ({
+      ...plan,
+      usageTiers: Array.isArray(plan?.usageTiers)
+        ? plan.usageTiers.map((t: any) => ({
+          rank: Number(t.rank),
+          first: Number(t.firstUnit ?? t.first_unit ?? t.first ?? 0),
+          last:
+            t.lastUnit != null
+              ? Number(t.lastUnit)
+              : t.last_unit != null
+                ? Number(t.last_unit)
+                : t.last != null
+                  ? Number(t.last)
+                  : null,
+          unitAmount: asNumber(t.unitAmount ?? t.unit_amount),
+          flatFee: asNumber(t.flatFee ?? t.flat_fee),
+        }))
+        : [],
+    }))
+  }, [product])
+
+  const imageUrl =
+    (product as any)?.imageUrl ||
+    (product as any)?.imageURL ||
+    (product as any)?.images?.[0]?.url ||
+    (product as any)?.media?.[0]?.url ||
+    null
+
+  const thisProductSlug = (product?.slug || '').toLowerCase()
+
+  // ✅ Only consider this product "current" if the user actually has a subscription
+  const isCurrentProduct =
+    !!hasAnySubscription && currentProductSlug === thisProductSlug
+
+  if (plans.length === 0) {
+    return (
+      <div className="p-4 bg-white shadow w-100">
+        <div className="d-flex align-items-center gap-3">
+          {imageUrl && (
+            <div style={{ width: 48, height: 48, position: 'relative' }}>
+              <Image src={imageUrl} alt={product.name} fill sizes="48px" style={{ objectFit: 'cover', borderRadius: 8 }} />
+            </div>
+          )}
+          <div className="d-flex flex-column">
+            <h3 className="h5 fw-bold mb-0">{product.name}</h3>
+            <div className="text-muted small">No plans found for this product.</div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <Fragment>
+      {plans.map((plan) => {
+        const amount = getPlanAmount(plan) // dollars
+        const isFreePlan = amount === 0
+
+        // Button label logic purely by price vs currentPriceDollars
+        let ctaLabel = 'Subscribe'
+
+        if (hasAnySubscription) {
+          if (isCurrentProduct) {
+            ctaLabel = 'Current Plan'
+          } else if (amount > currentPriceDollars) {
+            ctaLabel = 'Upgrade'
+          } else if (amount < currentPriceDollars) {
+            ctaLabel = 'Downgrade'
+          } else {
+            ctaLabel = 'Switch'
+          }
+        } else {
+          // No subscription yet – let them explicitly pick a plan (e.g. dev)
+          ctaLabel = 'Get started'
+        }
+
+        const ctaHref = isCurrentProduct
+          ? ''
+          : (user
+            ? `/${goto}/${product.slug}` // product-centric route
+            : `/signup?goto=/${goto}/${product.slug}`)
+
+        return (
+          <div key={plan?.id ?? plan?.slug ?? `${product.id}-${product.slug}`} className="p-4 bg-white shadow">
+            {/* Header: brand + plan name without "Osirus" prefix if present */}
+            <div className="d-flex align-items-center gap-2">
+              <h2 className="fw-bold mb-0">Osirus</h2>
+              <span className="bg-primary text-white fw-bold rounded h-fit-content px-2 h5 mb-0">
+                {(plan?.name ?? 'Plan').replace(/^Osirus\s*/i, '').trim() || 'Plan'}
+              </span>
+            </div>
+
+            {/* Price row: whole dollars only, rounded up */}
+            <div className="d-flex align-items-end mt-3">
+              <h2 className="h1 fw-bold mb-0 me-1">
+                {isFreePlan ? '$0' : fmtWholeDollars(amount)}
+              </h2>
+              <h2 className="h5 fw-light mb-2">
+                {isFreePlan ? 'Forever' : getKeyFromProductPlanBillingPeriodValue((plan as any).billingPeriod)}
+              </h2>
+            </div>
+
+            {/* CTA */}
+            <div className="d-flex justify-content-center">
+              {isCurrentProduct ? (
+                <Button className="border-dark text-black opacity-75 rounded-0 mt-4 w-100" disabled>
+                  {ctaLabel}
+                </Button>
+              ) : (
+                <Link href={ctaHref} className="btn btn-primary rounded-0 mt-4 w-100">
+                  {ctaLabel}
+                </Link>
+              )}
+            </div>
+
+            {/* Body */}
+            <div className="mt-4">
+              {!!(plan as any)?.description && <p className="mt-3 fw-bold small-md">{(plan as any).description}</p>}
+
+              {/* Product-level feature entitlements */}
+              {featureEntitlements.length > 0 && (
+                <div className="mt-3">
+                  <div className="small text-muted fw-bold mb-1">What’s included</div>
+                  <ul className="list-unstyled mb-0 d-flex flex-column gap-2">
+                    {featureEntitlements.map((e: any, i: number) => {
+                      const slug = e?.slug ?? e?.key ?? ''
+                      if (!slug) return null
+                      let labelSource = e?.label ?? e?.name ?? slug
+
+                      // Normalize plan name for comparison (lowercase + hyphens)
+                      const planName = (plan?.name ?? 'osirus').toLowerCase().replace(/\s+/g, '-')
+
+                      // Normalize label source for matching
+                      const normalized = labelSource.toLowerCase().replace(/\s+/g, '-')
+
+                      // 🔹 Simple prefix removal
+                      if (normalized.startsWith(planName)) {
+                        labelSource = labelSource.slice(planName.length).replace(/^[-_\s]+/, '')
+                      }
+
+                      // Capitalize first letter of each word
+                      const label = labelSource
+                        .toLowerCase()
+                        .replace(/[-_]+/g, ' ')
+                        .replace(/\b\w/g, (c: string) => c.toUpperCase())
+
+                      const limit = e?.limit ?? e?.includedUnits ?? e?.included_units ?? null
+
+                      let unitWord = pluralize(label, limit ?? 0)
+
+                      if (unitWord.toLowerCase().includes('request')) {
+                        unitWord = unitWord.replace(/requests?/i, (match: string) => `API ${match}`)
+                      }
+                      return (
+                        <li className="small-md" key={`${slug}-${i}`}>
+                          <span className="bi bi-check-circle me-2 text-primary"></span>
+                          {limit != null ? (
+                            <>Up to {fmtNum(Number(limit))} {unitWord}</>
+                          ) : (
+                            <>Includes {unitWord}</>
+                          )}
+                        </li>
+                      )
+                    })}
+                  </ul>
+                </div>
+              )}
+
+              {/* Plan usage tiers */}
+              {((plan as any)?.usageTiers?.length ?? 0) > 0 && (
+                <div className="mt-3">
+                  <div className="small text-muted fw-bold mb-1">Usage pricing</div>
+                  <ul className="list-unstyled d-flex flex-column gap-1 mb-0">
+                    {(plan as any).usageTiers!
+                      .slice()
+                      .sort((a: any, b: any) => a.rank - b.rank)
+                      .map((t: any) => (
+                        <li className="small-md" key={`tier-${(plan as any).id}-${t.rank}`}>
+                          <span className="bi bi-graph-up-arrow me-2 text-primary"></span>
+                          Tier {t.rank}: {fmtTierRange(t.first, t.last)}
+                          {t.unitAmount != null && <> @ {fmtWholeDollars(t.unitAmount)} / unit</>}
+                          {t.flatFee != null && <> + {fmtWholeDollars(t.flatFee)} flat</>}
+                        </li>
+                      ))}
+                  </ul>
+                </div>
+              )}
+            </div>
+          </div>
+        )
+      })}
+    </Fragment>
+  )
+}

package/src/components/pricing/form/AddBillingInformationForm.tsx

@@ -0,0 +1,212 @@
+import { useState } from 'react'
+import { UsaStates } from 'usa-states'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import Select from '@components/common/forms/Select'
+import { useCountries, useAccountStore } from '@hooks'
+import { useCheckoutContext } from '@context/CheckoutContext'
+
+interface FormValues extends FieldValues {
+	fullName: string
+	line1: string
+	line2: string
+	city: string
+	state: string
+	postalCode: string
+	country: string
+}
+
+export const AddBillingInformationForm = () => {
+	const {
+		billing,
+		setBillingInfo,
+		isBillingCompleted,
+	} = useCheckoutContext()
+
+	const [isEditing, setIsEditing] = useState<boolean>(!isBillingCompleted)
+
+	const { saveProfileForAccount } = useAccountStore()
+	const { countries } = useCountries()
+	const { states } = new UsaStates()
+
+	const {
+		register,
+		handleSubmit,
+		control,
+		watch,
+		getValues,
+		formState: {
+			errors,
+		}
+	} = useForm<FormValues>({
+		defaultValues: {
+			fullName: billing.name || '',
+			line1: billing.address.line1 || '',
+			line2: billing.address.line2 || '',
+			city: billing.address.city || '',
+			state: billing.address.state || '',
+			postalCode: billing.address.postalCode || '',
+			country: billing.address.country || countries[0].id || '',
+		}
+	})
+
+	const countryValue = watch('country')
+
+	const onSubmit: SubmitHandler<FormValues> = async (data) => {
+		setBillingInfo({
+			address: {
+				line1: data.line1,
+				line2: data.line2,
+				city: data.city,
+				state: data.state,
+				postalCode: data.postalCode,
+				country: data.country,
+			},
+			name: data.fullName
+		})
+
+		saveProfileForAccount({
+			streetAddress: data.line1,
+			streetAddress2: data.line2,
+			city: data.city,
+			state: data.state,
+			postalCode: data.postalCode,
+			country: data.country,
+		})
+
+		setIsEditing(false)
+	}
+
+	return (
+		<>
+			{isEditing ? (
+				<>
+					<h2 className='h4 fw-bold mb-4'>Billing Information</h2>
+					<form onSubmit={ handleSubmit(onSubmit) }>
+						<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'>
+								{countryValue === '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>
+						<div className='d-flex justify-content-end'>
+							<Button type='submit' color='primary'>Save</Button>
+						</div>
+					</form>
+				</>
+			) : (
+				<div className='d-flex justify-content-between'>
+					<div>
+						<h2 className='h4 fw-bold mb-4'>Billing Information</h2>
+						<p className='mb-1'>{billing.name}</p>
+						<p className='mb-1'>{billing.address.line1}{billing.address.line2 ? `, ${billing.address.line2}` : ''}</p>
+						<p className='mb-1'>{billing.address.city}, {billing.address.state} {billing.address.postalCode}</p>
+						<p className='mb-1'>{billing.address.country}</p>
+					</div>
+					<div className='d-flex flex-column align-items-center gap-3 mt-2'>
+						<span className='bi bi-check-circle fs-4 text-primary'></span>
+						<Button onClick={() => setIsEditing(true)} className='text-primary no-min-size text-decoration-underline fs-dec-90'>Edit</Button>
+					</div>
+				</div>
+			)}
+		</>
+	)
+}
+
+export default AddBillingInformationForm