@adyen/kyc-components 3.90.0 → 3.91.0-beta.0

package/dist/{RootBusinessLinesPage-B8gUQ93t.js → RootBusinessLinesPage-9LFMQ5z_.js}

@@ -2,39 +2,39 @@
 {
   try {
     let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
-    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "b0c5ff9e-3cb0-48d7-8e1d-cdd59466e59a", e._sentryDebugIdIdentifier = "sentry-dbid-b0c5ff9e-3cb0-48d7-8e1d-cdd59466e59a");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "d71ef0b8-9842-446d-b3e5-7470a192ac9d", e._sentryDebugIdIdentifier = "sentry-dbid-d71ef0b8-9842-446d-b3e5-7470a192ac9d");
   } catch (e) {
   }
 }
 ;
-import { C as CountryCodes, a0 as entriesOf, P as createLogger, u as useTranslation, L as Loader, Y as IconButton, G as Typography, an as Trans, B as Button, b as useApiContext, $ as useMutation, aN as httpDelete, X as useExperimentsContext, U as TaskStatuses, M as EntityTypes, c as useLegalEntity, R as ROOT_LE, a as addResourceBundles, _ as __variableDynamicImportRuntimeHelper } from "./StoreProvider-D_0Pta7w.js";
+import { C as CountryCodes, a1 as entriesOf, P as createLogger, u as useTranslation, L as Loader, Y as IconButton, G as Typography, ao as Trans, B as Button, b as useApiContext, a0 as useMutation, aN as httpDelete, X as useExperimentsContext, U as TaskStatuses, a2 as useQueryClient, M as EntityTypes, c as useLegalEntity, R as ROOT_LE, a as addResourceBundles, _ as __variableDynamicImportRuntimeHelper } from "./StoreProvider-Dgl7dBXc.js";
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
 import { useCallback, useMemo, useRef, useState, useEffect } from "preact/hooks";
-import { $ as salesChannelsWithWebData, a0 as useIndustryCodes, T as useBusinessLines, z as industryCodeFieldMetadata, a1 as IndustryCodeField, a2 as INDUSTRY_CODE_FIELD, a3 as SALES_CHANNELS_FIELD, a4 as WEB_DATA_FIELD, a5 as shouldSignNewPci, a6 as SCTA_FIELD, a7 as Divider, a8 as selectedBusinessLine, u as useSalesChannels, a9 as usePciQuestionnaireList, a as usePciStatus, aa as businessLinesConfigurations, ab as businessLinesForms } from "./OnboardingDropinComponent-HHq3dL3N.js";
-import { u as useCreateBusinessLine, a as useUpdateBusinessLine } from "./useUpdateBusinessLines-Dq3B1Jvy.js";
-import { F as FormContextProvider, a as FormFlow } from "./FormFlow-Dgc0gB-O.js";
-import { a as useToastContext } from "./useToastContext-CqIJgGTa.js";
-import { g as getPropsFromConfigurations } from "./process-field-configurations-ClLFHxX6.js";
-import { a as addValidityToForms, u as useFormComposer } from "./dropinUtils-Dggo6PZA.js";
-import { u as useMultiForm } from "./useMultiForm--zHGgbxw.js";
-import { x as createFormRules, I as Image, i as useCapabilityProblems, j as getProblemsForEntity } from "./Spacer-D-c-0ch_.js";
-import { s as summaryStep } from "./Summary-D741mrWG.js";
-import { m as mergeFieldMetadataIntoProps, c as createFormUtils, H as Header, S as StackLayout, a as Link, L as List } from "./CountryField-BO-n2nAh.js";
-import { u as useFormContext } from "./Address-BCTZUD2J.js";
+import { $ as salesChannelsWithWebData, a0 as useIndustryCodes, _ as useBusinessLines, z as industryCodeFieldMetadata, a1 as IndustryCodeField, a2 as INDUSTRY_CODE_FIELD, a3 as SALES_CHANNELS_FIELD, a4 as WEB_DATA_FIELD, a5 as shouldSignNewPci, a6 as SCTA_FIELD, a7 as Divider, a8 as selectedBusinessLine, u as useSalesChannels, a9 as usePciQuestionnaireList, a as usePciStatus, aa as businessLinesConfigurations, ab as businessLinesForms } from "./OnboardingDropinComponent-BrHvygYb.js";
+import { u as useCreateBusinessLine, a as useUpdateBusinessLine } from "./useUpdateBusinessLines-CxcIFedN.js";
+import { F as FormContextProvider, a as FormFlow } from "./FormFlow-CKr0sy8L.js";
+import { a as useToastContext } from "./useToastContext-CutFPaxB.js";
+import { g as getPropsFromConfigurations } from "./process-field-configurations-DLkHkwPX.js";
+import { a as addValidityToForms, u as useFormComposer } from "./dropinUtils-B7gkHPu_.js";
+import { u as useMultiForm } from "./useMultiForm-qb1Om5Av.js";
+import { x as createFormRules, I as Image, i as useCapabilityProblems, j as getProblemsForEntity } from "./Spacer-DTg9NYBB.js";
+import { s as summaryStep } from "./Summary-BZn7Ovck.js";
+import { m as mergeFieldMetadataIntoProps, c as createFormUtils, H as Header, S as StackLayout, a as Link, L as List } from "./CountryField-NrSdQlWq.js";
+import { u as useFormContext } from "./Address-L2yF0rj3.js";
 import { Show } from "@preact/signals/utils";
