feat(foxy-cart-card): display cart id in line 1

src/elements/public/CartCard/CartCard.test.ts

@@ -46,64 +46,6 @@ describe('CartCard', () => {
     expect(new CartCard()).to.be.instanceOf(InternalCard);
   });
 
-  it('renders exact item count in line 1 when items are embedded', async () => {
-    type Items = Resource<Rels.Items>;
-    type Cart = Resource<Rels.Cart, { zoom: 'items' }>;
-
-    const router = createRouter();
-    const href = 'https://demo.api/hapi/carts/0?zoom=items';
-    const data = await getTestData<Cart>(href);
-    const items = await getTestData<Items>(data._links['fx:items'].href);
-
-    const element = await fixture<CartCard>(html`
-      <foxy-cart-card
-        locale-codes="https://demo.api/hapi/property_helpers/7"
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-      </foxy-cart-card>
-    `);
-
-    data._embedded['fx:items'] = [items._embedded['fx:items'][0]];
-    element.data = data;
-
-    await waitUntil(() => element.isBodyReady, '', { timeout: 5000 });
-
-    const line1 = await getByKey(element, 'line_1');
-
-    expect(line1).to.exist;
-    expect(line1).to.have.attribute('infer', '');
-    expect(line1).to.have.nested.property('options.count', 1);
-  });
-
-  it('renders approximate item count in line 1 when exactly 20 items are embedded', async () => {
-    type Items = Resource<Rels.Items>;
-    type Cart = Resource<Rels.Cart, { zoom: 'items' }>;
-
-    const router = createRouter();
-    const href = 'https://demo.api/hapi/carts/0?zoom=items';
-    const data = await getTestData<Cart>(href);
-    const items = await getTestData<Items>(data._links['fx:items'].href);
-
-    const element = await fixture<CartCard>(html`
-      <foxy-cart-card
-        locale-codes="https://demo.api/hapi/property_helpers/7"
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-      </foxy-cart-card>
-    `);
-
-    data._embedded['fx:items'] = new Array(20).fill(items._embedded['fx:items'][0]);
-    element.data = data;
-
-    await waitUntil(() => element.isBodyReady, '', { timeout: 5000 });
-
-    const line1 = await getByKey(element, 'line_1_approximate');
-
-    expect(line1).to.exist;
-    expect(line1).to.have.attribute('infer', '');
-    expect(line1).to.have.nested.property('options.count', 20);
-  });
-
   it('uses store-wide currency display settings for line 1 (intl symbol: true)', async () => {
     const router = createRouter();
     const href = 'https://demo.api/hapi/carts/0';
@@ -162,7 +104,7 @@ describe('CartCard', () => {
     expect(line1).to.have.nested.property('options.currencyDisplay', 'symbol');
   });
 
-  it('renders cart total in line 1', async () => {
+  it('renders cart ID and total in line 1', async () => {
     const router = createRouter();
     const href = 'https://demo.api/hapi/carts/0';
     const data = await getTestData<Data & { currency_code?: string }>(href);
@@ -183,6 +125,7 @@ describe('CartCard', () => {
     expect(line1).to.exist;
     expect(line1).to.have.attribute('infer', '');
     expect(line1).to.have.nested.property('options.amount');
+    expect(line1).to.have.nested.property('options.id', 0);
 
     expect(line1.options.amount.split(' ')[0]).to.equal(String(data.total_order));
   });

src/elements/public/CartCard/CartCard.ts

@@ -1,7 +1,7 @@
 import type { PropertyDeclarations } from 'lit-element';
 import type { TemplateResult } from 'lit-html';
 import type { NucleonElement } from '../NucleonElement/NucleonElement';
-import type { Resource } from '@foxy.io/sdk/core';
+import { getResourceId, Resource } from '@foxy.io/sdk/core';
 import type { Rels } from '@foxy.io/sdk/backend';
 import type { Data } from './types';
 
@@ -48,7 +48,6 @@ export class CartCard extends Base<Data> {
   renderBody(): TemplateResult {
     const statusOptions = this.__statusOptions;
     const line1Options = this.__line1Options;
-    const line1Key = this.__line1Key;
     const line2Options = this.__line2Options;
     const line2Key = this.__line2Key;
     const data = this.data;
@@ -102,8 +101,8 @@ export class CartCard extends Base<Data> {
       <div class="text-left leading-s">
         <div class="flex items-center space-x-s">
           <span class="flex-1 font-medium text-body truncate">
-            ${line1Options && line1Key
-              ? html`<foxy-i18n infer="" key=${line1Key} .options=${line1Options}></foxy-i18n>`
+            ${line1Options
+              ? html`<foxy-i18n infer="" key="line_1" .options=${line1Options}></foxy-i18n>`
               : html`&ZeroWidthSpace;`}
           </span>
           <span class="text-s text-tertiary">
@@ -261,12 +260,15 @@ export class CartCard extends Base<Data> {
     const count = this.__items?.count;
     if (count === undefined) return;
 
-    return { amount: `${totalOrder} ${currencyCode}`, currencyDisplay, count };
-  }
+    const href = this.data?._links['self'].href;
+    if (href === undefined) return;
 
-  private get __line1Key() {
-    const items = this.__items;
-    if (items) return items.isApproximateCount ? 'line_1_approximate' : 'line_1';
+    return {
+      currencyDisplay,
+      amount: `${totalOrder} ${currencyCode}`,
+      count,
+      id: getResourceId(href),
+    };
   }
 
   private get __line2Options() {

src/static/schemas/cart-card.json

@@ -2,12 +2,7 @@
   "$schema": "http://json-schema.org/draft-07/schema",
   "additionalProperties": false,
   "properties": {
-    "line_1": { "type": "string", "default": "{{ count }} item • {{ amount, price }}" },
-    "line_1_plural": { "type": "string", "default": "{{ count }} items • {{ amount, price }}" },
-    "line_1_approximate": {
-      "type": "string",
-      "default": "At least 20 items • {{ amount, price }}"
-    },
+    "line_1": { "type": "string", "default": "ID {{ id }} • {{ amount, price }}" },
     "line_2_one": { "type": "string", "default": "{{ name }}" },
     "line_2_many": { "type": "string", "default": "{{ name }} + more" },
     "line_2_empty": { "type": "string", "default": "Empty cart" },
@@ -25,8 +20,6 @@
   },
   "required": [
     "line_1",
-    "line_1_plural",
-    "line_1_approximate",
     "line_2_one",
     "line_2_many",
     "line_2_empty",

src/static/translations/cart-card/en.json

@@ -1,7 +1,5 @@
 {
-  "line_1": "{{ count }} item • {{ amount, price }}",
-  "line_1_plural": "{{ count }} items • {{ amount, price }}",
-  "line_1_approximate": "At least 20 items • {{ amount, price }}",
+  "line_1": "ID {{ id }} • {{ amount, price }}",
   "line_2_one": "{{ name }}",
   "line_2_many": "{{ name }} + more",
   "line_2_empty": "Empty cart",