@foxy.io/elements 1.18.0-beta.2 → 1.18.0-beta.21

package/dist/elements/public/SubscriptionForm/SubscriptionForm.js

@@ -1,19 +1,16 @@
 import { Choice, Group, Skeleton } from "../../private/index.js";
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
-import { html } from 'lit-html';
-import { getAllowedFrequencies, getNextTransactionDateConstraints, isNextTransactionDate, } from '@foxy.io/sdk/customer';
-import { ConfigurableMixin } from "../../../mixins/configurable.js";
-import { NucleonElement } from "../NucleonElement/index.js";
-import { Preview } from "../ItemsForm/private/Preview.js";
-import { ThemeableMixin } from "../../../mixins/themeable.js";
-import { TransactionsTable } from "../TransactionsTable/TransactionsTable.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { classMap } from "../../../utils/class-map.js";
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { BooleanSelector } from '@foxy.io/sdk/core';
+import { ResponsiveMixin } from "../../../mixins/responsive.js";
 import { parseFrequency } from "../../../utils/parse-frequency.js";
 import { serializeDate } from "../../../utils/serialize-date.js";
+import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-html';
+import { getNextTransactionDateConstraints, getAllowedFrequencies, isNextTransactionDate, } from '@foxy.io/sdk/customer';
 const NS = 'subscription-form';
