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

package/README.md

@@ -1,80 +1,232 @@
-# @solvimon/sdk
+# @solvimon/solvimon-web
 
-## Getting started
+Solvimon's front-end SDK. Provides framework-agnostic web components and a set of screens for building a billing self-serve experience.
+
+## Installation
 
 ```bash
-npm install @solvimon/sdk
+npm install @solvimon/solvimon-web
 ```
 
-Solvimon's SDK exports web components, that are framework agnostic. Each component requires at least:
+## Requirements
+
+Every component requires at minimum:
+
+| Property      | Type                 | Description                                 |
+| ------------- | -------------------- | ------------------------------------------- |
+| `token`       | `string`             | Session token fetched from the Solvimon API |
+| `environment` | `"TEST"` \| `"LIVE"` | Target environment                          |
+
+## Usage
 
-| Property      | Description                                  |
-| ------------- | -------------------------------------------- |
-| `token`       | Fetched from our API                         |
-| `environment` | Specifies the environment (`TEST` or `LIVE`) |
+The SDK exports web components (Custom Elements). There are two ways to register them.
 
-It supports two ways of importing:
+### Auto-register via define function
 
-### `defineSolvimonAddPaymentMethodForm`
+Call the `define` function once — it registers the custom element globally.
 
 ```tsx
-import { defineSolvimonAddPaymentMethodForm } from '@solvimon/sdk/solvimon-add-payment-method-form';
+import { defineSolvimonCheckout } from '@solvimon/solvimon-web/screens/checkout';
 
-defineSolvimonAddPaymentMethodForm();
+defineSolvimonCheckout();
 
-export default function Home() {
-    return (
-        <solvimon-add-payment-method-form
-            token="<my-token-retrieved-from-solvimon-api>"
-            environment="LIVE"
-        />
-    );
+export default function Page() {
+    return <solvimon-checkout token="<token>" environment="LIVE" />;
 }
 ```
 
-### Register yourself (beneficial in Vue setup for typed components)
+### Manual registration (recommended for Vue — enables typed components)
 
 ```vue
 <script setup lang="ts">
-import { SolvimonAddPaymentMethodForm } from '@solvimon/sdk/solvimon-add-payment-method-form';
+import { SolvimonCheckout } from '@solvimon/solvimon-web/screens/checkout';
 
-if (customElements.get('solvimon-add-payment-method-form')) {
-    customElements.define('solvimon-add-payment-method-form', SolvimonAddPaymentMethodForm);
+if (!customElements.get('solvimon-checkout')) {
+    customElements.define('solvimon-checkout', SolvimonCheckout);
 }
 </script>
 
 <template>
-    <solvimon-add-payment-method-form
-        token="<my-token-retrieved-from-solvimon-api>"
-        environment="LIVE"
-    />
+    <solvimon-checkout token="<token>" environment="LIVE" />
 </template>
 ```
 
-### Isomorphic (server side rendered) usage
+### Server-side rendering (SSR / isomorphic)
 
-Our component define functions might cause issues when run in isomorphic setups. To solve this, you might want to consider only loading our SDK client side only:
+The define functions access browser APIs and must only run client-side. Lazy-import them inside a client-only lifecycle hook:
 
 ```tsx
 import { useEffect } from 'react';
 
-export default function Home() {
+export default function Page() {
     useEffect(() => {
-        async function loadSolvimonSdkComponent() {
-            const { defineSolvimonAddPaymentMethodForm } = await import(
-                '@solvimon/sdk/solvimon-add-payment-method-form'
-            );
-            defineSolvimonAddPaymentMethodForm();
-        }
-
-        loadSolvimonSdkComponent();
+        import('@solvimon/solvimon-web/screens/checkout').then(({ defineSolvimonCheckout }) =>
+            defineSolvimonCheckout(),
+        );
     }, []);
 
-    return (
-        <solvimon-add-payment-method-form
-            token="<my-token-retrieved-from-solvimon-api>"
-            environment="LIVE"
-        />
-    );
+    return <solvimon-checkout token="<token>" environment="LIVE" />;
 }
 ```
