Skip to content
Twilight React Playground
ثيم رائدaren

User

interfaceBeginner

Describes the signed-in customer's profile: name, email, mobile, avatar, preferences and linked social accounts.

import { User, UserPreferences, UserSocialAccount } from '@salla.sa/twilight-theme-engine/types';

In plain words

User is the shape of a customer's profile once they have signed in: first and last name, email, mobile number, avatar, and their preferred language and currency.

useUser() gives you one in data. For a guest (a shopper who has not signed in) data is null, so check for that before reading any field.

Signature

interface User {
  type: 'guest' | 'user';
  id?: number;
  first_name?: string;  last_name?: string;
  email?: string;  mobile?: string;  country_code?: string;
  avatar?: string;  gender?: string;  birthday?: string | null;
  created_at?: number;
  preferences?: UserPreferences;
  social_accounts?: UserSocialAccount[];
}

interface UserPreferences {
  currency_code: string;  language_code: string;
  name_visible: boolean;  notifications_enabled: boolean;
}

interface UserSocialAccount { provider_id: string; provider: string; linked: boolean }

Example

app/components/layout/AccountGreeting.tsx
import type { User } from '@salla.sa/twilight-theme-engine/types';
import { useUser } from '@salla.sa/twilight-theme-engine/hooks/useUser';

function displayName(user: User): string {
  return [user.first_name, user.last_name].filter(Boolean).join(' ') || user.email || '';
}

export function AccountGreeting() {
  const { data: user } = useUser();
  if (!user) return null; // a guest, or the profile has not loaded yet

  return <span className="account-greeting">Hello, {displayName(user)}</span>;
}

How it behaves

  • useUser() (@salla.sa/twilight-theme-engine/hooks/useUser) and user.queries.current() (@salla.sa/twilight-theme-engine/api/user) give User | null. user.get() calls auth/user and adds type: "user" to what the API sends; any failure becomes null.

  • Every profile field is optional, even for a signed-in customer: the type promises only type.

  • The playground never signs in, so no demo here reads a real profile. The useUser demo shows the guest case.

Gotchas

  • A guest is null, never { type: "guest" }: nothing in the engine builds that value. if (user.type === "guest") never runs, and when user is null it throws. Test user == null, or read isLoggedIn from useUser().

  • docs/07-data-types.md lists name, language and can_access_wallet on User. They are not in the type, so user.name does not compile. Join first_name and last_name.

Related

Source and docs