@shoppexio/storefront-react 0.0.0 → 0.1.1

package/eject/account/settings.tsx

@@ -0,0 +1,699 @@
+/**
+ * The buyer's own details, their marketing consent, and their signed-in devices.
+ *
+ * Three producers, three sections, and nothing pretending to be a fourth. The
+ * email address is not editable — changing it is gated behind a fresh code and
+ * has no allowlisted path — there is no password field, because this account
+ * signs in with a code, and there is no "delete account", because no endpoint
+ * exists. A control for any of them would be a control that cannot work.
+ *
+ * Signing a device out cannot be undone from here, so it is asked before it is
+ * done: the row arms, then commits. `window.confirm` is not used — it is a
+ * modal the theme cannot style, cannot translate and cannot place next to the
+ * row it is about.
+ */
+
+import { useEffect, useId, useRef, useState } from 'react';
+import {
+  describeUserAgent,
+  hasOtherSessions,
+  isAcceptableAvatarSize,
+  isSaveableName,
+  narrowCustomerSessions,
+  narrowEmailPreferences,
+  profileInitials,
+  type CustomerSession,
+  type EmailPreferences,
+} from './account-settings';
+import {
+  callCustomerApi,
+  safeExternalHref,
+  type AccountPanelState,
+} from './customer-account';
+import { t } from './i18n';
+import { useAccountDashboard } from './dashboard';
+import {
+  AccountCard,
+  AccountError,
+  AccountFieldError,
+  AccountNotice,
+  AccountRowsSkeleton,
+  AccountSectionTitle,
+  BusySpinner,
+  formatAccountDateTime,
+  useAccountResource,
+} from './shared';
+
+/** The contact form's control skin — see `components/contact/contact-form.tsx`. */
+const FIELD =
+  'sx-account-field sxa:w-full sxa:rounded-card sxa:border sxa:bg-[color-mix(in_oklab,_var(--sx-bg)_40%,_transparent)] sxa:px-3 sxa:py-2.5 sxa:text-small sxa:shadow-card sxa:placeholder:text-muted sxa:focus-visible:border-accent sxa:focus-visible:ring-[3px] sxa:focus-visible:ring-[color-mix(in_oklab,_var(--sx-accent)_50%,_transparent)] sxa:focus-visible:outline-none';
+
+export function AccountSettings() {
+  const { state, reload } = useAccountDashboard();
+
+  if (state.status === 'loading') {
+    return <AccountRowsSkeleton rows={4} label={t('settings.loading')} />;
+  }
+
+  if (state.status === 'error') {
+    return <AccountError message={state.message} onRetry={reload} />;
+  }
+
+  return (
+    <div className="sxa:space-y-8">
+      <ProfileSection
+        name={state.data.customer.name}
+        email={state.data.customer.email}
+        onSaved={reload}
+      />
+      <EmailPreferencesSection />
+      <DevicesSection />
+    </div>
+  );
+}
+
+/**
+ * Keeps the last COMPLETE read on screen while the next one is in flight.
+ *
+ * These two sections re-read after every write, because the producer decides
+ * what a change to one list does to the rest of the record. Without this the
+ * list a buyer just ticked would blank out on each tick and come back a moment
+ * later, which reads as the setting having been lost.
+ *
+ * A read that cannot be narrowed drops the held copy rather than keeping it
+ * beside the error: a consent state the server may no longer hold is worse than
+ * no consent state at all.
+ */
+function useLastCompleteRead<T>(
+  state: AccountPanelState<unknown>,
+  narrow: (payload: unknown) => { ok: true; value: T } | { ok: false },
+): { shown: T | null; broken: boolean } {
+  const [shown, setShown] = useState<T | null>(null);
+  const [broken, setBroken] = useState(false);
+  const narrowRef = useRef(narrow);
+  narrowRef.current = narrow;
+
+  useEffect(() => {
+    if (state.status !== 'ready') return;
+    const result = narrowRef.current(state.data);
+    setBroken(!result.ok);
+    setShown(result.ok ? result.value : null);
+  }, [state]);
+
+  return { shown, broken };
+}
+
+/**
+ * What is known about the buyer's photo.
+ *
+ * `unread` is a third answer, not a spelling of "no photo". A `/me` that failed
+ * leaves this panel without an answer, and drawing initials there would tell a
+ * buyer who HAS a photo that they have none — while hiding the control that
+ * removes it. The absence of an answer is not evidence of absence.
+ */
+type AvatarState =
+  | { status: 'reading' }
+  | { status: 'known'; url: string | null }
+  | { status: 'unread' };
+
+function ProfileSection({
+  name,
+  email,
+  onSaved,
+}: {
+  name: string;
+  email: string;
+  onSaved: () => void;
+}) {
+  const nameId = useId();
+  const [value, setValue] = useState(name);
+  const [busy, setBusy] = useState(false);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [avatar, setAvatar] = useState<AvatarState>({ status: 'reading' });
+  const [avatarAttempt, setAvatarAttempt] = useState(0);
+  /** Set once a write has landed, so the mount read can no longer speak. */
+  const avatarSettled = useRef(false);
+  const [avatarBusy, setAvatarBusy] = useState<'upload' | 'remove' | null>(null);
+  const avatarUrl = avatar.status === 'known' ? avatar.url : null;
+  const fileInput = useRef<HTMLInputElement>(null);
+
+  /*
+   * The avatar lives on `/me`, NOT on the dashboard payload this panel is
+   * built from — the dashboard's customer object carries a name and an email
+   * and nothing else. Reading only the dashboard left every buyer who has a
+   * photo looking at their initials, with no way to remove the picture they
+   * had uploaded.
+   *
+   * Asked separately from the dashboard so that a slow or failed `/me` costs
+   * the avatar and nothing else: the name, the email, the preferences and the
+   * devices all still render.
+   */
+  useEffect(() => {
+    let live = true;
+    void callCustomerApi((sdk) => sdk.me()).then((result) => {
+      if (!live) return;
+
+      /*
+       * A slow `/me` must not undo a change the buyer already made. The file
+       * picker gives this read all the time it needs: the buyer opens it,
+       * chooses a photo, the upload lands — and this response, in flight since
+       * mount, would then put the OLD picture back on a screen that had
+       * already shown the new one. The mutation is the newer truth, so once
+       * one has landed this read has nothing left to say.
+       */
+      if (avatarSettled.current) return;
+
+      if (!result.success) {
+        // Said, not swallowed. `null` here would draw initials, which tells a
+        // buyer who HAS a photo that they have none — and hides the control
+        // that would let them remove it.
+        setAvatar({ status: 'unread' });
+        return;
+      }
+      setAvatar({ status: 'known', url: readAvatarUrl(result.data) });
+    });
+    return () => {
+      live = false;
+    };
+  }, [avatarAttempt]);
+
+  const save = async () => {
+    if (!isSaveableName(value)) {
+      setError(t('settings.nameTooShort'));
+      return;
+    }
+
+    setBusy(true);
+    setError(null);
+    setNotice(null);
+    const result = await callCustomerApi((sdk) => sdk.updateProfile({ name: value.trim() }));
+    setBusy(false);
+
+    if (!result.success) {
+      setError(result.message?.trim() || t('settings.profileFailed'));
+      return;
+    }
+
+    setNotice(t('settings.profileSaved'));
+    onSaved();
+  };
+
+  const uploadAvatar = async (file: File) => {
+    if (!isAcceptableAvatarSize(file.size)) {
+      // The producer refuses anything larger, but only after buffering it.
+      setError(t('settings.avatarTooLarge'));
+      return;
+    }
+
+    setAvatarBusy('upload');
+    setError(null);
+    setNotice(null);
+    const result = await callCustomerApi((sdk) => sdk.updateAvatar(file));
+    setAvatarBusy(null);
+
+    if (!result.success) {
+      setError(result.message?.trim() || t('settings.avatarFailed'));
+      return;
+    }
+
+    avatarSettled.current = true;
+    setAvatar({ status: 'known', url: readAvatarUrl(result.data) });
+  };
+
+  const removeAvatar = async () => {
+    setAvatarBusy('remove');
+    setError(null);
+    setNotice(null);
+    const result = await callCustomerApi((sdk) => sdk.removeAvatar());
+    setAvatarBusy(null);
+
+    if (!result.success) {
+      setError(result.message?.trim() || t('settings.avatarRemoveFailed'));
+      return;
+    }
+
+    avatarSettled.current = true;
+    setAvatar({ status: 'known', url: null });
+  };
+
+  return (
+    <section>
+      <AccountSectionTitle>{t('settings.profileTitle')}</AccountSectionTitle>
+
+      <AccountCard className="sxa:mt-4 sxa:p-6">
+        <div className="sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-4">
+          {avatarUrl ? (
+            <img
+              src={avatarUrl}
+              alt=""
+              className="sxa:h-16 sxa:w-16 sxa:rounded-full sxa:border sxa:object-cover"
+            />
+          ) : (
+            <div
+              aria-hidden="true"
+              className="sxa:flex sxa:h-16 sxa:w-16 sxa:items-center sxa:justify-center sxa:rounded-full sxa:border sxa:bg-bg sxa:text-h3 sxa:font-semibold"
+            >
+              {profileInitials(value, email)}
+            </div>
+          )}
+
+          <div className="sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-2">
+            {/*
+              The input is cleared before every upload so that re-picking the
+              same file still fires a change event — otherwise a failed upload
+              can never be retried with the same photo.
+            */}
+            <input
+              ref={fileInput}
+              type="file"
+              accept="image/*"
+              className="sxa:hidden"
+              onChange={(event) => {
+                const file = event.target.files?.[0];
+                event.target.value = '';
+                if (file) void uploadAvatar(file);
+              }}
+            />
+            <button
+              type="button"
+              disabled={avatarBusy !== null}
+              aria-busy={avatarBusy === 'upload' || undefined}
+              className="sx-account-button sxa:card-button sxa:card-button--add sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+              onClick={() => fileInput.current?.click()}
+            >
+              {avatarBusy === 'upload' ? t('settings.uploadingAvatar') : t('settings.uploadAvatar')}
+            </button>
+            {avatarUrl ? (
+              <button
+                type="button"
+                disabled={avatarBusy !== null}
+                aria-busy={avatarBusy === 'remove' || undefined}
+                className="sx-account-button sxa:card-button sxa:card-button--add sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+                onClick={() => void removeAvatar()}
+              >
+                {avatarBusy === 'remove' ? t('settings.removingAvatar') : t('settings.removeAvatar')}
+              </button>
+            ) : null}
+          </div>
+        </div>
+        {avatar.status === 'unread' ? (
+          <p role="alert" className="sxa:mt-3 sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-2 sxa:text-micro sxa:text-muted">
+            {t('common.notLoaded')}
+            <button
+              type="button"
+              onClick={() => {
+                setAvatar({ status: 'reading' });
+                setAvatarAttempt((attempt) => attempt + 1);
+              }}
+              className="sxa:underline sxa:underline-offset-2 sxa:transition-opacity sxa:hover:opacity-80"
+            >
+              {t('common.retry')}
+            </button>
+          </p>
+        ) : null}
+        <p className="sxa:mt-2 sxa:text-micro sxa:text-muted">{t('settings.avatarHint')}</p>
+
+        <form
+          noValidate
+          className="sxa:mt-6 sxa:border-t sxa:pt-6"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void save();
+          }}
+        >
+          <p className="sxa:text-small sxa:font-medium">{t('settings.emailLabel')}</p>
+          <p className="sxa:mt-1 sxa:truncate sxa:text-small sxa:text-muted">{email}</p>
+          <p className="sxa:mt-1 sxa:text-micro sxa:leading-relaxed sxa:text-muted">
+            {t('settings.emailNote')}
+          </p>
+
+          <label htmlFor={nameId} className="sxa:mt-5 sxa:mb-1.5 sxa:block sxa:text-small sxa:font-medium">
+            {t('settings.nameLabel')}
+          </label>
+          <input
+            id={nameId}
+            type="text"
+            value={value}
+            autoComplete="name"
+            disabled={busy}
+            aria-invalid={error ? true : undefined}
+            onChange={(event) => {
+              setValue(event.target.value);
+              setError(null);
+            }}
+            className={`${FIELD} sxa:max-w-md`}
+          />
+
+          {notice ? <AccountNotice message={notice} /> : null}
+          {error ? <AccountFieldError message={error} /> : null}
+
+          <button
+            type="submit"
+            disabled={busy}
+            aria-busy={busy || undefined}
+            className="sx-account-cta sxa:cta-button sxa:mt-5 sxa:inline-flex sxa:h-10 sxa:items-center sxa:px-5 sxa:text-small sxa:font-semibold sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+          >
+            {busy ? <BusySpinner className="sxa:mr-1.5" /> : null}
+            {busy ? t('settings.savingProfile') : t('settings.saveProfile')}
+          </button>
+        </form>
+      </AccountCard>
+    </section>
+  );
+}
+
+function EmailPreferencesSection() {
+  const { state, reload } = useAccountResource('email-preferences', () =>
+    callCustomerApi((sdk) => sdk.emailPreferences()));
+  const { shown, broken } = useLastCompleteRead<EmailPreferences>(state, (payload) => {
+    const narrowed = narrowEmailPreferences(payload);
+    return narrowed.ok ? { ok: true, value: narrowed.preferences } : { ok: false };
+  });
+  const [pendingKey, setPendingKey] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const heading = <AccountSectionTitle>{t('settings.emailsTitle')}</AccountSectionTitle>;
+
+  if (state.status === 'error' || broken) {
+    return (
+      <section>
+        {heading}
+        <div className="sxa:mt-4">
+          <AccountError
+            message={state.status === 'error' ? state.message : t('settings.emailsFailed')}
+            onRetry={reload}
+          />
+        </div>
+      </section>
+    );
+  }
+
+  if (shown === null) {
+    return (
+      <section>
+        {heading}
+        <p role="status" className="sxa:mt-4 sxa:text-small sxa:text-muted">
+          {t('settings.emailsLoading')}
+        </p>
+      </section>
+    );
+  }
+
+  const write = async (
+    key: string,
+    call: () => Promise<{ success: boolean; message?: string }>,
+  ) => {
+    setPendingKey(key);
+    setError(null);
+    const result = await call();
+    setPendingKey(null);
+
+    if (!result.success) {
+      setError(result.message?.trim() || t('settings.emailsSaveFailed'));
+      return;
+    }
+
+    // Re-read rather than flip the box locally: the producer decides what a
+    // change to one list does to the suppression record, and guessing that here
+    // would show a consent state the server does not hold.
+    reload();
+  };
+
+  return (
+    <section>
+      {heading}
+      <AccountCard className="sxa:mt-4 sxa:p-6">
+        {error ? <AccountFieldError message={error} /> : null}
+
+        <label className="sxa:flex sxa:items-start sxa:gap-3">
+          <input
+            type="checkbox"
+            checked={shown.global_unsubscribed}
+            disabled={pendingKey !== null}
+            className="sxa:mt-1 sxa:h-4 sxa:w-4 sxa:shrink-0"
+            onChange={(event) => void write('global', () => callCustomerApi((sdk) =>
+              sdk.updateEmailPreferences({ global_unsubscribed: event.target.checked })))}
+          />
+          <span className="sxa:min-w-0">
+            <span className="sxa:block sxa:text-small sxa:font-medium">{t('settings.unsubscribeAll')}</span>
+            <span className="sxa:mt-1 sxa:block sxa:text-micro sxa:text-muted">
+              {t('settings.unsubscribeAllNote')}
+            </span>
+          </span>
+        </label>
+
+        <div className="sxa:mt-5 sxa:space-y-4 sxa:border-t sxa:pt-4">
+          {shown.lists.length === 0 ? (
+            <p className="sxa:text-small sxa:text-muted">{t('settings.listsEmpty')}</p>
+          ) : (
+            shown.lists.map((list) => (
+              <label key={list.id} className="sxa:flex sxa:items-start sxa:gap-3">
+                <input
+                  type="checkbox"
+                  checked={list.subscribed}
+                  disabled={pendingKey !== null}
+                  className="sxa:mt-1 sxa:h-4 sxa:w-4 sxa:shrink-0"
+                  onChange={(event) => void write(list.id, () => callCustomerApi((sdk) =>
+                    sdk.updateEmailPreferences({
+                      list_subscriptions: [{ list_id: list.id, subscribed: event.target.checked }],
+                    })))}
+                />
+                <span className="sxa:min-w-0">
+                  <span className="sxa:block sxa:text-small sxa:font-medium">{list.name}</span>
+                  {list.description ? (
+                    <span className="sxa:mt-1 sxa:block sxa:text-micro sxa:text-muted">{list.description}</span>
+                  ) : null}
+                </span>
+              </label>
+            ))
+          )}
+        </div>
+      </AccountCard>
+    </section>
+  );
+}
+
+function DevicesSection() {
+  const { state, reload } = useAccountResource('sessions', () =>
+    callCustomerApi((sdk) => sdk.sessions()));
+  const { shown, broken } = useLastCompleteRead<CustomerSession[]>(state, (payload) => {
+    const narrowed = narrowCustomerSessions(payload);
+    return narrowed.ok ? { ok: true, value: narrowed.sessions } : { ok: false };
+  });
+  /**
+   * Which row is currently asking. One value for the whole section, so opening
+   * a second question closes the first — two armed rows beside each other is
+   * how the wrong device gets signed out.
+   */
+  const [armed, setArmed] = useState<string | null>(null);
+  const [pendingId, setPendingId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+
+  const heading = <AccountSectionTitle>{t('settings.devicesTitle')}</AccountSectionTitle>;
+
+  if (state.status === 'error' || broken) {
+    return (
+      <section>
+        {heading}
+        <div className="sxa:mt-4">
+          <AccountError
+            message={state.status === 'error' ? state.message : t('settings.devicesFailed')}
+            onRetry={reload}
+          />
+        </div>
+      </section>
+    );
+  }
+
+  if (shown === null) {
+    return (
+      <section>
+        {heading}
+        <p role="status" className="sxa:mt-4 sxa:text-small sxa:text-muted">
+          {t('settings.devicesLoading')}
+        </p>
+      </section>
+    );
+  }
+
+  const revoke = async (
+    id: string,
+    call: () => Promise<{ success: boolean; message?: string }>,
+    done: string | null,
+  ) => {
+    setPendingId(id);
+    setError(null);
+    setNotice(null);
+    const result = await call();
+    setPendingId(null);
+
+    if (!result.success) {
+      setError(result.message?.trim() || t('settings.signOutDeviceFailed'));
+      return;
+    }
+
+    setArmed(null);
+    if (done) setNotice(done);
+    reload();
+  };
+
+  return (
+    <section>
+      {heading}
+      <div className="sxa:mt-4 sxa:space-y-3">
+        {error ? <AccountError message={error} /> : null}
+        {notice ? <AccountNotice message={notice} /> : null}
+
+        {shown.length === 0 ? (
+          <p className="sxa:text-small sxa:text-muted">{t('settings.devicesEmpty')}</p>
+        ) : (
+          <ul className="sxa:space-y-3">
+            {shown.map((session) => (
+              <li
+                key={session.id}
+                className="sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-4 sxa:rounded-input sxa:border sxa:bg-surface sxa:p-5 sxa:shadow-card"
+              >
+                <div className="sxa:min-w-0 sxa:flex-1">
+                  <p className="sxa:truncate sxa:text-small sxa:font-medium">
+                    {deviceLabel(session)}
+                    {session.current ? (
+                      <span className="sxa:ml-2 sxa:text-micro sxa:font-normal sxa:text-muted">
+                        {t('settings.thisDevice')}
+                      </span>
+                    ) : null}
+                  </p>
+                  <p className="sxa:mt-1 sxa:truncate sxa:text-micro sxa:text-muted">
+                    {session.ip_address ?? t('common.unavailable')}
+                    {' · '}
+                    {t('settings.signedInOn', {
+                      date: formatAccountDateTime(session.created_at),
+                    })}
+                  </p>
+                </div>
+
+                {/* The session making this request is never offered a sign-out
+                    of its own: the account shell's own control does that. */}
+                {session.current ? null : armed === session.id ? (
+                  <ConfirmPair
+                    busy={pendingId === session.id}
+                    disabled={pendingId !== null}
+                    confirmLabel={t('settings.signOutDevice')}
+                    busyLabel={t('settings.signingOutDevice')}
+                    onConfirm={() => void revoke(
+                      session.id,
+                      () => callCustomerApi((sdk) => sdk.revokeSession(session.id)),
+                      null,
+                    )}
+                    onCancel={() => setArmed(null)}
+                  />
+                ) : (
+                  <button
+                    type="button"
+                    disabled={pendingId !== null}
+                    className="sx-account-button sxa:card-button sxa:card-button--add sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+                    onClick={() => setArmed(session.id)}
+                  >
+                    {t('settings.signOutDevice')}
+                  </button>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {hasOtherSessions(shown) ? (
+          armed === 'others' ? (
+            <ConfirmPair
+              busy={pendingId === 'others'}
+              disabled={pendingId !== null}
+              confirmLabel={t('settings.signOutOthers')}
+              busyLabel={t('settings.signingOutDevice')}
+              onConfirm={() => void revoke(
+                'others',
+                () => callCustomerApi((sdk) => sdk.revokeAllSessions()),
+                t('settings.signOutOthersDone'),
+              )}
+              onCancel={() => setArmed(null)}
+            />
+          ) : (
+            <button
+              type="button"
+              disabled={pendingId !== null}
+              className="sx-account-button sxa:card-button sxa:card-button--add sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+              onClick={() => setArmed('others')}
+            >
+              {t('settings.signOutOthers')}
+            </button>
+          )
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+/**
+ * The second half of an armed control: commit, or step back.
+ *
+ * Signing a device out cannot be undone by the buyer — the device has to sign
+ * in again — so the plain button is only ever the question, and this pair is
+ * the answer.
+ */
+export function ConfirmPair({
+  busy,
+  disabled,
+  confirmLabel,
+  busyLabel,
+  onConfirm,
+  onCancel,
+}: {
+  busy: boolean;
+  disabled: boolean;
+  confirmLabel: string;
+  busyLabel: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  return (
+    <div className="sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-2">
+      <button
+        type="button"
+        disabled={disabled}
+        aria-busy={busy || undefined}
+        className="sx-account-cta sxa:cta-button sxa:inline-flex sxa:h-9 sxa:items-center sxa:px-4 sxa:text-small sxa:font-semibold sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+        onClick={onConfirm}
+      >
+        {busy ? <BusySpinner className="sxa:mr-1.5" /> : null}
+        {busy ? busyLabel : confirmLabel}
+      </button>
+      <button
+        type="button"
+        disabled={disabled}
+        className="sx-account-button sxa:card-button sxa:card-button--add sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+        onClick={onCancel}
+      >
+        {t('subscriptions.keep')}
+      </button>
+    </div>
+  );
+}
+
+function deviceLabel(session: CustomerSession): string {
+  const described = describeUserAgent(session.user_agent);
+  if (!described) return t('settings.unknownDevice');
+  if (!described.os) return described.browser;
+  return t('settings.deviceOn', { browser: described.browser, os: described.os });
+}
+
+/**
+ * The avatar URL the producer answered with, or null when it sent none.
+ *
+ * Checked before it is rendered for the same reason a delivery link is: it is
+ * a URL this template did not write, and the check is one call away.
+ */
+function readAvatarUrl(data: unknown): string | null {
+  if (typeof data !== 'object' || data === null) return null;
+  const url = (data as { avatar_url?: unknown }).avatar_url;
+  return typeof url === 'string' ? safeExternalHref(url) : null;
+}