@salla.sa/twilight-theme-engine 1.0.85 → 1.0.86

package/tailwind/routes/account/types.ts.txt

@@ -0,0 +1,320 @@
+import type { Money } from '../../types';
+
+export interface OrderStatus {
+  id?: number;
+  name: string;
+  slug?: string;
+  icon?: string;
+  color?: string;
+  hex_icon?: number | null;
+  sort_order?: number;
+}
+
+export interface OrderDate {
+  date: string;
+  timezone_type: number;
+  timezone: string;
+}
+
+export interface OrderUrls {
+  customer: string;
+  admin?: string;
+  rating?: string | null;
+  checkout?: string | null;
+  receipt?: string;
+  print?: string;
+  tracking?: string[];
+  digital_content?: string | null;
+  invoice?: string;
+}
+
+export interface OrderRecipient {
+  name: string;
+  mobile: string;
+  address: string;
+  city?: string;
+  country?: string;
+}
+
+export interface OrderShipping {
+  id: number;
+  name: string;
+  number?: string;
+  logo?: string;
+  cost?: Money;
+  tracing_link?: string;
+  recipient?: OrderRecipient;
+}
+
+export interface OrderCustomer {
+  id: number;
+  first_name?: string;
+  last_name?: string;
+  name?: string;
+  mobile?: string | number;
+  mobile_code?: string;
+  email?: string;
+  urls?: {
+    customer?: string;
+    admin?: string;
+    digital_content?: string | null;
+  };
+  avatar?: string;
+  gender?: string;
+  birthday?: string | null;
+  country?: string;
+  country_code?: string;
+  city?: string;
+  currency?: string;
+  location?: string;
+}
+
+export interface OrderTax {
+  percent: string;
+  amount: Money;
+}
+
+export interface OrderDiscount {
+  title: string;
+  type?: string;
+  code?: string;
+  discount: string;
+  currency?: string;
+  discounted_shipping?: string;
+  hasMarketing?: boolean;
+}
+
+export interface Moneys {
+  sub_total: Money;
+  shipping_cost?: Money;
+  cash_on_delivery?: Money;
+  tax?: OrderTax;
+  discounts?: OrderDiscount[];
+  total: Money;
+}
+
+export interface OrderItemOption {
+  name: string;
+  value: string;
+  is_image?: boolean;
+  color?: string;
+}
+
+export interface OrderItemAttachment {
+  type: 'image' | 'file';
+  url: string;
+}
+
+export interface OrderItemRating {
+  id: number;
+  content: string;
+  is_pending: boolean;
+  stars: number;
+  images?: string[];
+  created_at?: string;
+  can_update?: boolean;
+}
+
+export interface OrderItemAmounts {
+  cost?: Money;
+  amount?: Money;
+  discount?: Money;
+  original_price?: Money;
+  price_without_tax?: Money;
+  total_discount?: Money;
+  tax?: { percent: string; amount: Money };
+  total: Money;
+}
+
+export interface OrderItem {
+  id: number;
+  type?: string;
+  name: string;
+  sku?: string;
+  image?: string;
+  thumbnail?: string;
+  product_thumbnail?: string;
+  quantity: number;
+  amounts: OrderItemAmounts;
+  exchange_rate?: OrderExchangeRate;
+  references?: { mpn?: string | null; gtin?: string | null; hscode?: string | null };
+  product?: {
+    id: number;
+    url: string;
+    type?: string;
+  };
+  note?: string;
+  notes?: string;
+  options?: OrderItemOption[];
+  attachments?: OrderItemAttachment[];
+  rating?: OrderItemRating;
+  availability_date?: string;
+  booking_location?: string;
+  product_reservations?: Record<string, string | number | boolean>[];
+}
+
+export interface OrderPackage {
+  shipping_company?: OrderShipping & { tracing_link?: string };
+  branch?: { name: string };
+  status?: OrderStatus;
+  is_delivered?: boolean;
+  items: OrderItem[];
+}
+
+export interface ShipmentPackage {
+  item_id: number;
+  name: string;
+  sku?: string;
+  price?: Money;
+  quantity: number;
+  weight?: { value: number; units: string };
+  options?: OrderItemOption[];
+}
+
+export interface ShippingAddress {
+  name?: string;
+  mobile?: string;
+  address?: string;
+  city?: string;
+  country?: string;
+  branch_id?: number;
+}
+
+export interface OrderShipment {
+  id: number;
+  type: string;
+  courier_id?: number;
+  courier_name?: string;
+  courier_logo?: string;
+  shipping_number?: string;
+  tracking_number?: string;
+  tracking_link?: string;
+  status?: string;
+  packages?: ShipmentPackage[];
+  ship_from?: ShippingAddress;
+  ship_to?: ShippingAddress;
+  amounts?: Moneys;
+}
+
+export interface OrderShipmentItem {
+  id: number;
+  number: string;
+  name: string;
+  logo: string;
+  website: string;
+  tracking_url?: string;
+}
+
+export interface OrderRatingItem {
+  id: number;
+  rating: number;
+  content: string;
+  status: 'approved' | 'pending' | 'rejected';
+  type: 'rating' | 'shipping' | 'testimonial';
+  images: string[] | null;
+}
+
+export interface OrderRating {
+  store?: OrderItemRating;
+  shipping?: OrderItemRating;
+}
+
+export interface OrderWeight {
+  unit: string;
+  value: number;
+  label?: string;
+}
+
+export interface OrderExchangeRate {
+  base_currency: string;
+  exchange_currency: string;
+  rate: string;
+}
+
+export interface OrderFeatures {
+  shippable: boolean;
+  digitalable: boolean;
+  multiple_shipments_supported: boolean;
+  show_weight: boolean;
+  is_read: boolean;
+}
+
+export interface OrderActions {
+  cancellable: boolean;
+  reorderable: boolean;
+  payable: boolean;
+  rateable: boolean;
+  invoice_printable?: boolean;
+}
+
+export interface OrderReferences {
+  checkout: string | null;
+}
+
+export interface OrderListItem {
+  id: number;
+  reference_id: number;
+  references: OrderReferences;
+  type: string;
+  features: OrderFeatures;
+  actions: OrderActions;
+  amounts: Moneys;
+  exchange_rate: OrderExchangeRate;
+  currency: string;
+  status: OrderStatus;
+  weight: OrderWeight | null;
+  created_at: OrderDate;
+  /** Present when the list is fetched with `with_items`. */
+  items?: OrderItem[];
+}
+
+export interface OrderSource {
+  type: string;
+  value: string | null;
+  device: string;
+  'user-agent': string;
+  utm_source: string;
+  utm_campaign: string;
+  utm_medium: string;
+  utm_term: string;
+  utm_content: string;
+  ip: string | null;
+}
+
+export interface OrderPayment {
+  status?: string | null;
+  method?: string;
+  reference_id?: string | null;
+  accepted_methods?: string[];
+  pending_payment_ends_at?: number;
+}
+
+export interface Order {
+  id: number;
+  reference_id: number;
+  references: OrderReferences;
+  type: string;
+  features: OrderFeatures;
+  actions: OrderActions;
+  customer: OrderCustomer;
+  receiver?: OrderRecipient;
+  amounts: Moneys;
+  exchange_rate: OrderExchangeRate;
+  currency: string;
+  urls: OrderUrls;
+  status: OrderStatus;
+  weight: OrderWeight | null;
+  tags: string[];
+  payment: OrderPayment;
+  source: OrderSource;
+  created_at: OrderDate;
+  items: OrderItem[];
+  shipping?: OrderShipping;
+  shipments?: OrderShipmentItem[];
+  ratings?: OrderRatingItem[];
+  refund_message?: string;
+  email_sent?: boolean;
+  instructions?: string;
+}
+
+export type { OrderSinglePageProps, OrdersPageProps } from './orders/types';

