@solvimon/solvimon-web 0.1.0-alpha.1 → 0.1.0-alpha.3

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

@@ -0,0 +1,1012 @@
+import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createVNode, createTextVNode, toDisplayString, createElementBlock, Fragment, createElementVNode, renderList, createCommentVNode, normalizeClass, ref, onMounted, watch } from "vue";
+import { b as useIntl, d as _sfc_main$1g, _ as _sfc_main$2$1, O as formatAmount, m as _sfc_main$2H, g as _sfc_main$7, c as createRequestService, u as useConfig, n as _sfc_main$4$1, D as _sfc_main$16, Q as _sfc_main$2p, p as _sfc_main$9, q as defineCustomElement, o as getComponentName } from "../../component-DEo_ndpK.mjs";
+import { _ as _sfc_main$6, a as _sfc_main$8 } from "../../PricingGroupContent.vue_vue_type_script_setup_true_lang-DWp42_G4.mjs";
+import { c as createPaymentMethodsService } from "../../paymentMethods-CqKUfc3w.mjs";
+import { u as usePortal, C as ContentWithAsideLayout } from "../../ContentWithAsideLayout-CRsFr9TH.mjs";
+import { u as useActionDispatchProvider } from "../../useActionDispatchProvider-CgRcOqv3.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$3 = { class: "mb-3 flex flex-col gap-2" };
+const _hoisted_2$2 = { class: "flex flex-col gap-1 border-t pt-3" };
+const _hoisted_3$1 = { class: "flex items-center justify-between" };
+const _hoisted_4$1 = { class: "flex items-center justify-between" };
+const _hoisted_5$1 = { class: "flex items-center justify-between border-t pt-3" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "UpgradeOrderSummary",
+  props: {
+    selectedPricings: { type: Array },
+    invoice: { type: Object },
+    isPending: { 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;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1g), null, {
+        default: withCtx(() => {
+          var _a;
+          return [
+            createVNode(unref(_sfc_main$2$1), {
+              variant: "heading-3",
+              tag: "h2",
+              class: "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$2$1), {
+              key: 0,
+              variant: "body-sm",
+              shade: "lighter"
+            }, {
+              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)
+              ]),
+              _: 1
+            })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createElementVNode("div", _hoisted_1$3, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.selectedPricings, (pricing) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: pricing.id,
+                    class: "flex items-center justify-between"
+                  }, [
+                    createElementVNode("div", null, [
+                      createVNode(unref(_sfc_main$2$1), { variant: "body-sm" }, {
+                        default: withCtx(() => {
+                          var _a2, _b;
+                          return [
+                            createTextVNode(toDisplayString(pricing.name ?? ((_b = (_a2 = pricing.products) == null ? void 0 : _a2[0]) == null ? void 0 : _b.name)), 1)
+                          ];
+                        }),
+                        _: 2
+                      }, 1024),
+                      createVNode(unref(_sfc_main$2$1), {
+                        variant: "body-xs",
+                        shade: "lighter"
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(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"
+                          })), 1)
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    getPrice(pricing) ? (openBlock(), createBlock(unref(_sfc_main$2$1), {
+                      key: 0,
+                      variant: "body-sm"
+                    }, {
+                      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$2$1), {
+                      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$2$1), { 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$2$1), {
+                      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$2$1), { 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$2$1), {
+                    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
+                  }),
+                  createVNode(unref(_sfc_main$2$1), {
+                    variant: "body-sm",
+                    weight: "semibold"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref(formatAmount)(__props.invoice.tax_summary.total_amount)), 1)
+                    ]),
+                    _: 1
+                  })
+                ])
+              ], 64)) : createCommentVNode("", true)
+            ], 64))
+          ];
+        }),
+        _: 1
+      });
+    };
+  }
+});
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "OnDemandPricingRow",
+  props: {
+    pricing: { type: Object },
+    selected: { 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 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;
+    });
+    const description = computed(
+      () => price.value ? `${formatAmount(price.value)} ${$t({
+        defaultMessage: "one-off",
+        id: "on_demand_pricing_row.one_off_label",
+        description: "One-off label shown next to the price in an on-demand pricing row"
+      })}` : ""
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1g), {
+        "content-background": __props.selected ? "none" : "gray",
+        class: normalizeClass({ "!bg-white": __props.selected })
+      }, {
+        default: withCtx(() => [
+          createVNode(_sfc_main$6, {
+            name: title.value,
+            description: description.value
+          }, {
+            default: withCtx(() => [
+              __props.selected ? (openBlock(), createBlock(unref(_sfc_main$2H), {
+                key: 0,
+                color: "gray",
+                variant: "outline",
+                size: "sm",
+                "icon-prefix": "remove_shopping_cart",
+                onClick: _cache[0] || (_cache[0] = ($event) => emit("toggle", __props.pricing.id))
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref($t)({
+                    defaultMessage: "Remove",
+                    id: "on_demand_pricing_row.remove_button_label",
+                    description: "Label for the remove button in an on-demand pricing row"
+                  })), 1)
+                ]),
+                _: 1
+              })) : (openBlock(), createBlock(unref(_sfc_main$2H), {
+                key: 1,
+                color: "primary",
+                size: "sm",
+                "icon-prefix": "add",
+                onClick: _cache[1] || (_cache[1] = ($event) => emit("toggle", __props.pricing.id))
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref($t)({
+                    defaultMessage: "Add to cart",
+                    id: "on_demand_pricing_row.add_to_cart_button_label",
+                    description: "Label for the add to cart button in an on-demand pricing row"
+                  })), 1)
+                ]),
+                _: 1
+              }))
+            ]),
+            _: 1
+          }, 8, ["name", "description"])
+        ]),
+        _: 1
+      }, 8, ["content-background", "class"]);
+    };
+  }
+});
+const _hoisted_1$2 = { class: "grid grid-cols-1 gap-1" };
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "OnDemandPricingList",
+  props: {
+    categories: { type: Array },
+    selectedPricingIds: { type: Array }
+  },
+  emits: ["toggle"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const sortedCategories = computed(
+      () => [...props.categories].sort((a, b) => (a.display_order ?? 0) - (b.display_order ?? 0))
+    );
+    return (_ctx, _cache) => {
+      return openBlock(true), createElementBlock(Fragment, null, renderList(sortedCategories.value, (category) => {
+        return openBlock(), createElementBlock("div", {
+          key: category.id ?? category.display_order,
+          class: "flex flex-col gap-2"
+        }, [
+          createVNode(unref(_sfc_main$2$1), {
+            variant: "heading-3",
+            tag: "h2"
+          }, {
+            default: withCtx(() => {
+              var _a;
+              return [
+                createTextVNode(toDisplayString(((_a = category.product_category) == null ? void 0 : _a.name) ?? category.name), 1)
+              ];
+            }),
+            _: 2
+          }, 1024),
+          createElementVNode("div", _hoisted_1$2, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(category.pricings, (pricing) => {
+              return openBlock(), createBlock(_sfc_main$4, {
+                key: pricing.id,
+                pricing,
+                selected: __props.selectedPricingIds.includes(pricing.id),
+                onToggle: _cache[0] || (_cache[0] = ($event) => emit("toggle", $event))
+              }, null, 8, ["pricing", "selected"]);
+            }), 128)),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(category.pricing_groups, (group) => {
+              return openBlock(), createElementBlock(Fragment, {
+                key: group.id
+              }, [
+                createVNode(unref(_sfc_main$2$1), {
+                  variant: "body-sm",
+                  weight: "semibold",
+                  class: "mt-2"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(group.name), 1)
+                  ]),
+                  _: 2
+                }, 1024),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(group.pricings, (pricing) => {
+                  return openBlock(), createBlock(_sfc_main$4, {
+                    key: pricing.id,
+                    pricing,
+                    selected: __props.selectedPricingIds.includes(pricing.id),
+                    onToggle: _cache[1] || (_cache[1] = ($event) => emit("toggle", $event))
+                  }, null, 8, ["pricing", "selected"]);
+                }), 128))
+              ], 64);
+            }), 128))
+          ])
+        ]);
+      }), 128);
+    };
+  }
+});
+const _hoisted_1$1 = { class: "flex flex-col gap-4" };
+const _hoisted_2$1 = {
+  key: 0,
+  class: "flex flex-col gap-2"
+};
+const _hoisted_3 = { class: "flex flex-col gap-1" };
+const _hoisted_4 = {
+  key: 1,
+  class: "flex flex-col gap-2"
+};
+const _hoisted_5 = { class: "flex flex-col gap-1" };
+const _hoisted_6 = { class: "flex items-center gap-3" };
+const _hoisted_7 = {
+  key: 0,
+  class: "flex h-9 w-9 shrink-0 items-center gap-0.5"
+};
+const _hoisted_8 = ["src", "alt"];
+const _hoisted_9 = {
+  key: 1,
+  class: "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: "flex flex-col gap-1"
+};
+const _sfc_main$2 = /* @__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$1, [
+        savedMethods.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+          createVNode(unref(_sfc_main$2$1), {
+            variant: "heading-3",
+            tag: "h2"
+          }, {
+            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$1g), {
+                key: method.id,
+                "content-background": __props.selectedId === method.id ? "none" : "gray",
+                class: normalizeClass([{ "!bg-white": __props.selectedId === method.id }, "cursor-pointer"]),
+                onClick: ($event) => emit("select", method.id)
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(_sfc_main$7), { "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$2$1), {
+            variant: "heading-3",
+            tag: "h2"
+          }, {
+            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$1g), {
+                key: option.adyen.type,
+                "content-background": __props.selectedId === option.adyen.type ? "none" : "gray",
+                class: normalizeClass([{ "!bg-white": __props.selectedId === option.adyen.type }, "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$2$1), { variant: "body-sm" }, {
+                      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: "h-[52px] animate-pulse rounded-md bg-gray-100" }, null, -1),
+          createElementVNode("div", { class: "h-[52px] animate-pulse rounded-md bg-gray-100" }, null, -1),
+          createElementVNode("div", { class: "h-[52px] animate-pulse rounded-md bg-gray-100" }, null, -1)
+        ])])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+function createPricingPlanSchedulesService() {
+  const request = createRequestService();
+  const config = useConfig();
+  function chargeOnDemandPricingItems({
+    scheduleId,
+    pricingPlanVersionId,
+    pricingItemIds,
+    startAt,
+    finalizeImmediately = true,
+    paymentMethodId
+  }) {
+    return request({
+      url: `${config.apiUrls.config}/portal/pricing-plan-schedules/${scheduleId}/charge-on-demand-pricing-items`,
+      options: { method: "POST" },
+      data: {
+        ...pricingPlanVersionId ? { pricing_plan_version_id: pricingPlanVersionId } : {},
+        pricing_item_ids: pricingItemIds,
+        ...startAt ? { start_at: startAt } : {},
+        finalize_immediately: finalizeImmediately,
+        ...paymentMethodId ? { payment_method_id: paymentMethodId } : {}
+      }
+    });
+  }
+  return { chargeOnDemandPricingItems };
+}
+const _hoisted_1 = {
+  key: 0,
+  class: "flex h-full items-center justify-center p-8"
+};
+const _hoisted_2 = { class: "flex flex-col items-center py-10" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "UpgradeSubscription",
+  props: {
+    configuration: { type: Object }
+  },
+  setup(__props) {
+    const props = __props;
+    const { $t } = useIntl();
+    const { dispatchAction } = useActionDispatchProvider();
+    const { chargeOnDemandPricingItems } = createPricingPlanSchedulesService();
+    const portal = usePortal();
+    const customerId = computed(() => portal.value.customer_id);
+    const selectedPricingIds = ref([]);
+    const selectedPaymentMethodId = ref(void 0);
+    const isPurchasePending = ref(false);
+    const isPurchased = ref(false);
+    const previewInvoice = ref(void 0);
+    const isPreviewPending = ref(false);
+    const mockResponse = computed(
+      () => getMockOnDemandPricingItemsResponse(props.configuration.subscriptionId)
+    );
+    const categories = computed(() => mockResponse.value.pricing_categories);
+    const allOnDemandPricings = computed(
+      () => categories.value.flatMap((cat) => [
+        ...cat.pricings ?? [],
+        ...(cat.pricing_groups ?? []).flatMap((g) => g.pricings ?? [])
+      ])
+    );
+    const selectedPricings = computed(
+      () => allOnDemandPricings.value.filter((p) => selectedPricingIds.value.includes(p.id))
+    );
+    let previewTimer;
+    watch(selectedPricingIds, (ids) => {
+      clearTimeout(previewTimer);
+      if (ids.length === 0) {
+        previewInvoice.value = void 0;
+        isPreviewPending.value = false;
+        return;
+      }
+      isPreviewPending.value = true;
+      previewTimer = setTimeout(() => {
+        previewInvoice.value = getMockPreviewResponse(ids).invoice;
+        isPreviewPending.value = false;
+      }, 400);
+    });
+    const handleToggle = (pricingId) => {
+      if (selectedPricingIds.value.includes(pricingId)) {
+        selectedPricingIds.value = selectedPricingIds.value.filter((id) => id !== pricingId);
+      } else {
+        selectedPricingIds.value = [...selectedPricingIds.value, pricingId];
+      }
+    };
+    const canPurchase = computed(
+      () => selectedPricingIds.value.length > 0 && !!selectedPaymentMethodId.value
+    );
+    const purchaseError = ref(void 0);
+    const isSavedPaymentMethod = (id) => id.startsWith("pmet_");
+    const handlePurchase = async () => {
+      if (!canPurchase.value) return;
+      isPurchasePending.value = true;
+      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 {
+        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;
+      }
+    };
+    return (_ctx, _cache) => {
+      return isPurchased.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(_sfc_main$1g), null, {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_2, [
+              createVNode(unref(_sfc_main$4$1), {
+                icon: "check_circle",
+                class: "text-green-400",
+                size: "lg"
+              }),
+              createVNode(unref(_sfc_main$2$1), {
+                variant: "heading-3",
+                tag: "span",
+                class: "mt-2"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref($t)({
+                    defaultMessage: "Payment successful",
+                    id: "upgrade_subscription.success.title",
+                    description: "Title shown after a successful add-on purchase"
+                  })), 1)
+                ]),
+                _: 1
+              }),
+              createVNode(unref(_sfc_main$2$1), {
+                variant: "body-sm",
+                shade: "lighter",
+                tag: "span",
+                class: "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"
+                  })), 1)
+                ]),
+                _: 1
+              })
+            ])
+          ]),
+          _: 1
+        })
+      ])) : (openBlock(), createBlock(unref(ContentWithAsideLayout), { key: 1 }, {
+        content: withCtx(() => [
+          categories.value.length > 0 ? (openBlock(), createBlock(_sfc_main$3, {
+            key: 0,
+            categories: categories.value,
+            "selected-pricing-ids": selectedPricingIds.value,
+            onToggle: handleToggle
+          }, null, 8, ["categories", "selected-pricing-ids"])) : (openBlock(), createBlock(unref(_sfc_main$2$1), {
+            key: 1,
+            variant: "body-sm",
+            shade: "lighter",
+            class: "p-4"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref($t)({
+                defaultMessage: "No on-demand add-ons are available for this subscription.",
+                id: "upgrade_subscription.empty_state",
+                description: "Shown when there are no on-demand add-ons available for the subscription"
+              })), 1)
+            ]),
+            _: 1
+          })),
+          createVNode(unref(_sfc_main$2p), { spacing: "sm" }),
+          createVNode(_sfc_main$2, {
+            "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"])
+        ]),
+        aside: withCtx(() => [
+          createVNode(_sfc_main$5, {
+            "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$16), {
+            key: 0,
+            title: purchaseError.value
+          }, null, 8, ["title"])) : createCommentVNode("", true),
+          createVNode(unref(_sfc_main$2H), {
+            size: "lg",
+            class: "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$2$1), {
+            tag: "div",
+            variant: "body-sm",
+            shade: "lighter",
+            class: "flex grow justify-center"
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$8, {
+                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
+          })
+        ]),
+        _: 1
+      }));
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "UpgradeSubscription.entry",
+  props: {
+    environment: { type: String },
+    locale: { type: String },
+    dateLocale: { type: String },
+    messages: { type: Object },
+    showTimezones: { type: Boolean },
+    primaryColor: { type: String },
+    secondaryColor: { type: String },
+    isShadowRoot: { type: Boolean },
+    experimentalFeatures: { type: Array },
+    logLevel: { type: String },
+    onLog: { type: Function },
+    allowedPortalTypes: { type: Array },
+    portalObject: { type: Object },
+    customElementName: { type: String },
+    branding: { type: Object },
+    configuration: { type: Object }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      var _a, _b, _c, _d;
+      return openBlock(), createBlock(_sfc_main$9, {
+        "custom-element-name": unref(COMPONENT_NAME),
+        environment: __props.environment,
+        locale: __props.locale,
+        "portal-object": __props.portalObject,
+        "allowed-portal-types": ["CUSTOMER"],
+        "primary-color": (_b = (_a = __props.branding) == null ? void 0 : _a.colors) == null ? void 0 : _b.primary,
+        "secondary-color": (_d = (_c = __props.branding) == null ? void 0 : _c.colors) == null ? void 0 : _d.secondary,
+        "experimental-features": __props.experimentalFeatures,
+        "log-level": __props.logLevel,
+        "on-log": __props.onLog,
+        onError: _cache[0] || (_cache[0] = (error) => _ctx.$emit("error", error))
+      }, {
+        default: withCtx(() => [
+          createVNode(_sfc_main$1, { configuration: __props.configuration }, null, 8, ["configuration"])
+        ]),
+        _: 1
+      }, 8, ["custom-element-name", "environment", "locale", "portal-object", "primary-color", "secondary-color", "experimental-features", "log-level", "on-log"]);
+    };
+  }
+});
+const SolvimonUpgradeSubscription = defineCustomElement(_sfc_main);
+const COMPONENT_NAME = getComponentName("upgrade-subscription");
+const defineSolvimonUpgradeSubscription = () => {
+  if (!customElements.get(COMPONENT_NAME)) {
+    customElements.define(COMPONENT_NAME, SolvimonUpgradeSubscription);
+  }
+};
+export {
+  COMPONENT_NAME,
+  SolvimonUpgradeSubscription,
+  defineSolvimonUpgradeSubscription
+};