feat: customer registration in portal and better customer profile man…

…agement in admin

package.json

@@ -28,12 +28,13 @@
     "prepack": "npm run lint && rimraf dist && node ./.build/compile-for-npm.js && rollup -c"
   },
   "dependencies": {
-    "@foxy.io/sdk": "^1.10.0",
+    "@foxy.io/sdk": "^1.11.0",
     "@open-wc/lit-helpers": "^0.3.12",
     "@open-wc/scoped-elements": "^1.2.1",
     "@polymer/iron-icons": "^3.0.1",
     "@vaadin-component-factory/vcf-tooltip": "^1.3.14",
     "@vaadin/vaadin": "^14.8.5",
+    "check-password-strength": "^2.0.7",
     "cookie-storage": "^6.1.0",
     "dedent": "^0.7.0",
     "email-validator": "^2.0.4",
@@ -46,6 +47,7 @@
     "service-worker-router": "^1.7.5",
     "traverse": "^0.6.6",
     "uainfer": "^0.5.0",
+    "vanilla-hcaptcha": "^1.0.2",
     "webcomponent-qr-code": "^1.0.5",
     "xstate": "^4.16.0"
   },

src/elements/public/Customer/Customer.test.ts

@@ -27,6 +27,28 @@ import { stub } from 'sinon';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 
 const router = createRouter();
+const settings = {
+  _links: { self: { href: '' } },
+  allowed_origins: [],
+  subscriptions: {
+    allow_frequency_modification: [],
+    allow_next_date_modification: false,
+  },
+  session_lifespan_in_minutes: 40320,
+  tos_checkbox_settings: {
+    usage: 'optional' as const,
+    url: 'https://foxy.io/terms-of-service/',
+    initial_state: 'unchecked' as const,
+    is_hidden: false,
+  },
+  sign_up: {
+    verification: { type: 'hcaptcha' as const, site_key: '123' },
+    enabled: true,
+  },
+  sso: true,
+  date_created: '',
+  date_modified: '',
+};
 
 describe('Customer', () => {
   it('extends NucleonElement', () => {
@@ -302,6 +324,7 @@ describe('Customer', () => {
               group="foo"
               lang="es"
               .data=${data}
+              .settings=${settings}
             >
               <template slot="header:actions:edit:form:items:before">Test</template>
             </foxy-customer>
@@ -324,6 +347,7 @@ describe('Customer', () => {
           expect(form!).to.have.attribute('form', 'foxy-customer-form');
           expect(form!).to.have.attribute('ns', 'customer');
           expect(form!.templates).to.have.key('items:before');
+          expect(form).to.have.deep.property('props', { '.settings': settings });
 
           expect(showMethod).to.have.been.called;
         });
@@ -1687,6 +1711,7 @@ describe('Customer', () => {
           group="foo"
           lang="es"
           href="https://demo.api/hapi/customers/0"
+          .settings=${settings}
           @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
         >
           <template slot="subscriptions:form:header:before">
@@ -1721,6 +1746,7 @@ describe('Customer', () => {
       expect(form).to.have.attribute('ns', 'customer');
       expect(form).to.have.property('href', link.toString());
       expect(form!.templates).to.have.key('header:before');
+      expect(form).to.have.deep.property('props', { '.settings': settings });
     });
   });
 

src/elements/public/Customer/Customer.ts

@@ -1,5 +1,5 @@
-import { Attributes, CustomerAddresses, Data, Tab, Templates } from './types';
-import { CSSResultArray, TemplateResult, html } from 'lit-element';
+import { Attributes, CustomerAddresses, Data, Settings, Tab, Templates } from './types';
+import { CSSResultArray, TemplateResult, html, PropertyDeclarations } from 'lit-element';
 import { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';
 
 import { Data as Attribute } from '../AttributeCard/types';
@@ -90,12 +90,22 @@ export class Customer extends Base<Data> {
     };
   }
 
+  static get properties(): PropertyDeclarations {
+    return {
+      ...super.properties,
+      settings: { type: Object },
+    };
+  }
+
   static get styles(): CSSResultArray {
     return [super.styles, styles];
   }
 
   templates: Templates = {};
 
+  /** Customer Portal settings for use in Customer mode. */
+  settings: Settings | null = null;
+
   // #region header
 
   private readonly __renderHeaderActionsEdit = () => {
@@ -125,6 +135,7 @@ export class Customer extends Base<Data> {
         disabledcontrols=${disabledSelector.zoom(formId).toString()}
         hiddencontrols=${hiddenSelector.zoom(formId).toString()}
         .templates=${this.getNestedTemplates('header:actions:edit:form')}
+        .props=${{ '.settings': this.settings }}
       >
       </foxy-form-dialog>
 
@@ -711,6 +722,7 @@ export class Customer extends Base<Data> {
           ns=${this.ns}
           id="subscriptions-form"
           .templates=${this.getNestedTemplates(formId)}
+          .props=${{ '.settings': this.settings }}
         >
         </foxy-form-dialog>
 

src/elements/public/Customer/types.ts

@@ -16,6 +16,7 @@ import { Templates as TransactionsTableTemplates } from '../TransactionsTable/ty
 
 export type CustomerAddresses = Resource<Rels.CustomerAddresses>;
 export type Attributes = Resource<Rels.Attributes>;
+export type Settings = Resource<Rels.CustomerPortalSettings>;
 export type Data = Resource<Graph>;
 export type Tab = { title: string; content: TemplateResult };
 

src/elements/public/CustomerForm/CustomerForm.stories.ts

@@ -11,9 +11,18 @@ const summary: Summary = {
   localName: 'foxy-customer-form',
   translatable: true,
   configurable: {
-    sections: ['timestamps'],
+    sections: ['legal-notice', 'timestamps'],
     buttons: ['delete', 'create'],
-    inputs: ['first-name', 'last-name', 'email', 'tax-id'],
+    inputs: [
+      'first-name',
+      'last-name',
+      'tax-id',
+      'email',
+      'is-anonymous',
+      'password',
+      'password-old',
+      'forgot-password',
+    ],
   },
 };