orionplace-react 0.1.0 → 0.2.0

package/templates/components/orionplace/account/StorefrontProfile.tsx

@@ -0,0 +1,189 @@
+'use client';
+
+import {
+  useOrionplace,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectIsAuthenticated, selectProfile } from '@/stores/orionplace';
+import type {
+  IStorefrontProfileAction,
+  IStorefrontProfileState,
+} from '@/interfaces/orionplace/accounts/IStorefrontProfile';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { profileLabels } from '@/lib/orionplace/profileLabels';
+import { ProfileAvatar } from './ProfileAvatar';
+import { ProfileDetailsForm } from './ProfileDetailsForm';
+import { ProfileEmailSettings } from './ProfileEmailSettings';
+import { ProfilePasswordForm } from './ProfilePasswordForm';
+import { ProfileDeleteAccount } from './ProfileDeleteAccount';
+import styles from './StorefrontProfile.module.css';
+
+export interface StorefrontProfileProps {
+  state: IStorefrontProfileState;
+  onRequest?: (value: IStorefrontProfileAction) => void;
+  onSelectHome?: () => void;
+}
+
+export function StorefrontProfile({
+  state,
+  onRequest,
+  onSelectHome,
+}: StorefrontProfileProps) {
+  const authenticated = useOrionplace(selectIsAuthenticated);
+  const profile       = useOrionplace(selectProfile);
+  const locale        = useOrionplaceSelections((value) => value.localeCode);
+  const labels        = profileLabels(locale);
+  const common        = featureLabels(locale);
+  const saved         = !state.pending && Boolean(state.message);
+  const name          =
+    [profile?.first_name, profile?.last_name].filter(Boolean).join(' ') ||
+    profile?.phone ||
+    labels.overview;
+
+  if (!authenticated) {
+    return (
+      <section
+        className={styles.profile}
+        data-storefront-profile
+      >
+        <div
+          className={styles.guest}
+          data-profile-guest
+        >
+          <p>{common.accountSignIn}</p>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section
+      className={styles.profile}
+      data-storefront-profile
+    >
+      <header className={styles.heading}>
+        <div className={styles.headingText}>
+          <h1>{labels.title}</h1>
+          <p>{labels.intro}</p>
+        </div>
+        <div className={styles.headingActions}>
+          <button
+            type="button"
+            onClick={() => onSelectHome?.()}
+          >
+            {labels.home}
+          </button>
+        </div>
+      </header>
+      <div
+        className={`${styles.feedback} ${state.error || saved ? styles.notice : ''} ${state.error ? styles.feedbackError : saved ? styles.feedbackSuccess : ''}`.trim()}
+        role="status"
+        aria-live="polite"
+      >
+        {state.error ? (
+          <>
+            {state.error}
+            {!state.loaded ? (
+              <button
+                type="button"
+                disabled={Boolean(state.pending)}
+                onClick={() => onRequest?.({ action: 'load' })}
+              >
+                {labels.retry}
+              </button>
+            ) : null}
+          </>
+        ) : state.pending ? (
+          <span className={styles.srOnly}>
+            {state.pending === 'load' ? labels.loading : labels.pending}
+          </span>
+        ) : state.message ? (
+          labels.saved
+        ) : null}
+      </div>
+      <div className={styles.content}>
+        <div className={styles.summary}>
+          <div data-profile-part="ProfileAvatar">
+            <ProfileAvatar
+              state={state}
+              onRequest={onRequest}
+            />
+          </div>
+          <div className={styles.identity}>
+            <h2>{name}</h2>
+            <ul className={styles.contacts}>
+              {profile?.phone ? (
+                <li>
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    aria-hidden="true"
+                  >
+                    <path d="M8 3h8v18H8zM11 18h2" />
+                  </svg>
+                  {profile.phone}
+                </li>
+              ) : null}
+              {profile?.email ? (
+                <li>
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    aria-hidden="true"
+                  >
+                    <path d="M3 6h18v12H3zM3 7l9 6 9-6" />
+                  </svg>
+                  {profile.email}
+                </li>
+              ) : null}
+            </ul>
+          </div>
+        </div>
+        <div
+          id="profile-details"
+          data-profile-part="ProfileDetailsForm"
+        >
+          <ProfileDetailsForm
+            state={state}
+            onRequest={onRequest}
+          />
+        </div>
+        <div
+          id="profile-email"
+          data-profile-part="ProfileEmailSettings"
+        >
+          <ProfileEmailSettings
+            state={state}
+            onRequest={onRequest}
+          />
+        </div>
+        <div
+          id="profile-password"
+          data-profile-part="ProfilePasswordForm"
+        >
+          <ProfilePasswordForm
+            state={state}
+            onRequest={onRequest}
+          />
+        </div>
+        <div
+          id="profile-delete"
+          data-profile-part="ProfileDeleteAccount"
+        >
+          <ProfileDeleteAccount
+            state={state}
+            onRequest={onRequest}
+          />
+        </div>
+      </div>
+    </section>
+  );
+}