Account wallet

The customer sees their store-credit balance and a table of transactions (cashback, refunds, purchases paid from the wallet). Customise it to show the balance in your own way.

URLCopy Anchor Link

The optional locale segment exists, but the generated loader call does not use it.

Route fileCopy Anchor Link

// @auto-generated
import { createFileRoute } from '@tanstack/react-router';
import { Wallet } from '@salla.sa/twilight-theme-engine/routes/account';
import type { WalletPageProps } from '@salla.sa/twilight-theme-engine/routes/account';
import { CustomerPageSkeleton } from '@salla.sa/twilight-theme-engine/skeleton';
import { withHead } from '@salla.sa/twilight-theme-engine/tanstack';

export const Route = createFileRoute('/{-$locale}/account/wallet')({
  validateSearch: (search: Record<string, unknown>) => {
    const page = Number(search.page) || 1;
    return page > 1 ? { page } : {};
  },
  loaderDeps: ({ search }) => ({ page: search.page }),
  loader: ({ deps }): Promise<WalletPageProps> => Wallet.loader({ search: { page: deps.page ?? 1 } }),
  head: withHead(Wallet),
  pendingComponent: () => <CustomerPageSkeleton />,
  component: WalletComponent,
});

function WalletComponent() {
  const data: WalletPageProps = Route.useLoaderData();
  return <Wallet.Component {...data} />;
}

To take the page over, delete the // @auto-generated line and edit the file. See Fork a built-in route.

A customised versionCopy Anchor Link

Show the balance above the engine's table. Only the component changes:

function WalletComponent() {
  const data: WalletPageProps = Route.useLoaderData();
  return (
    <>
      <p className="mb-4">Balance: {data.balance}</p>
      <Wallet.Component {...data} />
    </>
  );
}

What it loadsCopy Anchor Link

WalletPageProps is { page, query: { page }, transactions, balance, pagination: { next } }. A transaction has id, order_id, action_type (such as cashback, refund, purchase_by_wallet), title, amount, created_at and expired_at (Unix seconds). The loader reads the wallet with the customer's token, 10 transactions per page, and more rows load in the browser. pagination.next is null on the last page.

The head sets the title, description and language alternates.

Edge casesCopy Anchor Link

• Signed out or expired token. A guest, or a customer whose token the API rejects with 401 or 403, is sent to the home page with ?intended_to= holding the page they asked for. The Salla SDK opens the sign-in form there and returns them to the page after sign-in.
• No transactions. The page shows a "no transactions" message instead of the table.

See alsoCopy Anchor Link

• Account notifications, the next account page
• Account layout and Loading data