feat(keep-pwa): product page (#1202)

cloud/alwatr/keep/compose.yml

@@ -104,3 +104,38 @@ services:
       traefik.frontend.rule: Host:${DOMAIN}; PathPrefix:/api/v0/form/
       traefik.frontend.entryPoints: http, https
       traefik.frontend.redirect.entryPoint: https
+
+  cdn:
+    image: ghcr.io/alimd/nginx:${CDN_VERSION}
+
+    cpu_count: 1
+    cpu_shares: 1024
+    mem_limit: 256m
+
+    restart: unless-stopped
+
+    networks:
+      alwatr-public-network:
+
+    environment:
+      - NGINX_ACCESS_LOG=${CDN_ACCESS_LOG:-off}
+
+    volumes:
+      - type: bind
+        source: ./_data/cdn
+        target: /var/www/html/cdn
+        bind:
+          create_host_path: true
+
+    logging:
+      driver: json-file
+      options:
+        max-size: '10m'
+        max-file: '2'
+
+    labels:
+      traefik.enable: true
+      traefik.port: 80
+      traefik.frontend.rule: Host:${DOMAIN}; PathPrefix:/cdn/
+      traefik.frontend.entryPoints: http, https
+      traefik.frontend.redirect.entryPoint: https

cloud/alwatr/keep/env/keep-beta.env

@@ -1,11 +1,13 @@
-U2FsdGVkX185BxaW3WchKkEJMHXAhXV4Z12U+dvZOvD3JYeMf7wgfi2cekkFWq6H
-nMFD/dSciHQ1dDkIVpjoOlkr+vlU0+TxFX13hCjZqwov8lrYLlHG4X8pLaELriBH
-SR1vwuw7j5VMHRfgrh7FKgyI0xDZydq0XPStICdFuh5orNgjDOZc8nyoTxq7iWV9
-waJxKqRe+yPT5pHX3fpB4N0DwY9xfBQ6VztOaP6MB3BEQKV5n4Um6YalF8GSOULV
-lNbMxwA2laQTltJzN1KSCEtlTCbZkr5epUGM0AlB/aN9fcWV+x299gj29KaJkHgo
-O8x7nhvAsFYhmEUVpIorUNcEu4jGxKHkUDOZY6k8KKjrX6ieI9tdj/waPqd+AGv1
-3CxPnXB843Zvp7cQ7J/fLvfXXnO6PkXUyAhpr10TveUdx8+OIkvzp3pj9pW3ATJm
-/ox3KKbXvAUzAkFAnCERuoh6x5HWARoFUV2wzZA4TJXCqT7nnA6Wz17LY5SD+aHF
-wDZFqyfwSmxVKEq+i/uu0+21NgDUoC+WXG+NBfTTznq5ZxHRpZ1YOTOJFtwQLqDv
-FQ3rCwgJ18ATB6jeLsJ8VbR3gdiu2hb0XdvCijLRxgADQ2hKiMKYEAAT/piz3rFH
-tWFqbZ+9ZWfJDaIRYBDWduKZ6bituXjtzKW6Gr12PQiyC30JVxBvdq8X82e+oJ+H
+U2FsdGVkX19CMnOE6hyCgHsbGjyTKXzAX7I4d68iExuxhbWs6rVFLt4JCBC7zJ1Q
+S4WPsk3Y/ULKcjcmUjRcw5n65si1CAdnOEYV7sQNXa3kHCa0YrGF/SmBWf8tUrvu
+ho2EmqvLQUm3Ogdj9K/MBTY2L5pxOypdU8+mRP6zvrGtxM//q+I6SOg72TouHNwb
+pf1VkXyB7eGwJTnFPrBadqEHHn6Wg7LmhpdfErxU2os1d30lk0elzQowm0T5dODL
+vBpblC6s6V6XaL0gziqXw2V/LZaL++BQziSI5+V+cF18/G6ghR1Qzdm0wTRzHa/E
+svs8KZuh7Gb17RCykKQ8oJ8yvf6YWIxVRmaxtO1xhpRw6xRSMN7dxiyizBXiK6pa
+AQORte5lY2KPcTtCmsTRIlb3oJvYTufMys6SF1F9dL2T1Mu8ncXWnwuXqRWwNzXz
+Spr3zvjz9/laHAXR/DidA3+ALs9u8E5Edox4p/eYHQBRi9WDkW1+3TF/7o404Oc6
+7p58MpbhqLkzQZXDWl6WBhwq1AFjLm5/Asj4qgWZsV9KA1lBNEi3RcMoq0JHEmIf
+qIkhglY8cc83uOak/xRZIxiSVLrLQ1n7Mpc2FmppCuGaVUu4i82KKw3gsgMa73vU
+cWtvVX8Dgia8WKdI1Oig7hDtBCmwmUhlSWJvLdeP1y6Nq2S3yHBXXeGU1ENJnUfS
+6ZU4ppQwdueRk4ICOsEL1lX7wN3qq1coKdTYaGV0IV33KxeCjhO5A3NipnrjY+vV
+FTHp+nYPYy3Su/ZbpNPtSg==

cloud/alwatr/keep/env/keep.env

@@ -1,11 +1,12 @@
-U2FsdGVkX1/pduxljtvI8MU7n7p576dWYQhoisET5kWl7s+YS4Xny4xhxtX8VAGl
-3EhJ9r/3fzZ5MdC+OoTy+6eq/QHpk/JLiwr7JrTaBLvl5sOQQs2shBJ1XDgrQfim
-Cn+vDvP/KHlnMBz67LpnptxYsWK0kXhSm5doj3ZsbwL7YDeH5zYZgslpkA+dpUlw
-INA995Ssx7CfJXqslHcR0Pktywu6vkznvz1md6GW3foZ7GR+VEsE1y8F3ovQRW9+
-RVQuJY2y6tOz1LYsL1nzBg+RtYF3z4xdlDGMrKLTsph/jz2iAU+SZgbpGMc6tH39
-/astVIiDvlnip/t1OYupLDH8puWvoNmdx3/rSYh6/SayBk2EHdXWFvcuYp04t+lo
-1kBozcuQdP5ERpc7Kb5cJgn4daQlaE/OMSrPElUNqp8O9fMrMelTVW0LIeq+eZ/2
-ncAgcZjDG8KyNniPKwi/4hYXMMF6BAWU8Wj7uMkSQQEFIuATHh62OmkONSahPaKn
-dMBOY9JVerinduRnC7RkFtAbBsuLC7RqoGcr68ZgyZaCxwoAf3Vdkb61q4sLzgUb
-7Rydk6by+CqYvdL6cxYUDji/UTfTgHN5yEqmDrMDlIyeNxLpTDOmfaQjlXsRklkU
-V7OPlYG2f498HkYPWyDU4dcI5Hoj/Hwl5p3rGF9u5b4=
+U2FsdGVkX1+VyXOwL/nBIs5KJPzfHylH6KUreqAuPqzpIr1AQsju/g9rC47Tj9Cf
+BDeNjOd2YWKIJlY+DizhyOHRwNGu7QVihT2V9VSVZs6n/c2kJlbeGNQfrdZt6aK3
+63eZtVHn7fby1mcNw/VJ71L4AHVuj83HuzTS3ZMr1HzAerjG+W90uhZNxOetFFYQ
+86GUCoVkHFBzyC5eW9gBKNB0rPM5wo0tjwdMwchEh0bgkjRiTjzI97ZwkGpJt9vc
+QZJMdnq1lNumvmMrNwcICOCNpsw2cu3f6WSA2H9/qbAmbX5KLyWaXOKlXx/+7K0a
+q7yANjrD7J8SVvySPaTbyUBkOiPpUrFfMAjR23FAVUTSCaqjYX7naFXdrM6GJLxG
+JjREAwDFYyRq0Z4gV04ethcctJnf8v7jE9LOvhb+liFpUI/6idMWaJl5WuT4+nmy
+KN6vAW08VTWotMc++Lli8KG5bIr/8ByRj/QgL5BfJrn9VL36c5nYHko2+UT1CRur
+TOInVxiIcEBxB8uHBZdQqwQCkdRoz0kFFhLg1z6IgMDZ0ilRk57v4dHNJk4dF3uz
+ZLz3O2pzCyZ5Uw4yn83Dam8hY72bhrKMVJC+5fdoPye5etKSrr6SgW953SybNG7n
+NTJf5E4qCxavMECr3YgCKyVGoHTEnnoiJd+XC7ShiTDtdf3Cav7wYRcGwx34aAOU
+A0JNgrZq9Ii2pdVgDukCDsjBbY3W1Nfd4WE/UfZjAk3hBv2K/CJJQpNBU1RUlVM4

core/type/src/photo.ts

@@ -11,5 +11,5 @@ export type Photo = AlwatrDocumentObject & {
   /**
    * Photo extra meta information for future maintenances
    */
-  meta: Record<string, string | number>; // meta: {order: 1233, customer: 1334}
+  meta?: Record<string, string | number>; // meta: {order: 1233, customer: 1334}
 };

uniquely/keep-pwa/package.json

@@ -39,22 +39,20 @@
   "devDependencies": {
     "@alwatr/element": "^0.32.0",
     "@alwatr/fetch": "^0.32.0",
-    "@alwatr/fsm": "^0.32.0",
-    "@alwatr/context": "^0.32.0",
     "@alwatr/i18n": "^0.32.0",
     "@alwatr/math": "^0.32.0",
     "@alwatr/pwa-helper": "^0.32.0",
-    "@alwatr/router": "^0.32.0",
     "@alwatr/signal": "^0.32.0",
     "@alwatr/type": "^0.32.0",
     "@alwatr/ui-kit": "^0.32.0",
-    "@web/dev-server": "^0.2.1",
+    "@alwatr/util": "^0.32.0",
+    "@web/dev-server": "^0.2.3",
     "@webcomponents/webcomponentsjs": "^2.8.0",
-    "esbuild": "^0.17.18",
+    "esbuild": "^0.18.2",
     "lit-analyzer": "^1.2.1",
     "npm-run-all": "^4.1.5",
     "ts-lit-plugin": "^1.2.1",
-    "tslib": "^2.5.0",
-    "typescript": "^5.0.4"
+    "tslib": "^2.5.3",
+    "typescript": "^5.1.3"
   }
 }

