chore: release 1.31.1

src/elements/internal/InternalDateControl/InternalDateControl.test.ts

@@ -192,6 +192,19 @@ describe('InternalDateControl', () => {
     expect(field).to.have.property('value', '2020-01-01');
   });
 
+  it('supports special value of 0000-00-00', async () => {
+    const layout = html`<test-internal-date-control></test-internal-date-control>`;
+    const control = await fixture<TestControl>(layout);
+    const field = control.renderRoot.querySelector('vaadin-date-picker')!;
+
+    expect(field).to.have.property('value', '');
+
+    control.testValue = '0000-00-00';
+    await control.requestUpdate();
+
+    expect(field).to.have.property('value', '');
+  });
+
   it('sets long ISO "value" on vaadin-date-picker from "_value" on itself', async () => {
     const layout = html`<test-internal-date-control></test-internal-date-control>`;
     const control = await fixture<TestControl>(layout);

src/elements/internal/InternalDateControl/InternalDateControl.ts

@@ -35,12 +35,16 @@ export class InternalDateControl extends InternalEditableControl {
   renderControl(): TemplateResult {
     let value: string;
 
-    if (this.format === 'unix') {
-      value = serializeDate(new Date(((this._value as number) ?? 0) * 1000));
-    } else if (this.format === 'iso-long') {
-      value = serializeDate(new Date(this._value as string));
+    if (this._value === '0000-00-00' || !this._value) {
+      value = '';
     } else {
-      value = this._value as string;
+      if (this.format === 'unix') {
+        value = serializeDate(new Date(((this._value as number) ?? 0) * 1000));
+      } else if (this.format === 'iso-long') {
+        value = serializeDate(new Date(this._value as string));
+      } else {
+        value = this._value as string;
+      }
     }
 
     return html`
@@ -56,6 +60,7 @@ export class InternalDateControl extends InternalEditableControl {
         .checkValidity=${this._checkValidity}
         .value=${value}
         .i18n=${this.__pickerI18n}
+        clear-button-visible
         @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}
         @change=${(evt: CustomEvent) => {
           const field = evt.currentTarget as DatePickerElement;

src/elements/internal/InternalDateControl/vaadinStyles.ts

@@ -74,5 +74,13 @@ registerStyles(
     :host([theme~='summary-item'][readonly]) [part='value'] {
       margin-right: 0;
     }
+
+    :host([theme~='summary-item']) [part='clear-button'] {
+      transform: scale(1.5);
+    }
+
+    :host([has-value]) slot[name='suffix'] {
+      display: none;
+    }
   `
 );

src/elements/internal/InternalPasswordControl/InternalPasswordControl.test.ts

@@ -267,5 +267,15 @@ describe('InternalTextControl', () => {
 
     button.click();
     expect(control.testValue).to.match(/^[a-z0-9]{6}\|[a-z0-9]{6}$/);
+
+    control.generatorOptions = {
+      checkStrength: value => value === 'abc',
+      separator: '',
+      charset: 'abc',
+      length: 3,
+    };
+
+    button.click();
+    expect(control.testValue).to.equal('abc');
   });
 });

src/elements/internal/InternalPasswordControl/InternalPasswordControl.ts

@@ -74,7 +74,22 @@ export class InternalPasswordControl extends InternalEditableControl {
         })}
         slot="suffix"
         @click=${() => {
-          this._value = generateRandomPassword(this.generatorOptions ?? void 0);
+          let isStrong = false;
+          let newValue: string;
+          let attempts = 0;
+
+          do {
+            newValue = generateRandomPassword(this.generatorOptions ?? void 0);
+            isStrong = this.generatorOptions?.checkStrength?.(newValue) ?? true;
+            attempts++;
+          } while (!isStrong && attempts < 100);
+
+          if (isStrong) {
+            this._value = newValue;
+          } else {
+            throw new Error('Failed to generate a strong password.');
+          }
+
           const field = this.renderRoot.querySelector('vaadin-password-field');
           // @ts-expect-error: this is a private method but it's ok since the version is fixed
           field?._setPasswordVisible(true);

src/elements/internal/InternalPasswordControl/generateRandomPassword.ts

@@ -1,4 +1,9 @@
-export type GeneratorOptions = { length?: number; charset?: string; separator?: string };
+export type GeneratorOptions = {
+  checkStrength?: (value: string) => boolean;
+  separator?: string;
+  charset?: string;
+  length?: number;
+};
 
 export function generateRandomPassword(opts?: GeneratorOptions): string {
   const separator = opts?.separator ?? '-';

src/elements/public/CustomerForm/CustomerForm.test.ts

@@ -230,6 +230,11 @@ describe('CustomerForm', () => {
 
     form.data = { ...data, first_name: '', last_name: '' };
     expect(form.headerTitleOptions).to.have.property('context', 'no_name');
+
+    // TODO: remove this when SDK types are fixed
+    // @ts-expect-error SDK types are incomplete
+    form.data = { ...data, first_name: null, last_name: null };
+    expect(form.headerTitleOptions).to.have.property('context', 'no_name');
   });
 
   it('uses custom form header subtitle key', async () => {
@@ -322,13 +327,17 @@ describe('CustomerForm', () => {
 
   it('renders a password field for password', async () => {
     const form = await fixture<CustomerForm>(html`<foxy-customer-form></foxy-customer-form>`);
-    const control = form.renderRoot.querySelector('[infer="password"]');
+    const control = form.renderRoot.querySelector<InternalPasswordControl>('[infer="password"]');
 
     expect(control).to.exist;
     expect(control).to.be.instanceOf(InternalPasswordControl);
     expect(control).to.have.attribute('show-generator');
     expect(control).to.have.attribute('placeholder', 'password.placeholder');
     expect(control).to.have.attribute('helper-text', 'password.helper_text');
+    expect(control).to.have.property('generatorOptions');
+    expect(control).to.have.nested.property('generatorOptions.checkStrength');
+    expect(control?.generatorOptions?.checkStrength?.('123')).to.be.false;
+    expect(control?.generatorOptions?.checkStrength?.('mFveRh-RZ6ZHm-YlKlqX')).to.be.true;
 
     form.data = await getTestData<Data>('./hapi/customers/0');
     await form.requestUpdate();

src/elements/public/CustomerForm/CustomerForm.ts

@@ -2,6 +2,7 @@ import type { VanillaHCaptchaWebComponent } from 'vanilla-hcaptcha';
 import type { Data, Settings } from './types';
 import type { PropertyDeclarations } from 'lit-element';
 import type { ScopedElementsMap } from '@open-wc/scoped-elements';
+import type { GeneratorOptions } from '../../internal/InternalPasswordControl/generateRandomPassword';
 import type { TemplateResult } from 'lit-html';
 import type { NucleonV8N } from '../NucleonElement/types';
 
@@ -83,6 +84,10 @@ export class CustomerForm extends Base<Data> {
   /** Full `fx:customer_portal_settings` resource from Customer API. If present, switches this element into the Customer API mode, enabling client verification. */
   settings: Settings | null = null;
 
+  private readonly __passwordGeneratorOptions: GeneratorOptions = {
+    checkStrength: value => passwordStrength(value).id >= 2,
+  };
+
   private readonly __isAnonymousGetValue = () => {
     return this.form?.is_anonymous === false ? 'false' : 'true';
   };
@@ -129,7 +134,7 @@ export class CustomerForm extends Base<Data> {
 
   get headerTitleOptions(): Record<string, unknown> {
     const data = this.data;
-    if (!data || data.first_name.trim() || data.last_name.trim()) return super.headerTitleOptions;
+    if (!data || data.first_name?.trim() || data.last_name?.trim()) return super.headerTitleOptions;
     return { ...super.headerTitleOptions, context: 'no_name' };
   }
 
@@ -188,6 +193,7 @@ export class CustomerForm extends Base<Data> {
         helper-text=${this.__passwordHelperText}
         infer="password"
         show-generator
+        .generatorOptions=${this.__passwordGeneratorOptions}
       >
       </foxy-internal-password-control>
 

src/elements/public/ItemCard/ItemCard.test.ts

@@ -60,7 +60,7 @@ describe('ItemCard', () => {
     expect(element.renderRoot).to.include.text('Test Item Name');
   });
 
-  it('renders item name', async () => {
+  it('renders item name with html entities', async () => {
     const router = createRouter();
     const element = await fixture<ItemCard>(html`
       <foxy-item-card
@@ -72,11 +72,11 @@ describe('ItemCard', () => {
 
     await waitUntil(() => element.in({ idle: 'snapshot' }));
 
-    element.data!.name = 'Test Item Name';
+    element.data!.name = 'Hot &amp; Sweet';
     element.data = { ...element.data! };
     await element.requestUpdate();
 
-    expect(element.renderRoot).to.include.text('Test Item Name');
+    expect(element.renderRoot).to.include.text('Hot & Sweet');
   });
 
   it('renders price breakdown', async () => {

src/elements/public/ItemCard/ItemCard.ts

@@ -10,6 +10,7 @@ import { ConfigurableMixin } from '../../../mixins/configurable';
 import { parseFrequency } from '../../../utils/parse-frequency';
 import { InternalCard } from '../../internal/InternalCard/InternalCard';
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { decode } from 'html-entities';
 import { html } from 'lit-html';
 
 const NS = 'item-card';
@@ -139,7 +140,7 @@ export class ItemCard extends Base<Data> {
             <div class="min-w-0 flex-1 leading-s">
               <div class="flex items-center justify-between">
                 <div class="truncate text-m font-medium">
-                  ${this.data?.name || html`<foxy-i18n infer="" key="no_code"></foxy-i18n>`}
+                  ${decode(this.data?.name) || html`<foxy-i18n infer="" key="no_code"></foxy-i18n>`}
                 </div>
                 <span class="text-s text-tertiary whitespace-nowrap">
                   ${quantity} &times;

src/server/hapi/createDataset.ts

@@ -408,7 +408,7 @@ export const createDataset: () => Dataset = () => ({
       transaction_template_id: 0,
       next_transaction_date: '2021-06-19T10:58:39-0700',
       start_date: '2023-02-11T22:45:01-0700',
-      end_date: null,
+      end_date: '0000-00-00',
       frequency: '1m',
       error_message: '',
       past_due_amount: 0,

src/static/translations/admin-subscription-form/en.json

@@ -33,7 +33,7 @@
     "start-date": {
       "label": "Start date",
       "helper_text": "",
-      "placeholder": "",
+      "placeholder": "Not set",
       "display_value": "{{ value, date }}",
       "week": "Week",
       "calendar": "Calendar",
@@ -44,7 +44,7 @@
     "end-date": {
       "label": "End date",
       "helper_text": "",
-      "placeholder": "",
+      "placeholder": "Not set",
       "display_value": "{{ value, date }}",
       "week": "Week",
       "calendar": "Calendar",
@@ -71,7 +71,7 @@
     "next-transaction-date": {
       "label": "Next payment date",
       "helper_text": "",
-      "placeholder": "",
+      "placeholder": "Not set",
       "display_value": "{{ value, date }}",
       "week": "Week",
       "calendar": "Calendar",