+
+## CSS overrides
+
+Solvimon components render inside shadow DOM, so CSS from the host page cannot style them directly. Pass `cssOverrides` to `createSolvimonCore` to inject customer CSS into each SDK shadow root.
+
+```ts
+import { createSolvimonCore } from '@solvimon/solvimon-web/core';
+
+const solvimon = createSolvimonCore({
+    environment: 'TEST',
+    cssOverrides: `
+        .sv-root {
+            font-family: Inter, sans-serif;
+        }
+
+        .sv-checkout__submit {
+            border-radius: 24px !important;
+        }
+    `,
+});
+```
+
+Use the public `sv-*` classes as styling hooks. Do not rely on internal Tailwind utility classes, because those can change.
+
+For more details, see [`@solvimon/solvimon-web/core`](./src/public/core/README.md).
+
+## Available components
+
+### Screens
+
+Full-page experiences.
+
+| Export path                                           | Custom element                    |
+| ----------------------------------------------------- | --------------------------------- |
+| `@solvimon/solvimon-web/screens/checkout`             | `<solvimon-checkout>`             |
+| `@solvimon/solvimon-web/screens/customer-overview`    | `<solvimon-customer-overview>`    |
+| `@solvimon/solvimon-web/screens/upgrade-subscription` | `<solvimon-upgrade-subscription>` |
+
+### Components
+
+Embeddable building blocks.
+
+| Export path                                                  | Custom element                        |
+| ------------------------------------------------------------ | ------------------------------------- |
+| `@solvimon/solvimon-web/components/billing-information`      | `<solvimon-billing-information>`      |
+| `@solvimon/solvimon-web/components/billing-information-form` | `<solvimon-billing-information-form>` |
+| `@solvimon/solvimon-web/components/customer-payment-methods` | `<solvimon-customer-payment-methods>` |
+| `@solvimon/solvimon-web/components/invoice`                  | `<solvimon-invoice>`                  |
+| `@solvimon/solvimon-web/components/invoice-details`          | `<solvimon-invoice-details>`          |
+| `@solvimon/solvimon-web/components/invoices-list`            | `<solvimon-invoices-list>`            |
+| `@solvimon/solvimon-web/components/payment-history`          | `<solvimon-payment-history>`          |
+| `@solvimon/solvimon-web/components/payment-method-form`      | `<solvimon-payment-method-form>`      |
+| `@solvimon/solvimon-web/components/subscription-schedules`   | `<solvimon-subscription-schedules>`   |
+| `@solvimon/solvimon-web/components/subscriptions-list`       | `<solvimon-subscriptions-list>`       |
+| `@solvimon/solvimon-web/components/wallet-balances`          | `<solvimon-wallet-balances>`          |
+
+## Supported Adyen payment methods
+
+### Cards
+
+- American Express
+- Bancontact
+- Carnet
+- Cartes Bancaires
+- China UnionPay
+- Dankort
+- Diners Club
+- Discover
+- EFTPOS
+- Elo
+- Girocard
+- Hipercard
+- JCB
+- Maestro
+- Mastercard
+- NYCE
+- Pulse
+- Star
+- UnionPay
+- V Pay
+- Visa
+
+### Digital wallets
+
+- Amazon Pay
+- Apple Pay
+- Bancontact Mobile
+- Cash App Pay
+- DANA
+- GCash
+- Google Pay
+- GoPay
+- KakaoPay
+- MOMO
+- PayPal
+- TWINT
+
+### Direct debit
+
+- ACH (US)
+- Bacs Direct Debit (UK)
+- SEPA Direct Debit
+- Pay by Bank (US)
+
+### Online banking
+
+- EPS
+- iDEAL
+- Pay by Bank
+- Trustly
+
+### Buy now, pay later
+
+- Klarna
+- Zip
+
+## Release pipeline
+
+Releases are published to [npm](https://www.npmjs.com/package/@solvimon/solvimon-web)
+automatically via GitHub Actions. See the
+[publishing documentation](./docs/development/publish.md) for the release flow.
+
+Want to contribute? Check the [developer documentation](./docs/development/readme.md).
+
+<!-- log-codes:start — DO NOT EDIT: auto-generated by `npm run logs:list` -->
+## Error logging
+
+The SDK emits structured log entries via the [`onLog`](#error-logging) callback. Subscribe to receive all log events and filter by `code` for programmatic handling.
+
+### Error codes
+
+| Code | Description |
+| :--- | :---------- |
+| `ADYEN_SUBMIT_FAILED` | Failed to submit Adyen drop-in |
+| `APPLE_PAY_AUTHORIZATION_FAILED` | Payment authorization failed |
+| `APPLE_PAY_ERROR` | Apple Pay error |
+| `CUSTOMER_FETCH_FAILED` | Failed to fetch customer billing information |
+| `EXPRESS_CHECKOUT_GOOGLE_PAY_ERROR` | The Google Pay button reference is not found and cannot be mounted |
+| `EXPRESS_CHECKOUT_PAYPAL_ERROR` | The PayPal button reference is not found and cannot be mounted |
+| `INITIAL_DATA_LOAD_FAILED` | Failed to load initial data |
+| `INTEGRATION_ERROR` | Unhandled error in payment submission flow |
+| `INVALID_COUNTRY_CODE` | invalid country code provided:… |
+| `INVALID_EMAIL` | invalid email provided:… |
+| `INVALID_REDIRECT_RESULT` | Redirect result is set but payment acceptor id is missing |
+| `INVALID_TOKEN` | Failed to fetch access token |
+| `INVOICE_PREVIEW_FAILED` | Failed to load invoice preview |
+| `PAYMENT_AUTHORIZATION_FAILED` | Failed payment authorization for payment acceptor with id… |
+| `PAYMENT_DETAILS_CALL_FAILED` | Failed fetching payment details |
+| `PAYMENT_INTEGRATION_INITIALIZATION_FAILED` | Failed to mount Adyen web drop-in |
+| `PURCHASE_FAILED` | Failed to complete upgrade subscription purchase |
+| `REQUEST_PARSE_FAILED` | Failed to parse JSON response |
+| `RESOURCE_REVOKED` | Failed to load portal resource |
+| `TOKENIZATION_FAILED` | Missing customer id for payment acceptor with id… |
+
+### Warning codes
+
+| Code | Description |
+| :--- | :---------- |
+| `ADYEN_INVALID_CONFIGURATION` | No environment set for adyen advanced flow, defaulted to live |
+| `APPLE_PAY_ACTION_REQUIRED` | Payment requires additional action |
+| `TRANSLATION_LOAD_FAILED` | Failed to load translations for locale… |
+<!-- log-codes:end — DO NOT EDIT: auto-generated by `npm run logs:list` -->

package/dist/ApiStatus-CyNDp_op.mjs

@@ -0,0 +1,9 @@
+const ApiStatus = {
+  Initial: "INITIAL",
+  Loading: "LOADING",
+  Failed: "FAILED",
+  Done: "DONE"
+};
+export {
+  ApiStatus as A
+};

package/dist/ApiStatus-oqvUEWJx.js

@@ -0,0 +1 @@
+exports.ApiStatus={Initial:"INITIAL",Loading:"LOADING",Failed:"FAILED",Done:"DONE"};

package/dist/{BillingInformation.vue_vue_type_script_setup_true_lang-B42EzZ97.mjs → BillingInformation.vue_vue_type_script_setup_true_lang-CX8vlY2Z.mjs}

@@ -1,6 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, createSlots, withCtx, createVNode, createTextVNode, toDisplayString } from "vue";
-import { b as useIntl, k as _sfc_main$14, l as _sfc_main$z, m as _sfc_main$2H } from "./component-BkmcE85U.mjs";
-import { u as useActionDispatchProvider } from "./useActionDispatchProvider-CBo_Hwu5.mjs";
+import { u as useIntl, c as _sfc_main$2, e as _sfc_main$3 } from "./vendor-ui-C0K3osvz.mjs";
+import { _ as _sfc_main$1 } from "./Skeleton.vue_vue_type_script_setup_true_lang-DGMxHc20.mjs";
+import { u as useActionDispatchProvider } from "./useActionDispatchProvider-BC57-Ufn.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "BillingInformation",
   props: {
@@ -15,24 +16,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { $t } = useIntl();
     const { dispatchAction } = useActionDispatchProvider();
     return (_ctx, _cache) => {
-      return __props.isLoading ? (openBlock(), createBlock(unref(_sfc_main$14), {
+      return __props.isLoading ? (openBlock(), createBlock(_sfc_main$1, {
         key: 0,
         variant: "section",
-        class: "min-h-[100px]",
+        class: "sv-billing-information sv-root sv-component sv-loading min-h-[100px]",
         "data-testid": "billing-information-skeleton"
-      })) : (openBlock(), createBlock(unref(_sfc_main$z), {
+      })) : (openBlock(), createBlock(unref(_sfc_main$2), {
         key: 1,
+        class: "sv-billing-information sv-root sv-component",
         customer: __props.customer,
         "fallback-to-reference": false
       }, createSlots({ _: 2 }, [
         __props.configuration.showEditButton ? {
           name: "settings",
           fn: withCtx(() => [
-            createVNode(unref(_sfc_main$2H), {
+            createVNode(unref(_sfc_main$3), {
               size: "sm",
               variant: "ghost",
               color: "gray",
               "icon-prefix": "edit",
+              class: "sv-action sv-action--ghost sv-billing-information__edit",
               onClick: _cache[0] || (_cache[0] = ($event) => unref(dispatchAction)({ action: "edit-billing-information" }))
             }, {
               default: withCtx(() => [

package/dist/BillingInformation.vue_vue_type_script_setup_true_lang-DGisvmez.js

@@ -0,0 +1 @@
+const e=require("vue"),i=require("./vendor-ui-5pJF5KBP.js"),t=require("./Skeleton.vue_vue_type_script_setup_true_lang-DfMgIsGm.js"),o=require("./useActionDispatchProvider-rw9kWeE0.js"),n=e.defineComponent({__name:"BillingInformation",props:{customer:{type:Object},isLoading:{type:Boolean},configuration:{default:()=>({showEditButton:!0}),type:Object}},emits:["edit-billing-information"],setup(n){const{$t:s}=i.useIntl(),{dispatchAction:r}=o.useActionDispatchProvider();return(o,a)=>n.isLoading?(e.openBlock(),e.createBlock(t._sfc_main,{key:0,variant:"section",class:"sv-billing-information sv-root sv-component sv-loading min-h-[100px]","data-testid":"billing-information-skeleton"})):(e.openBlock(),e.createBlock(e.unref(i._sfc_main$2),{key:1,class:"sv-billing-information sv-root sv-component",customer:n.customer,"fallback-to-reference":!1},e.createSlots({_:2},[n.configuration.showEditButton?{name:"settings",fn:e.withCtx(()=>[e.createVNode(e.unref(i._sfc_main$3),{size:"sm",variant:"ghost",color:"gray","icon-prefix":"edit",class:"sv-action sv-action--ghost sv-billing-information__edit",onClick:a[0]||(a[0]=i=>e.unref(r)({action:"edit-billing-information"}))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(s)({defaultMessage:"Edit",id:"customer_overview.billing_information_block.view_all_payment_methods_link_label",description:"The link text that links to the overview page of the customer billing information"})),1)]),_:1})]),key:"0"}:void 0]),1032,["customer"]))}});exports._sfc_main=n;

package/dist/ContentWithAsideLayout-B5B8Kwaw.js

@@ -0,0 +1 @@
+const e=require("vue"),t={class:"sv-layout grid w-full grid-cols-1 gap-4"},o={key:0,class:"sv-layout__header"},l={class:"sv-layout__body flex flex-col items-start gap-6 md:flex-row"},s={class:"sv-layout__content grid w-full grow grid-cols-1 gap-4 md:w-auto"},r={class:"sv-layout__aside grid w-full grid-cols-1 gap-4 md:w-80 md:shrink-0"};const d=((e,t)=>{const o=e.__vccOpts||e;for(const[l,s]of t)o[l]=s;return o})({},[["render",function(d,a){return e.openBlock(),e.createElementBlock("div",t,[d.$slots.header?(e.openBlock(),e.createElementBlock("div",o,[e.renderSlot(d.$slots,"header")])):e.createCommentVNode("",!0),e.createElementVNode("div",l,[e.createElementVNode("div",s,[e.renderSlot(d.$slots,"content")]),e.createElementVNode("aside",r,[e.renderSlot(d.$slots,"aside")])])])}]]);exports.ContentWithAsideLayout=d;

package/dist/{ContentWithAsideLayout-BC-C5Gjt.mjs → ContentWithAsideLayout-DhfUkZZg.mjs}

@@ -1,12 +1,4 @@
-import { inject, openBlock, createElementBlock, renderSlot, createCommentVNode, createElementVNode } from "vue";
-import { P as PORTAL_INJECTION_KEY } from "./component-BkmcE85U.mjs";
-function usePortal() {
-  const portal = inject(PORTAL_INJECTION_KEY);
-  if (!portal) {
-    throw new Error("PortalProvider is not provided");
-  }
-  return portal;
-}
+import { openBlock, createElementBlock, renderSlot, createCommentVNode, createElementVNode } from "vue";
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -15,11 +7,14 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 const _sfc_main = {};
-const _hoisted_1 = { class: "grid w-full grid-cols-1 gap-4" };
-const _hoisted_2 = { key: 0 };
-const _hoisted_3 = { class: "flex flex-col items-start gap-6 md:flex-row" };
-const _hoisted_4 = { class: "grid w-full grow grid-cols-1 gap-4 md:w-auto" };
-const _hoisted_5 = { class: "grid w-full grid-cols-1 gap-4 md:w-80 md:shrink-0" };
+const _hoisted_1 = { class: "sv-layout grid w-full grid-cols-1 gap-4" };
+const _hoisted_2 = {
+  key: 0,
+  class: "sv-layout__header"
+};
+const _hoisted_3 = { class: "sv-layout__body flex flex-col items-start gap-6 md:flex-row" };
+const _hoisted_4 = { class: "sv-layout__content grid w-full grow grid-cols-1 gap-4 md:w-auto" };
+const _hoisted_5 = { class: "sv-layout__aside grid w-full grid-cols-1 gap-4 md:w-80 md:shrink-0" };
 function _sfc_render(_ctx, _cache) {
   return openBlock(), createElementBlock("div", _hoisted_1, [
     _ctx.$slots["header"] ? (openBlock(), createElementBlock("div", _hoisted_2, [
@@ -37,6 +32,5 @@ function _sfc_render(_ctx, _cache) {
 }
 const ContentWithAsideLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  ContentWithAsideLayout as C,
-  usePortal as u
+  ContentWithAsideLayout as C
 };

package/dist/{useCustomerPaymentMethodOptions-Fe_dLxfv.mjs → CustomerPaymentMethods.vue_vue_type_script_setup_true_lang-Bus-5gC3.mjs}

@@ -1,12 +1,10 @@
 import { defineComponent, computed, openBlock, createBlock, unref, createSlots, withCtx, createElementBlock, Fragment, renderList, createVNode, createTextVNode, toDisplayString, createCommentVNode } from "vue";
-import { b as useIntl, d as _sfc_main$1g, g as _sfc_main$2, _ as _sfc_main$2$1, m as _sfc_main$2H } from "./component-BkmcE85U.mjs";
-import { _ as _sfc_main$3 } from "./Skeleton.vue_vue_type_script_setup_true_lang-BFFJw-5h.mjs";
-import { u as useActionDispatchProvider } from "./useActionDispatchProvider-CBo_Hwu5.mjs";
-import { c as createPaymentMethodsService } from "./paymentMethods-CrU4G_2Y.mjs";
-import { u as useService } from "./useService-Dz13Nxbi.mjs";
+import { u as useIntl, b as _sfc_main$2, j as _sfc_main$3, _ as _sfc_main$4, e as _sfc_main$5 } from "./vendor-ui-C0K3osvz.mjs";
+import { _ as _sfc_main$6 } from "./Skeleton.vue_vue_type_script_setup_true_lang-DGMxHc20.mjs";
+import { u as useActionDispatchProvider } from "./useActionDispatchProvider-BC57-Ufn.mjs";
 const _hoisted_1 = {
   key: 0,
-  class: "flex flex-col gap-2"
+  class: "sv-payment-methods__list flex flex-col gap-2"
 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "CustomerPaymentMethodsBlock",
@@ -23,7 +21,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const { $t } = useIntl();
     const hasPaymentMethods = computed(() => props.paymentMethods.length > 0);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1g), {
+      return openBlock(), createBlock(unref(_sfc_main$2), {
+        class: "sv-payment-methods",
         "no-spacing": "",
         "no-border": "",
         title: unref($t)(
@@ -38,21 +37,29 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           hasPaymentMethods.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(__props.paymentMethods, (paymentMethod) => {
-              return openBlock(), createBlock(unref(_sfc_main$1g), {
-                key: paymentMethod.id
+              return openBlock(), createBlock(unref(_sfc_main$2), {
+                key: paymentMethod.id,
+                class: "sv-payment-methods__item"
               }, {
                 default: withCtx(() => [
-                  createVNode(unref(_sfc_main$2), { "payment-method": paymentMethod }, null, 8, ["payment-method"])
+                  createVNode(unref(_sfc_main$3), {
+                    class: "sv-payment-methods__item-content",
+                    "payment-method": paymentMethod
+                  }, null, 8, ["payment-method"])
                 ]),
                 _: 2
               }, 1024);
             }), 128))
-          ])) : (openBlock(), createBlock(unref(_sfc_main$1g), { key: 1 }, {
+          ])) : (openBlock(), createBlock(unref(_sfc_main$2), {
+            key: 1,
+            class: "sv-empty-state sv-payment-methods__empty"
+          }, {
             default: withCtx(() => [
-              createVNode(unref(_sfc_main$2$1), {
+              createVNode(unref(_sfc_main$4), {
                 variant: "body-sm",
                 shade: "lighter",
-                "no-spacing": ""
+                "no-spacing": "",
+                class: "sv-payment-methods__empty-message"
               }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(unref($t)({
@@ -63,9 +70,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               }),
-              __props.showAddButton ? (openBlock(), createBlock(unref(_sfc_main$2H), {
+              __props.showAddButton ? (openBlock(), createBlock(unref(_sfc_main$5), {
                 key: 0,
-                class: "mt-4 w-full",
+                class: "sv-action sv-action--secondary sv-action--full-width sv-payment-methods__add mt-4 w-full",
                 variant: "outline",
                 color: "gray",
                 "icon-prefix": "add",
@@ -90,11 +97,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         __props.showViewAllButton ? {
           name: "right",
           fn: withCtx(() => [
-            createVNode(unref(_sfc_main$2H), {
+            createVNode(unref(_sfc_main$5), {
               size: "sm",
               variant: "ghost",
               color: "gray",
               "icon-suffix": "arrow_right_alt",
+              class: "sv-action sv-action--ghost sv-payment-methods__view-all",
               type: "button",
               onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("view-all-payment-methods"))
             }, {
@@ -119,7 +127,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     isLoading: { type: Boolean },
     paymentMethods: { type: Array },
-    paymentMethodsOptions: { type: Array },
     maxPaymentMethods: { type: Number },
     configuration: { default: () => ({
       showViewAllButton: true,
@@ -130,39 +137,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { dispatchAction } = useActionDispatchProvider();
     return (_ctx, _cache) => {
       var _a, _b;
-      return __props.isLoading ? (openBlock(), createBlock(_sfc_main$3, {
+      return __props.isLoading ? (openBlock(), createBlock(_sfc_main$6, {
         key: 0,
         variant: "section",
-        class: "h-72",
+        class: "sv-payment-methods sv-root sv-component sv-loading h-72",
         "data-testid": "customer-payment-methods-skeleton"
       })) : (openBlock(), createBlock(_sfc_main$1, {
         key: 1,
+        class: "sv-payment-methods sv-root sv-component",
         "is-loading": __props.isLoading,
         "payment-methods": __props.paymentMethods,
-        "payment-methods-options": __props.paymentMethodsOptions,
         "show-view-all-button": (_a = __props.configuration) == null ? void 0 : _a.showViewAllButton,
         "show-add-button": (_b = __props.configuration) == null ? void 0 : _b.showAddButton,
         onViewAllPaymentMethods: _cache[0] || (_cache[0] = ($event) => unref(dispatchAction)({ action: "view-all-payment-methods" })),
         onAddPaymentMethod: _cache[1] || (_cache[1] = ($event) => unref(dispatchAction)({ action: "add-payment-method" }))
-      }, null, 8, ["is-loading", "payment-methods", "payment-methods-options", "show-view-all-button", "show-add-button"]));
+      }, null, 8, ["is-loading", "payment-methods", "show-view-all-button", "show-add-button"]));
     };
   }
 });
-function useCustomerPaymentMethodOptions({
-  customerId,
-  amount
-}) {
-  const { getPaymentMethodOptions } = createPaymentMethodsService();
-  const { data, execute, error, apiStatus, isPending } = useService({
-    initialValue: [],
-    service: async () => {
-      const response = await getPaymentMethodOptions({ customerId, amount });
-      return response.flatMap((entry) => entry.options ?? []);
-    }
-  });
-  return { error, apiStatus, items: data, fetch: execute, isPending };
-}
 export {
-  _sfc_main as _,
-  useCustomerPaymentMethodOptions as u
+  _sfc_main as _
 };

package/dist/CustomerPaymentMethods.vue_vue_type_script_setup_true_lang-CkRsyMlJ.js

@@ -0,0 +1 @@
+const e=require("vue"),t=require("./vendor-ui-5pJF5KBP.js"),o=require("./Skeleton.vue_vue_type_script_setup_true_lang-DfMgIsGm.js"),n=require("./useActionDispatchProvider-rw9kWeE0.js"),a={key:0,class:"sv-payment-methods__list flex flex-col gap-2"},s=e.defineComponent({__name:"CustomerPaymentMethodsBlock",props:{paymentMethods:{type:Array},limit:{default:2,type:Number},isLoading:{type:Boolean},showViewAllButton:{type:Boolean},showAddButton:{type:Boolean}},emits:["view-all-payment-methods","add-payment-method"],setup(o){const n=o,{$t:s}=t.useIntl(),i=e.computed(()=>n.paymentMethods.length>0);return(n,d)=>(e.openBlock(),e.createBlock(e.unref(t._sfc_main$1),{class:"sv-payment-methods","no-spacing":"","no-border":"",title:e.unref(s)({defaultMessage:"{count, plural, one {Payment method} other {Payment methods}}",description:"Title for the payment methods block on the customer overview page",id:"customer_overview.payment_methods.title"},{count:String(o.paymentMethods.length)})},e.createSlots({default:e.withCtx(()=>[i.value?(e.openBlock(),e.createElementBlock("div",a,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.paymentMethods,o=>(e.openBlock(),e.createBlock(e.unref(t._sfc_main$1),{key:o.id,class:"sv-payment-methods__item"},{default:e.withCtx(()=>[e.createVNode(e.unref(t._sfc_main$5),{class:"sv-payment-methods__item-content","payment-method":o},null,8,["payment-method"])]),_:2},1024))),128))])):(e.openBlock(),e.createBlock(e.unref(t._sfc_main$1),{key:1,class:"sv-empty-state sv-payment-methods__empty"},{default:e.withCtx(()=>[e.createVNode(e.unref(t._sfc_main),{variant:"body-sm",shade:"lighter","no-spacing":"",class:"sv-payment-methods__empty-message"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(s)({defaultMessage:"Add a payment method for recurring invoice payments.",description:"Helper text for adding a payment method when no payment methods are configured",id:"customer_overview.payment_methods_block.add_payment_method_helper_text"})),1)]),_:1}),o.showAddButton?(e.openBlock(),e.createBlock(e.unref(t._sfc_main$3),{key:0,class:"sv-action sv-action--secondary sv-action--full-width sv-payment-methods__add mt-4 w-full",variant:"outline",color:"gray","icon-prefix":"add",type:"button",onClick:d[1]||(d[1]=e=>n.$emit("add-payment-method"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(s)({defaultMessage:"Add payment method",description:"Text for the add payment method button that is shown when no payment methods have been configured",id:"customer_overview.payment_methods_block.add_payment_method_button_label"})),1)]),_:1})):e.createCommentVNode("",!0)]),_:1}))]),_:2},[o.showViewAllButton?{name:"right",fn:e.withCtx(()=>[e.createVNode(e.unref(t._sfc_main$3),{size:"sm",variant:"ghost",color:"gray","icon-suffix":"arrow_right_alt",class:"sv-action sv-action--ghost sv-payment-methods__view-all",type:"button",onClick:d[0]||(d[0]=e=>n.$emit("view-all-payment-methods"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(s)({defaultMessage:"View all",id:"customer_overview.payment_methods_block.view_all_payment_methods_link_label",description:"The link text that links to the overview page of the customer invoices"})),1)]),_:1})]),key:"0"}:void 0]),1032,["title"]))}}),i=e.defineComponent({__name:"CustomerPaymentMethods",props:{isLoading:{type:Boolean},paymentMethods:{type:Array},maxPaymentMethods:{type:Number},configuration:{default:()=>({showViewAllButton:!0,showAddButton:!0}),type:Object}},setup(t){const{dispatchAction:a}=n.useActionDispatchProvider();return(n,i)=>{var d,m;return t.isLoading?(e.openBlock(),e.createBlock(o._sfc_main,{key:0,variant:"section",class:"sv-payment-methods sv-root sv-component sv-loading h-72","data-testid":"customer-payment-methods-skeleton"})):(e.openBlock(),e.createBlock(s,{key:1,class:"sv-payment-methods sv-root sv-component","is-loading":t.isLoading,"payment-methods":t.paymentMethods,"show-view-all-button":null==(d=t.configuration)?void 0:d.showViewAllButton,"show-add-button":null==(m=t.configuration)?void 0:m.showAddButton,onViewAllPaymentMethods:i[0]||(i[0]=t=>e.unref(a)({action:"view-all-payment-methods"})),onAddPaymentMethod:i[1]||(i[1]=t=>e.unref(a)({action:"add-payment-method"}))},null,8,["is-loading","payment-methods","show-view-all-button","show-add-button"]))}}});exports._sfc_main=i;

package/dist/{InvoiceDetailsBlock.vue_vue_type_script_setup_true_lang-5yBnSRap.mjs → InvoiceDetailsBlock.vue_vue_type_script_setup_true_lang-Bc2hkpTb.mjs}

@@ -1,9 +1,11 @@
 import { defineComponent, openBlock, createBlock, unref, withCtx, createElementBlock, createElementVNode, createVNode, createTextVNode, toDisplayString, createCommentVNode } from "vue";
-import { b as useIntl, d as _sfc_main$1g, _ as _sfc_main$2 } from "./component-BkmcE85U.mjs";
+import { u as useIntl, b as _sfc_main$1, _ as _sfc_main$2 } from "./vendor-ui-C0K3osvz.mjs";
 const _hoisted_1 = {
   key: 0,
-  class: "flex flex-col gap-2"
+  class: "sv-invoice-details__body flex flex-col gap-2"
 };
+const _hoisted_2 = { class: "sv-invoice-details__row" };
+const _hoisted_3 = { class: "sv-invoice-details__row" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "InvoiceDetailsBlock",
   props: {
@@ -12,7 +14,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const { $t, formatDate } = useIntl();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1g), {
+      return openBlock(), createBlock(unref(_sfc_main$1), {
+        class: "sv-invoice-details",
         title: unref($t)({
           defaultMessage: "Invoice details",
           description: "Title for the invoice details block on the invoice overview page",
@@ -21,8 +24,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           __props.invoice ? (openBlock(), createElementBlock("div", _hoisted_1, [
-            createElementVNode("div", null, [
-              createVNode(unref(_sfc_main$2), { variant: "caps-heading" }, {
+            createElementVNode("div", _hoisted_2, [
+              createVNode(unref(_sfc_main$2), {
+                variant: "caps-heading",
+                class: "sv-invoice-details__label"
+              }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(unref($t)({
                     defaultMessage: "Invoice date",
@@ -34,7 +40,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }),
               __props.invoice.invoice_date ? (openBlock(), createBlock(unref(_sfc_main$2), {
                 key: 0,
-                variant: "body-xs"
+                variant: "body-xs",
+                class: "sv-invoice-details__value"
               }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(unref(formatDate)({
@@ -47,8 +54,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 _: 1
               })) : createCommentVNode("", true)
             ]),
-            createElementVNode("div", null, [
-              createVNode(unref(_sfc_main$2), { variant: "caps-heading" }, {
+            createElementVNode("div", _hoisted_3, [
+              createVNode(unref(_sfc_main$2), {
+                variant: "caps-heading",
+                class: "sv-invoice-details__label"
+              }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(unref($t)({
                     defaultMessage: "Due date",
@@ -60,7 +70,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }),
               __props.invoice.due_date ? (openBlock(), createBlock(unref(_sfc_main$2), {
                 key: 0,
-                variant: "body-xs"
+                variant: "body-xs",
+                class: "sv-invoice-details__value"
               }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(unref(formatDate)({

package/dist/InvoiceDetailsBlock.vue_vue_type_script_setup_true_lang-D0vVUHuY.js

@@ -0,0 +1 @@
+const e=require("vue"),i=require("./vendor-ui-5pJF5KBP.js"),t={key:0,class:"sv-invoice-details__body flex flex-col gap-2"},o={class:"sv-invoice-details__row"},a={class:"sv-invoice-details__row"},n=e.defineComponent({__name:"InvoiceDetailsBlock",props:{invoice:{type:Object}},setup(n){const{$t:c,formatDate:s}=i.useIntl();return(d,l)=>(e.openBlock(),e.createBlock(e.unref(i._sfc_main$1),{class:"sv-invoice-details",title:e.unref(c)({defaultMessage:"Invoice details",description:"Title for the invoice details block on the invoice overview page",id:"sdk.invoice_details.invoice_details_block.title"})},{default:e.withCtx(()=>[n.invoice?(e.openBlock(),e.createElementBlock("div",t,[e.createElementVNode("div",o,[e.createVNode(e.unref(i._sfc_main),{variant:"caps-heading",class:"sv-invoice-details__label"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(c)({defaultMessage:"Invoice date",description:"Title for the invoice date in invoice details block on the invoice overview page",id:"sdk.invoice_details.invoice_details_block.invoice_date"})),1)]),_:1}),n.invoice.invoice_date?(e.openBlock(),e.createBlock(e.unref(i._sfc_main),{key:0,variant:"body-xs",class:"sv-invoice-details__value"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(s)({date:n.invoice.invoice_date,format:"date",timezone:n.invoice.customer.timezone,offsetType:"offsetted"})),1)]),_:1})):e.createCommentVNode("",!0)]),e.createElementVNode("div",a,[e.createVNode(e.unref(i._sfc_main),{variant:"caps-heading",class:"sv-invoice-details__label"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(c)({defaultMessage:"Due date",description:"Title for the due date in invoice details block on the invoice overview page",id:"sdk.invoice_details.invoice_details_block.due_date"})),1)]),_:1}),n.invoice.due_date?(e.openBlock(),e.createBlock(e.unref(i._sfc_main),{key:0,variant:"body-xs",class:"sv-invoice-details__value"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(s)({date:n.invoice.due_date,format:"date",timezone:n.invoice.customer.timezone,offsetType:"offsetted"})),1)]),_:1})):e.createCommentVNode("",!0)])])):e.createCommentVNode("",!0)]),_:1},8,["title"]))}});exports._sfc_main=n;

package/dist/PaymentHistoryBlock-BiiFJkpT.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PaymentHistoryBlock.vue_vue_type_script_setup_true_lang-DWTEfLrE.js");exports.default=e._sfc_main;

package/dist/PaymentHistoryBlock-D_B099M7.mjs

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "./PaymentHistoryBlock.vue_vue_type_script_setup_true_lang-CaMDtHrL.mjs";
+export {
+  _sfc_main as default
+};