@tribe-nest/forge 3.69.0 → 3.74.0

package/src/ui/styled/_tests/CheckoutLinkPayment.spec.tsx

@@ -193,6 +193,91 @@ describe("CheckoutLinkPayment", () => {
     });
   });
 
+  describe("several items and shipping (phase 2)", () => {
+    const multi = (shipping: CheckoutLinkView["shipping"]) =>
+      view({
+        item: { type: "product", title: "Tour Tee (Large)" },
+        items: [
+          {
+            type: "product",
+            title: "Tour Tee (Large)",
+            quantity: 2,
+            unitPriceCents: 3000,
+            physical: true,
+            productId: "p-1",
+            productVariantId: "v-1",
+          },
+          { type: "event_ticket", title: "Spring Show: General", quantity: 1, unitPriceCents: 2000, physical: false },
+        ],
+        quantity: 3,
+        unitPriceCents: null,
+        totalCents: 8000,
+        shipping,
+      });
+
+    it("lists every line with its amount, and holds Pay until the delivery address is in", () => {
+      const html = render(
+        page({
+          link: { isLoading: false, error: null, data: multi({ required: true, set: false, address: null, costCents: null }) },
+        }),
+      );
+      expect(html).toContain('data-testid="checkout-link-items"');
+      expect(html).toContain("2 x Tour Tee (Large)");
+      expect(html).toContain("$60.00");
+      expect(html).toContain("Spring Show: General");
+      expect(html).not.toContain("Quantity:");
+      expect(html).toContain('data-testid="checkout-link-shipping" data-state="address"');
+      expect(html).toContain("Delivery address");
+      expect(html).toMatch(/<button disabled=""[^>]*data-testid="checkout-link-pay"/);
+      expect(html).not.toContain('data-testid="checkout-link-shipping-error"');
+      expect(html).toContain("Pay $80.00");
+    });
+
+    it("once the address is in: the address, the shipping line, the total with shipping, a way to change it", () => {
+      const html = render(
+        page({
+          link: {
+            isLoading: false,
+            error: null,
+            data: multi({
+              required: true,
+              set: true,
+              address: { address1: "1 Main St", city: "Austin", stateCode: "TX", countryCode: "US", zip: "78701" },
+              costCents: 1000,
+            }),
+          },
+        }),
+      );
+      expect(html).toContain('data-state="set"');
+      expect(html).toContain("1 Main St, Austin, TX, 78701, US");
+      expect(html).toContain('data-testid="checkout-link-shipping-cost"');
+      expect(html).toContain("$10.00");
+      expect(html).toContain("Pay $90.00");
+      expect(html).toContain('data-testid="checkout-link-change-address"');
+      expect(html).not.toMatch(/<button disabled=""[^>]*data-testid="checkout-link-pay"/);
+    });
+
+    it("the address cannot be changed once a payment has started", () => {
+      const html = render(
+        page({
+          paymentStarted: true,
+          clientSecret: "pi_secret",
+          link: {
+            isLoading: false,
+            error: null,
+            data: multi({
+              required: true,
+              set: true,
+              address: { address1: "1 Main St", city: "Austin", stateCode: "TX", countryCode: "US", zip: "78701" },
+              costCents: 1000,
+            }),
+          },
+        }),
+      );
+      expect(html).not.toContain('data-testid="checkout-link-change-address"');
+    });
+  });
+
   it("an unknown link says it is not valid", () => {
     const html = render(page({ link: { isLoading: false, error: new Error("404"), data: undefined } }));
     expect(html).toContain('data-state="not-found"');