chore: preferences design

restorecommerce · Aug 23, 2023 · 517a0f3 · 517a0f3
1 parent 7a1c3d9
commit 517a0f3
Show file tree

Hide file tree

Showing 11 changed files with 148 additions and 16 deletions.
diff --git a/packages/modules/account/src/lib/components/preferences/preferences.component.ts b/packages/modules/account/src/lib/components/preferences/preferences.component.ts
@@ -1,8 +1,25 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { VCLFormFieldSchemaRoot } from '@vcl/ng-vcl';
+import { buildLocalizationDataSchema } from '../../jss-forms';
 
 @Component({
   selector: 'app-account-preferences',
-  template: ` <rc-page-preferences /> `,
+  template: `
+    <rc-page-preferences>
+      <rc-account-localization-data
+        [localizationFormSchema]="localizationFormSchema"
+      />
+    </rc-page-preferences>
+  `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class PreferencesComponent {}
+export class PreferencesComponent {
+  localizationFormSchema: VCLFormFieldSchemaRoot = buildLocalizationDataSchema({
+    timezones: [],
+    locales: [],
+  });
+
+  // readonly vm$ = combineLatest({
+  // TODO: add timezones and locales
+  // });
+}
diff --git a/packages/modules/account/src/lib/components/profile/profile.component.ts b/packages/modules/account/src/lib/components/profile/profile.component.ts
@@ -43,11 +43,12 @@ export class ProfileComponent {
   readonly vm$ = combineLatest({
     profile: this.accountFacade.profile$.pipe(
       filterNullish(),
-      tap((profile) => {
-        this.personalFormSchema = buildPersonalDataSchema(profile);
-        this.emailFormSchema = buildEmailSchema(profile);
-        this.accountInformationFormSchema =
-          buildAccountInformationSchema(profile);
+      tap((user) => {
+        this.personalFormSchema = buildPersonalDataSchema({ user });
+        this.emailFormSchema = buildEmailSchema({ user });
+        this.accountInformationFormSchema = buildAccountInformationSchema({
+          user,
+        });
       })
     ),
   });

diff --git a/packages/modules/account/src/lib/jss-forms/account-data.jss-form.ts b/packages/modules/account/src/lib/jss-forms/account-data.jss-form.ts
@@ -4,15 +4,21 @@ import { VCLFormFieldSchemaRoot } from '@vcl/ng-vcl';
 
 import { IUser } from '@console-core/types';
 
-export const buildEmailSchema = (user: IUser): VCLFormFieldSchemaRoot => {
+interface ISchemaOptions {
+  user: IUser;
+}
+
+export const buildEmailSchema = (
+  options: ISchemaOptions
+): VCLFormFieldSchemaRoot => {
   return {
     type: 'form',
     fields: [
       {
         name: 'email',
         label: 'Email',
         type: 'input',
-        defaultValue: user.email,
+        defaultValue: options.user.email,
         validators: [Validators.required, Validators.email],
         params: {},
         hints: [

diff --git a/packages/modules/account/src/lib/jss-forms/account-information.jss-form.ts b/packages/modules/account/src/lib/jss-forms/account-information.jss-form.ts
@@ -4,8 +4,12 @@ import { VCLFormFieldSchemaRoot } from '@vcl/ng-vcl';
 
 import { IUser } from '@console-core/types';
 
+interface ISchemaOptions {
+  user: IUser;
+}
+
 export const buildAccountInformationSchema = (
-  user: IUser
+  options: ISchemaOptions
 ): VCLFormFieldSchemaRoot => {
   return {
     type: 'form',
@@ -15,7 +19,7 @@ export const buildAccountInformationSchema = (
         label: 'User ID',
         type: 'input',
         disabled: true,
-        defaultValue: user.id,
+        defaultValue: options.user.id,
         validators: [Validators.required],
         params: {},
         hints: [],

diff --git a/packages/modules/account/src/lib/jss-forms/index.ts b/packages/modules/account/src/lib/jss-forms/index.ts
@@ -1,3 +1,4 @@
 export * from './account-data.jss-form';
-export * from './personal-data.jss-form';
 export * from './account-information.jss-form';
+export * from './localization-data.jss-form';
+export * from './personal-data.jss-form';
diff --git a/packages/modules/account/src/lib/jss-forms/localization-data.jss-form.ts b/packages/modules/account/src/lib/jss-forms/localization-data.jss-form.ts
@@ -0,0 +1,44 @@
+import {
+  IIoRestorecommerceTimezoneTimezone,
+  IoRestorecommerceLocaleLocale,
+} from '@console-core/graphql';
+import { VCLFormFieldSchemaRoot } from '@vcl/ng-vcl';
+
+interface ISchemaOptions {
+  timezones: IIoRestorecommerceTimezoneTimezone[];
+  locales: IoRestorecommerceLocaleLocale[];
+}
+
+export const buildLocalizationDataSchema = (
+  options: ISchemaOptions
+): VCLFormFieldSchemaRoot => {
+  return {
+    type: 'form',
+    fields: [
+      {
+        name: 'localeId',
+        label: 'Language',
+        type: 'select',
+        params: {
+          options: options.locales.map((locale) => ({
+            label: locale.description ?? '',
+            sublabel: locale.value ?? '',
+            value: locale.id,
+          })),
+        },
+      },
+      {
+        name: 'timezoneId',
+        label: 'Timezone',
+        type: 'select',
+        params: {
+          options: options.timezones.map((timezone) => ({
+            label: timezone.id ?? '',
+            sublabel: timezone.description ?? '',
+            value: timezone.id,
+          })),
+        },
+      },
+    ],
+  };
+};
diff --git a/packages/modules/account/src/lib/jss-forms/personal-data.jss-form.ts b/packages/modules/account/src/lib/jss-forms/personal-data.jss-form.ts
@@ -4,8 +4,12 @@ import { VCLFormFieldSchemaRoot } from '@vcl/ng-vcl';
 
 import { IUser } from '@console-core/types';
 
+interface ISchemaOptions {
+  user: IUser;
+}
+
 export const buildPersonalDataSchema = (
-  user: IUser
+  options: ISchemaOptions
 ): VCLFormFieldSchemaRoot => {
   return {
     type: 'form',
@@ -14,7 +18,7 @@ export const buildPersonalDataSchema = (
         name: 'firstName',
         label: 'First Name',
         type: 'input',
-        defaultValue: user.firstName,
+        defaultValue: options.user.firstName,
         validators: [Validators.required],
         params: {},
         hints: [
@@ -29,7 +33,7 @@ export const buildPersonalDataSchema = (
         name: 'lastName',
         label: 'Last Name',
         type: 'input',
-        defaultValue: user.lastName,
+        defaultValue: options.user.lastName,
         validators: [Validators.required],
         params: {},
         hints: [

diff --git a/...i/src/lib/components/organisms/account/localization-data/localization-data.component.html b/...i/src/lib/components/organisms/account/localization-data/localization-data.component.html
@@ -0,0 +1,26 @@
+<div class="row small-snap-vertical">
+  <div class="flex-4">
+    <h3>Localization Data</h3>
+    <p>Customize language and region related preferences</p>
+  </div>
+  <div class="flex-8">
+    <div class="account-right-side">
+      <vcl-jss-form
+        ngDefaultControl
+        #localizationForm="vclJssForm"
+        [schema]="localizationFormSchema"
+      ></vcl-jss-form>
+      <div class="row justify-end loose-button-group">
+        <button
+          vcl-button
+          [disabled]="
+            !localizationForm.form.valid || localizationForm.form.pristine
+          "
+          (click)="onSaveLocalizationForm()"
+        >
+          Save
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/.../ui/src/lib/components/organisms/account/localization-data/localization-data.component.ts b/.../ui/src/lib/components/organisms/account/localization-data/localization-data.component.ts
@@ -0,0 +1,26 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  ViewChild,
+} from '@angular/core';
+
+import { JssFormComponent, VCLFormFieldSchemaRoot } from '@vcl/ng-vcl';
+
+@Component({
+  selector: 'rc-account-localization-data',
+  templateUrl: './localization-data.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RcLocalizationDataComponent {
+  @Input({ required: true })
+  localizationFormSchema!: VCLFormFieldSchemaRoot;
+
+  @ViewChild('localizationForm')
+  localizationForm!: JssFormComponent;
+
+  onSaveLocalizationForm() {
+    // TODO: implement
+    console.log(this.localizationForm.form.value);
+  }
+}
diff --git a/packages/modules/ui/src/lib/components/organisms/index.ts b/packages/modules/ui/src/lib/components/organisms/index.ts
@@ -1,7 +1,8 @@
-export * from './account/personal-data/personal-data.component';
 export * from './account/account-data/account-data.component';
 export * from './account/account-information/account-information.component';
 export * from './account/account-deletion/account-deletion.component';
+export * from './account/localization-data/localization-data.component';
+export * from './account/personal-data/personal-data.component';
 export * from './app/app.component';
 export * from './datalist/datalist-item.component';
 export * from './datalist/datalist.component';

diff --git a/packages/modules/ui/src/lib/modules-ui.module.ts b/packages/modules/ui/src/lib/modules-ui.module.ts
@@ -53,6 +53,7 @@ import {
   RcAccountDataComponent,
   RcAccountInformationComponent,
   RcAccountDeletionComponent,
+  RcLocalizationDataComponent,
 } from './components/organisms';
 import {
   RcPageConfirmPasswordComponent,
@@ -108,6 +109,7 @@ const organisms = [
   RcAccountDataComponent,
   RcAccountInformationComponent,
   RcAccountDeletionComponent,
+  RcLocalizationDataComponent,
 ];
 
 const pages = [