uniquely/keep-pwa/src/config.ts

@@ -2,23 +2,26 @@ import {FetchOptions} from '@alwatr/fetch';
 import {getConfKey} from '@alwatr/pwa-helper/config.js';
 import {getLocalStorageItem} from '@alwatr/util';
 
-const token = getConfKey<string>('token');
-
 /**
  * Debug API.
  *
  * ```ts
- * localStorage.setItem('DEBUG_API', '"https://canary.keeperco.ir"');
+ * localStorage.setItem('DEBUG_API', '"https://canary.keeperco.ir/"');
  * localStorage.setItem('DEBUG_CONFIG', JSON.stringify({token: 'secret_token'}));
  * ```
  */
-const apiPrefix = getLocalStorageItem('DEBUG_API', '');
+const srvBaseUrl = getLocalStorageItem('DEBUG_API', '/');
+const apiBaseUrl = srvBaseUrl + 'api/v0/';
+
 export const config = {
-  cdn: apiPrefix + '/cdn',
-  api: apiPrefix + '/api/v0',
-  token,
+  serverContext: {
+    base: srvBaseUrl,
+    api: apiBaseUrl,
+    cdn: srvBaseUrl + 'cdn',
+    token: getConfKey<string>('token'),
+  },
+
   fetchContextOptions: <Partial<FetchOptions>>{
-    method: 'GET',
     removeDuplicate: 'auto',
     retry: 2,
     retryDelay: 2_000,

uniquely/keep-pwa/src/content/home-page-fa.ts

@@ -31,6 +31,7 @@ export const homePageContent: PageHomeContent = {
     wide: true,
     icon: 'cart-outline',
     headline: 'مشاهده محصولات',
+    href: '/product',
   },
   catalogue: {
     elevated: 1,

uniquely/keep-pwa/src/content/l18e-en.json

@@ -23,6 +23,7 @@
     "form_submitted": "Your request has been submitted.",
     "collaboration_form_description": "Collaboration request form with Keep",
     "invalid_form_data": "The form information is not correct.",
-    "check_network_connection": "Please check internet, and send again."
+    "check_network_connection": "Please check internet, and send again.",
+    "page_product_headline": "Products"
   }
 }

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

@@ -26,6 +26,7 @@
     "form_submitted": "درخواست شما ثبت شد.",
     "collaboration_form_description": "فرم درخواست همکاری با کیپ",
     "invalid_form_data": "اطلاعات فرم صحیح نمی‌باشد.",
-    "check_network_connection": "لطفا از اتصال خود به اینترنت اطمینان حاصل فرمایید و دوباره ارسال کنید."
+    "check_network_connection": "لطفا از اتصال خود به اینترنت اطمینان حاصل فرمایید و دوباره ارسال کنید.",
+    "page_product_headline": "محصولات"
   }
 }

