orionplace-nuxt 0.1.2 → 0.2.0

package/templates/app/components/orionplace/account/ProfileDeleteAccount.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+  import { computed, reactive, ref, useId, watch } from 'vue';
+  import { useOrionplaceStore } from '@/stores/orionplace';
+  import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
+  import { profileLabels } from '@/utils/orionplace/profileLabels';
+  import OrionplacePasswordInput from '@/components/orionplace/shared/OrionplacePasswordInput.vue';
+  import type {
+    IStorefrontProfileState,
+    IStorefrontProfileAction,
+  } from '@/interfaces/orionplace/accounts/IStorefrontProfile';
+
+  const props          = defineProps<{ state: IStorefrontProfileState }>();
+  const emit           = defineEmits<{ request: [value: IStorefrontProfileAction] }>();
+  const store          = useOrionplaceStore();
+  const selectionStore = useOrionplaceSelectionsStore();
+  const copy           = computed(() => profileLabels(selectionStore.localeCode));
+  const busy           = computed(
+    () => Boolean(props.state.pending) || !props.state.loaded,
+  );
+  const inputId        = useId();
+  const hasPassword    = computed(() => Boolean(store.profile?.password));
+  const fields         = reactive({ password: '', confirm: false });
+  // The shared error belongs to this card only after its own request. A
+  // refusal such as an open order has no field, so it shows above the button.
+  const sent           = ref(false);
+  const error          = computed(() => {
+    const errors = props.state.errors;
+
+    if (!sent.value || props.state.pending || errors.password || errors.confirm) {
+      return '';
+    }
+    return errors.__all__ || props.state.error;
+  });
+  const ready          = computed(
+    () => fields.confirm && (!hasPassword.value || Boolean(fields.password)),
+  );
+
+  watch(
+    () => props.state.pending,
+    (pending) => {
+      if (pending && pending !== 'delete-account') {
+        sent.value = false;
+      }
+    },
+  );
+  function submit() {
+    if (busy.value || !ready.value) {
+      return;
+    }
+    sent.value = true;
+    emit('request', {
+      action: 'delete-account',
+      data: {
+        confirm: true,
+        ...(hasPassword.value ? { password: fields.password } : {}),
+      },
+    });
+  }
+</script>
+<template>
+  <form
+    class="orionplace-profile-ui op-section op-delete"
+    @submit.prevent="submit"
+    :aria-busy="state.pending === 'delete-account'"
+  >
+    <header class="op-section-head">
+      <span
+        class="op-section-icon"
+        aria-hidden="true"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3" />
+        </svg>
+      </span>
+      <div class="op-section-title">
+        <h2>{{ copy.deleteTitle }}</h2>
+        <p>{{ copy.deleteHint }}</p>
+      </div>
+    </header>
+    <div class="op-section-body op-fields">
+      <p class="op-wide">{{ copy.deleteBlocked }}</p>
+      <div
+        v-if="hasPassword"
+        class="op-field"
+      >
+        <label :for="`${inputId}-password`">
+          <span>
+            {{ copy.password }}
+            <span
+              class="op-required"
+              aria-hidden="true"
+            >*</span>
+          </span>
+        </label>
+        <OrionplacePasswordInput
+          :id="`${inputId}-password`"
+          v-model="fields.password"
+          name="password"
+          autocomplete="current-password"
+          required
+          :disabled="busy"
+          :show-label="copy.showPassword"
+          :hide-label="copy.hidePassword"
+          :aria-invalid="Boolean(state.errors.password)"
+          :aria-describedby="`${inputId}-password-error`"
+        />
+        <small
+          :id="`${inputId}-password-error`"
+          class="op-error"
+        >
+          {{ state.errors.password }}
+        </small>
+      </div>
+      <div class="op-wide">
+        <label class="op-consent">
+          <input
+            v-model="fields.confirm"
+            type="checkbox"
+            name="confirm"
+            required
+            :disabled="busy"
+            :aria-invalid="Boolean(state.errors.confirm)"
+            :aria-describedby="`${inputId}-confirm-error`"
+          >
+          <span>{{ copy.deleteConfirm }}</span>
+        </label>
+        <small
+          :id="`${inputId}-confirm-error`"
+          class="op-error"
+        >
+          {{ state.errors.confirm }}
+        </small>
+      </div>
+      <p
+        v-if="error"
+        class="op-wide op-error op-delete-error"
+        role="alert"
+      >
+        {{ error }}
+      </p>
+    </div>
+    <footer class="op-section-foot">
+      <button
+        type="submit"
+        class="op-danger"
+        :disabled="busy || !ready"
+      >
+        {{ state.pending === 'delete-account' ? copy.deleting : copy.deleteAction }}
+      </button>
+    </footer>
+  </form>
+</template>
+
+<style src="./profile.css"></style>

