feat(foxy-admin-subscription-form): add Charge Past Due button

Author: pheekus

src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.test.ts

@@ -16,6 +16,10 @@ describe('AdminSubscriptionForm', () => {
   before(() => (window.ResizeObserver = undefined));
   after(() => (window.ResizeObserver = OriginalResizeObserver));
 
+  it('imports and defines foxy-internal-post-action-control', () => {
+    expect(customElements.get('foxy-internal-post-action-control')).to.exist;
+  });
+
   it('imports and defines foxy-internal-async-list-control', () => {
     expect(customElements.get('foxy-internal-async-list-control')).to.exist;
   });
@@ -238,6 +242,35 @@ describe('AdminSubscriptionForm', () => {
     expect(control?.localName).to.equal('foxy-internal-summary-control');
   });
 
+  it('renders post action control for charging past due amount when appropriate', async () => {
+    const router = createRouter();
+    const form = await fixture<Form>(html`
+      <foxy-admin-subscription-form
+        href="https://demo.api/hapi/subscriptions/0?zoom=transaction_template"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-admin-subscription-form>
+    `);
+
+    const testData = await getTestData<Data>('./hapi/subscriptions/0?zoom=transaction_template');
+    // @ts-expect-error - SDK doesn't know yet about the `fx:charge_past_due` link.
+    testData._links['fx:charge_past_due'] = { href: 'https://demo.api/virtual/empty' };
+    testData.past_due_amount = 10;
+    testData._embedded['fx:transaction_template'].currency_code = 'AUD';
+    form.data = testData;
+
+    await waitUntil(() => !!form.data, '', { timeout: 5000 });
+    await form.requestUpdate();
+    const summary = form.renderRoot.querySelector('[infer="overdue"]');
+    const control = summary?.querySelector('[infer="charge-past-due"]');
+
+    expect(control?.localName).to.equal('foxy-internal-post-action-control');
+    expect(control).to.have.attribute('theme', 'tertiary-inline');
+    expect(control).to.have.attribute('message-options', JSON.stringify({ amount: '10 AUD' }));
+    expect(control).to.have.attribute('href', 'https://demo.api/virtual/empty');
+    expect(control).to.have.attribute('href', 'https://demo.api/virtual/empty');
+  });
+
   it('renders number control for past due amount inside of the overdue summary control', async () => {
     const router = createRouter();
     const form = await fixture<Form>(html`

src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.ts

@@ -46,6 +46,11 @@ export class AdminSubscriptionForm extends Base<Data> {
       transactionsHref = undefined;
     }
 
+    // @ts-expect-error - SDK doesn't know yet about the `fx:charge_past_due` link.
+    const chargePastDueHref: string | undefined = this.data?._links['fx:charge_past_due']?.href;
+    const pastDueAmount = this.data?.past_due_amount;
+    const currencyCode = this.data?._embedded['fx:transaction_template'].currency_code;
+
     return html`
       ${this.renderHeader()}
 
@@ -70,11 +75,24 @@ export class AdminSubscriptionForm extends Base<Data> {
       <foxy-internal-summary-control infer="overdue">
         <foxy-internal-number-control
           layout="summary-item"
-          suffix=${ifDefined(this.data?._embedded['fx:transaction_template'].currency_code)}
+          suffix=${ifDefined(currencyCode)}
           infer="past-due-amount"
           min="0"
         >
         </foxy-internal-number-control>
+
+        ${chargePastDueHref && currencyCode && pastDueAmount
+          ? html`
+              <foxy-internal-post-action-control
+                message-options=${JSON.stringify({ amount: `${pastDueAmount} ${currencyCode}` })}
+                theme="tertiary-inline"
+                infer="charge-past-due"
+                href=${chargePastDueHref}
+                @success=${() => this.refresh()}
+              >
+              </foxy-internal-post-action-control>
+            `
+          : ''}
       </foxy-internal-summary-control>
 
       <foxy-internal-summary-control infer="self-service-links">

src/elements/public/AdminSubscriptionForm/index.ts

@@ -1,3 +1,4 @@
+import '../../internal/InternalPostActionControl/index';
 import '../../internal/InternalAsyncListControl/index';
 import '../../internal/InternalFrequencyControl/index';
 import '../../internal/InternalNumberControl/index';

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

@@ -93,6 +93,22 @@
       "helper_text": "Missing payments increase this amount. Depending on your store settings, we may charge it automatically on the next billing cycle.",
       "placeholder": "0",
       "clear": "Clear"
+    },
+    "charge-past-due": {
+      "button": {
+        "idle": "Charge past due amount",
+        "busy": "Processing..."
+      },
+      "notification": {
+        "success": "Past due amount successfully charged.",
+        "error": "Failed to charge past due amount."
+      },
+      "confirm-dialog": {
+        "message": "This will attempt to charge the past due amount of {{ amount, price }}. Would you like to proceed?",
+        "confirm": "Yes",
+        "cancel": "No",
+        "header": "Past due payment"
+      }
     }
   },
   "self-service-links": {