@cimplify/cli 0.7.15 → 0.7.17

package/templates/storefront-services/app/account/wallets/page.tsx

@@ -1,185 +0,0 @@
-import {
-  AccountContent,
-  AccountHero,
-  AccountNav,
-  AccountShell,
-  AccountSidebar,
-  AccountSignedOutPrompt,
-  Button,
-  EmptyState,
-  Section,
-} from "@cimplify/sdk/react";
-import type { CustomerMobileMoney } from "@cimplify/sdk";
-import { MOBILE_MONEY_PROVIDER } from "@cimplify/sdk";
-import { brand } from "@/lib/brand";
-import { ACCOUNT_NAV, apiFetch, serverAccessToken, serverSession } from "@/lib/cimplify-server";
-import {
-  createWalletAction,
-  deleteWalletAction,
-  setDefaultWalletAction,
-} from "./actions";
-
-const CLIENT_ID = process.env.NEXT_PUBLIC_CIMPLIFY_CLIENT_ID ?? "";
-const REDIRECT_URI = process.env.CIMPLIFY_REDIRECT_URI ?? "";
-
-const PROVIDER_LABEL: Record<string, string> = {
-  [MOBILE_MONEY_PROVIDER.MTN]: "MTN",
-  [MOBILE_MONEY_PROVIDER.VODAFONE]: "Vodafone",
-  [MOBILE_MONEY_PROVIDER.TELECEL]: "Telecel",
-  [MOBILE_MONEY_PROVIDER.AIRTEL]: "Airtel",
-  [MOBILE_MONEY_PROVIDER.AIRTELTIGO]: "AirtelTigo",
-  [MOBILE_MONEY_PROVIDER.MPESA]: "M-Pesa",
-};
-
-function maskedPhone(phone: string): string {
-  const digits = phone.replace(/\D/g, "");
-  if (digits.length < 4) return phone;
-  return `${phone.slice(0, 4)} ••• ${digits.slice(-3)}`;
-}
-
-function WalletCard({ wallet }: { wallet: CustomerMobileMoney }) {
-  const isDefault = wallet.is_default === true;
-  const providerLabel = PROVIDER_LABEL[wallet.provider] ?? wallet.provider;
-  return (
-    <div className="flex items-start justify-between gap-4 rounded-[14px] border border-border bg-card p-5">
-      <div className="min-w-0">
-        <div className="flex items-center gap-2 mb-1.5">
-          <span className="text-[14px] font-medium text-foreground">
-            {wallet.label || providerLabel}
-          </span>
-          {isDefault && (
-            <span className="text-[10px] font-medium tracking-[0.08em] uppercase text-foreground/60 bg-foreground/5 px-2 py-0.5 rounded-full">
-              Default
-            </span>
-          )}
-        </div>
-        <p className="text-[13px] text-foreground/70 leading-relaxed">
-          {providerLabel} · {maskedPhone(wallet.phone_number)}
-        </p>
-      </div>
-      <div className="flex items-center gap-2 shrink-0">
-        {!isDefault && (
-          <form action={setDefaultWalletAction}>
-            <input type="hidden" name="mobile_money_id" value={wallet.id} />
-            <button
-              type="submit"
-              className="text-[12px] font-medium text-foreground/70 hover:text-foreground px-2 py-1"
-            >
-              Make default
-            </button>
-          </form>
-        )}
-        <form action={deleteWalletAction}>
-          <input type="hidden" name="mobile_money_id" value={wallet.id} />
-          <button
-            type="submit"
-            className="text-[12px] font-medium text-destructive/80 hover:text-destructive px-2 py-1"
-          >
-            Remove
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}
-
-function AddWalletForm() {
-  return (
-    <form
-      action={createWalletAction}
-      className="rounded-[14px] border border-dashed border-border bg-card p-5 space-y-3"
-    >
-      <h3 className="text-[13px] font-semibold tracking-[0.02em] text-foreground">
-        Add a mobile money wallet
-      </h3>
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-        <select
-          name="provider"
-          required
-          defaultValue=""
-          className="rounded-[10px] border border-border bg-background px-3 h-10 text-[13px]"
-        >
-          <option value="" disabled>
-            Provider
-          </option>
-          {Object.entries(PROVIDER_LABEL).map(([value, label]) => (
-            <option key={value} value={value}>
-              {label}
-            </option>
-          ))}
-        </select>
-        <input
-          name="phone_number"
-          required
-          type="tel"
-          inputMode="tel"
-          autoComplete="tel"
-          placeholder="+233 24 400 0000"
-          className="rounded-[10px] border border-border bg-background px-3 h-10 text-[13px]"
-        />
-      </div>
-      <input
-        name="label"
-        placeholder="Label (Personal, Business — optional)"
-        className="rounded-[10px] border border-border bg-background px-3 h-10 text-[13px] w-full"
-      />
-      <div className="flex justify-end">
-        <Button type="submit" variant="primary">
-          Save wallet
-        </Button>
-      </div>
-    </form>
-  );
-}
-
-export default async function WalletsPage() {
-  const session = await serverSession();
-  if (!session) {
-    return (
-      <AccountSignedOutPrompt
-        clientId={CLIENT_ID}
-        redirectUri={REDIRECT_URI}
-        eyebrow={brand.account.loginEyebrow}
-        title={brand.account.loginTitle}
-        description={brand.account.loginSubtitle}
-      />
-    );
-  }
-
-  const bearer = await serverAccessToken();
-  const wallets =
-    (await apiFetch<CustomerMobileMoney[]>("/v1/link/mobile-money", { bearer })) ?? [];
-
-  return (
-    <AccountShell
-      sidebar={
-        <AccountSidebar>
-          <AccountNav items={ACCOUNT_NAV} activeHref="/account/wallets" />
-        </AccountSidebar>
-      }
-    >
-      <AccountHero
-        eyebrow="Wallets"
-        title="How would you like to pay?"
-        subtitle="Saved wallets work across every Cimplify shop you use."
-      />
-      <AccountContent>
-        <Section title="Your wallets" meta={`${wallets.length} saved`}>
-          <div className="space-y-3">
-            {wallets.length === 0 ? (
-              <EmptyState
-                title="No wallets yet"
-                description="Add a mobile money wallet to skip the number entry next checkout."
-              />
-            ) : (
-              wallets.map((wallet) => <WalletCard key={wallet.id} wallet={wallet} />)
-            )}
-          </div>
-        </Section>
-        <Section title="Add another">
-          <AddWalletForm />
-        </Section>
-      </AccountContent>
-    </AccountShell>
-  );
-}