package/templates/app/components/orionplace/account/ProfileDetailsForm.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+  import { computed, reactive, watch } from 'vue';
+  import { useOrionplaceStore } from '@/stores/orionplace';
+  import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
+  import { profileLabels } from '@/utils/orionplace/profileLabels';
+  import type {
+    IStorefrontProfileState,
+    IStorefrontProfileAction,
+  } from '@/interfaces/orionplace/accounts/IStorefrontProfile';
+  import { profileDate } from '@/utils/orionplace/profile';
+
+  const props          = defineProps<{ state: IStorefrontProfileState }>();
+  const emit           = defineEmits<{ request: [value: IStorefrontProfileAction] }>();
+  const store          = useOrionplaceStore();
+  const selectionStore = useOrionplaceSelectionsStore();
+  const copy           = computed(() => profileLabels(selectionStore.localeCode));
+  const busy           = computed(
+    () => Boolean(props.state.pending) || !props.state.loaded,
+  );
+
+  const fields  = reactive({ first_name: '', last_name: '', dob: '' });
+  watch(
+    [
+      () => store.profile?.id,
+      () => store.profile?.first_name,
+      () => store.profile?.last_name,
+      () => store.profile?.dob,
+    ],
+    synchronize,
+    { immediate: true },
+  );
+  function synchronize() {
+    fields.first_name = store.profile?.first_name ?? '';
+    fields.last_name  = store.profile?.last_name ?? '';
+    fields.dob        = profileDate(store.profile?.dob);
+  }
+  watch(
+    () => props.state.saved,
+    () => {
+      if (props.state.message === 'details') {
+        synchronize();
+      }
+    },
+  );
+  const changed = computed(
+    () =>
+      fields.first_name !== store.profile?.first_name ||
+      fields.last_name !== store.profile?.last_name ||
+      fields.dob !== profileDate(store.profile?.dob),
+  );
+  function submit() {
+    if (busy.value || !changed.value) {
+      return;
+    }
+    emit('request', {
+      action: 'details',
+      data: {
+        first_name: fields.first_name.trim(),
+        last_name: fields.last_name.trim(),
+        dob: fields.dob,
+      },
+    });
+  }
+</script>
+<template>
+  <form
+    class="orionplace-profile-ui op-section"
+    @submit.prevent="submit"
+    :aria-busy="state.pending === 'details'"
+  >
+    <header class="op-section-head">
+      <span
+        class="op-section-icon"
+        aria-hidden="true"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM4 21a8 8 0 0 1 16 0" />
+        </svg>
+      </span>
+      <div class="op-section-title">
+        <h2>{{ copy.details }}</h2>
+        <p>{{ copy.detailsHint }}</p>
+      </div>
+    </header>
+    <div class="op-section-body op-fields">
+      <label>
+        <span>
+          {{ copy.firstName }}
+          <span
+            class="op-required"
+            aria-hidden="true"
+          >*</span>
+        </span>
+        <input
+          v-model="fields.first_name"
+          name="first_name"
+          autocomplete="given-name"
+          required
+          minlength="2"
+          :disabled="busy"
+          :aria-invalid="Boolean(state.errors.first_name)"
+        />
+        <small class="op-error">
+          {{ state.errors.first_name }}
+        </small>
+      </label>
+      <label>
+        <span>
+          {{ copy.lastName }}
+          <span
+            class="op-required"
+            aria-hidden="true"
+          >*</span>
+        </span>
+        <input
+          v-model="fields.last_name"
+          name="last_name"
+          autocomplete="family-name"
+          required
+          minlength="2"
+          :disabled="busy"
+          :aria-invalid="Boolean(state.errors.last_name)"
+        />
+        <small class="op-error">
+          {{ state.errors.last_name }}
+        </small>
+      </label>
+      <label>
+        {{ copy.phone }}
+        <input
+          :value="store.profile?.phone"
+          type="tel"
+          autocomplete="tel"
+          readonly
+        />
+        <small>{{ copy.phoneHint }}</small>
+      </label>
+      <label>
+        {{ copy.dob }}
+        <input
+          v-model="fields.dob"
+          name="dob"
+          type="date"
+          autocomplete="bday"
+          :disabled="busy"
+          :aria-invalid="Boolean(state.errors.dob)"
+        />
+        <small class="op-error">
+          {{ state.errors.dob }}
+        </small>
+      </label>
+    </div>
+    <footer class="op-section-foot">
+      <button
+        class="op-primary"
+        type="submit"
+        :disabled="busy || !changed"
+      >
+        {{ state.pending === 'details' ? copy.pending : copy.save }}
+      </button>
+    </footer>
+  </form>
+</template>
+
+<style src="./profile.css"></style>

