feat(com-pwa): sing-in process

Co-authored-by: Mohammad Honarvar <honarvar.info@gmail.com>

core/type/src/customer-order-management.ts

@@ -1,3 +1,5 @@
+import {User} from './user.js';
+
 import type {MultiLangStringObj} from './i18n.js';
 import type {Photo} from './photo.js';
 import type {AlwatrDocumentObject} from './storage.js';
@@ -142,6 +144,16 @@ export interface OrderShippingInfo extends StringifyableRecord {
   timePeriod: (typeof timePeriodCS)[number];
 }
 
+export interface ComUser extends User {
+  shopName: string;
+  tel: string;
+  province: string;
+  city: string;
+  address: string;
+  postalCode: string;
+  description?: string;
+}
+
 // -- Schema --
 
 export const orderInfoSchema = {

uniquely/com-pwa/res/config.js

@@ -1,6 +1,7 @@
 window.appConfig = {
   api: 'https://order.soffit.co/api/v0',
-  cdn: 'https://order.soffit.co/cdn/',
+  cdn: 'https://order.soffit.co/cdn',
+  authApi: 'https://order.soffit.co/auth',
   token: '3584fd6c82b5b76568a7f770846be94af9b7a879eb2274f2c0121ccc58d112ee',
   productStorageList: ['tile'],
 };

uniquely/com-pwa/src/config.ts

@@ -5,6 +5,7 @@ const token = getConfKey<string>('token');
 export const config = {
   api: getConfKey<string>('api'),
   cdn: getConfKey<string>('cdn'),
+  authApi: getConfKey<string>('authApi'),
   token,
   productStorageList: getConfKey<Array<string>>('productStorageList'),
   priceListName: '${productStorage}-market-ir',

uniquely/com-pwa/src/content/l18e-fa.json

@@ -42,6 +42,8 @@
 
     "page_order_tracking_headline": "پیگیری سفارش",
 
+    "page_sing_in_headline": "ورود",
+
     "order_status_box_headline": "سفارش ${orderId}",
     "order_status_box_headline_new": "سفارش جدید",
     "order_status_box_status": "وضعیت سفارش",

uniquely/com-pwa/src/manager/context-provider/user.ts

@@ -1,8 +1,20 @@
-import {contextProvider} from '@alwatr/context';
-import {User} from '@alwatr/type';
-import {getLocalStorageItem} from '@alwatr/util';
-
-contextProvider.setValue<User>('user_context', getLocalStorageItem('user_context', {
-  id: 'demo-123',
-  fullName: 'Demo User',
-}));
+import {serverContextConsumer} from '@alwatr/context';
+
+import {config} from '../../config.js';
+
+import type {AlwatrDocumentStorage} from '@alwatr/type';
+import type {ComUser} from '@alwatr/type/customer-order-management.js';
+
+export const userStorageContextConsumer = serverContextConsumer<AlwatrDocumentStorage<ComUser>>(
+    'user_storage_context',
+    {
+      ...config.fetchContextOptions,
+      url: config.authApi,
+    },
+);
+
+export const signIn = (userId: string, token: string): void => {
+  userStorageContextConsumer.request({
+    url: `${config.authApi}/${userId}-${token}`,
+  });
+};

uniquely/com-pwa/src/ui/page/sign-in.ts

@@ -0,0 +1,150 @@
+import {
+  AlwatrBaseElement,
+  PropertyValues,
+  SignalMixin,
+  UnresolvedMixin,
+  css,
+  customElement,
+  html,
+  state,
+} from '@alwatr/element';
+import {message} from '@alwatr/i18n';
+import '@alwatr/ui-kit/card/icon-box.js';
+import '@alwatr/ui-kit/text-field/text-field.js';
+
+import {buttons} from '../../manager/buttons.js';
+import {userStorageContextConsumer} from '../../manager/context-provider/user.js';
+import {topAppBarContextProvider} from '../../manager/context.js';
+
+import type {ButtonContent} from '@alwatr/ui-kit/button/button.js';
+import type {IconBoxContent} from '@alwatr/ui-kit/src/card/icon-box.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'alwatr-page-login': AlwatrPageLogin;
+  }
+}
+
+/**
+ * Alwatr Login Page
+ */
+@customElement('alwatr-page-sing-in')
+export class AlwatrPageLogin extends UnresolvedMixin(SignalMixin(AlwatrBaseElement)) {
+  static override styles = css`
+    :host {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-content: center;
+      min-height: 100%;
+      width: 100%;
+      padding: calc(2 * var(--sys-spacing-track));
+      gap: var(--sys-spacing-track);
+    }
+
+    alwatr-surface {
+      --_surface-color-on: var(--sys-color-on-surface-variant-hsl);
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      gap: var(--sys-spacing-track);
+    }
+
+    alwatr-text-field {
+      width: 100%;
+    }
+  `;
+
+  @state()
+    gotState = userStorageContextConsumer.getState().target;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    topAppBarContextProvider.setValue({headlineKey: 'sign_in_headline'});
+
+    // prettier-ignore
+    this._addSignalListeners(userStorageContextConsumer.subscribe(() => {
+      this.gotState = userStorageContextConsumer.getState().target;
+    }, {receivePrevious: 'NextCycle'}));
+  }
+
+  protected override update(changedProperties: PropertyValues<this>): void {
+    super.update(changedProperties);
+    if (changedProperties.has('gotState')) {
+      this.setAttribute('state', this.gotState);
+    }
+  }
+
+
+  override render(): unknown {
+    this._logger.logMethod?.('render');
+
+    // return userStorageContextConsumer.fsm.render({
+    //   ''
+    // });
+  }
+
+  protected _renderStateForm = (): unknown => {
+    const loginButtonContent: ButtonContent = {
+      labelKey: 'page_login_submit',
+      icon: 'checkmark-outline',
+      clickSignalId: 'login_submit_click_event',
+    };
+
+    return html`
+      <alwatr-surface tinted>
+        <alwatr-text-field
+          .name=${'phoneNumber'}
+          .type=${'tel'}
+          .placeholder=${'page_login_phone_number_placeholder'}
+          outlined
+          active-outline
+          stated
+        ></alwatr-text-field>
+        <alwatr-text-field
+          .name=${'token'}
+          .type=${'password'}
+          .placeholder=${'page_login_password_placeholder'}
+          outlined
+          active-outline
+          stated
+        ></alwatr-text-field>
+      </alwatr-surface>
+      <div>
+        <alwatr-button .content=${loginButtonContent}></alwatr-button>
+      </div>
+    `;
+  };
+
+  protected _renderStateLogin(): unknown {
+    this._logger.logMethod?.('_render_login');
+
+    const content: IconBoxContent = {
+      headline: message('page_login_login_message'),
+      icon: 'cloud-upload-outline',
+      tinted: 1,
+    };
+    return html`<alwatr-icon-box .content=${content}></alwatr-icon-box>`;
+  }
+
+  protected _renderStateLoginFailed(): unknown {
+    this._logger.logMethod?.('_render_login_failed');
+
+    const content: IconBoxContent = {
+      headline: message('page_order_login_failed_message'),
+      icon: 'cloud-offline-outline',
+      tinted: 1,
+    };
+    return html`
+      <alwatr-icon-box .content=${content}></alwatr-icon-box>
+      <div>
+        <alwatr-button .content=${buttons.retry}></alwatr-button>
+      </div>
+    `;
+  }
+}