@solvimon/solvimon-web 0.1.0-alpha.13 → 0.1.0-alpha.15

package/dist/screens/UpgradeSubscription/UpgradeSubscription.es.js

@@ -1,315 +1,257 @@
-import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createVNode, createTextVNode, toDisplayString, createElementBlock, Fragment, createElementVNode, renderList, createCommentVNode, normalizeClass, ref, onMounted, watch } from "vue";
-import { u as useIntl, b as _sfc_main$7, _ as _sfc_main$8, x as formatAmount, e as _sfc_main$a, j as _sfc_main$b, l as _sfc_main$c, B as _sfc_main$d, S as _sfc_main$e } from "../../vendor-ui-C0K3osvz.mjs";
-import { _ as _sfc_main$9 } from "../../PricingGroupContent.vue_vue_type_script_setup_true_lang-BChVMzCj.mjs";
-import { c as createPaymentMethodsService } from "../../paymentMethods-67b3UlTZ.mjs";
-import { C as ContentWithAsideLayout } from "../../ContentWithAsideLayout-DhfUkZZg.mjs";
-import { c as createRequestService, u as useConfig, a as useLogger, _ as _sfc_main$f, d as defineCustomElement, g as getComponentName } from "../../component-Djrf1L-Z.mjs";
-import { u as useActionDispatchProvider } from "../../useActionDispatchProvider-BC57-Ufn.mjs";
-import { u as usePortal } from "../../usePortal-cmE08vYs.mjs";
-const mockSubscriptionGetResponse = {
-  id: "ppsu_hwDeeN0vhvcVCsAIdp1G",
-  pricing_plan_schedule_infos: [
-    {
-      id: "ppsc_IwDeeN0vhvcVCIAQdq1a",
-      pricing_plan_version_id: "ppve_MwDeeN0vhvcEuaADdd1f",
-      start_at: "2026-04-05T22:00:00Z",
-      pricing_plan_version: {
-        pricing_categories: [
-          {
-            product_category: {
-              id: "proc_iwDeeN0vhphn6VAtBD1w",
-              name: "Add ons"
-            },
-            display_order: 1,
-            pricings: [
-              {
-                id: "pric_ywDeeN0vhvcPguAadr1V",
-                name: "Integration setup",
-                products: [{ name: "Integration setup" }],
-                items: [
-                  {
-                    id: "prii_NwDeeN0vhvcPguAxds12",
-                    product_items: [
-                      {
-                        name: "Rillet integration setup",
-                        model_type: "ONE_OFF"
-                      }
-                    ],
-                    configs: [
-                      {
-                        on_demand: true,
-                        bands: [
-                          {
-                            fixed_amount: {
-                              quantity: "5000.00",
-                              currency: "EUR"
-                            }
-                          }
-                        ]
-                      }
-                    ]
-                  },
-                  {
-                    id: "prii_IwDeeN0vhvcPgvAsdS1Q",
-                    product_items: [
-                      {
-                        name: "Attio integration setup",
-                        model_type: "ONE_OFF"
-                      }
-                    ],
-                    configs: [
-                      {
-                        on_demand: true,
-                        // FLAT type: price is in `amount`, not `fixed_amount`
-                        bands: [
-                          {
-                            amount: {
-                              quantity: "50000.00",
-                              currency: "EUR"
-                            }
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ],
-            pricing_groups: []
-          }
-        ]
-      }
-    }
-  ]
-};
-const isOnDemandOneOffItem = (item) => {
-  var _a, _b;
-  return (((_a = item.configs) == null ? void 0 : _a.some((c) => c.on_demand)) ?? false) && (((_b = item.product_items) == null ? void 0 : _b.some((pi) => pi.model_type === "ONE_OFF")) ?? false);
-};
-const itemToRow = (item) => {
-  var _a, _b;
-  return {
-    id: item.id,
-    name: (_b = (_a = item.product_items) == null ? void 0 : _a[0]) == null ? void 0 : _b.name,
-    items: [
-      {
-        id: item.id,
-        configs: (item.configs ?? []).map((config) => ({
-          bands: (config.bands ?? []).map((band) => ({
-            fixed_amount: band.fixed_amount ?? band.amount
-          }))
-        }))
-      }
-    ]
-  };
-};
-const pricingToRows = (pricing) => (pricing.items ?? []).filter(isOnDemandOneOffItem).map(itemToRow);
-const categoryToOnDemand = (category) => ({
-  display_order: category.display_order,
-  product_category: category.product_category,
-  pricings: (category.pricings ?? []).flatMap(pricingToRows),
-  pricing_groups: (category.pricing_groups ?? []).map((group) => ({
-    id: group.id,
-    name: group.name,
-    pricings: (group.pricings ?? []).flatMap(pricingToRows)
-  })).filter((g) => g.pricings.length > 0)
-});
-const ITEM_PRICES_EUR = Object.fromEntries(
-  mockSubscriptionGetResponse.pricing_plan_schedule_infos.flatMap((s) => s.pricing_plan_version.pricing_categories).flatMap((cat) => cat.pricings).flatMap((p) => p.items).filter(isOnDemandOneOffItem).map((item) => {
-    var _a, _b, _c, _d, _e;
-    const band = (_c = (_b = (_a = item.configs) == null ? void 0 : _a[0]) == null ? void 0 : _b.bands) == null ? void 0 : _c[0];
-    const raw = ((_d = band == null ? void 0 : band.fixed_amount) == null ? void 0 : _d.quantity) ?? ((_e = band == null ? void 0 : band.amount) == null ? void 0 : _e.quantity) ?? "0";
-    return [item.id, parseFloat(raw)];
-  })
-);
-const VAT_RATE = 0.21;
-const eur = (amount) => ({ quantity: amount.toFixed(2), currency: "EUR" });
-const mockPaymentAcceptor = {
-  id: "paya_NwDeeN0vgXgeP1AyNx14",
-  object_type: "PAYMENT_ACCEPTOR",
-  status: "ACTIVE",
-  reference: "mock-payment-acceptor",
-  name: "Mock payment acceptor",
-  type: "PAYMENT_GATEWAY"
-};
-const mockPaymentIntegration = {
-  id: "intg_zwDeeN0vgXgeM6APNW1g",
-  object_type: "INTEGRATION",
-  reference: "mock-payment-integration",
-  name: "Mock payment integration",
-  description: "Mock payment integration",
-  status: "ACTIVE",
-  type: "PAYMENT_GATEWAY"
-};
-const getMockPreviewResponse = (selectedItemIds) => {
-  const base = selectedItemIds.reduce((sum, id) => sum + (ITEM_PRICES_EUR[id] ?? 0), 0);
-  const tax = Math.round(base * VAT_RATE * 100) / 100;
-  const total = base + tax;
-  return {
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    invoice: {
-      tax_summary: {
-        base_amount: eur(base),
-        tax_amount: eur(tax),
-        total_amount: eur(total),
-        country_code: "NL"
-      }
-    },
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    first_invoice: {},
-    invoice_infos: []
-  };
-};
-const getMockOnDemandPricingItemsResponse = (subscriptionId) => {
-  var _a;
-  const now = Date.now();
-  const schedules = mockSubscriptionGetResponse.pricing_plan_schedule_infos;
-  const activeSchedule = schedules.find((s) => {
-    const start = Date.parse(s.start_at);
-    return Number.isFinite(start) && start <= now;
-  }) ?? schedules[0];
-  const categories = (((_a = activeSchedule == null ? void 0 : activeSchedule.pricing_plan_version) == null ? void 0 : _a.pricing_categories) ?? []).map(categoryToOnDemand).filter((c) => {
-    var _a2, _b;
-    return (((_a2 = c.pricings) == null ? void 0 : _a2.length) ?? 0) > 0 || (((_b = c.pricing_groups) == null ? void 0 : _b.length) ?? 0) > 0;
-  });
-  return {
-    pricing_plan_subscription_id: subscriptionId || mockSubscriptionGetResponse.id,
-    pricing_plan_schedule_id: (activeSchedule == null ? void 0 : activeSchedule.id) ?? "",
-    pricing_plan_version_id: (activeSchedule == null ? void 0 : activeSchedule.pricing_plan_version_id) ?? "",
-    billing_period: { type: "MONTH", value: 1 },
-    billing_currency: "EUR",
-    pricing_categories: categories
-  };
-};
-const getMockPaymentMethodOptionsResponse = () => [
-  {
-    payment_acceptor: mockPaymentAcceptor,
-    integration: mockPaymentIntegration,
-    options: [
-      {
-        name: "iDeal",
-        payment_method_variant: "ONLINE_BANKING",
-        payment_gateway_variant: "ADYEN",
-        adyen: { name: "iDEAL | Wero", type: "ideal" }
-      },
-      {
-        name: "Cards",
-        payment_method_variant: "CARD",
-        payment_gateway_variant: "ADYEN",
-        adyen: {
-          name: "Cards",
-          type: "scheme",
-          brands: [
-            "maestro",
-            "accel",
-            "amex",
-            "cup",
-            "diners",
-            "hipercard",
-            "jcb",
-            "mc",
-            "nyce",
-            "pulse",
-            "star",
-            "visa"
-          ]
-        }
-      },
-      {
-        name: "PayPal",
-        payment_method_variant: "DIGITAL_WALLET",
-        payment_gateway_variant: "ADYEN",
-        adyen: { name: "PayPal", type: "paypal", configuration: { intent: "capture" } }
-      },
-      {
-        name: "Trustly",
-        payment_method_variant: "ONLINE_BANKING",
-        payment_gateway_variant: "ADYEN",
-        adyen: { name: "Trustly - Instant Bank Payment", type: "trustly" }
-      }
-    ]
-  }
-];
-const _hoisted_1$4 = { class: "sv-order-summary__items mb-3 flex flex-col gap-2" };
-const _hoisted_2$2 = { class: "sv-order-summary__tax flex flex-col gap-1 border-t pt-3" };
-const _hoisted_3$1 = { class: "sv-order-summary__subtotal flex items-center justify-between" };
-const _hoisted_4$1 = { class: "sv-order-summary__tax-row flex items-center justify-between" };
-const _hoisted_5$1 = { class: "sv-order-summary__total flex items-center justify-between border-t pt-3" };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, createTextVNode, toDisplayString, createElementBlock, Fragment, createCommentVNode, renderList, ref, onMounted, watch, onUnmounted, normalizeClass } from "vue";
+import { u as useIntl, _ as _sfc_main$5, A as _sfc_main$6, e as _sfc_main$7, x as _sfc_main$8, F as _sfc_main$9, B as formatAmount, c as _sfc_main$b, E as _sfc_main$e, g as getCustomerCountry } from "../../vendor-ui-B8IlviSs.mjs";
+import { _ as _sfc_main$a, a as _sfc_main$f, b as _sfc_main$g } from "../../SecurePaymentsKPI.vue_vue_type_script_setup_true_lang-Cqk-vonA.mjs";
+import { C as ContentWithAsideLayout } from "../../ContentWithAsideLayout-Dy9xgxuF.mjs";
+import { c as createRequestService, u as useConfig, a as useLogger, _ as _sfc_main$i, d as defineCustomElement, g as getComponentName } from "../../component-BSnccqm1.mjs";
+import { u as useActionDispatchProvider } from "../../useActionDispatchProvider-DmhD9mYX.mjs";
+import { u as usePortal } from "../../usePortal-DcOz9FEL.mjs";
+import { c as createSubscriptionsService } from "../../subscriptions-DHjXDyH1.mjs";
+import { c as createCustomerService } from "../../customer-CANPEYH9.mjs";
+import { c as createPaymentMethodsService } from "../../paymentMethods-D-5FNN8W.mjs";
+import { c as createInvoicesService } from "../../invoices-DBv0qkgm.mjs";
+import { _ as _sfc_main$h } from "../../PaymentIntegrationForm.vue_vue_type_script_setup_true_lang-aP-gCq7V.mjs";
+import { _ as _sfc_main$d } from "../../Skeleton.vue_vue_type_script_setup_true_lang-DGMxHc20.mjs";
+import { _ as _sfc_main$c } from "../../url-1Lbg5Yni.mjs";
+import { u as useViewport } from "../../useViewport-Bu0cyeSi.mjs";
+const _hoisted_1$2 = { class: "sv-order-summary__body grid grid-cols-1 gap-1" };
+const _hoisted_2$1 = { class: "flex items-center justify-center gap-2 px-3 py-5" };
+const _hoisted_3$1 = { class: "flex flex-row gap-3 px-3 py-2" };
+const _hoisted_4$1 = { class: "grow" };
+const _hoisted_5$1 = { class: "sv-order-summary__items grid grid-cols-1 gap-1" };
+const _hoisted_6$1 = { class: "flex flex-row gap-2 px-3 py-2" };
+const _hoisted_7$1 = { class: "flex flex-row gap-3 px-3 py-2" };
+const _hoisted_8$1 = { class: "grow" };
+const _hoisted_9$1 = { class: "flex flex-row gap-2 px-3 py-2" };
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "UpgradeOrderSummary",
   props: {
     selectedPricings: { type: Array },
     invoice: { type: Object },
-    isPending: { type: Boolean }
+    loading: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
     const { $t } = useIntl();
     const isEmpty = computed(() => props.selectedPricings.length === 0);
     const getPrice = (pricing) => {
-      var _a, _b, _c, _d, _e, _f;
-      return (_f = (_e = (_d = (_c = (_b = (_a = pricing.items) == null ? void 0 : _a[0]) == null ? void 0 : _b.configs) == null ? void 0 : _c[0]) == null ? void 0 : _d.bands) == null ? void 0 : _e[0]) == null ? void 0 : _f.fixed_amount;
+      var _a, _b, _c, _d, _e;
+      const band = (_e = (_d = (_c = (_b = (_a = pricing.items) == null ? void 0 : _a[0]) == null ? void 0 : _b.configs) == null ? void 0 : _c[0]) == null ? void 0 : _d.bands) == null ? void 0 : _e[0];
+      return (band == null ? void 0 : band.fixed_amount) ?? (band == null ? void 0 : band.amount);
     };
+    const invoiceHeader = computed(() => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      const group = (_d = (_c = (_b = (_a = props.invoice) == null ? void 0 : _a.periods) == null ? void 0 : _b[0]) == null ? void 0 : _c.groups) == null ? void 0 : _d[0];
+      const product = (_e = group == null ? void 0 : group.products) == null ? void 0 : _e[0];
+      const lineCount = invoiceLineRows.value.length;
+      return {
+        title: (product == null ? void 0 : product.name) ?? ((_f = group == null ? void 0 : group.product_category) == null ? void 0 : _f.name) ?? ((_g = invoiceLineRows.value[0]) == null ? void 0 : _g.description),
+        subtitle: lineCount > 1 ? $t(
+          {
+            defaultMessage: "{count} items",
+            id: "upgrade_subscription.order_summary.item_count",
+            description: "Subtitle shown below the product name when multiple one-off items are selected"
+          },
+          { count: String(lineCount) }
+        ) : (_h = invoiceLineRows.value[0]) == null ? void 0 : _h.description
+      };
+    });
+    const invoiceLineRows = computed(
+      () => {
+        var _a;
+        return (((_a = props.invoice) == null ? void 0 : _a.periods) ?? []).flatMap(
+          (period, periodIndex) => period.groups.flatMap(
+            (group, groupIndex) => (group.lines ?? []).map((line, lineIndex) => {
+              var _a2, _b, _c, _d, _e;
+              return {
+                key: `${periodIndex}-${groupIndex}-${lineIndex}`,
+                description: line.description ?? ((_b = (_a2 = line.product_items) == null ? void 0 : _a2[0]) == null ? void 0 : _b.name) ?? ((_d = (_c = group.products) == null ? void 0 : _c[0]) == null ? void 0 : _d.name) ?? ((_e = group.product_category) == null ? void 0 : _e.name) ?? "—",
+                amount: line.amount_excluding_tax
+              };
+            })
+          )
+        );
+      }
+    );
+    const selectedPricingRows = computed(
+      () => props.selectedPricings.map((pricing) => {
+        var _a, _b;
+        return {
+          key: pricing.id,
+          description: pricing.name ?? ((_b = (_a = pricing.products) == null ? void 0 : _a[0]) == null ? void 0 : _b.name) ?? "—",
+          amount: getPrice(pricing)
+        };
+      })
+    );
+    const title = computed(
+      () => $t({
+        defaultMessage: "Order summary",
+        id: "upgrade_subscription.order_summary.title",
+        description: "Title for the order summary section on the upgrade subscription page"
+      })
+    );
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$7), { class: "sv-order-summary sv-upgrade-subscription__order-summary" }, {
-        default: withCtx(() => {
-          var _a;
-          return [
-            createVNode(unref(_sfc_main$8), {
-              variant: "heading-3",
-              tag: "h2",
-              class: "sv-order-summary__title mb-3"
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(unref($t)({
-                  defaultMessage: "Order summary",
-                  id: "upgrade_subscription.order_summary.title",
-                  description: "Title for the order summary section on the upgrade subscription page"
-                })), 1)
-              ]),
-              _: 1
-            }),
-            isEmpty.value ? (openBlock(), createBlock(unref(_sfc_main$8), {
+      return openBlock(), createBlock(unref(_sfc_main$5), {
+        class: "sv-order-summary sv-upgrade-subscription__order-summary",
+        "no-border": "",
+        "no-spacing": "",
+        "content-background": "none",
+        title: title.value
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$2, [
+            isEmpty.value ? (openBlock(), createBlock(unref(_sfc_main$5), {
               key: 0,
-              variant: "body-sm",
-              shade: "lighter",
-              class: "sv-order-summary__empty"
+              "no-spacing": "",
+              class: "sv-order-summary__empty-state"
             }, {
               default: withCtx(() => [
-                createTextVNode(toDisplayString(unref($t)({
-                  defaultMessage: "Select add-ons to see pricing.",
-                  id: "upgrade_subscription.order_summary.empty_state",
-                  description: "Placeholder shown when no add-ons are selected in the order summary"
-                })), 1)
+                createElementVNode("div", _hoisted_2$1, [
+                  createVNode(unref(_sfc_main$6), {
+                    icon: "shopping_cart",
+                    class: "text-gray-500"
+                  }),
+                  createVNode(unref(_sfc_main$7), {
+                    variant: "body-sm",
+                    weight: "semibold",
+                    shade: "lighter",
+                    "no-spacing": ""
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref($t)({
+                        defaultMessage: "Select your items",
+                        id: "upgrade_subscription.order_summary.empty_state",
+                        description: "Placeholder shown when no items are selected in the order summary"
+                      })), 1)
+                    ]),
+                    _: 1
+                  })
+                ])
               ]),
               _: 1
-            })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-              createElementVNode("div", _hoisted_1$4, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.selectedPricings, (pricing) => {
-                  return openBlock(), createElementBlock("div", {
-                    key: pricing.id,
-                    class: "sv-order-summary__item flex items-center justify-between"
-                  }, [
-                    createElementVNode("div", null, [
-                      createVNode(unref(_sfc_main$8), {
+            })) : __props.invoice ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              invoiceHeader.value.title ? (openBlock(), createBlock(unref(_sfc_main$5), {
+                key: 0,
+                "no-spacing": "",
+                class: "sv-order-summary__subscription"
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_3$1, [
+                    createElementVNode("div", _hoisted_4$1, [
+                      createVNode(unref(_sfc_main$7), {
+                        variant: "body-sm",
+                        weight: "semibold",
+                        "no-spacing": ""
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(invoiceHeader.value.title), 1)
+                        ]),
+                        _: 1
+                      }),
+                      invoiceHeader.value.subtitle ? (openBlock(), createBlock(unref(_sfc_main$7), {
+                        key: 0,
+                        variant: "body-xs",
+                        shade: "lighter",
+                        "no-spacing": ""
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(invoiceHeader.value.subtitle), 1)
+                        ]),
+                        _: 1
+                      })) : createCommentVNode("", true)
+                    ])
+                  ])
+                ]),
+                _: 1
+              })) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_5$1, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(invoiceLineRows.value, (line) => {
+                  return openBlock(), createBlock(unref(_sfc_main$5), {
+                    key: line.key,
+                    "no-spacing": "",
+                    class: "sv-order-summary__item"
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", _hoisted_6$1, [
+                        createVNode(unref(_sfc_main$7), {
+                          tag: "span",
+                          variant: "body-xs",
+                          class: "grow"
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(line.description), 1)
+                          ]),
+                          _: 2
+                        }, 1024),
+                        line.amount ? (openBlock(), createBlock(unref(_sfc_main$7), {
+                          key: 0,
+                          tag: "span",
+                          variant: "body-xs",
+                          "no-spacing": ""
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(unref(_sfc_main$8), {
+                              value: line.amount
+                            }, null, 8, ["value"])
+                          ]),
+                          _: 2
+                        }, 1024)) : createCommentVNode("", true)
+                      ])
+                    ]),
+                    _: 2
+                  }, 1024);
+                }), 128))
+              ]),
+              createVNode(unref(_sfc_main$5), { class: "sv-order-summary__totals" }, {
+                default: withCtx(() => [
+                  createVNode(unref(_sfc_main$9), {
+                    class: "sv-order-summary__invoice-preview",
+                    variant: "without-products",
+                    invoice: __props.invoice,
+                    "is-customer-facing": ""
+                  }, null, 8, ["invoice"])
+                ]),
+                _: 1
+              })
+            ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+              __props.loading ? (openBlock(), createBlock(unref(_sfc_main$5), {
+                key: 0,
+                "no-spacing": "",
+                class: "sv-order-summary__subscription"
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_7$1, [
+                    createElementVNode("div", _hoisted_8$1, [
+                      createVNode(unref(_sfc_main$7), {
                         variant: "body-sm",
-                        class: "sv-order-summary__item-name"
+                        weight: "semibold",
+                        "no-spacing": ""
                       }, {
                         default: withCtx(() => {
-                          var _a2, _b;
+                          var _a;
                           return [
-                            createTextVNode(toDisplayString(pricing.name ?? ((_b = (_a2 = pricing.products) == null ? void 0 : _a2[0]) == null ? void 0 : _b.name)), 1)
+                            createTextVNode(toDisplayString(selectedPricingRows.value.length > 1 ? unref($t)({
+                              defaultMessage: "Selected items",
+                              id: "upgrade_subscription.order_summary.selected_items_title",
+                              description: "Temporary order summary title shown while the invoice preview is loading"
+                            }) : (_a = selectedPricingRows.value[0]) == null ? void 0 : _a.description), 1)
                           ];
                         }),
-                        _: 2
-                      }, 1024),
-                      createVNode(unref(_sfc_main$8), {
+                        _: 1
+                      }),
+                      createVNode(unref(_sfc_main$7), {
                         variant: "body-xs",
                         shade: "lighter",
-                        class: "sv-order-summary__item-meta"
+                        "no-spacing": ""
                       }, {
                         default: withCtx(() => [
-                          createTextVNode(toDisplayString(unref($t)({
+                          createTextVNode(toDisplayString(selectedPricingRows.value.length > 1 ? unref($t)(
+                            {
+                              defaultMessage: "{count} items",
+                              id: "upgrade_subscription.order_summary.selected_item_count",
+                              description: "Temporary order summary subtitle shown while the invoice preview is loading"
+                            },
+                            { count: String(selectedPricingRows.value.length) }
+                          ) : unref($t)({
                             defaultMessage: "one-off",
                             id: "upgrade_subscription.order_summary.one_off_label",
                             description: "One-off payment label next to a line item in order summary"
@@ -317,116 +259,101 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                         ]),
                         _: 1
                       })
-                    ]),
-                    getPrice(pricing) ? (openBlock(), createBlock(unref(_sfc_main$8), {
-                      key: 0,
-                      variant: "body-sm",
-                      class: "sv-order-summary__item-price"
-                    }, {
-                      default: withCtx(() => [
-                        createTextVNode(toDisplayString(unref(formatAmount)(getPrice(pricing))), 1)
-                      ]),
-                      _: 2
-                    }, 1024)) : createCommentVNode("", true)
-                  ]);
-                }), 128))
-              ]),
-              ((_a = __props.invoice) == null ? void 0 : _a.tax_summary) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                createElementVNode("div", _hoisted_2$2, [
-                  createElementVNode("div", _hoisted_3$1, [
-                    createVNode(unref(_sfc_main$8), {
-                      variant: "body-sm",
-                      shade: "lighter"
-                    }, {
-                      default: withCtx(() => [
-                        createTextVNode(toDisplayString(unref($t)({
-                          defaultMessage: "Total excluding taxes",
-                          id: "upgrade_subscription.order_summary.subtotal_label",
-                          description: "Subtotal before tax label in order summary"
-                        })), 1)
-                      ]),
-                      _: 1
-                    }),
-                    createVNode(unref(_sfc_main$8), { variant: "body-sm" }, {
-                      default: withCtx(() => [
-                        createTextVNode(toDisplayString(unref(formatAmount)(__props.invoice.tax_summary.base_amount)), 1)
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  createElementVNode("div", _hoisted_4$1, [
-                    createVNode(unref(_sfc_main$8), {
-                      variant: "body-sm",
-                      shade: "lighter"
-                    }, {
-                      default: withCtx(() => [
-                        createTextVNode(toDisplayString(unref($t)({
-                          defaultMessage: "Taxes",
-                          id: "upgrade_subscription.order_summary.taxes_label",
-                          description: "Tax amount label in order summary"
-                        })), 1)
-                      ]),
-                      _: 1
-                    }),
-                    createVNode(unref(_sfc_main$8), { variant: "body-sm" }, {
-                      default: withCtx(() => [
-                        createTextVNode(toDisplayString(unref(formatAmount)(__props.invoice.tax_summary.tax_amount)), 1)
-                      ]),
-                      _: 1
-                    })
+                    ])
                   ])
                 ]),
-                createElementVNode("div", _hoisted_5$1, [
-                  createVNode(unref(_sfc_main$8), {
-                    variant: "body-sm",
-                    weight: "semibold"
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(unref($t)({
-                        defaultMessage: "Total due today",
-                        id: "upgrade_subscription.order_summary.total_label",
-                        description: "Total amount due today label in order summary"
-                      })), 1)
+                _: 1
+              })) : createCommentVNode("", true),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(selectedPricingRows.value, (pricing) => {
+                return openBlock(), createBlock(unref(_sfc_main$5), {
+                  key: pricing.key,
+                  "no-spacing": "",
+                  class: "sv-order-summary__item"
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", _hoisted_9$1, [
+                      createVNode(unref(_sfc_main$7), {
+                        tag: "span",
+                        variant: "body-xs",
+                        class: "grow"
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(pricing.description), 1)
+                        ]),
+                        _: 2
+                      }, 1024),
+                      pricing.amount ? (openBlock(), createBlock(unref(_sfc_main$7), {
+                        key: 0,
+                        tag: "span",
+                        variant: "body-xs",
+                        "no-spacing": ""
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(_sfc_main$8), {
+                            value: pricing.amount
+                          }, null, 8, ["value"])
+                        ]),
+                        _: 2
+                      }, 1024)) : createCommentVNode("", true)
+                    ])
+                  ]),
+                  _: 2
+                }, 1024);
+              }), 128)),
+              __props.loading ? (openBlock(), createBlock(unref(_sfc_main$5), {
+                key: 1,
+                class: "sv-order-summary__totals"
+              }, {
+                default: withCtx(() => [..._cache[0] || (_cache[0] = [
+                  createElementVNode("div", { class: "grid grid-cols-1 gap-2" }, [
+                    createElementVNode("div", { class: "flex items-center justify-between gap-4" }, [
+                      createElementVNode("div", { class: "h-4 w-40 animate-pulse rounded bg-gray-100" }),
+                      createElementVNode("div", { class: "h-4 w-20 animate-pulse rounded bg-gray-100" })
                     ]),
-                    _: 1
-                  }),
-                  createVNode(unref(_sfc_main$8), {
-                    variant: "body-sm",
-                    weight: "semibold"
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(unref(formatAmount)(__props.invoice.tax_summary.total_amount)), 1)
+                    createElementVNode("div", { class: "flex items-center justify-between gap-4" }, [
+                      createElementVNode("div", { class: "h-4 w-16 animate-pulse rounded bg-gray-100" }),
+                      createElementVNode("div", { class: "h-4 w-20 animate-pulse rounded bg-gray-100" })
                     ]),
-                    _: 1
-                  })
-                ])
-              ], 64)) : createCommentVNode("", true)
+                    createElementVNode("div", { class: "border-t border-gray-200 pt-2" }, [
+                      createElementVNode("div", { class: "flex items-center justify-between gap-4" }, [
+                        createElementVNode("div", { class: "h-5 w-36 animate-pulse rounded bg-gray-100" }),
+                        createElementVNode("div", { class: "h-5 w-24 animate-pulse rounded bg-gray-100" })
+                      ])
+                    ])
+                  ], -1)
+                ])]),
+                _: 1
+              })) : createCommentVNode("", true)
             ], 64))
