feat(foxy-admin-subscription-card): add customer name to the last line

src/elements/public/AdminSubscriptionCard/AdminSubscriptionCard.test.ts

@@ -692,4 +692,50 @@ describe('AdminSubscriptionCard', () => {
 
     expect(element.renderRoot).to.include.text('[email protected]');
   });
+
+  it('renders customer name in line 3 from embedded fx:customer', async () => {
+    type Subscription = Resource<Rels.Subscription, { zoom: ['customer'] }>;
+
+    const router = createRouter();
+    const href = 'https://demo.api/hapi/subscriptions/0?zoom=customer';
+    const data = await getTestData<Subscription>(href, router);
+
+    const element = await fixture<Card>(html`
+      <foxy-admin-subscription-card
+        locale-codes="https://demo.api/hapi/property_helpers/7"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-admin-subscription-card>
+    `);
+
+    data._embedded['fx:customer'].first_name = 'Test';
+    data._embedded['fx:customer'].last_name = 'User';
+    element.data = data;
+
+    await waitUntil(() => element.isBodyReady, '', { timeout: 5000 });
+    expect(element.renderRoot).to.include.text('Test User');
+  });
+
+  it('renders customer name in line 3 from remote fx:customer', async () => {
+    const router = createRouter();
+    const href = 'https://demo.api/hapi/subscriptions/0';
+    const data = await getTestData<Resource<Rels.Subscription>>(href, router);
+
+    const element = await fixture<Card>(html`
+      <foxy-admin-subscription-card
+        locale-codes="https://demo.api/hapi/property_helpers/7"
+        href=${href}
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-admin-subscription-card>
+    `);
+
+    await new Card.API(element).fetch(data._links['fx:customer'].href, {
+      method: 'PATCH',
+      body: JSON.stringify({ first_name: 'Test', last_name: 'User' }),
+    });
+
+    await waitUntil(() => element.isBodyReady, '', { timeout: 5000 });
+    expect(element.renderRoot).to.include.text('Test User');
+  });
 });

src/elements/public/AdminSubscriptionCard/AdminSubscriptionCard.ts

@@ -45,12 +45,15 @@ export class AdminSubscriptionCard extends Base<Data> {
 
   private readonly __templateSetLoaderId = 'templateSetLoader';
 
+  private readonly __customerLoaderId = 'customerLoader';
+
   private readonly __itemsLoaderId = 'itemsLoader';
 
   private readonly __storeLoaderId = 'storeLoader';
 
   renderBody(): TemplateResult {
     const isFailed = !!this.data?.first_failed_transaction_date;
+    const customer = this.__customer;
     const cart = this.__transactionTemplate;
 
     const priceKey = this.__priceKey;
@@ -97,6 +100,15 @@ export class AdminSubscriptionCard extends Base<Data> {
       >
       </foxy-nucleon>
 
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__customerHref)}
+        id=${this.__customerLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
       <foxy-nucleon
         class="hidden"
         infer=""
@@ -135,14 +147,21 @@ export class AdminSubscriptionCard extends Base<Data> {
             : html`&ZeroWidthSpace;`}
         </div>
 
-        <div class="text-tertiary truncate text-s">${cart?.customer_email}&ZeroWidthSpace;</div>
+        <div class="text-tertiary truncate text-s">
+          ${customer?.first_name} ${customer?.last_name} (${cart?.customer_email})
+        </div>
       </div>
     `;
   }
 
   get isBodyReady(): boolean {
-    const isLoaded = !!this.__items && !!this.__currencyCode && !!this.__currencyDisplay;
-    return super.isBodyReady && isLoaded;
+    return (
+      super.isBodyReady &&
+      !!this.__items &&
+      !!this.__currencyCode &&
+      !!this.__currencyDisplay &&
+      !!this.__customer
+    );
   }
 
   private get __transactionTemplateHref() {
@@ -181,6 +200,11 @@ export class AdminSubscriptionCard extends Base<Data> {
     if (!cart?.currency_code) return cart?.template_set_uri || void 0;
   }
 
+  private get __customerHref() {
+    if ('fx:customer' in (this.data?._embedded ?? {})) return;
+    return this.data?._links['fx:customer']?.href;
+  }
+
   private get __itemsHref() {
     const cart = this.__transactionTemplate;
 
@@ -229,6 +253,18 @@ export class AdminSubscriptionCard extends Base<Data> {
     return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;
   }
 
+  private get __customer() {
+    const data = this.data;
+
+    if (data && '_embedded' in data && 'fx:customer' in data._embedded) {
+      return data._embedded['fx:customer'] as Resource<Rels.Customer>;
+    } else {
+      type Loader = NucleonElement<Resource<Rels.Customer>>;
+      const selector = `#${this.__customerLoaderId}`;
+      return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;
+    }
+  }
+
   private get __items() {
     type Cart = Resource<Rels.TransactionTemplate>;
     type CartWithItems = Resource<Rels.TransactionTemplate, { zoom: 'items' }>;

src/elements/public/AdminSubscriptionCard/types.ts

@@ -3,5 +3,6 @@ import type { Rels } from '@foxy.io/sdk/backend';
 
 export type Data =
   | Resource<Rels.Subscription>
-  | Resource<Rels.Subscription, { zoom: 'transaction_template' }>
-  | Resource<Rels.Subscription, { zoom: { transaction_template: 'items' } }>;
+  | Resource<Rels.Subscription, { zoom: ['customer'] }>
+  | Resource<Rels.Subscription, { zoom: ['transaction_template', 'customer'] }>
+  | Resource<Rels.Subscription, { zoom: [{ transaction_template: 'items' }, 'customer'] }>;