uniquely/keep-pwa/src/manager/submit-form-command-handler.ts

@@ -41,11 +41,11 @@ commandHandler.define<FormData, boolean>(submitFormCommandTrigger.id, async (for
   try {
     await serviceRequest({
       method: 'PUT',
-      url: config.api + '/form/',
+      url: config.serverContext.api + 'form/',
       queryParameters: {
         formId: form.formId,
       },
-      token: config.token,
+      token: config.serverContext.token,
       bodyJson,
     });
   }

uniquely/keep-pwa/src/ui/alwatr-pwa.ts

@@ -27,6 +27,10 @@ class AlwatrPwa extends AlwatrPwaElement {
       'home': () => {
         return html`<alwatr-page-home unresolved>...</alwatr-page-home>`;
       },
+      'product': () => {
+        import('./page/product.js');
+        return html`<alwatr-page-product unresolved>...</alwatr-page-product>`;
+      },
       '_404': () => {
         import('./page/404.js');
         return html`<alwatr-page-404 unresolved>...</alwatr-page-404>`;

uniquely/keep-pwa/src/ui/page/404.ts

@@ -10,7 +10,7 @@ import {
 import {message} from '@alwatr/i18n';
 import '@alwatr/ui-kit/card/icon-box.js';
 
-import {topAppBarContextProvider} from '../../manager/context.js';
+import {languageButtonClickEventListener, topAppBarContextProvider} from '../../manager/context.js';
 
 import type {IconBoxContent} from '@alwatr/ui-kit/card/icon-box.js';
 
@@ -38,8 +38,9 @@ export class AlwatrPage404 extends UnresolvedMixin(LocalizeMixin(SignalMixin(Alw
     super.connectedCallback();
     topAppBarContextProvider.setValue({
       type: 'small',
-      headline: message('page_404_not_found'),
+      headlineKey: 'page_404_not_found',
       startIcon: {icon: 'arrow-back-outline', flipRtl: true, clickSignalId: 'back_to_home_click_event'},
+      endIconList: [{icon: 'globe-outline', clickSignalId: languageButtonClickEventListener.id}],
       tinted: 2,
     });
   }

uniquely/keep-pwa/src/ui/page/product.ts

@@ -0,0 +1,51 @@
+import {
+  customElement,
+  css,
+  html,
+  LocalizeMixin,
+  SignalMixin,
+  AlwatrBaseElement,
+  UnresolvedMixin,
+} from '@alwatr/element';
+
+import {languageButtonClickEventListener, topAppBarContextProvider} from '../../manager/context.js';
+import '../stuff/select-product.js';
+
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'alwatr-page-product': AlwatrPageProduct;
+  }
+}
+
+/**
+ * Alwatr Select Product Page
+ */
+@customElement('alwatr-page-product')
+export class AlwatrPageProduct extends UnresolvedMixin(LocalizeMixin(SignalMixin(AlwatrBaseElement))) {
+  static override styles = css`
+    :host {
+      display: block;
+      padding: calc(2 * var(--sys-spacing-track));
+      box-sizing: border-box;
+      min-height: 100%;
+    }
+  `;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    topAppBarContextProvider.setValue({
+      type: 'small',
+      headlineKey: 'page_product_headline',
+      startIcon: {icon: 'arrow-back-outline', flipRtl: true, clickSignalId: 'back_to_home_click_event'},
+      endIconList: [{icon: 'globe-outline', clickSignalId: languageButtonClickEventListener.id}],
+      tinted: 2,
+    });
+  }
+
+  override render(): unknown {
+    this._logger.logMethod?.('render');
+
+    return html`<alwatr-select-product></alwatr-select-product>`;
+  }
+}