feat(foxy-transaction): add link to view web receipt

Foxy · Jan 17, 2025 · 5f08d25 · 5f08d25
1 parent d8c88ec
commit 5f08d25
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 0 deletions.
diff --git a/...tion/internal/InternalTransactionActionsControl/InternalTransactionActionsControl.test.ts b/...tion/internal/InternalTransactionActionsControl/InternalTransactionActionsControl.test.ts
@@ -232,5 +232,44 @@ describe('Transaction', () => {
       expect(link).to.exist;
       expect(link).to.have.property('href', 'https://example.com/test');
     });
+
+    it('renders View Receipt action if transaction has fx:receipt link', async () => {
+      const router = createRouter();
+      const wrapper = await fixture<Transaction>(html`
+        <foxy-nucleon
+          href="https://demo.api/hapi/transactions/0"
+          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+        >
+          <foxy-internal-transaction-actions-control infer="actions">
+          </foxy-internal-transaction-actions-control>
+        </foxy-nucleon>
+      `);
+
+      await waitUntil(() => wrapper.in({ idle: 'snapshot' }));
+      const control = wrapper.firstElementChild as InternalTransactionActionsControl;
+
+      unset(wrapper, 'data._links["fx:receipt"]');
+      wrapper.data = { ...wrapper.data! };
+      await wrapper.requestUpdate();
+      await control.requestUpdate();
+
+      expect(control.renderRoot.querySelector('[infer="receipt"]')).to.not.exist;
+
+      set(wrapper, 'data._links["fx:receipt"]', { href: 'https://example.com/receipt' });
+      wrapper.data = { ...wrapper.data! };
+      await wrapper.requestUpdate();
+      await control.requestUpdate();
+
+      const action = control.renderRoot.querySelector('[infer="receipt"]');
+
+      expect(action).to.exist;
+      expect(action).to.have.property('localName', 'foxy-i18n');
+      expect(action).to.have.property('key', 'caption');
+
+      const link = action?.closest('a');
+      expect(link).to.exist;
+      expect(link).to.have.attribute('href', 'https://example.com/receipt');
+      expect(link).to.have.attribute('target', '_blank');
+    });
   });
 });
diff --git a/...ansaction/internal/InternalTransactionActionsControl/InternalTransactionActionsControl.ts b/...ansaction/internal/InternalTransactionActionsControl/InternalTransactionActionsControl.ts
@@ -12,6 +12,7 @@ export class InternalTransactionActionsControl extends InternalControl {
         ${this.nucleon?.data?._links['fx:refund'] ? this.__renderRefundAction() : ''}
         ${this.nucleon?.data?._links['fx:send_emails'] ? this.__renderSendEmailsAction() : ''}
         ${this.nucleon?.data?._links['fx:subscription'] ? this.__renderSubscriptionAction() : ''}
+        ${this.nucleon?.data?._links['fx:receipt'] ? this.__renderReceiptAction() : ''}
       </div>
     `;
   }
@@ -76,4 +77,18 @@ export class InternalTransactionActionsControl extends InternalControl {
       </a>
     `;
   }
+
+  private __renderReceiptAction() {
+    const host = this.nucleon as Transaction | null;
+
+    return html`
+      <a
+        target="_blank"
+        class="rounded text-m font-medium text-primary cursor-pointer transition-opacity hover-opacity-80 focus-outline-none focus-ring-2 focus-ring-primary-50"
+        href=${ifDefined(host?.data?._links['fx:receipt']?.href)}
+      >
+        <foxy-i18n infer="receipt" key="caption"></foxy-i18n>
+      </a>
+    `;
+  }
 }
diff --git a/src/static/translations/admin-subscription-form/en.json b/src/static/translations/admin-subscription-form/en.json
@@ -1949,6 +1949,9 @@
           },
           "subscription": {
             "caption": "Go to subscription"
+          },
+          "receipt": {
+            "caption": "View receipt"
           }
         },
         "spinner": {

diff --git a/src/static/translations/transaction/en.json b/src/static/translations/transaction/en.json
@@ -1710,6 +1710,9 @@
     },
     "subscription": {
       "caption": "Go to subscription"
+    },
+    "receipt": {
+      "caption": "View receipt"
     }
   },
   "spinner": {