-const Base = ScopedElementsMixin(ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS))));
+const Base = ScopedElementsMixin(ResponsiveMixin(TranslatableMixin(InternalForm, NS)));
 /**
  * Form element for creating or editing subscriptions.
  *
@@ -37,14 +34,38 @@ const Base = ScopedElementsMixin(ThemeableMixin(ConfigurableMixin(TranslatableMi
  * @slot transactions:before - **new in v1.4.0**
  * @slot transactions:after - **new in v1.4.0**
  *
+ * @slot attributes:before - **new in v1.20.0**
+ * @slot attributes:after - **new in v1.20.0**
+ *
+ * @slot timestamps:before - **new in v1.20.0**
+ * @slot timestamps:after - **new in v1.20.0**
+ *
+ * @slot past-due-amount:before - **new in v1.20.0**
+ * @slot past-due-amount:after - **new in v1.20.0**
+ *
+ * @slot start-date:before - **new in v1.20.0**
+ * @slot start-date:after - **new in v1.20.0**
+ *
  * @element foxy-subscription-form
  * @since 1.2.0
  */
 export class SubscriptionForm extends Base {
     constructor() {
         super(...arguments);
-        this.settings = null;
+        this.getTransactionPageHref = (_, data) => {
+            return data === null || data === void 0 ? void 0 : data._links['fx:receipt'].href;
+        };
+        this.customerAddresses = null;
+        this.itemCategories = null;
+        this.localeCodes = null;
         this.templates = {};
+        this.settings = null;
+        this.coupons = null;
+        this.__transactionTemplateLoaderId = 'transactionTemplateLoader';
+        this.__defaultTemplateSetLoaderId = 'defaultTemplateSetLoader';
+        this.__localeCodesHelperLoaderId = 'localeCodesLoader';
+        this.__templateSetLoaderId = 'templateSetLoader';
+        this.__storeLoaderId = 'storeLoader';
         this.__renderHeaderSubtitle = () => {
             var _a;
             const { data, lang, ns } = this;
@@ -91,16 +112,22 @@ export class SubscriptionForm extends Base {
             }
             return html `<x-skeleton class="w-full" variant="static">&nbsp;</x-skeleton>`;
         };
-        this.__renderHeaderTitle = () => {
+        this.__renderHeaderTitle = (currency, currencyDisplay) => {
             const { data, lang, ns } = this;
             if (data) {
                 const frequency = parseFrequency(data.frequency);
-                const currency = data._embedded['fx:last_transaction'].currency_code;
-                const total = data._embedded['fx:last_transaction'].total_order;
+                const transactionTemplate = this.__transactionTemplate;
+                const total = transactionTemplate === null || transactionTemplate === void 0 ? void 0 : transactionTemplate.total_order;
+                if (typeof currency !== 'string')
+                    return html `--`;
                 return html `
         <foxy-i18n
           data-testid="header-title"
-          options=${JSON.stringify({ ...frequency, amount: `${total} ${currency}` })}
+          options=${JSON.stringify({
+                    ...frequency,
+                    amount: `${total} ${currency}`,
+                    currencyDisplay,
+                })}
           lang=${lang}
           key="price_${data.frequency === '.5m' ? 'twice_a_month' : 'recurring'}"
           ns=${ns}
@@ -110,11 +137,13 @@ export class SubscriptionForm extends Base {
             }
             return html `<x-skeleton class="w-full" variant="static">&nbsp;</x-skeleton>`;
         };
-        this.__renderHeader = () => {
+        this.__renderHeader = (currencyCode, currencyDisplay) => {
             return html `
-      <div data-testid="header">
+      <div data-testid="header" class="sm-col-span-2">
         ${this.renderTemplateOrSlot('header:before')}
-        <div class="leading-xs text-xxl font-bold">${this.__renderHeaderTitle()}</div>
+        <div class="leading-xs text-xxl font-bold truncate">
+          ${this.__renderHeaderTitle(currencyCode, currencyDisplay)}
+        </div>
         <div class="leading-xs text-l">${this.__renderHeaderSubtitle()}</div>
         ${this.renderTemplateOrSlot('header:after')}
       </div>
@@ -127,7 +156,7 @@ export class SubscriptionForm extends Base {
 
         <foxy-i18n
           data-testid="items:actions-label"
-          class="flex-1"
+          class="flex-1 text-s font-medium text-secondary"
           lang=${this.lang}
           key="item_plural"
           ns=${this.ns}
@@ -138,59 +167,29 @@ export class SubscriptionForm extends Base {
       </div>
     `;
         };
-        this.__renderItemsItem = (item) => {
-            const price = item.price.toLocaleString(this.lang || 'en', {
-                style: 'currency',
-                currency: this.data._embedded['fx:last_transaction'].currency_code,
-            });
-            let quantity;
-            if (item.quantity > 1) {
-                quantity = html `
-        <div
-          data-testclass="item-quantity"
-          class="px-s h-xs rounded bg-contrast-5 flex items-center font-tnum text-contrast text-s font-bold"
-        >
-          ${item.quantity}
-        </div>
-      `;
+        this.__renderItems = () => {
+            var _a;
+            let itemsHref;
+            try {
+                const cart = this.__transactionTemplate;
+                const url = new URL((_a = cart === null || cart === void 0 ? void 0 : cart._links['fx:items'].href) !== null && _a !== void 0 ? _a : '');
+                url.searchParams.set('zoom', 'item_options');
+                itemsHref = url.toString();
             }
-            else {
-                quantity = html ``;
+            catch (_b) {
+                itemsHref = undefined;
             }
             return html `
-      <figure class="flex items-center space-x-m py-s pr-m" data-testclass="item">
-        <x-preview
-          data-testclass="item-preview"
-          class="w-l h-l"
-          .quantity=${item.quantity}
-          .image=${item.image}
-        >
-        </x-preview>
+      <div data-testid="items" class="space-y-xs sm-col-span-2">
+        ${this.hiddenSelector.matches('items:actions', true) ? '' : this.__renderItemsActions()}
 
-        <figcaption class="leading-s flex-1 flex justify-between items-center">
-          <div class="flex flex-col">
-            <span class="font-medium" data-testclass="item-name">${item.name}</span>
-            <span class="text-secondary text-s" data-testclass="item-price">${price}</span>
-          </div>
-
-          ${quantity}
-        </figcaption>
-      </figure>
-    `;
-        };
-        this.__renderItems = () => {
-            var _a, _b;
-            const hiddenSelector = this.hiddenSelector;
-            const items = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._embedded['fx:transaction_template']._embedded['fx:items']) !== null && _b !== void 0 ? _b : [];
-            const label = hiddenSelector.matches('items:actions', true) ? '' : this.__renderItemsActions();
-            return html `
-      <div data-testid="items">
-        ${this.renderTemplateOrSlot('items:before')}
-        <x-group frame>
-          <div slot="header">${label}</div>
-          <div class="divide-y divide-contrast-10 pl-s">${items.map(this.__renderItemsItem)}</div>
-        </x-group>
-        ${this.renderTemplateOrSlot('items:after')}
+        <foxy-internal-async-list-control
+          first=${ifDefined(itemsHref)}
+          limit="5"
+          infer="items"
+          item="foxy-item-card"
+        >
+        </foxy-internal-async-list-control>
       </div>
     `;
         };
@@ -198,7 +197,7 @@ export class SubscriptionForm extends Base {
             const { disabledSelector, lang, ns } = this;
             const formHiddenSelector = this.hiddenSelector.zoom('end-date:form').toString();
             return html `
-      <div>
+      <div class="sm-col-span-2">
         ${this.renderTemplateOrSlot('end-date:before')}
 
         <foxy-form-dialog
@@ -243,6 +242,36 @@ export class SubscriptionForm extends Base {
             }
             return date.getTime() >= Date.now();
         };
+        this.__checkStartDateAvailability = (date) => {
+            return date.getTime() >= Date.now();
+        };
+        this.__renderStartDate = () => {
+            const { data, lang, ns } = this;
+            return html `
+      <div data-testid="start-date">
+        ${this.renderTemplateOrSlot('start-date:before')}
+
+        <x-group frame>
+          <foxy-i18n key="start_date" ns=${ns} lang=${lang} slot="header"></foxy-i18n>
+          <foxy-internal-calendar
+            start=${ifDefined(data === null || data === void 0 ? void 0 : data.start_date.substr(0, 10))}
+            value=${ifDefined(data === null || data === void 0 ? void 0 : data.start_date)}
+            lang=${lang}
+            ?readonly=${!this.__isStartDateEditable}
+            ?disabled=${this.disabledSelector.matches('start-date', true)}
+            .checkAvailability=${this.__checkStartDateAvailability}
+            @change=${(evt) => {
+                const target = evt.target;
+                this.edit({ start_date: target.value });
+            }}
+          >
+          </foxy-internal-calendar>
+        </x-group>
+
+        ${this.renderTemplateOrSlot('start-date:after')}
+      </div>
+    `;
+        };
         this.__renderNextTransactionDate = () => {
             const { data, lang, ns } = this;
             const isActive = !!(data === null || data === void 0 ? void 0 : data.is_active);
@@ -333,76 +362,21 @@ export class SubscriptionForm extends Base {
         };
         this.__renderFrequency = () => {
             return html `
-      <div>
+      <div class="sm-col-span-2">
         ${this.renderTemplateOrSlot('frequency:before')}
         ${this.settings && this.__frequencies.length > 4
                 ? this.__renderFrequencyAsDropdown()
                 : this.__renderFrequencyAsRadioList()}
         ${this.renderTemplateOrSlot('frequency:after')}
       </div>
-    `;
-        };
-        this.__transactionsTableColumns = [
-            {
-                cell(ctx) {
-                    var _a;
-                    const colors = {
-                        declined: 'text-error',
-                        rejected: 'text-error',
-                    };
-                    const status = TransactionsTable.statusColumn.cell(ctx);
-                    const price = TransactionsTable.priceColumn.cell(ctx);
-                    const color = (_a = colors[ctx.data.status]) !== null && _a !== void 0 ? _a : 'text-body';
-                    return ctx.html `
-          <span class="sr-only">${status}</span>
-          <span class="${color} text-s">${price}</span>
-        `;
-                },
-            },
-            { cell: TransactionsTable.idColumn.cell, hideBelow: 'sm' },
-            { cell: TransactionsTable.dateColumn.cell },
-            { cell: TransactionsTable.receiptColumn.cell },
-        ];
-        this.__renderTransactionsPage = ({ html, ...ctx }) => {
-            var _a, _b;
-            return html `
-      <foxy-table
-        group=${ctx.group}
-        lang=${ctx.lang}
-        href=${ctx.href}
-        ns="${ctx.ns} ${(_b = (_a = customElements.get('foxy-transactions-table')) === null || _a === void 0 ? void 0 : _a.defaultNS) !== null && _b !== void 0 ? _b : ''}"
-        .columns=${this.__transactionsTableColumns}
-      >
-      </foxy-table>
-    `;
-        };
-        this.__renderTransactions = () => {
-            var _a, _b;
-            const { lang, ns } = this;
-            return html `
-      <div data-testid="transactions">
-        ${this.renderTemplateOrSlot('transactions:before')}
-
-        <x-group frame>
-          <foxy-i18n lang=${lang} slot="header" key="transaction_plural" ns=${ns}></foxy-i18n>
-          <foxy-collection-pages
-            group=${this.group}
-            class="block divide-y divide-contrast-10 px-m"
-            first=${(_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:transactions'].href) !== null && _b !== void 0 ? _b : ''}
-            lang=${lang}
-            ns=${ns}
-            .page=${this.__renderTransactionsPage}
-          >
-          </foxy-collection-pages>
-        </x-group>
-
-        ${this.renderTemplateOrSlot('transactions:after')}
-      </div>
     `;
         };
     }
     static get scopedElements() {
         return {
+            'foxy-internal-timestamps-control': customElements.get('foxy-internal-timestamps-control'),
+            'foxy-internal-async-list-control': customElements.get('foxy-internal-async-list-control'),
+            'foxy-internal-number-control': customElements.get('foxy-internal-number-control'),
             'foxy-internal-calendar': customElements.get('foxy-internal-calendar'),
             'foxy-collection-pages': customElements.get('foxy-collection-pages'),
             'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),
@@ -410,12 +384,12 @@ export class SubscriptionForm extends Base {
             'foxy-form-dialog': customElements.get('foxy-form-dialog'),
             'vaadin-button': customElements.get('vaadin-button'),
             'foxy-spinner': customElements.get('foxy-spinner'),
+            'foxy-nucleon': customElements.get('foxy-nucleon'),
             'vcf-tooltip': customElements.get('vcf-tooltip'),
             'foxy-table': customElements.get('foxy-table'),
             'foxy-i18n': customElements.get('foxy-i18n'),
             'iron-icon': customElements.get('iron-icon'),
             'x-skeleton': Skeleton,
-            'x-preview': Preview,
             'x-choice': Choice,
             'x-group': Group,
         };
@@ -423,46 +397,197 @@ export class SubscriptionForm extends Base {
     static get properties() {
         return {
             ...super.properties,
+            getTransactionPageHref: { attribute: false },
+            customerAddresses: { attribute: 'customer-addresses' },
+            itemCategories: { attribute: 'item-categories' },
+            localeCodes: { attribute: 'locale-codes' },
             settings: { type: Object },
+            coupons: {},
         };
     }
-    render() {
-        var _a, _b;
-        const isBusy = this.in('busy');
-        const isFail = this.in('fail');
+    get hiddenSelector() {
+        return new BooleanSelector(`items:pagination:card:autorenew-icon ${super.hiddenSelector}`);
+    }
+    renderBody() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        let transactionsHref;
+        try {
+            const url = new URL((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:transactions'].href) !== null && _b !== void 0 ? _b : '');
+            url.searchParams.set('order', 'transaction_date desc');
+            url.searchParams.set('zoom', 'items');
+            transactionsHref = url.toString();
+        }
+        catch (_j) {
+            transactionsHref = undefined;
+        }
+        const currencyDisplay = ((_c = this.__store) === null || _c === void 0 ? void 0 : _c.use_international_currency_symbol) ? 'code' : 'symbol';
+        const cart = this.__transactionTemplate;
+        let currencyCode = null;
+        if (cart && 'currency_code' in cart) {
+            // TODO: remove the directive below once the SDK is updated
+            // @ts-expect-error SDK types are incomplete
+            currencyCode = cart.currency_code;
+        }
+        else {
+            const allLocaleCodes = this.__localeCodesHelper;
+            const localeCode = (_e = ((_d = this.__templateSet) !== null && _d !== void 0 ? _d : this.__defaultTemplateSet)) === null || _e === void 0 ? void 0 : _e.locale_code;
+            const localeInfo = localeCode ? allLocaleCodes === null || allLocaleCodes === void 0 ? void 0 : allLocaleCodes.values[localeCode] : void 0;
+            if (localeInfo)
+                currencyCode = (_g = (_f = /Currency: ([A-Z]{3})/g.exec(localeInfo)) === null || _f === void 0 ? void 0 : _f[1]) !== null && _g !== void 0 ? _g : null;
+        }
         return html `
-      <div
-        data-testid="wrapper"
-        aria-busy=${isBusy}
-        aria-live="polite"
-        class="relative space-y-l text-body font-lumo text-m leading-m"
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__transactionTemplateHref)}
+        id=${this.__transactionTemplateLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__defaultTemplateSetHref)}
+        id=${this.__defaultTemplateSetLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__localeCodesHelperHref)}
+        id=${this.__localeCodesHelperLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__templateSetHref)}
+        id=${this.__templateSetLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__storeHref)}
+        id=${this.__storeLoaderId}
+        @update=${() => this.requestUpdate()}
       >
-        ${this.hiddenSelector.matches('header', true) ? '' : this.__renderHeader()}
+      </foxy-nucleon>
+
+      <div class="relative grid grid-cols-1 sm-grid-cols-2 gap-l">
+        ${this.hiddenSelector.matches('header', true)
+            ? ''
+            : this.__renderHeader(currencyCode !== null && currencyCode !== void 0 ? currencyCode : void 0, currencyDisplay)}
         ${this.hiddenSelector.matches('items', true) ? '' : this.__renderItems()}
-        ${this.hiddenSelector.matches('end-date', true) ? '' : this.__renderEndDate()}
-        ${this.__isNextTransactionDateVisible ? this.__renderNextTransactionDate() : ''}
         ${this.__isFrequencyVisible ? this.__renderFrequency() : ''}
-        ${this.hiddenSelector.matches('transactions', true) ? '' : this.__renderTransactions()}
+        ${this.__isStartDateVisible ? this.__renderStartDate() : ''}
+        ${this.__isNextTransactionDateVisible ? this.__renderNextTransactionDate() : ''}
 
-        <div
-          data-testid="spinner"
-          class=${classMap({
-            'transition duration-500 ease-in-out absolute inset-0 flex': true,
-            'opacity-0 pointer-events-none': !isBusy && !isFail,
-        })}
+        <foxy-internal-number-control
+          suffix=${ifDefined(currencyCode !== null && currencyCode !== void 0 ? currencyCode : void 0)}
+          infer="past-due-amount"
+          class="sm-col-span-2"
+          min="0"
         >
-          <foxy-spinner
-            layout="vertical"
-            class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l"
-            state=${isFail ? 'error' : isBusy ? 'busy' : 'empty'}
-            lang=${this.lang}
-            ns="${this.ns} ${(_b = (_a = customElements.get('foxy-spinner')) === null || _a === void 0 ? void 0 : _a.defaultNS) !== null && _b !== void 0 ? _b : ''}"
-          >
-          </foxy-spinner>
-        </div>
+        </foxy-internal-number-control>
+
+        <foxy-internal-async-list-control
+          first=${ifDefined((_h = this.data) === null || _h === void 0 ? void 0 : _h._links['fx:attributes'].href)}
+          class="sm-col-span-2"
+          infer="attributes"
+          limit="5"
+          form="foxy-attribute-form"
+          item="foxy-attribute-card"
+        >
+        </foxy-internal-async-list-control>
+
+        <foxy-internal-async-list-control
+          first=${ifDefined(transactionsHref)}
+          class="sm-col-span-2"
+          infer="transactions"
+          limit="5"
+          item="foxy-transaction-card"
+          hide-delete-button
+          .getPageHref=${this.getTransactionPageHref}
+        >
+        </foxy-internal-async-list-control>
+
+        <foxy-internal-timestamps-control infer="timestamps" class="sm-col-span-2">
+        </foxy-internal-timestamps-control>
+
+        ${this.hiddenSelector.matches('end-date', true) ? '' : this.__renderEndDate()}
       </div>
     `;
     }
+    get __transactionTemplateHref() {
+        var _a;
+        return (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:transaction_template'].href;
+    }
+    get __defaultTemplateSetHref() {
+        var _a, _b, _c;
+        const templateSetUri = (_a = this.__transactionTemplate) === null || _a === void 0 ? void 0 : _a.template_set_uri;
+        if (templateSetUri === '') {
+            try {
+                const url = new URL((_c = (_b = this.__store) === null || _b === void 0 ? void 0 : _b._links['fx:template_sets'].href) !== null && _c !== void 0 ? _c : '');
+                url.searchParams.set('code', 'DEFAULT');
+                return url.toString();
+            }
+            catch (_d) {
+                //
+            }
+        }
+    }
+    get __localeCodesHelperHref() {
+        var _a;
+        if (this.__defaultTemplateSetHref || this.__templateSetHref) {
+            return (_a = this.localeCodes) !== null && _a !== void 0 ? _a : void 0;
+        }
+    }
+    get __templateSetHref() {
+        const cart = this.__transactionTemplate;
+        // TODO: remove the directive below once SDK is updated
+        // @ts-expect-error SDK types are incomplete
+        const currencyCode = cart === null || cart === void 0 ? void 0 : cart.currency_code;
+        if (!currencyCode)
+            return (cart === null || cart === void 0 ? void 0 : cart.template_set_uri) || void 0;
+    }
+    get __storeHref() {
+        var _a, _b;
+        return (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:store']) === null || _b === void 0 ? void 0 : _b.href;
+    }
+    get __transactionTemplate() {
+        var _a, _b;
+        const selector = `#${this.__transactionTemplateLoaderId}`;
+        return (_b = (_a = this.renderRoot.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : null;
+    }
+    get __defaultTemplateSet() {
+        var _a, _b;
+        const selector = `#${this.__defaultTemplateSetLoaderId}`;
+        const loader = this.renderRoot.querySelector(selector);
+        return (_b = (_a = loader === null || loader === void 0 ? void 0 : loader.data) === null || _a === void 0 ? void 0 : _a._embedded['fx:template_sets'][0]) !== null && _b !== void 0 ? _b : null;
+    }
+    get __localeCodesHelper() {
+        var _a, _b;
+        const selector = `#${this.__localeCodesHelperLoaderId}`;
+        return (_b = (_a = this.renderRoot.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : null;
+    }
+    get __templateSet() {
+        var _a, _b;
+        const selector = `#${this.__templateSetLoaderId}`;
+        return (_b = (_a = this.renderRoot.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : null;
+    }
+    get __store() {
+        var _a, _b;
+        const selector = `#${this.__storeLoaderId}`;
+        return (_b = (_a = this.renderRoot.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : null;
+    }
     get __isNextTransactionDateVisible() {
         if (this.hiddenSelector.matches('next-transaction-date', true))
             return false;
@@ -477,6 +602,24 @@ export class SubscriptionForm extends Base {
         const rules = this.settings.subscriptions.allow_next_date_modification;
         return !!getNextTransactionDateConstraints(this.data, rules);
     }
+    get __isStartDateVisible() {
+        if (this.hiddenSelector.matches('start-date', true))
+            return false;
+        return this.__isNextTransactionDateVisible;
+    }
+    get __isStartDateEditable() {
+        if (this.readonlySelector.matches('start-date', true))
+            return false;
+        if (this.data === null)
+            return false;
+        if (this.data.end_date && new Date(this.data.end_date) <= new Date())
+            return false;
+        if (this.data.is_active === false)
+            return false;
+        if (this.data.start_date && new Date(this.data.start_date) <= new Date())
+            return false;
+        return this.settings === null;
+    }
     get __isFrequencyVisible() {
         if (this.hiddenSelector.matches('frequency', true))
             return false;