package/tailwind/routes/account/wallet/WalletPage.tsx.txt

@@ -0,0 +1,195 @@
+import { memo, useCallback, useRef } from 'react';
+import { ItemsList } from '@salla.sa/twilight-components-react';
+import { wallet } from '../../../api/wallet';
+import type { TransactionItem } from '../../../api/wallet';
+import { HookSlot, useMoney } from '../../../hooks';
+import { useTranslation } from '../../../providers/I18nProvider';
+import type { WalletPageProps } from './types';
+import { NoContent } from '../../../components/common';
+
+const TransactionRow = memo(function TransactionRow({
+  transaction,
+}: {
+  transaction: TransactionItem;
+}) {
+  const { t, locale } = useTranslation();
+  const { format: formatMoney } = useMoney();
+
+  const formatTimestamp = (ts: number) => {
+    if (!ts) return '';
+    return new Date(ts * 1000).toLocaleDateString(locale, {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+    });
+  };
+
+  const actionTypeClass =
+    transaction.action_type === 'cashback'
+      ? 's-wallet-table-transaction-status-cashback'
+      : transaction.action_type === 'refund'
+        ? 's-wallet-table-transaction-status-refund'
+        : transaction.action_type === 'purchase_by_wallet'
+          ? 's-wallet-table-transaction-status-purchase'
+          : '';
+
+  return (
+    <tr className="s-wallet-table-tbody-tr s-wallet-table-tbody-tr-shadow animated">
+      <td className="s-wallet-table-tbody-tr-td">
+        <div className="s-wallet-table-tbody-tr-td-content">
+          <span className="s-wallet-mobile-title">{t('pages.wallet.transaction_number')}:</span>
+          {transaction.id && <span className="hidden md:inline-block">#{transaction.id}</span>}
+          <div className="flex items-center md:hidden">
+            {transaction.id && <span>#{transaction.id}</span>}
+          </div>
+        </div>
+      </td>
+
+      <td className="s-wallet-table-tbody-tr-td">
+        <div className="s-wallet-table-tbody-tr-td-content">
+          <span className="s-wallet-mobile-title">{t('pages.wallet.amount')}:</span>
+          <div>{formatMoney(transaction.amount, { type: 'general' })}</div>
+        </div>
+      </td>
+
+      <td className="s-wallet-table-tbody-tr-td">
+        <div className="s-wallet-table-tbody-tr-td-content">
+          <span className="s-wallet-mobile-title">{t('pages.wallet.date')}:</span>
+          {transaction.created_at ? formatTimestamp(transaction.created_at) : ''}
+        </div>
+      </td>
+
+      <td className="s-wallet-table-tbody-tr-td">
+        <div className="s-wallet-table-tbody-tr-td-content">
+          <span className="s-wallet-mobile-title">{t('pages.wallet.order_no')}:</span>
+          <span className="rtl:mr-auto ltr:ml-auto md:mx-0">
+            {transaction.order_id && <span>#{transaction.order_id}</span>}
+          </span>
+        </div>
+      </td>
+
+      <td className="s-wallet-table-tbody-tr-td">
+        <div className="s-wallet-table-tbody-tr-td-content">
+          <span className="s-wallet-mobile-title">{t('pages.wallet.expiry_date')}:</span>
+          <span>{transaction.expired_at ? formatTimestamp(transaction.expired_at) : ''}</span>
+        </div>
+      </td>
+
+      <td className="s-wallet-table-tbody-tr-td">
+        <div className="s-wallet-table-tbody-tr-td-content">
+          <div>
+            <span className="s-wallet-mobile-title">{t('pages.wallet.transaction_type')}:</span>
+          </div>
+          <div className={`s-wallet-table-transaction-status-default ${actionTypeClass}`}>
+            {!!transaction.description && (
+              <>
+                <i
+                  id={transaction.id.toString()}
+                  className="sicon-information text-lg rtl:ml-4 ltr:mr-4 s-wallet-table-transaction-status-icon-success"
+                />
+                <salla-tooltip
+                  text={transaction.description}
+                  targetId={transaction.id.toString()}
+                />
+              </>
+            )}
+            <span>{transaction.title}</span>
+          </div>
+        </div>
+      </td>
+    </tr>
+  );
+});
+
+export function WalletPage({ query, transactions, balance, pagination }: WalletPageProps) {
+  const { t } = useTranslation();
+
+  const { format: formatMoney } = useMoney();
+
+  const nextPageRef = useRef(query.page + 1);
+
+  const loader = useCallback(async () => {
+    const pageToLoad = nextPageRef.current;
+    const result = await wallet.list({ page: pageToLoad });
+
+    nextPageRef.current = pageToLoad + 1;
+
+    return {
+      items: result.items,
+      next: result.next,
+    };
+  }, []);
+
+  if (transactions.length === 0) {
+    return (
+      <>
+        <HookSlot name="customer:wallet.transactions.start" />
+        <NoContent icon="sicon-full-wallet" message={`${t('pages.wallet.no_transactions')}`} />
+        <HookSlot name="customer:wallet.transactions.end" />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <HookSlot name="customer:wallet.transactions.start" />
+      <table className="s-wallet-table">
+        <tbody className="s-wallet-table-tbody">
+          <tr className="s-table__tr">
+            <td>
+              <div className="s-wallet-table-balance-container">
+                <i className="s-wallet-table-balance-icon sicon-wallet" />
+                <div>
+                  <div>{formatMoney(balance, { type: 'general' })}</div>
+                  <div className="font-normal text-gray-400">{t('pages.wallet.balance')}</div>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <h2 className="mt-8">{t('pages.wallet.title')}</h2>
+      <table className="s-wallet-table">
+        <thead className="s-wallet-table-head">
+          <tr className="s-wallet-table-head-tr">
+            <th scope="col">{t('pages.wallet.transaction_number')}</th>
+            <th scope="col" className="s-wallet-table-head-tr-th">
+              {t('pages.wallet.amount')}
+            </th>
+            <th scope="col" className="s-wallet-table-head-tr-th">
+              {t('pages.wallet.date')}
+            </th>
+            <th scope="col" className="s-wallet-table-head-tr-th">
+              {t('pages.wallet.order_no')}
+            </th>
+            <th scope="col" className="s-wallet-table-head-tr-th">
+              {t('pages.wallet.expiry_date')}
+            </th>
+            <th scope="col" className="s-wallet-table-head-tr-th">
+              {t('pages.wallet.transaction_type')}
+            </th>
+          </tr>
+        </thead>
+        <tbody className="s-wallet-table-tbody">
+          <ItemsList<TransactionItem>
+            items={transactions}
+            loader={loader}
+            mode={pagination.next ? 'infinite' : 'static'}
+            itemsAs="Fragment"
+            t={(key, fallback) => t(key, fallback || key)}
+          >
+            {(items) =>
+              items.map((transaction) => (
+                <TransactionRow key={transaction.id} transaction={transaction} />
+              ))
+            }
+          </ItemsList>
+        </tbody>
+      </table>
+      <HookSlot name="customer:wallet.transactions.end" />
+    </>
+  );
+}

package/tailwind/routes/account/wallet/index.tsx.txt

@@ -0,0 +1,38 @@
+import type { HeadDescriptor } from '../../../utils/head';
+import { buildHreflangAlternates } from '../../../utils/baseHead';
+import { lazy } from 'react';
+import { walletLoader } from './loader';
+import type { WalletPageProps } from './types';
+import type { LoaderContext } from '../../types';
+import type { TwilightContext } from '../../../twilight/context';
+import { RouteId } from '../../../router/route-ids';
+
+const LazyWalletPage = lazy(() => import('./WalletPage').then((m) => ({ default: m.WalletPage })));
+
+export const WalletPage = LazyWalletPage;
+export { walletLoader } from './loader';
+export type { WalletPageProps } from './types';
+
+export const Wallet = {
+  id: RouteId.CUSTOMER_WALLET,
+  loader: async (
+    ctx: LoaderContext,
+    extend?: (
+      data: WalletPageProps,
+      ctx: { params: Record<string, never> }
+    ) => Promise<Record<string, unknown>> | Record<string, unknown>
+  ): Promise<WalletPageProps> => {
+    const data = await walletLoader(ctx);
+    if (extend) {
+      const extra = await extend(data, { params: {} });
+      return { ...data, ...extra } as WalletPageProps;
+    }
+    return data;
+  },
+  head: (ctx: TwilightContext, data: WalletPageProps): HeadDescriptor => ({
+    title: data.page.title,
+    description: data.page.description,
+    alternateLanguages: buildHreflangAlternates(ctx.settings, ctx.location.pathname),
+  }),
+  Component: LazyWalletPage,
+} as const;

package/tailwind/routes/account/wallet/loader.ts.txt

@@ -0,0 +1,27 @@
+import type { WalletPageProps } from './types';
+import type { LoaderContext } from '../../types';
+import { wallet } from '../../../api/wallet';
+import { getTwilightContext } from '../../../twilight/context';
+import { orUnauthorized, unauthorized } from '../../../providers/NavigationProvider';
+import { getAuthToken } from '../../../api/client';
+import { RouteId } from '../../../router/route-ids';
+
+export async function walletLoader(ctx: LoaderContext): Promise<WalletPageProps> {
+  if (!getAuthToken()) throw unauthorized();
+  const pageNum = Number(ctx.search?.page) || 1;
+  const data = await orUnauthorized(wallet.list({ page: pageNum }));
+
+  const i18n = getTwilightContext().i18n;
+  return {
+    page: {
+      title: i18n.t('common.titles.wallet') || 'Wallet',
+      slug: RouteId.CUSTOMER_WALLET,
+    },
+    query: { page: pageNum },
+    transactions: data.items,
+    balance: data.balance,
+    pagination: {
+      next: data.next,
+    },
+  };
+}

package/tailwind/routes/account/wallet/types.ts.txt

@@ -0,0 +1,11 @@
+import type { Page } from '../../../types';
+import type { RoutePagination, PageQuery } from '../../types';
+import type { TransactionItem } from '../../../api/wallet';
+
+export interface WalletPageProps {
+  page: Page;
+  query: PageQuery;
+  transactions: TransactionItem[];
+  balance: number;
+  pagination: RoutePagination;
+}