-import { C as Checkbox } from "./debouncedInputEvent-ZbuNEN6W.js";
-import { F as Field } from "./useForm-C261ZUdn.js";
-import { K as KEYBOARD_KEYS, M as Modal } from "./Modal-W8cfdxrr.js";
-import { I as InputText } from "./InputText-DR70nC51.js";
-import { SignPCIComponent } from "./SignPCIComponent-MnotetIL.js";
-import { A as Avatar } from "./Avatar-1DJaB2Fj.js";
+import { C as Checkbox } from "./debouncedInputEvent-iHbpO4uP.js";
+import { F as Field } from "./useForm-BmCWMPbB.js";
+import { K as KEYBOARD_KEYS, M as Modal } from "./Modal-2wdHXVI8.js";
+import { I as InputText } from "./InputText-CQ6woYx3.js";
+import { SignPCIComponent } from "./SignPCIComponent-C81oIZNp.js";
+import { A as Avatar } from "./Avatar-DtK8HezD.js";
 import cx from "classnames";
 import { D as DetailViewLayout } from "./DetailViewLayout-Z9cuUp4X.js";
-import { C as Card } from "./Card-I1r9oUx8.js";
+import { C as Card } from "./Card-bVEv3jgS.js";
 import { lazy } from "preact/compat";