-          ];
-        }),
+          ])
+        ]),
         _: 1
-      });
+      }, 8, ["title"]);
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "OnDemandPricingRow",
   props: {
     pricing: { type: Object },
-    selected: { type: Boolean }
+    selected: { type: Boolean },
+    loading: { type: Boolean }
   },
   emits: ["toggle"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const { $t } = useIntl();
-    const title = computed(() => {
-      var _a, _b;
-      return props.pricing.name ?? ((_b = (_a = props.pricing.products) == null ? void 0 : _a[0]) == null ? void 0 : _b.name) ?? "—";
-    });
+    const title = computed(
+      () => {
+        var _a, _b, _c, _d, _e, _f;
+        return props.pricing.name ?? ((_d = (_c = (_b = (_a = props.pricing.items) == null ? void 0 : _a[0]) == null ? void 0 : _b.product_items) == null ? void 0 : _c[0]) == null ? void 0 : _d.name) ?? ((_f = (_e = props.pricing.products) == null ? void 0 : _e[0]) == null ? void 0 : _f.name) ?? "—";
+      }
+    );
     const price = computed(() => {
-      var _a, _b, _c, _d, _e, _f;
-      return (_f = (_e = (_d = (_c = (_b = (_a = props.pricing.items) == null ? void 0 : _a[0]) == null ? void 0 : _b.configs) == null ? void 0 : _c[0]) == null ? void 0 : _d.bands) == null ? void 0 : _e[0]) == null ? void 0 : _f.fixed_amount;
+      var _a, _b, _c, _d, _e;
+      const band = (_e = (_d = (_c = (_b = (_a = props.pricing.items) == null ? void 0 : _a[0]) == null ? void 0 : _b.configs) == null ? void 0 : _c[0]) == null ? void 0 : _d.bands) == null ? void 0 : _e[0];
+      return (band == null ? void 0 : band.fixed_amount) ?? (band == null ? void 0 : band.amount);
     });
     const description = computed(
       () => price.value ? `${formatAmount(price.value)} ${$t({
@@ -436,22 +363,23 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       })}` : ""
     );
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$7), {
+      return openBlock(), createBlock(unref(_sfc_main$5), {
         "content-background": __props.selected ? "none" : "gray",
-        class: normalizeClass({ "!bg-white": __props.selected })
+        "content-classes": __props.selected ? "!border-primary-600 ring-1 ring-primary-600" : void 0
       }, {
         default: withCtx(() => [
-          createVNode(_sfc_main$9, {
+          createVNode(_sfc_main$a, {
             name: title.value,
             description: description.value
           }, {
             default: withCtx(() => [
-              __props.selected ? (openBlock(), createBlock(unref(_sfc_main$a), {
+              __props.selected ? (openBlock(), createBlock(unref(_sfc_main$b), {
                 key: 0,
                 color: "gray",
                 variant: "outline",
                 size: "sm",
                 "icon-prefix": "remove_shopping_cart",
+                loading: __props.loading,
                 onClick: _cache[0] || (_cache[0] = ($event) => emit("toggle", __props.pricing.id))
               }, {
                 default: withCtx(() => [
@@ -462,11 +390,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                   })), 1)
                 ]),
                 _: 1
-              })) : (openBlock(), createBlock(unref(_sfc_main$a), {
+              }, 8, ["loading"])) : (openBlock(), createBlock(unref(_sfc_main$b), {
                 key: 1,
                 color: "primary",
                 size: "sm",
                 "icon-prefix": "add",
+                loading: __props.loading,
                 onClick: _cache[1] || (_cache[1] = ($event) => emit("toggle", __props.pricing.id))
               }, {
                 default: withCtx(() => [
@@ -477,64 +406,72 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                   })), 1)
                 ]),
                 _: 1
-              }))
+              }, 8, ["loading"]))
             ]),
             _: 1
           }, 8, ["name", "description"])
         ]),
         _: 1