package/templates/app/components/orionplace/account/ProfileEmailSettings.vue

@@ -0,0 +1,269 @@
+<script setup lang="ts">
+  import { computed, ref, watch } from 'vue';
+  import { useOrionplaceStore } from '@/stores/orionplace';
+  import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
+  import { profileLabels } from '@/utils/orionplace/profileLabels';
+  import type {
+    IStorefrontProfileState,
+    IStorefrontProfileAction,
+  } from '@/interfaces/orionplace/accounts/IStorefrontProfile';
+  import { getAvailableNestedValueFromObject } from '@/utils/orionplace/presentation';
+  import OrionplaceSelect from '@/components/orionplace/shared/OrionplaceSelect.vue';
+
+  const props   = withDefaults(
+    defineProps<{
+      state: IStorefrontProfileState;
+      preferences?: boolean;
+    }>(),
+    { preferences: true },
+  );
+  const emit           = defineEmits<{ request: [value: IStorefrontProfileAction] }>();
+  const store          = useOrionplaceStore();
+  const selectionStore = useOrionplaceSelectionsStore();
+  const copy           = computed(() => profileLabels(selectionStore.localeCode));
+  const busy           = computed(
+    () => Boolean(props.state.pending) || !props.state.loaded,
+  );
+
+  const email   = ref(store.profile?.email ?? '');
+  const code    = ref('');
+  const editing = ref(false);
+  const locale  = ref(props.state.notificationLocale);
+  const options = computed(() => ({
+    '': copy.value.chooseLocale,
+    ...Object.fromEntries(
+      Object.entries(selectionStore.locales).map(([key, item]) => [
+        item.code || key,
+        getAvailableNestedValueFromObject(
+          item.locale,
+          selectionStore.localeCode,
+          'name',
+        ) ||
+          item.human_name ||
+          key,
+      ]),
+    ),
+  }));
+  watch(
+    () => store.profile?.email,
+    (value) => {
+      if (props.state.emailStep === 'step_email') {
+        email.value = value ?? '';
+      }
+    },
+  );
+  watch(
+    () => props.state.notificationLocale,
+    (value) => {
+      locale.value = value;
+    },
+  );
+  watch(
+    () => props.state.pending,
+    (value) => {
+      if (!value) {
+        locale.value = props.state.notificationLocale;
+      }
+    },
+  );
+  watch(
+    () => props.state.saved,
+    () => {
+      if (
+        props.state.message === 'email' &&
+        props.state.emailStep === 'step_email'
+      ) {
+        email.value   = store.profile?.email ?? '';
+        code.value    = '';
+        editing.value = false;
+      }
+    },
+  );
+  function submit() {
+    if (busy.value) {
+      return;
+    }
+    const step    = editing.value ? 'step_email' : props.state.emailStep;
+    emit('request', {
+      action: 'email',
+      data:
+        step === 'step_email'
+          ? { step, email: email.value }
+          : { step, code: code.value },
+    });
+    editing.value = false;
+  }
+  function notifications(event: Event) {
+    const field   = event.target as HTMLInputElement;
+    const enabled = field.checked;
+    field.checked = Boolean(store.profile?.notifications_enabled);
+    if (!busy.value) {
+      emit('request', { action: 'notifications', data: { enabled } });
+    }
+  }
+</script>
+<template>
+  <section class="orionplace-profile-ui op-section">
+    <header class="op-section-head">
+      <span
+        class="op-section-icon"
+        aria-hidden="true"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M3 6h18v12H3zM3 7l9 6 9-6" />
+        </svg>
+      </span>
+      <div class="op-section-title">
+        <h2>{{ copy.emailTitle }}</h2>
+        <p>{{ copy.emailHint }}</p>
+      </div>
+    </header>
+    <form
+      class="op-section-body op-email-form"
+      @submit.prevent="submit"
+    >
+      <label>
+        <span>
+          {{ copy.email }}
+          <span
+            class="op-required"
+            aria-hidden="true"
+          >
+            *
+          </span>
+        </span>
+        <input
+          v-model="email"
+          name="email"
+          type="email"
+          autocomplete="email"
+          required
+          :readonly="state.emailStep === 'step_email_code' && !editing"
+          :disabled="busy"
+        />
+        <small class="op-error">
+          {{ state.errors.email }}
+        </small>
+      </label>
+      <label v-if="state.emailStep === 'step_email_code' && !editing">
+        <span>
+          {{ copy.code }}
+          <span
+            class="op-required"
+            aria-hidden="true"
+          >
+            *
+          </span>
+        </span>
+        <input
+          v-model="code"
+          name="code"
+          inputmode="numeric"
+          autocomplete="one-time-code"
+          required
+          pattern="[0-9]{4}"
+          maxlength="4"
+          :disabled="busy"
+        />
+        <small class="op-error">
+          {{ state.errors.code }}
+        </small>
+      </label>
+      <div class="op-actions">
+        <button
+          class="op-primary"
+          type="submit"
+          :disabled="
+            busy ||
+            (!editing &&
+              state.emailStep === 'step_email' &&
+              email === store.profile?.email)
+          "
+          :aria-label="
+            state.emailStep === 'step_email_code' && !editing
+              ? undefined
+              : copy.sendCodeHint
+          "
+        >
+          {{
+            state.emailStep === 'step_email_code' && !editing
+              ? copy.verify
+              : copy.sendCode
+          }}
+        </button>
+        <template v-if="state.emailStep === 'step_email_code' && !editing">
+          <button
+            type="button"
+            :disabled="busy"
+            :aria-label="copy.resendHint"
+            @click="
+              emit('request', {
+                action: 'email',
+                data: { step: 'step_email', email },
+              })
+            "
+          >
+            {{ copy.resend }}
+          </button>
+          <button
+            type="button"
+            :disabled="busy"
+            :aria-label="copy.changeEmailHint"
+            @click="
+              editing = true;
+              code = '';
+            "
+          >
+            {{ copy.changeEmail }}
+          </button>
+        </template>
+      </div>
+    </form>
+    <div
+      v-if="preferences"
+      class="op-section-body op-preferences"
+    >
+      <label class="op-switch">
+        <span class="op-switch-copy">
+          <strong>{{ copy.notifications }}</strong>
+          <small>{{ copy.notificationsHint }}</small>
+        </span>
+        <input
+          type="checkbox"
+          :checked="store.profile?.notifications_enabled"
+          :disabled="busy || !store.profile?.email"
+          @change="notifications"
+        />
+        <span
+          class="op-switch-track"
+          aria-hidden="true"
+        />
+      </label>
+      <OrionplaceSelect
+        v-model="locale"
+        :options="options"
+        :label="copy.notificationLocale"
+        :disabled="busy"
+        @change="
+          $event &&
+          emit('request', {
+            action: 'notification-locale',
+            data: { email_notification_locale: $event },
+          })
+        "
+      />
+      <small class="op-error">
+        {{ state.errors.email_notification_locale }}
+      </small>
+    </div>
+  </section>
+</template>
+
+<style src="./profile.css"></style>