-import { M as LandingLayout } from "./IndividualOnfido-DH3VYYau.js";
-import { L as ListItem } from "./ListItem-BBHNYCCw.js";
-import { S as StructuredList, C as Confirm } from "./useDataset-RNFlX1-i.js";
+import { N as LandingLayout } from "./IndividualOnfido-BYT0nG-5.js";
+import { L as ListItem } from "./ListItem-CEjkofDu.js";
+import { C as Confirm, S as StructuredList } from "./useDataset-DerSszvK.js";
 const rules = ({ data, country }) => {
   return createFormRules({
     webAddressRequired: () => {
@@ -114,13 +114,11 @@ const mapBusinessLineToBusinessLineSchema = (selectedBusinessLine2) => {
     },
     salesChannelsForm: {
       salesChannels: selectedBusinessLine2.value?.salesChannels ?? [],
-      webAddress: selectedBusinessLine2.value?.webData?.[0].webAddress,
-      // TODO: Rework
+      webAddress: selectedBusinessLine2.value?.webData?.find((w) => w.webAddress)?.webAddress,
       webExempt: selectedBusinessLine2.value?.webDataExemption?.reason ? true : void 0
     },
     sctaForm: {
-      sctaUrl: selectedBusinessLine2.value?.webData?.[0].webAddress,
-      // TODO: Rework
+      sctaUrl: selectedBusinessLine2.value?.webData?.find((w) => w.commerceDisclosureAddress)?.commerceDisclosureAddress,
       sctaExempt: selectedBusinessLine2.value?.webDataExemption?.reason ? true : void 0
     }
   };
@@ -138,11 +136,21 @@ const submitBusinessLines = async ({
   const requiresWebData = salesChannelsWithWebData.some(
     (channel) => data.salesChannelsForm.salesChannels?.includes(channel)
   );
+  const webData = (() => {
+    const webDataArray = [];
+    if (requiresWebData && data.salesChannelsForm.webAddress) {
+      webDataArray.push({ webAddress: data.salesChannelsForm.webAddress });
+    }
+    if (!data.sctaForm.sctaExempt && data.sctaForm.sctaUrl) {
+      webDataArray.push({ commerceDisclosureAddress: data.sctaForm.sctaUrl });
+    }
+    return webDataArray.length > 0 ? webDataArray : void 0;
+  })();
   const commonPayload = {
     legalEntityId,
     service: "paymentProcessing",
     salesChannels: data.salesChannelsForm.salesChannels ?? [],
-    webData: requiresWebData && data.salesChannelsForm.webAddress ? [{ webAddress: data.salesChannelsForm.webAddress }] : void 0,
+    webData,
     webDataExemption: requiresWebData && data.salesChannelsForm.webExempt ? { reason: "noOnlinePresence" } : void 0
   };
   try {
@@ -392,84 +400,87 @@ const carouselItem = "adyen-kyc-carousel-item";
 const carouselNavigation = "adyen-kyc-carousel-navigation";
 const carouselNavigationLeft = "adyen-kyc-carousel-navigation-left";
 const carouselNavigationRight = "adyen-kyc-carousel-navigation-right";
-const carouselItems = "adyen-kyc-carouselItems";
+const carouselItems = "adyen-kyc-carousel-items";
+const hiddenInput = "adyen-kyc-hidden-input";
 const item = "adyen-kyc-item";
-const selectedItem = "adyen-kyc-selectedItem";
-const gapXSmall = "adyen-kyc-gapXSmall";
-const gapSmall = "adyen-kyc-gapSmall";
-const gapMedium = "adyen-kyc-gapMedium";
-const gapLarge = "adyen-kyc-gapLarge";
-const gapXLarge = "adyen-kyc-gapXLarge";
-const widthXSmall = "adyen-kyc-widthXSmall";
-const widthSmall = "adyen-kyc-widthSmall";
-const widthMedium = "adyen-kyc-widthMedium";
-const widthLarge = "adyen-kyc-widthLarge";
-const widthXLarge = "adyen-kyc-widthXLarge";
-const styles$4 = {
+const selectedItem = "adyen-kyc-selected-item";
+const gapXs = "adyen-kyc-gap-xs";
+const gapS = "adyen-kyc-gap-s";
+const gapM = "adyen-kyc-gap-m";
+const gapL = "adyen-kyc-gap-l";
+const gapXl = "adyen-kyc-gap-xl";
+const widthXs = "adyen-kyc-width-xs";
+const widthS = "adyen-kyc-width-s";
+const widthM = "adyen-kyc-width-m";
+const widthL = "adyen-kyc-width-l";
+const widthXl = "adyen-kyc-width-xl";
+const styles$3 = {
   window,
   carouselItem,
   carouselNavigation,
   carouselNavigationLeft,
   carouselNavigationRight,
   carouselItems,
+  hiddenInput,
   item,
   selectedItem,
-  gapXSmall,
-  gapSmall,
-  gapMedium,
-  gapLarge,
-  gapXLarge,
-  widthXSmall,
-  widthSmall,
-  widthMedium,
-  widthLarge,
-  widthXLarge
+  gapXs,
+  gapS,
+  gapM,
+  gapL,
+  gapXl,
+  widthXs,
+  widthS,
+  widthM,
+  widthL,
+  widthXl
 };
 const gapStyles = {
-  xSmall: styles$4.gapXSmall,
-  small: styles$4.gapSmall,
-  medium: styles$4.gapMedium,
-  large: styles$4.gapLarge,
-  xLarge: styles$4.gapXLarge
+  xs: styles$3.gapXs,
+  s: styles$3.gapS,
+  m: styles$3.gapM,
+  l: styles$3.gapL,
+  xl: styles$3.gapXl
 };
 const widthStyles = {
-  xSmall: styles$4.widthXSmall,
-  small: styles$4.widthSmall,
-  medium: styles$4.widthMedium,
-  large: styles$4.widthLarge,
-  xLarge: styles$4.widthXLarge
+  xs: styles$3.widthXs,
+  s: styles$3.widthS,
+  m: styles$3.widthM,
+  l: styles$3.widthL,
+  xl: styles$3.widthXl
 };
 const Carousel = ({
   items,
   allowMultiple = true,
   onChange,
   selected,
-  gap = "medium",
-  width = "medium",
+  gap = "m",
+  width = "m",
   carouselLabel
 }) => {
   const itemRefs = useRef([]);
   const carouselRef = useRef(null);
-  const { t } = useTranslation(["common"]);
+  const { t } = useTranslation(["common", "businessLines"]);
   const scrollByOneItem = (direction) => {
-    const firstItem = itemRefs.current[0];
-    if (!carouselRef.current || !firstItem) return;
-    const itemWidth = firstItem.offsetWidth;
+    const firstInput = itemRefs.current[0];
+    const firstCard = firstInput?.closest(`.${styles$3.item}`);
+    if (!carouselRef.current || !firstCard) return;
+    const itemWidth = firstCard.offsetWidth;
     const scrollAmount = direction === "left" ? -itemWidth : itemWidth;
     carouselRef.current.scrollBy({ left: scrollAmount });
   };
-  const updateSelected = (selected2, allowMultiple2, { id }) => {
-    if (!allowMultiple2) {
-      onChange(selected2.includes(id) ? [] : [id]);
+  const handleInputChange = ({ id }) => {
+    if (!allowMultiple) {
+      onChange(selected.includes(id) ? [] : [id]);
       return;
     }
-    if (selected2.includes(id)) {
-      onChange(selected2.filter((item2) => item2 !== id));
+    if (selected.includes(id)) {
+      onChange(selected.filter((item2) => item2 !== id));
       return;
     }
-    onChange([...selected2, id]);
+    onChange([...selected, id]);
   };
-  const handleOnKeyDown = (e, item2, index) => {
+  const handleFocusNavigation = (e, index) => {
     let nextIndex = index;
     switch (e.key) {
       case KEYBOARD_KEYS.arrowRight:
@@ -480,11 +491,6 @@ const Carousel = ({
         e.preventDefault();
         nextIndex = (index - 1 + items.length) % items.length;
         break;
-      case KEYBOARD_KEYS.space:
-      case KEYBOARD_KEYS.enter:
-        e.preventDefault();
-        updateSelected(selected, allowMultiple, item2);
-        break;
       default:
         return;
     }
@@ -495,48 +501,52 @@ const Carousel = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx(styles$4.window, gapStyles[gap]),
+      className: cx(styles$3.window, gapStyles[gap]),
       role: allowMultiple ? "group" : "radiogroup",
       "aria-label": carouselLabel,
       children: [
-        /* @__PURE__ */ jsx("div", { className: cx(styles$4.carouselNavigation, styles$4.carouselNavigationLeft), children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: cx(styles$3.carouselNavigation, styles$3.carouselNavigationLeft), children: /* @__PURE__ */ jsx(
           IconButton,
           {
             variant: "surface",
             icon: "chevron-left",
             onClick: () => scrollByOneItem("left"),
-            ariaLabel: t(($) => $["carouselForward"], { ns: "common" })
+            ariaLabel: t(($) => $["carouselBack"], { ns: "common" })
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: cx(styles$4.carouselNavigation, styles$4.carouselNavigationRight), children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: cx(styles$3.carouselNavigation, styles$3.carouselNavigationRight), children: /* @__PURE__ */ jsx(
           IconButton,
           {
             variant: "surface",
             icon: "chevron-right",
             onClick: () => scrollByOneItem("right"),
-            ariaLabel: t(($) => $["carouselBack"], { ns: "common" })
+            ariaLabel: t(($) => $["carouselForward"], { ns: "common" })
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: styles$4.carouselItems, ref: carouselRef, children: items?.map((item2, index) => {
+        /* @__PURE__ */ jsx("div", { className: styles$3.carouselItems, ref: carouselRef, children: items?.map((item2, index) => {
           const isSelected = selected.includes(item2.id);
-          const carouselItemClassName = cx(styles$4.item, widthStyles[width], {
-            [styles$4.selectedItem]: selected.includes(item2.id)
+          const carouselItemClassName = cx(styles$3.item, widthStyles[width], {
+            [styles$3.selectedItem]: isSelected
           });
-          return /* @__PURE__ */ jsx("div", { className: styles$4.carouselItem, children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: carouselItemClassName,
-              onClick: () => updateSelected(selected, allowMultiple, item2),
-              ref: (el) => {
-                itemRefs.current[index] = el;
-              },
-              onKeyDown: (e) => handleOnKeyDown(e, item2, index),
-              role: allowMultiple ? "checkbox" : "radio",
-              "aria-checked": isSelected,
-              tabindex: 0,
-              children: item2.el
-            }
-          ) }, item2.id);
+          return /* @__PURE__ */ jsx("div", { className: styles$3.carouselItem, children: /* @__PURE__ */ jsxs("label", { className: carouselItemClassName, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: (el) => {
+                  itemRefs.current[index] = el;
+                },
+                onKeyDown: (e) => handleFocusNavigation(e, index),
+                type: allowMultiple ? "checkbox" : "radio",
+                className: styles$3.hiddenInput,
+                name: item2.id,
+                value: item2.id,
+                "aria-label": t(($) => $[item2.id], { ns: "businessLines" }),
+                checked: isSelected,
+                onChange: () => handleInputChange(item2)
+              }
+            ),
+            item2.el
+          ] }) }, item2.id);
         }) })
       ]
     }
@@ -547,7 +557,7 @@ const salesCard = "adyen-kyc-sales-card";
 const salesCardImage = "adyen-kyc-sales-card-image";
 const salesCardInfo = "adyen-kyc-sales-card-info";
 const salesCardText = "adyen-kyc-sales-card-text";
-const styles$3 = {
+const styles$2 = {
   carouselContainer,
   salesCard,
   salesCardImage,
@@ -614,7 +624,7 @@ function SalesChannels({
       errorMessage: errors.salesChannels,
       isValid: valid.salesChannels,
       showErrorIconBottom: true,
-      children: () => /* @__PURE__ */ jsxs("div", { className: styles$3.carouselContainer, children: [
+      children: () => /* @__PURE__ */ jsxs("div", { className: styles$2.carouselContainer, children: [
         /* @__PURE__ */ jsx(Typography, { variant: "title-m", children: t(($) => $["salesChannels"], { ns: "common" }) }),
         /* @__PURE__ */ jsx(Typography, { variant: "body-stronger", children: t(($) => $["salesChannelsGuidance"], { ns: "businessLines" }) }),
         /* @__PURE__ */ jsx(
@@ -624,8 +634,8 @@ function SalesChannels({
             carouselLabel: labels.salesChannels ?? t(($) => $["salesChannels"], { ns: "common" }),
             onChange,
             selected: selectedCards,
-            width: "medium",
-            gap: "small"
+            width: "m",
+            gap: "s"
           }
         )
       ] })
@@ -634,10 +644,10 @@ function SalesChannels({
 }
 function SalesChannelCard({ channel, selected }) {
   const { t } = useTranslation(["businessLines", "common"]);
-  return /* @__PURE__ */ jsxs("article", { className: styles$3.salesCard, children: [
-    /* @__PURE__ */ jsx("div", { className: styles$3.salesCardImage, children: /* @__PURE__ */ jsx("img", { src: cardMedia[channel].img, alt: `${channel}-image` }) }),
-    /* @__PURE__ */ jsxs("div", { className: styles$3.salesCardInfo, children: [
-      /* @__PURE__ */ jsx("span", { className: styles$3.salesCardAvatar, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("article", { className: styles$2.salesCard, children: [
+    /* @__PURE__ */ jsx("div", { className: styles$2.salesCardImage, children: /* @__PURE__ */ jsx("img", { src: cardMedia[channel].img, alt: `${channel}-image` }) }),
+    /* @__PURE__ */ jsxs("div", { className: styles$2.salesCardInfo, children: [
+      /* @__PURE__ */ jsx("span", { className: styles$2.salesCardAvatar, children: /* @__PURE__ */ jsx(
         Avatar,
         {
           iconName: cardMedia[channel].iconName,
@@ -645,7 +655,7 @@ function SalesChannelCard({ channel, selected }) {
           variant: selected ? "primary" : "secondary"
         }
       ) }),
-      /* @__PURE__ */ jsxs("div", { className: styles$3.salesCardText, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$2.salesCardText, children: [
         /* @__PURE__ */ jsx(Typography, { variant: "body-stronger", children: t(($) => $[`${channel}`], { ns: "businessLines" }) }),
         /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: t(($) => $[`${channel}SalesChannelDescription`], { ns: "businessLines" }) })
       ] })
@@ -905,7 +915,7 @@ function SctaForm({
     verificationErrors
   ]);
   return /* @__PURE__ */ jsxs("form", { id, children: [
-    /* @__PURE__ */ jsxs(StackLayout, { gap: "xLarge", align: "left", children: [
+    /* @__PURE__ */ jsxs(StackLayout, { gap: "xLarge", children: [
       /* @__PURE__ */ jsx(
         DetailViewLayout,
         {
@@ -913,7 +923,6 @@ function SctaForm({
           description: t(($) => $["japaneseCommercialDisclosureDescription"], {
             ns: "businessLines"
           }),
-          align: "left",
           compact: true,
           children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Button, { variant: "link", onClick: () => setOpenSctaInfoModal(true), children: t(($) => $["learnMore"], { ns: "common" }) }) })
         }
@@ -975,7 +984,7 @@ function BusinessLines({ activeForm, handleNextClick, problems = {} }) {
   return /* @__PURE__ */ jsx("div", { children: renderActiveForm(activeForm) });
 }
 const businessLines$1 = "adyen-kyc-business-lines";
-const styles$2 = {
+const styles$1 = {
   businessLines: businessLines$1
 };
 const businessLines = lazy(() => import("./business-lines-DboUCbXw.js"));
@@ -1010,14 +1019,6 @@ const useDeleteBusinessLine = (options) => {
     ...options
   });
 };
-const businessLineModalContent = "adyen-kyc-business-line__modal-content";
-const businessLineCard = "adyen-kyc-business-line__card";
-const businessLineActions = "adyen-kyc-business-line__actions";
-const styles$1 = {
-  businessLineModalContent,
-  businessLineCard,
-  businessLineActions
-};
 const BusinessLineModal = ({
   businessLine,
   setShowBusinessLineInfo,
@@ -1032,18 +1033,28 @@ const BusinessLineModal = ({
   ]);
   const showLoader = deleteStatus === "pending" || fetchingStatus === "pending";
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
+  const blWebAddress = businessLine?.webData?.find((w) => w.webAddress);
+  const blCommerceDisclosureAddress = businessLine?.webData?.find(
+    (w) => w.commerceDisclosureAddress
+  );
   const blInfoItems = [
     {
       term: t(($) => $["salesChannelsParentheticalPlural"], { ns: "common" }),
       details: businessLine?.salesChannels?.map((i) => t(($) => $[i], { ns: "businessLines" })).join(", ") ?? ""
     },
-    ...businessLine?.webData?.length ? [
+    ...blWebAddress ? [
       {
         term: t(($) => $["businessUrl"]),
-        details: businessLine.webData.map((i) => {
-          if (!i.webAddress) return;
-          return /* @__PURE__ */ jsx(Link, { href: i.webAddress, external: true, inline: true, children: i.webAddress }, i.webAddress);
-        })
+        details: /* @__PURE__ */ jsx(
+          Link,
+          {
+            href: blWebAddress.webAddress,
+            external: true,
+            inline: true,
+            children: blWebAddress.webAddress
+          },
+          blWebAddress.webAddress
+        )
       }
     ] : [],
     ...businessLine?.webDataExemption?.reason ? [
@@ -1053,6 +1064,23 @@ const BusinessLineModal = ({
       }
     ] : []
   ];
+  const sctaBlInfoItems = [
+    ...blCommerceDisclosureAddress ? [
+      {
+        term: t(($) => $["japaneseCommercialDisclosureWebpage"]),
+        details: /* @__PURE__ */ jsx(
+          Link,
+          {
+            href: blCommerceDisclosureAddress.commerceDisclosureAddress,
+            external: true,
+            inline: true,
+            children: blCommerceDisclosureAddress.commerceDisclosureAddress
+          },
+          blCommerceDisclosureAddress.commerceDisclosureAddress
+        )
+      }
+    ] : []
+  ];
   const editBusinessLine = (businessLine2) => {
     selectedBusinessLine.value = businessLine2;
     setAddingBusinessLines(true);
@@ -1074,50 +1102,57 @@ const BusinessLineModal = ({
       setShowBusinessLineInfo(false);
     }
   };
+  const actions = /* @__PURE__ */ jsxs(Fragment, { children: [
+    isExperimentEnabled("EnableModifyBusinessLines") && /* @__PURE__ */ jsx(Button, { onClick: () => editBusinessLine(businessLine), children: t(($) => $["edit"], { ns: "common" }) }),
+    isExperimentEnabled("EnableDeleteBusinessLines") && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Button, { onClick: () => setOpenDeleteModal(true), variant: "secondary", children: t(($) => $["delete"], { ns: "common" }) }),
+      openDeleteModal && /* @__PURE__ */ jsx(
+        Confirm,
+        {
+          title: t(($) => $["deleteThisBusinessLine"], { ns: "businessLines" }),
+          confirmText: t(($) => $["delete"]),
+          onConfirm: () => confirmDeleteBusinessLine(businessLine.id),
+          onCancel: () => setOpenDeleteModal(false),
+          description: t(($) => $["thisActionCantBeUndone"]),
+          critical: true
+        }
+      )
+    ] })
+  ] });
   return /* @__PURE__ */ jsx(
     Modal,
     {
       ariaLabel: t(($) => $["businessLine"], { ns: "businessLines" }),
       onClose: () => setShowBusinessLineInfo(false),
-      children: /* @__PURE__ */ jsx("div", { className: styles$1.businessLineModalContent, children: showLoader ? /* @__PURE__ */ jsx(Loader, { size: "large" }) : /* @__PURE__ */ jsxs(DetailViewLayout, { title: t(($) => $["businessLine"], { ns: "businessLines" }), compact: true, children: [
-        /* @__PURE__ */ jsx(
-          ListItem,
-          {
-            title: `${businessLine?.industryCode} - ${businessLine?.industryCodeDescription}`,
-            description: `${businessLine?.salesChannels?.map((i) => t(($) => $[i], { ns: "businessLines" })).join(", ")}`,
-            avatar: { iconName: "bag", circle: true }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Card,
-          {
-            title: t(($) => $["paymentProcessingDetails"], { ns: "businessLines" }),
-            background: "secondary",
-            borderless: true,
-            children: /* @__PURE__ */ jsxs("div", { className: styles$1.businessLineCard, children: [
-              /* @__PURE__ */ jsx(Divider, {}),
-              /* @__PURE__ */ jsx(StructuredList, { items: blInfoItems })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: styles$1.businessLineActions, children: [
-          isExperimentEnabled("EnableModifyBusinessLines") && /* @__PURE__ */ jsx(Button, { onClick: () => editBusinessLine(businessLine), children: t(($) => $["edit"], { ns: "common" }) }),
-          isExperimentEnabled("EnableDeleteBusinessLines") && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Button, { onClick: () => setOpenDeleteModal(true), variant: "secondary", children: t(($) => $["delete"], { ns: "common" }) }),
-            openDeleteModal && /* @__PURE__ */ jsx(
-              Confirm,
+      inset: true,
+      children: /* @__PURE__ */ jsx(
+        DetailViewLayout,
+        {
+          title: t(($) => $["businessLine"], { ns: "businessLines" }),
+          compact: true,
+          actions,
+          children: showLoader ? /* @__PURE__ */ jsx(Loader, { size: "large" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              ListItem,
               {
-                title: t(($) => $["deleteThisBusinessLine"], { ns: "businessLines" }),
-                confirmText: t(($) => $["delete"]),
-                onConfirm: () => confirmDeleteBusinessLine(businessLine.id),
-                onCancel: () => setOpenDeleteModal(false),
-                description: t(($) => $["thisActionCantBeUndone"]),
-                critical: true
+                title: `${businessLine?.industryCode} - ${businessLine?.industryCodeDescription}`,
+                description: `${businessLine?.salesChannels?.map((i) => t(($) => $[i], { ns: "businessLines" })).join(", ")}`,
+                avatar: { iconName: "bag", circle: true }
               }
-            )
+            ),
+            /* @__PURE__ */ jsx(Card, { background: "secondary", borderless: true, children: /* @__PURE__ */ jsxs(StackLayout, { children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "title", children: t(($) => $["paymentProcessingDetails"], { ns: "businessLines" }) }),
+              /* @__PURE__ */ jsx(Divider, {}),
+              /* @__PURE__ */ jsx(StructuredList, { items: blInfoItems })
+            ] }) }),
+            blCommerceDisclosureAddress && /* @__PURE__ */ jsx(Card, { background: "secondary", borderless: true, children: /* @__PURE__ */ jsxs(StackLayout, { children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "title", children: t(($) => $["japaneseCommercialDisclosure"], { ns: "common" }) }),
+              /* @__PURE__ */ jsx(Divider, {}),
+              /* @__PURE__ */ jsx(StructuredList, { items: sctaBlInfoItems })
+            ] }) })
           ] })
-        ] })
-      ] }) })
+        }
+      )
     }
   );
 };
@@ -1224,6 +1259,7 @@ function BusinessLinesDropin({
 }) {
   const capabilityProblems = useCapabilityProblems();
   const { showToast } = useToastContext();
+  const queryClient = useQueryClient();
   const { mutateAsync: createBusinessLine, status: createBusinessLineStatus } = useCreateBusinessLine();
   const { mutateAsync: updateBusinessLine, status: updateBusinessLineStatus } = useUpdateBusinessLine();
   const {
@@ -1344,15 +1380,13 @@ function BusinessLinesDropin({
     return [.../* @__PURE__ */ new Set([...existingSalesChannels, ...selectedSalesChannels ?? []])];
   }, [existingSalesChannels, selectedSalesChannels]);
   const isAddingNewSalesChannels = hasBusinessLineData && activeForm.formId === "salesChannelsForm" && hasNewSalesChannels;
-  const { data: pciQuestionnaireList } = usePciQuestionnaireList({
-    enabled: isAddingNewSalesChannels
+  usePciQuestionnaireList({
+    enabled: false
   });
-  const hasPriorPciSignature = !!pciQuestionnaireList?.data?.length;
-  const shouldCheckPciStatus = hasPriorPciSignature && isAddingNewSalesChannels;
-  const { data: pciStatus } = usePciStatus(
+  const { isLoading: pciStatusLoading } = usePciStatus(
     { additionalSalesChannels: allSalesChannels },
     {
-      enabled: shouldCheckPciStatus
+      enabled: false
     }
   );
   const handleCancelClick = () => {
@@ -1364,10 +1398,21 @@ function BusinessLinesDropin({
     selectedBusinessLine.value = void 0;
     clearBusinessLines();
   };
-  const overrideNextClick = () => {
-    if (shouldCheckPciStatus && pciStatus?.signingRequired) {
-      shouldSignNewPci.value = true;
-      return;
+  const overrideNextClick = async () => {
+    if (!activeForm.isValid) return handleNextClick();
+    if (isAddingNewSalesChannels) {
+      const questionnaireList = await queryClient.fetchQuery({
+        queryKey: ["pciQuestionnaireList"]
+      });
+      if (questionnaireList?.data?.length) {
+        const pciResponse = await queryClient.fetchQuery({
+          queryKey: ["pciStatus", { additionalSalesChannels: allSalesChannels }]
+        });
+        if (pciResponse?.signingRequired === true) {
+          shouldSignNewPci.value = true;
+          return;
+        }
+      }
     }
     return handleNextClick();
   };
@@ -1386,11 +1431,13 @@ function BusinessLinesDropin({
           currentStep: steps.current,
           totalSteps: steps.total,
           forms,
+          activeForm,
           gotoFormByFormIndex,
           handleNextClick: overrideNextClick,
           handleBackClick,
           handleCancelClick,
           loadingStatus: showLoader ? "loading" : "success",
+          nextButtonLoading: isAddingNewSalesChannels && pciStatusLoading,
           children: /* @__PURE__ */ jsx(
             BusinessLines,
             {
@@ -1420,13 +1467,13 @@ function BusinessLinesDropin({
       }
     );
   };
-  return /* @__PURE__ */ jsx("div", { className: styles$2.businessLines, children: renderContent() });
+  return /* @__PURE__ */ jsx("div", { className: styles$1.businessLines, children: renderContent() });
 }
 const RootBusinessLinesPage = ({ handleHomeClick }) => {
   const { data: rootLe } = useLegalEntity(ROOT_LE);
   const { i18n } = useTranslation();
   addResourceBundles(i18n, [
-    { ns: "businessLines", importFn: (lang) => __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../language/bg-BG.json": () => import("./bg-BG-DBsXOteB.js"), "../language/cs-CZ.json": () => import("./cs-CZ-DzChComK.js"), "../language/da-DK.json": () => import("./da-DK-BlU1EczG.js"), "../language/de-DE.json": () => import("./de-DE-s0B-XZyp.js"), "../language/el-GR.json": () => import("./el-GR-CgrzE6er.js"), "../language/en-US.json": () => import("./en-US-AgtwE4Fl.js"), "../language/es-ES.json": () => import("./es-ES-esfwvKwz.js"), "../language/et-EE.json": () => import("./et-EE-BN1nOAGu.js"), "../language/fi-FI.json": () => import("./fi-FI-CjB6QC01.js"), "../language/fr-FR.json": () => import("./fr-FR-C1XqLftn.js"), "../language/hr-HR.json": () => import("./hr-HR-CPvQ9uT8.js"), "../language/hu-HU.json": () => import("./hu-HU-dKPur6SA.js"), "../language/it-IT.json": () => import("./it-IT-C_YDqVNT.js"), "../language/ja-JP.json": () => import("./ja-JP-DnBu0U51.js"), "../language/lt-LT.json": () => import("./lt-LT-DhhomRPs.js"), "../language/lv-LV.json": () => import("./lv-LV-BWbH-gbT.js"), "../language/nl-NL.json": () => import("./nl-NL-DyeSX0PH.js"), "../language/no-NO.json": () => import("./no-NO-DPRsAb_o.js"), "../language/pl-PL.json": () => import("./pl-PL-B1EJKJvT.js"), "../language/pt-BR.json": () => import("./pt-BR-C-C4ZJ9x.js"), "../language/pt-PT.json": () => import("./pt-PT-LbneTcRx.js"), "../language/ro-RO.json": () => import("./ro-RO-CzTVqkev.js"), "../language/sk-SK.json": () => import("./sk-SK-BMlZjg5s.js"), "../language/sl-SI.json": () => import("./sl-SI-8SzKx7XD.js"), "../language/sv-SE.json": () => import("./sv-SE-B7cpKp1l.js") }), `../language/${lang}.json`, 3) }
+    { ns: "businessLines", importFn: (lang) => __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../language/bg-BG.json": () => import("./bg-BG-CEipapl4.js"), "../language/cs-CZ.json": () => import("./cs-CZ-BHbWTH_v.js"), "../language/da-DK.json": () => import("./da-DK-vcVNQJbX.js"), "../language/de-DE.json": () => import("./de-DE-CWEW2yqg.js"), "../language/el-GR.json": () => import("./el-GR-B78b9rSH.js"), "../language/en-US.json": () => import("./en-US-AgtwE4Fl.js"), "../language/es-ES.json": () => import("./es-ES-CDgjGql5.js"), "../language/et-EE.json": () => import("./et-EE-D0PMC4ie.js"), "../language/fi-FI.json": () => import("./fi-FI-CsZlDJFb.js"), "../language/fr-FR.json": () => import("./fr-FR-VoxPkXSc.js"), "../language/hr-HR.json": () => import("./hr-HR-CbdP2tk-.js"), "../language/hu-HU.json": () => import("./hu-HU-pFpTvMiD.js"), "../language/it-IT.json": () => import("./it-IT-DZjw9LNC.js"), "../language/ja-JP.json": () => import("./ja-JP-BqluCflj.js"), "../language/lt-LT.json": () => import("./lt-LT-CXw4ywLM.js"), "../language/lv-LV.json": () => import("./lv-LV-DYqBaW2-.js"), "../language/nl-NL.json": () => import("./nl-NL-lcNM54vV.js"), "../language/no-NO.json": () => import("./no-NO-CTrVITNu.js"), "../language/pl-PL.json": () => import("./pl-PL-CErRPlR2.js"), "../language/pt-BR.json": () => import("./pt-BR-DA44Wgbt.js"), "../language/pt-PT.json": () => import("./pt-PT-PIiikho9.js"), "../language/ro-RO.json": () => import("./ro-RO-Bv9hZxwD.js"), "../language/sk-SK.json": () => import("./sk-SK-ChVwlbp0.js"), "../language/sl-SI.json": () => import("./sl-SI-DZHePXbK.js"), "../language/sv-SE.json": () => import("./sv-SE-Dq56vGlB.js") }), `../language/${lang}.json`, 3) }
   ]);
   if (!rootLe) {
     return /* @__PURE__ */ jsx(Loader, {});