-      }, 8, ["content-background", "class"]);
+      }, 8, ["content-background", "content-classes"]);
     };
   }
 });
-const _hoisted_1$3 = { class: "sv-pricing-list__items grid grid-cols-1 gap-1" };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$1 = { class: "sv-pricing-list__items grid grid-cols-1 gap-1" };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "OnDemandPricingList",
   props: {
     categories: { type: Array },
-    selectedPricingIds: { type: Array }
+    selectedPricingIds: { type: Array },
+    loadingPricingId: { type: String }
   },
   emits: ["toggle"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const { $t } = useIntl();
     const sortedCategories = computed(
       () => [...props.categories].sort((a, b) => (a.display_order ?? 0) - (b.display_order ?? 0))
     );
+    const getCategoryTitle = (category) => {
+      var _a;
+      return ((_a = category.product_category) == null ? void 0 : _a.name) ?? category.name ?? $t({
+        defaultMessage: "Items",
+        id: "on_demand_pricing_list.category_fallback_title",
+        description: "Fallback title for the selectable pricing items when no product category name is available"
+      });
+    };
     return (_ctx, _cache) => {
       return openBlock(true), createElementBlock(Fragment, null, renderList(sortedCategories.value, (category) => {
         return openBlock(), createElementBlock("div", {
           key: category.id ?? category.display_order,
           class: "sv-pricing-list__category flex flex-col gap-2"
         }, [
-          createVNode(unref(_sfc_main$8), {
+          createVNode(unref(_sfc_main$7), {
             variant: "heading-3",
             tag: "h2",
             class: "sv-pricing-list__category-title"
           }, {
-            default: withCtx(() => {
-              var _a;
-              return [
-                createTextVNode(toDisplayString(((_a = category.product_category) == null ? void 0 : _a.name) ?? category.name), 1)
-              ];
-            }),
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(getCategoryTitle(category)), 1)
+            ]),
             _: 2
           }, 1024),
-          createElementVNode("div", _hoisted_1$3, [
+          createElementVNode("div", _hoisted_1$1, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(category.pricings, (pricing) => {
-              return openBlock(), createBlock(_sfc_main$5, {
+              return openBlock(), createBlock(_sfc_main$3, {
                 key: pricing.id,
                 class: "sv-pricing-list__row",
                 pricing,
                 selected: __props.selectedPricingIds.includes(pricing.id),
+                loading: __props.loadingPricingId === pricing.id,
                 onToggle: _cache[0] || (_cache[0] = ($event) => emit("toggle", $event))
-              }, null, 8, ["pricing", "selected"]);
+              }, null, 8, ["pricing", "selected", "loading"]);
             }), 128)),
             (openBlock(true), createElementBlock(Fragment, null, renderList(category.pricing_groups, (group) => {
               return openBlock(), createElementBlock(Fragment, {
                 key: group.id
               }, [
-                createVNode(unref(_sfc_main$8), {
+                createVNode(unref(_sfc_main$7), {
                   variant: "body-sm",
                   weight: "semibold",
                   class: "sv-pricing-list__group-title mt-2"
@@ -545,13 +482,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   _: 2
                 }, 1024),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(group.pricings, (pricing) => {
-                  return openBlock(), createBlock(_sfc_main$5, {
+                  return openBlock(), createBlock(_sfc_main$3, {
                     key: pricing.id,
                     class: "sv-pricing-list__row",
                     pricing,
                     selected: __props.selectedPricingIds.includes(pricing.id),
+                    loading: __props.loadingPricingId === pricing.id,
                     onToggle: _cache[1] || (_cache[1] = ($event) => emit("toggle", $event))
-                  }, null, 8, ["pricing", "selected"]);
+                  }, null, 8, ["pricing", "selected", "loading"]);
                 }), 128))
               ], 64);
             }), 128))
@@ -561,204 +499,16 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$2 = { class: "sv-payment-method-picker flex flex-col gap-4" };
-const _hoisted_2$1 = {
-  key: 0,
-  class: "sv-payment-method-picker__saved flex flex-col gap-2"
-};
-const _hoisted_3 = { class: "sv-payment-method-picker__options flex flex-col gap-1" };
-const _hoisted_4 = {
-  key: 1,
-  class: "sv-payment-method-picker__new flex flex-col gap-2"
-};
-const _hoisted_5 = { class: "sv-payment-method-picker__options flex flex-col gap-1" };
-const _hoisted_6 = { class: "sv-payment-method-picker__option-content flex items-center gap-3" };
-const _hoisted_7 = {
-  key: 0,
-  class: "sv-payment-method-picker__option-icon flex h-9 w-9 shrink-0 items-center gap-0.5"
-};
-const _hoisted_8 = ["src", "alt"];
-const _hoisted_9 = {
-  key: 1,
-  class: "sv-payment-method-picker__option-icon flex h-9 w-9 shrink-0 items-center justify-center overflow-clip rounded"
-};
-const _hoisted_10 = ["src", "alt"];
-const _hoisted_11 = {
-  key: 2,
-  class: "sv-payment-method-picker__loading flex flex-col gap-1"
-};
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "PaymentMethodPicker",
-  props: {
-    customerId: { type: String },
-    subscriptionId: { type: String },
-    selectedId: { type: String }
-  },
-  emits: ["select"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const { $t } = useIntl();
-    const { getPaymentMethods } = createPaymentMethodsService();
-    const savedMethods = ref([]);
-    const paymentMethodOptions = ref([]);
-    const isPending = ref(false);
-    const newOptions = computed(
-      () => paymentMethodOptions.value.flatMap((entry) => entry.options ?? [])
-    );
-    const adyenLogoUrl = (type) => `https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/${type}.svg`;
-    const adyenBrandLogoUrl = (brand) => `https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/small/${brand}.svg`;
-    const PREFERRED_BRANDS = ["visa", "mc", "amex", "maestro"];
-    const displayBrands = (brands) => {
-      if (!brands) return [];
-      const preferred = PREFERRED_BRANDS.filter((b) => brands.includes(b));
-      const rest = brands.filter((b) => !PREFERRED_BRANDS.includes(b));
-      return [...preferred, ...rest].slice(0, 4);
-    };
-    onMounted(async () => {
-      isPending.value = true;
-      try {
-        const savedResponse = await getPaymentMethods({
-          customerId: props.customerId,
-          pagination: { page: 1, pageSize: 50 }
-        });
-        savedMethods.value = savedResponse.data;
-        paymentMethodOptions.value = getMockPaymentMethodOptionsResponse();
-      } finally {
-        isPending.value = false;
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
-        savedMethods.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
-          createVNode(unref(_sfc_main$8), {
-            variant: "heading-3",
-            tag: "h2",
-            class: "sv-payment-method-picker__title"
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(unref($t)({
-                defaultMessage: "Saved payment methods",
-                id: "upgrade_subscription.payment_picker.saved_title",
-                description: "Heading for the saved payment methods section in the upgrade subscription payment picker"
-              })), 1)
-            ]),
-            _: 1
-          }),
-          createElementVNode("div", _hoisted_3, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(savedMethods.value, (method) => {
-              return openBlock(), createBlock(unref(_sfc_main$7), {
-                key: method.id,
-                "content-background": __props.selectedId === method.id ? "none" : "gray",
-                class: normalizeClass([{ "sv-payment-method-picker__option--selected !bg-white": __props.selectedId === method.id }, "sv-payment-method-picker__option cursor-pointer"]),
-                onClick: ($event) => emit("select", method.id)
-              }, {
-                default: withCtx(() => [
-                  createVNode(unref(_sfc_main$b), {
-                    class: "sv-payment-method-picker__option-content",
-                    "payment-method": method
-                  }, null, 8, ["payment-method"])
-                ]),
-                _: 2
-              }, 1032, ["content-background", "class", "onClick"]);
-            }), 128))
-          ])
-        ])) : createCommentVNode("", true),
-        newOptions.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [
-          createVNode(unref(_sfc_main$8), {
-            variant: "heading-3",
-            tag: "h2",
-            class: "sv-payment-method-picker__title"
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(unref($t)({
-                defaultMessage: "All payment methods",
-                id: "upgrade_subscription.payment_picker.all_title",
-                description: "Heading for the all payment methods section in the upgrade subscription payment picker"
-              })), 1)
-            ]),
-            _: 1
-          }),
-          createElementVNode("div", _hoisted_5, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(newOptions.value, (option) => {
-              return openBlock(), createBlock(unref(_sfc_main$7), {
-                key: option.adyen.type,
-                "content-background": __props.selectedId === option.adyen.type ? "none" : "gray",
-                class: normalizeClass([{
-                  "sv-payment-method-picker__option--selected !bg-white": __props.selectedId === option.adyen.type
-                }, "sv-payment-method-picker__option cursor-pointer"]),
-                onClick: ($event) => emit("select", option.adyen.type)
-              }, {
-                default: withCtx(() => [
-                  createElementVNode("div", _hoisted_6, [
-                    option.adyen.type === "scheme" ? (openBlock(), createElementBlock("div", _hoisted_7, [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(displayBrands(option.adyen.brands), (brand) => {
-                        return openBlock(), createElementBlock("img", {
-                          key: brand,
-                          src: adyenBrandLogoUrl(brand),
-                          alt: brand,
-                          class: "h-5 w-auto rounded"
-                        }, null, 8, _hoisted_8);
-                      }), 128))
-                    ])) : (openBlock(), createElementBlock("div", _hoisted_9, [
-                      createElementVNode("img", {
-                        src: adyenLogoUrl(option.adyen.type),
-                        alt: option.name,
-                        class: "h-9 w-9 object-contain"
-                      }, null, 8, _hoisted_10)
-                    ])),
-                    createVNode(unref(_sfc_main$8), {
-                      variant: "body-sm",
-                      class: "sv-payment-method-picker__option-label"
-                    }, {
-                      default: withCtx(() => [
-                        createTextVNode(toDisplayString(option.name), 1)
-                      ]),
-                      _: 2
-                    }, 1024)
-                  ])
-                ]),
-                _: 2
-              }, 1032, ["content-background", "class", "onClick"]);
-            }), 128))
-          ])
-        ])) : createCommentVNode("", true),
-        isPending.value ? (openBlock(), createElementBlock("div", _hoisted_11, [..._cache[0] || (_cache[0] = [
-          createElementVNode("div", { class: "sv-skeleton h-[52px] animate-pulse rounded-md bg-gray-100" }, null, -1),
-          createElementVNode("div", { class: "sv-skeleton h-[52px] animate-pulse rounded-md bg-gray-100" }, null, -1),
-          createElementVNode("div", { class: "sv-skeleton h-[52px] animate-pulse rounded-md bg-gray-100" }, null, -1)
-        ])])) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
-const _hoisted_1$1 = { class: "flex gap-1" };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "Kpi",
-  props: {
-    icon: { type: null },
-    kpi: { type: String }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$1, [
-        createVNode(unref(_sfc_main$c), {
-          icon: __props.icon,
-          size: "xs"
-        }, null, 8, ["icon"]),
-        createVNode(unref(_sfc_main$8), { variant: "body-xs" }, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString(__props.kpi), 1)
-          ]),
-          _: 1
-        })
-      ]);
-    };
-  }
-});
 function createPricingPlanSchedulesService() {
   const request = createRequestService();
   const config = useConfig();
+  function getOnDemandPricingItems({
+    scheduleId
+  }) {
+    return request({
+      url: `${config.apiUrls.config}/portal/pricing-plan-schedules/${scheduleId}/on-demand-pricing-items`
+    });
+  }
   function chargeOnDemandPricingItems({
     scheduleId,
     pricingPlanVersionId,
@@ -779,13 +529,36 @@ function createPricingPlanSchedulesService() {
       }
     });
   }
-  return { chargeOnDemandPricingItems };
+  return {
+    chargeOnDemandPricingItems,
+    getOnDemandPricingItems
+  };
 }
 const _hoisted_1 = {
   key: 0,
   class: "sv-upgrade-subscription sv-root sv-screen sv-upgrade-subscription--purchased flex h-full items-center justify-center p-8"
 };
-const _hoisted_2 = { class: "sv-upgrade-subscription__success-body flex flex-col items-center py-10" };
+const _hoisted_2 = { class: "flex flex-col items-center text-center" };
+const _hoisted_3 = { class: "sv-upgrade-subscription__header" };
+const _hoisted_4 = {
+  key: 1,
+  class: "sv-upgrade-subscription__pricing-list"
+};
+const _hoisted_5 = {
+  key: 2,
+  class: "sv-upgrade-subscription__loading p-4"
+};
+const _hoisted_6 = { class: "sv-upgrade-subscription__payment-methods" };
+const _hoisted_7 = {
+  key: 0,
+  class: "sv-upgrade-subscription__payment-methods-body"
+};
+const _hoisted_8 = {
+  key: 1,
+  class: "sv-upgrade-subscription__payment-form"
+};
+const _hoisted_9 = { class: "sv-upgrade-subscription__order-summary" };
+const _hoisted_10 = { class: "flex flex-col gap-2" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "UpgradeSubscription",
   props: {
@@ -794,21 +567,143 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const { $t } = useIntl();
-    const { dispatchAction } = useActionDispatchProvider();
-    const { chargeOnDemandPricingItems } = createPricingPlanSchedulesService();
+    const { getSubscription } = createSubscriptionsService();
+    const { getCustomer } = createCustomerService();
+    const { getOnDemandPricingItems } = createPricingPlanSchedulesService();
+    const { getPaymentMethodOptions } = createPaymentMethodsService();
+    const { previewChargeOnDemandPricingItems } = createInvoicesService();
     const portal = usePortal();
     const logger = useLogger();
+    const { dispatchAction } = useActionDispatchProvider();
+    const { isMobileViewport } = useViewport();
     const customerId = computed(() => portal.value.customer_id);
+    const DEFAULT_PAYMENT_FORM_AMOUNT = {
+      currency: "EUR",
+      quantity: "0"
+    };
     const selectedPricingIds = ref([]);
-    const selectedPaymentMethodId = ref(void 0);
-    const isPurchasePending = ref(false);
     const isPurchased = ref(false);
-    const previewInvoice = ref(void 0);
+    const categories = ref([]);
+    const paymentMethodOptions = ref([]);
+    const isLoadingItems = ref(false);
     const isPreviewPending = ref(false);
-    const mockResponse = computed(
-      () => getMockOnDemandPricingItemsResponse(props.configuration.subscriptionId)
+    const isPurchasePending = ref(false);
+    const previewPendingPricingId = ref(void 0);
+    const loadError = ref(void 0);
+    const paymentIntegrationFormRef = ref();
+    const activeScheduleId = ref(void 0);
+    const previewInvoice = ref(void 0);
+    const countryCode = ref(void 0);
+    const getActiveSchedule = async () => {
+      const subscription = await getSubscription({
+        id: props.configuration.subscriptionId,
+        expanded: true
+      });
+      const schedules = subscription.pricing_plan_schedule_infos ?? [];
+      const sortedSchedules = [...schedules].sort(
+        (a, b) => Date.parse(b.start_at) - Date.parse(a.start_at)
+      );
+      const now = Date.now();
+      const activeSchedule = sortedSchedules.find((schedule) => {
+        var _a;
+        const scheduleType = ((_a = schedule.pricing_plan_schedule) == null ? void 0 : _a.type) ?? schedule.type;
+        const startAt = Date.parse(schedule.start_at);
+        const endAt = schedule.end_at ? Date.parse(schedule.end_at) : void 0;
+        const hasStarted = Number.isFinite(startAt) && startAt <= now;
+        const hasNotEnded = endAt === void 0 || !Number.isFinite(endAt) || endAt > now;
+        return scheduleType === "DEFAULT" && hasStarted && hasNotEnded;
+      });
+      if (!(activeSchedule == null ? void 0 : activeSchedule.id)) {
+        throw new Error("No pricing plan schedule found for subscription");
+      }
+      return activeSchedule;
+    };
+    const findSourceCategory = (category, sourceCategories) => sourceCategories.find(
+      (sourceCategory) => sourceCategory.product_category_id === category.product_category_id
     );
-    const categories = computed(() => mockResponse.value.pricing_categories);
+    const findSourcePricing = (pricing, sourcePricings = []) => sourcePricings.find((sourcePricing) => sourcePricing.id === pricing.id);
+    const normalizePricingRows = (pricing, sourcePricing) => (pricing.items ?? []).map((item) => {
+      var _a, _b, _c, _d, _e, _f, _g;
+      const sourceItem = (_a = sourcePricing == null ? void 0 : sourcePricing.items) == null ? void 0 : _a.find((candidate) => candidate.id === item.id);
+      const productItems = item.product_items ?? (sourceItem == null ? void 0 : sourceItem.product_items);
+      return {
+        ...pricing,
+        id: item.id,
+        name: ((_c = (_b = item.product_items) == null ? void 0 : _b[0]) == null ? void 0 : _c.name) ?? ((_e = (_d = sourceItem == null ? void 0 : sourceItem.product_items) == null ? void 0 : _d[0]) == null ? void 0 : _e.name) ?? pricing.name ?? (sourcePricing == null ? void 0 : sourcePricing.name) ?? ((_g = (_f = sourcePricing == null ? void 0 : sourcePricing.products) == null ? void 0 : _f[0]) == null ? void 0 : _g.name),
+        products: pricing.products ?? (sourcePricing == null ? void 0 : sourcePricing.products),
+        items: [
+          {
+            ...item,
+            product_items: productItems
+          }
+        ]
+      };
+    });
+    const normalizeOnDemandCategories = (categories2, sourceCategories) => categories2.map((category) => {
+      var _a;
+      const sourceCategory = findSourceCategory(category, sourceCategories);
+      return {
+        ...category,
+        name: category.name ?? ((_a = sourceCategory == null ? void 0 : sourceCategory.product_category) == null ? void 0 : _a.name),
+        product_category: category.product_category ?? (sourceCategory == null ? void 0 : sourceCategory.product_category),
+        pricings: (category.pricings ?? []).flatMap(
+          (pricing) => normalizePricingRows(pricing, findSourcePricing(pricing, sourceCategory == null ? void 0 : sourceCategory.pricings))
+        ),
+        pricing_groups: (category.pricing_groups ?? []).map((group) => {
+          var _a2;
+          const sourceGroup = (_a2 = sourceCategory == null ? void 0 : sourceCategory.pricing_groups) == null ? void 0 : _a2.find(
+            (candidate) => candidate.id === group.id
+          );
+          return {
+            ...group,
+            name: group.name ?? (sourceGroup == null ? void 0 : sourceGroup.name),
+            pricings: (group.pricings ?? []).flatMap(
+              (pricing) => normalizePricingRows(
+                pricing,
+                findSourcePricing(pricing, sourceGroup == null ? void 0 : sourceGroup.pricings)
+              )
+            )
+          };
+        })
+      };
+    });
+    const loadOnDemandPricingItems = async () => {
+      var _a;
+      isLoadingItems.value = true;
+      loadError.value = void 0;
+      try {
+        const activeSchedule = await getActiveSchedule();
+        activeScheduleId.value = activeSchedule.id;
+        const [itemsResponse, optionsResponse, customer] = await Promise.all([
+          getOnDemandPricingItems({ scheduleId: activeScheduleId.value }),
+          getPaymentMethodOptions({ customerId: customerId.value }),
+          getCustomer(customerId.value)
+        ]);
+        categories.value = normalizeOnDemandCategories(
+          itemsResponse.pricing_categories ?? [],
+          ((_a = activeSchedule.pricing_plan_version) == null ? void 0 : _a.pricing_categories) ?? []
+        );
+        paymentMethodOptions.value = optionsResponse;
+        countryCode.value = getCustomerCountry(customer);
+      } catch (error) {
+        logger.error(
+          "INITIAL_DATA_LOAD_FAILED",
+          "Failed to load on-demand pricing items",
+          {},
+          error
+        );
+        loadError.value = $t({
+          defaultMessage: "Unable to load items. Please try again later.",
+          id: "upgrade_subscription.load_error",
+          description: "Error message shown when the one-off items cannot be loaded on the upgrade subscription page"
+        });
+      } finally {
+        isLoadingItems.value = false;
+      }
+    };
+    onMounted(() => {
+      void loadOnDemandPricingItems();
+    });
     const allOnDemandPricings = computed(
       () => categories.value.flatMap((cat) => [
         ...cat.pricings ?? [],
@@ -818,21 +713,73 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const selectedPricings = computed(
       () => allOnDemandPricings.value.filter((p) => selectedPricingIds.value.includes(p.id))
     );
+    const selectedPricingItemIds = computed(
+      () => selectedPricings.value.flatMap((pricing) => pricing.items ?? []).map((item) => item.id).filter((id) => !!id)
+    );
+    const amount = computed(() => {
+      var _a, _b;
+      return (_b = (_a = previewInvoice.value) == null ? void 0 : _a.tax_summary) == null ? void 0 : _b.total_amount;
+    });
+    const paymentFormAmount = computed(() => amount.value ?? DEFAULT_PAYMENT_FORM_AMOUNT);
     let previewTimer;
-    watch(selectedPricingIds, (ids) => {
+    let previewRequestId = 0;
+    watch([selectedPricingItemIds, activeScheduleId], ([pricingItemIds, scheduleId]) => {
       clearTimeout(previewTimer);
-      if (ids.length === 0) {
+      const requestId = ++previewRequestId;
+      purchaseError.value = void 0;
+      if (!scheduleId || pricingItemIds.length === 0) {
         previewInvoice.value = void 0;
         isPreviewPending.value = false;
+        previewPendingPricingId.value = void 0;
         return;
       }
       isPreviewPending.value = true;
       previewTimer = setTimeout(() => {
-        previewInvoice.value = getMockPreviewResponse(ids).invoice;
-        isPreviewPending.value = false;
+        previewChargeOnDemandPricingItems({
+          pricingPlanScheduleId: scheduleId,
+          pricingItemIds
+        }).then((invoice) => {
+          if (requestId === previewRequestId) {
+            previewInvoice.value = invoice;
+          }
+        }).catch((error) => {
+          if (requestId !== previewRequestId) return;
+          logger.error(
+            "INVOICE_PREVIEW_FAILED",
+            "Failed to load charge-on-demand invoice preview",
+            {},
+            error
+          );
+          purchaseError.value = $t({
+            defaultMessage: "Unable to calculate the total. Please try again.",
+            id: "upgrade_subscription.preview_error",
+            description: "Error message shown when the upgrade subscription invoice preview cannot be loaded"
+          });
+          previewInvoice.value = void 0;
+        }).finally(() => {
+          if (requestId === previewRequestId) {
+            isPreviewPending.value = false;
+            previewPendingPricingId.value = void 0;
+          }
+        });
       }, 400);
     });
+    const authorizationContext = computed(() => {
+      if (!activeScheduleId.value) {
+        throw new Error("Cannot create charge-on-demand authorization context without a schedule.");
+      }
+      return {
+        type: "CHARGE_ON_DEMAND",
+        charge_on_demand: {
+          pricing_plan_schedule_id: activeScheduleId.value,
+          pricing_items: selectedPricingItemIds.value.map((pricingItemId) => ({
+            pricing_item_id: pricingItemId
+          }))
+        }
+      };
+    });
     const handleToggle = (pricingId) => {
+      previewPendingPricingId.value = pricingId;
       if (selectedPricingIds.value.includes(pricingId)) {
         selectedPricingIds.value = selectedPricingIds.value.filter((id) => id !== pricingId);
       } else {
@@ -840,78 +787,76 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
     };
     const canPurchase = computed(
-      () => selectedPricingIds.value.length > 0 && !!selectedPaymentMethodId.value
+      () => selectedPricingItemIds.value.length > 0 && !!activeScheduleId.value && !!amount.value && !isPreviewPending.value && paymentMethodOptions.value.length > 0
     );
     const purchaseError = ref(void 0);
-    const isSavedPaymentMethod = (id) => id.startsWith("pmet_");
     const handlePurchase = async () => {
-      if (!canPurchase.value) return;
-      isPurchasePending.value = true;
+      var _a;
+      if (!canPurchase.value || isPurchasePending.value) return;
       purchaseError.value = void 0;
-      try {
-        const pricingItemIds = selectedPricings.value.map((p) => {
-          var _a, _b;
-          return (_b = (_a = p.items) == null ? void 0 : _a[0]) == null ? void 0 : _b.id;
-        }).filter((id) => !!id);
-        const savedMethodId = selectedPaymentMethodId.value && isSavedPaymentMethod(selectedPaymentMethodId.value) ? selectedPaymentMethodId.value : void 0;
-        const invoice = await chargeOnDemandPricingItems({
-          scheduleId: mockResponse.value.pricing_plan_schedule_id,
-          pricingPlanVersionId: mockResponse.value.pricing_plan_version_id,
-          pricingItemIds,
-          finalizeImmediately: true,
-          paymentMethodId: savedMethodId
-        });
-        if (savedMethodId) {
-          isPurchased.value = true;
-        } else {
-          dispatchAction({ action: "pay-invoice", data: { invoiceId: invoice.id } });
-        }
-      } catch (error) {
-        logger.error("PURCHASE_FAILED", "Failed to complete upgrade subscription purchase", {}, error);
-        purchaseError.value = $t({
-          defaultMessage: "Something went wrong. Please try again.",
-          id: "upgrade_subscription.purchase_error",
-          description: "Error message shown when the purchase call fails on the upgrade subscription page"
-        });
-      } finally {
-        isPurchasePending.value = false;
-      }
+      isPurchasePending.value = true;
+      (_a = paymentIntegrationFormRef.value) == null ? void 0 : _a.submit();
+    };
+    const handleValidatePaymentSubmit = async () => canPurchase.value;
+    let redirectTimer;
+    const handlePaymentSuccess = () => {
+      isPurchasePending.value = false;
+      isPurchased.value = true;
+      redirectTimer = setTimeout(() => {
+        dispatchAction({ action: "navigate-to-customer-overview" });
+      }, 3e3);
+    };
+    const handlePaymentFailed = (error) => {
+      isPurchasePending.value = false;
+      purchaseError.value = error.message || $t({
+        defaultMessage: "Something went wrong. Please try again.",
+        id: "upgrade_subscription.purchase_error",
+        description: "Error message shown when the purchase call fails on the upgrade subscription page"
+      });
     };
+    onUnmounted(() => {
+      clearTimeout(previewTimer);
+      clearTimeout(redirectTimer);
+    });
     return (_ctx, _cache) => {
       return isPurchased.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(unref(_sfc_main$7), { class: "sv-upgrade-subscription__success" }, {
+        createVNode(_sfc_main$c, {
+          class: "sv-upgrade-subscription__success",
+          status: "success",
+          title: unref($t)({
+            defaultMessage: "Payment successful",
+            id: "upgrade_subscription.success.title",
+            description: "Title shown after a successful upgrade purchase"
+          })
+        }, {
           default: withCtx(() => [
             createElementVNode("div", _hoisted_2, [
-              createVNode(unref(_sfc_main$c), {
-                icon: "check_circle",
-                class: "sv-upgrade-subscription__success-icon text-green-400",
-                size: "lg"
-              }),
-              createVNode(unref(_sfc_main$8), {
-                variant: "heading-3",
-                tag: "span",
-                class: "sv-upgrade-subscription__success-title mt-2"
+              createVNode(unref(_sfc_main$7), {
+                variant: "body-sm",
+                shade: "lighter",
+                tag: "div",
+                class: "sv-upgrade-subscription__success-message mt-1"
               }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(unref($t)({
-                    defaultMessage: "Payment successful",
-                    id: "upgrade_subscription.success.title",
-                    description: "Title shown after a successful add-on purchase"
+                    defaultMessage: "Your purchase has been completed.",
+                    id: "upgrade_subscription.success.subtitle",
+                    description: "Subtitle shown after a successful upgrade purchase"
                   })), 1)
                 ]),
                 _: 1
               }),
-              createVNode(unref(_sfc_main$8), {
+              createVNode(unref(_sfc_main$7), {
                 variant: "body-sm",
                 shade: "lighter",
-                tag: "span",
-                class: "sv-upgrade-subscription__success-message mt-1"
+                tag: "div",
+                class: "sv-upgrade-subscription__success-redirect mt-1"
               }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(unref($t)({
-                    defaultMessage: "Your add-ons have been activated.",
-                    id: "upgrade_subscription.success.subtitle",
-                    description: "Subtitle shown after a successful add-on purchase"
+                    defaultMessage: "You will be redirected shortly…",
+                    id: "upgrade_subscription.success.redirect",
+                    description: "Shown below the success message while the redirect timer is running"
                   })), 1)
                 ]),
                 _: 1
@@ -919,89 +864,180 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             ])
           ]),
           _: 1
-        })
+        }, 8, ["title"])
       ])) : (openBlock(), createBlock(unref(ContentWithAsideLayout), {
         key: 1,
         class: "sv-upgrade-subscription sv-root sv-screen"
       }, {
+        header: withCtx(() => [
+          createElementVNode("div", _hoisted_3, [
+            createVNode(unref(_sfc_main$7), {
+              variant: "heading-2",
+              tag: "h1",
+              class: "sv-upgrade-subscription__title"
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref($t)({
+                  defaultMessage: "Upgrade subscription",
+                  id: "upgrade_subscription.title",
+                  description: "Title for the upgrade subscription page"
+                })), 1)
+              ]),
+              _: 1
+            })
+          ])
+        ]),
         content: withCtx(() => [
-          categories.value.length > 0 ? (openBlock(), createBlock(_sfc_main$4, {
+          unref(isMobileViewport) ? (openBlock(), createBlock(_sfc_main$4, {
             key: 0,
-            class: "sv-upgrade-subscription__pricing-list",
-            categories: categories.value,
-            "selected-pricing-ids": selectedPricingIds.value,
-            onToggle: handleToggle
-          }, null, 8, ["categories", "selected-pricing-ids"])) : (openBlock(), createBlock(unref(_sfc_main$8), {
-            key: 1,
+            class: "sv-upgrade-subscription__mobile-order-summary",
+            "selected-pricings": selectedPricings.value,
+            invoice: previewInvoice.value,
+            loading: isPreviewPending.value
+          }, null, 8, ["selected-pricings", "invoice", "loading"])) : createCommentVNode("", true),
+          !isLoadingItems.value && !loadError.value && categories.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            createVNode(_sfc_main$2, {
+              categories: categories.value,
+              "selected-pricing-ids": selectedPricingIds.value,
+              "loading-pricing-id": previewPendingPricingId.value,
+              onToggle: handleToggle
+            }, null, 8, ["categories", "selected-pricing-ids", "loading-pricing-id"])
+          ])) : isLoadingItems.value ? (openBlock(), createElementBlock("div", _hoisted_5, [..._cache[0] || (_cache[0] = [
+            createElementVNode("div", { class: "sv-skeleton h-[72px] animate-pulse rounded-md bg-gray-100" }, null, -1),
+            createElementVNode("div", { class: "sv-skeleton mt-2 h-[72px] animate-pulse rounded-md bg-gray-100" }, null, -1),
+            createElementVNode("div", { class: "sv-skeleton mt-2 h-[72px] animate-pulse rounded-md bg-gray-100" }, null, -1)
+          ])])) : loadError.value ? (openBlock(), createBlock(unref(_sfc_main$e), {
+            key: 3,
+            class: "sv-upgrade-subscription__load-error sv-error m-4",
+            title: loadError.value
+          }, null, 8, ["title"])) : (openBlock(), createBlock(unref(_sfc_main$7), {
+            key: 4,
             variant: "body-sm",
             shade: "lighter",
             class: "sv-upgrade-subscription__empty-state p-4"
           }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(unref($t)({
-                defaultMessage: "No on-demand add-ons are available for this subscription.",
+                defaultMessage: "No one-off items are available for this subscription.",
                 id: "upgrade_subscription.empty_state",
-                description: "Shown when there are no on-demand add-ons available for the subscription"
+                description: "Shown when there are no one-off items available for the subscription"
               })), 1)
             ]),
             _: 1
           })),
-          createVNode(unref(_sfc_main$e), { spacing: "sm" }),
-          createVNode(_sfc_main$3, {
-            class: "sv-upgrade-subscription__payment-method-picker",
-            "customer-id": customerId.value,
-            "subscription-id": __props.configuration.subscriptionId,
-            "selected-id": selectedPaymentMethodId.value,
-            onSelect: _cache[0] || (_cache[0] = ($event) => selectedPaymentMethodId.value = $event)
-          }, null, 8, ["customer-id", "subscription-id", "selected-id"])
+          createElementVNode("div", _hoisted_6, [
+            createVNode(_sfc_main$d, {
+              variant: "section",
+              class: "min-h-[130px]"
+            }, {
+              default: withCtx(() => [
+                !isLoadingItems.value || isLoadingItems.value && paymentMethodOptions.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                  createVNode(unref(_sfc_main$7), {
+                    variant: "heading-3",
+                    tag: "h2",
+                    class: "sv-upgrade-subscription__payment-methods-title mb-2"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref($t)({
+                        defaultMessage: "Payment method",
+                        id: "upgrade_subscription.payment_method_block.title",
+                        description: "The title of the payment method block in the upgrade subscription flow"
+                      })), 1)
+                    ]),
+                    _: 1
+                  }),
+                  paymentMethodOptions.value.length === 0 ? (openBlock(), createBlock(_sfc_main$g, {
+                    key: 0,
+                    class: "sv-upgrade-subscription__payment-methods-empty",
+                    icon: "credit_card_off"
+                  }, {
+                    title: withCtx(() => [
+                      createTextVNode(toDisplayString(unref($t)({
+                        defaultMessage: "No payment methods available",
+                        id: "upgrade_subscription.payment_method_block.no_payment_methods_available_title",
+                        description: "The title shown when there are no available payment methods"
+                      })), 1)
+                    ]),
+                    message: withCtx(() => [
+                      createTextVNode(toDisplayString(unref($t)({
+                        defaultMessage: "There are no available payment methods. Please contact support for more information.",
+                        id: "upgrade_subscription.payment_method_block.no_payment_methods_available_message",
+                        description: "The message shown when there are no available payment methods"
+                      })), 1)
+                    ]),
+                    _: 1
+                  })) : countryCode.value && activeScheduleId.value ? (openBlock(), createElementBlock("div", _hoisted_8, [
+                    createElementVNode("div", {
+                      class: normalizeClass(["sv-upgrade-subscription__payment-method-picker", { "pointer-events-none opacity-60": isPurchasePending.value }])
+                    }, [
+                      createVNode(_sfc_main$h, {
+                        ref_key: "paymentIntegrationFormRef",
+                        ref: paymentIntegrationFormRef,
+                        "customer-id": customerId.value,
+                        "country-code": countryCode.value,
+                        context: authorizationContext.value,
+                        amount: paymentFormAmount.value,
+                        variant: "AUTHORIZE",
+                        "payment-method-options": paymentMethodOptions.value,
+                        "validate-on-submit": handleValidatePaymentSubmit,
+                        "force-store-payment-method": "",
+                        onPaymentSuccess: handlePaymentSuccess,
+                        onPaymentFailed: handlePaymentFailed
+                      }, null, 8, ["customer-id", "country-code", "context", "amount", "payment-method-options"])
+                    ], 2)
+                  ])) : createCommentVNode("", true)
+                ])) : createCommentVNode("", true)
+              ]),
+              _: 1
+            })
+          ])
         ]),
         aside: withCtx(() => [
-          createVNode(_sfc_main$6, {
-            class: "sv-upgrade-subscription__order-summary",
-            "selected-pricings": selectedPricings.value,
-            invoice: previewInvoice.value,
-            "is-pending": isPreviewPending.value
-          }, null, 8, ["selected-pricings", "invoice", "is-pending"]),
-          purchaseError.value ? (openBlock(), createBlock(unref(_sfc_main$d), {
+          createElementVNode("div", _hoisted_9, [
+            createVNode(_sfc_main$d, {
+              variant: "section",
+              class: "min-h-[220px]"
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$4, {
+                  "selected-pricings": selectedPricings.value,
+                  invoice: previewInvoice.value,
+                  loading: isPreviewPending.value
+                }, null, 8, ["selected-pricings", "invoice", "loading"])
+              ]),
+              _: 1
+            })
+          ]),
+          purchaseError.value ? (openBlock(), createBlock(unref(_sfc_main$e), {
             key: 0,
             class: "sv-upgrade-subscription__error sv-error",
             title: purchaseError.value
           }, null, 8, ["title"])) : createCommentVNode("", true),
-          createVNode(unref(_sfc_main$a), {
-            size: "lg",
-            class: "sv-action sv-action--primary sv-action--full-width sv-upgrade-subscription__purchase full-width",
-            type: "button",
-            disabled: !canPurchase.value || isPurchasePending.value,
-            loading: isPurchasePending.value,
-            onClick: handlePurchase
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(unref($t)({
-                defaultMessage: "Purchase",
-                id: "upgrade_subscription.purchase_button.label",
-                description: "Label for the purchase button on the upgrade subscription page"
-              })), 1)
-            ]),
-            _: 1
-          }, 8, ["disabled", "loading"]),
-          createVNode(unref(_sfc_main$8), {
-            tag: "div",
-            variant: "body-sm",
-            shade: "lighter",
-            class: "sv-upgrade-subscription__trust-indicator flex grow justify-center"
-          }, {
-            default: withCtx(() => [
-              createVNode(_sfc_main$2, {
-                icon: "lock",
-                kpi: unref($t)({
-                  defaultMessage: "Secure and encrypted payments",
-                  id: "upgrade_subscription.kpi.encrypted_payments.label",
-                  description: "The encrypted payments KPI shown on the upgrade subscription page"
-                })
-              }, null, 8, ["kpi"])
-            ]),
-            _: 1
-          })
+          createElementVNode("div", _hoisted_10, [
+            createVNode(_sfc_main$d, { class: "sv-upgrade-subscription__submit-skeleton min-h-[44px]" }, {
+              default: withCtx(() => [
+                createVNode(unref(_sfc_main$b), {
+                  size: "lg",
+                  class: "sv-action sv-action--primary sv-action--full-width sv-upgrade-subscription__purchase w-full",
+                  type: "button",
+                  disabled: !canPurchase.value || isPurchasePending.value,
+                  loading: isPurchasePending.value,
+                  onClick: handlePurchase
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref($t)({
+                      defaultMessage: "Purchase",
+                      id: "upgrade_subscription.purchase_button.label",
+                      description: "Label for the purchase button on the upgrade subscription page"
+                    })), 1)
+                  ]),
+                  _: 1
+                }, 8, ["disabled", "loading"])
+              ]),
+              _: 1
+            }),
+            createVNode(_sfc_main$f, { "payment-method-options": paymentMethodOptions.value }, null, 8, ["payment-method-options"])
+          ])
         ]),
         _: 1
       }));
@@ -1030,7 +1066,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       var _a, _b, _c, _d;
-      return openBlock(), createBlock(_sfc_main$f, {
+      return openBlock(), createBlock(_sfc_main$i, {
         "custom-element-name": unref(COMPONENT_NAME),
         environment: __props.environment,
         locale: __props.locale,