@wf-financing/ui 1.4.3 → 1.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",

package/src/components/banner/ProceedFundingButton.tsx

@@ -1,16 +1,15 @@
 import { Button } from '@wayflyer/flyui';
 import {
-  ContinueHostedApplicationResponseType,
   CtaContinueFundingType,
   CtaGenericOfferType,
   CtaIndicativeOfferType,
   CtaStateType,
+  ContinueHostedApplicationResponseType,
 } from '@wf-financing/embedded-types';
-import { lazy, Suspense, useState } from 'react';
-
-import { useContinueHostedApplication, useCtaBanner } from '../../hooks';
+import { useState } from 'react';
 
-const ConsentModal = lazy(() => import('../modal/ConsentModal'));
+import { useCtaBanner, useContinueHostedApplication } from '../../hooks';
+import { ConsentModal } from '../modal/ConsentModal';
 
 type CtaResponseType = CtaGenericOfferType | CtaIndicativeOfferType | CtaContinueFundingType;
 
@@ -51,9 +50,7 @@ export const ProceedFundingButton = () => {
       <Button variant="Primary" fullWidth onClick={handleContinueHostedApplication}>
         {config?.button_label}
       </Button>
-      <Suspense>
-        <ConsentModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
-      </Suspense>
+      <ConsentModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
     </>
   );
 };

package/src/components/modal/ConsentModal.snapshot.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Themes } from '@wayflyer/flyui';
+import { ConsentModal } from './ConsentModal';
 import { PartnerContext } from '../../utils';
-import ConsentModal from './ConsentModal';
+import { Themes } from '@wayflyer/flyui';
 
 const portalContainer = document.createElement('div');
 document.body.append(portalContainer);

package/src/components/modal/ConsentModal.tsx

@@ -17,7 +17,7 @@ const ImageContainer = styled(Image)`
   max-width: none;
 `;
 
-const ConsentModal = ({ isModalOpen, setIsModalOpen }: ConsentModalProps) => {
+export const ConsentModal = ({ isModalOpen, setIsModalOpen }: ConsentModalProps) => {
   const { formatMessage } = useIntl();
   const isSmallScreen = useDetectSmallScreen();
   const { isMobile } = useDetectDeviceSize();
@@ -39,5 +39,3 @@ const ConsentModal = ({ isModalOpen, setIsModalOpen }: ConsentModalProps) => {
     </Modal>
   );
 };
-
-export default ConsentModal;

package/vite.config.ts

@@ -3,10 +3,10 @@ import react from '@vitejs/plugin-react';
 import path from 'path';
 import { defineConfig } from 'vite';
 
-export default defineConfig(({ mode }) => ({
+export default defineConfig({
   plugins: [react()],
   define: {
-    'process.env.NODE_ENV': JSON.stringify(mode === 'production' ? 'production' : 'development'),
+    'process.env': {},
   },
   server: {
     host: true,
@@ -20,5 +20,8 @@ export default defineConfig(({ mode }) => ({
       fileName: (format) => `index.${format}.js`,
       formats: ['es'],
     },
+    rollupOptions: {
+      external: [],
+    },
   },
-}));
+});

package/dist/ConsentModal-vhnjWxOz.mjs

@@ -1,161 +0,0 @@
-import { r as i, u as p, _ as b, s as v, g as I, a as w, b as _, c as H, j as t, P as d, R as m, m as k, d as W, S as L, e as S, L as T, f as q, A as D, $ as P, I as $, l as A, h as y, F as N, W as O, i as U } from "./index-Gn-_ZM3g.mjs";
-function B(e, s) {
-  var r = e.values, a = b(e, ["values"]), n = s.values, o = b(s, ["values"]);
-  return v(n, r) && v(a, o);
-}
-function C(e) {
-  var s = p(), r = s.formatMessage, a = s.textComponent, n = a === void 0 ? i.Fragment : a, o = e.id, l = e.description, h = e.defaultMessage, F = e.values, x = e.children, g = e.tagName, f = g === void 0 ? n : g, R = e.ignoreTag, z = { id: o, description: l, defaultMessage: h }, c = r(z, F, {
-    ignoreTag: R
-  });
-  return typeof x == "function" ? x(Array.isArray(c) ? c : [c]) : f ? i.createElement(f, null, i.Children.toArray(c)) : i.createElement(i.Fragment, null, c);
-}
-C.displayName = "FormattedMessage";
-var u = i.memo(C, B);
-u.displayName = "MemoizedFormattedMessage";
-const V = async (e, s, r) => {
-  let a = await s();
-  const n = await I(e, r);
-  return a || (a = {}), await n.startHostedApplication(a);
-}, G = () => {
-  const { companyToken: e, mockedMode: s, partnerCallback: r } = w();
-  return _({
-    mutationFn: () => V(e, r, s)
-  });
-}, E = () => H()("xxs").windowLte, J = (e, s) => {
-  const r = i.useRef([]);
-  i.useEffect(() => {
-    var n, o;
-    if (!e || !s) return;
-    r.current = [];
-    let a = (n = s.getRootNode()) == null ? void 0 : n.host;
-    for (; a; )
-      (o = a.hasAttribute) != null && o.call(a, "inert") && (r.current.push(a), a.removeAttribute("inert")), a = a.parentElement;
-    return () => {
-      r.current.forEach((l) => l.setAttribute("inert", "")), r.current = [];
-    };
-  }, [e, s]);
-}, K = [
-  {
-    id: "step1",
-    title: { id: "ctaModal.step1.title" },
-    subtitle: { id: "ctaModal.step1.subtitle" }
-  },
-  {
-    id: "step2",
-    title: { id: "ctaModal.step2.title" },
-    subtitle: { id: "ctaModal.step2.subtitle" }
-  },
-  {
-    id: "step3",
-    title: { id: "ctaModal.step3.title" },
-    subtitle: { id: "ctaModal.step3.subtitle" }
-  }
-], Q = () => {
-  const { formatMessage: e } = p();
-  return /* @__PURE__ */ t.jsx(d, { direction: "column", gap: "2", children: K.map(({ id: s, title: r, subtitle: a }) => /* @__PURE__ */ t.jsxs(d, { direction: "column", children: [
-    /* @__PURE__ */ t.jsx(m, { fontWeight: "medium", children: e(r) }),
-    /* @__PURE__ */ t.jsx(m, { color: "placeholder", children: e(a) })
-  ] }, s)) });
-}, X = k(L), Y = k(W), M = { transform: "scale(0.7)", opacity: 0 }, Z = { transform: "scale(1)", opacity: 1 }, j = { backgroundColor: "rgba(0, 0, 0, 0)" }, ee = {
-  backgroundColor: "var(--palette-utility-overlay)",
-  backdropFilter: "blur(var(--effects-blur))",
-  opacity: 0.6
-}, te = S.div`
-  scrollbar-width: thin;
-  scrollbar-color: var(--palette-modal-border);
-  flex-shrink: 1;
-  overflow-y: auto;
-  background-color: var(--palette-modal-surface);
-  border-radius: var(--sizes-radius-md);
-  max-height: 80vh;
-  padding-bottom: 10px;
-
-  &::-webkit-scrollbar {
-    width: 12px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--palette-modal-border);
-    border-radius: var(--sizes-radius-xs);
-  }
-`, ae = ({ isModalOpen: e, setIsModalOpen: s, children: r }) => {
-  const a = i.useId(), { portalContainer: n } = w(), o = i.useRef(null);
-  return J(e, n), /* @__PURE__ */ t.jsx(T, { features: q, children: /* @__PURE__ */ t.jsx(D, { children: e && /* @__PURE__ */ t.jsx(P, { getContainer: () => n, children: /* @__PURE__ */ t.jsxs(
-    Y,
-    {
-      isDismissable: !0,
-      shouldCloseOnInteractOutside: (l) => l.getAttribute("data-id") === "modal-mask",
-      isOpen: e,
-      onOpenChange: () => s(!1),
-      $size: "normal",
-      initial: M,
-      animate: Z,
-      exit: M,
-      transition: { duration: 0.2 },
-      style: { width: "438px", border: "none", maxWidth: "90vw", maxHeight: "100vh" },
-      children: [
-        /* @__PURE__ */ t.jsx(
-          X,
-          {
-            "data-id": "modal-mask",
-            "data-testid": "modal-mask",
-            initial: j,
-            animate: ee,
-            exit: j,
-            transition: { duration: 0.2 }
-          }
-        ),
-        /* @__PURE__ */ t.jsx($, { role: "dialog", "aria-labelledby": a, children: /* @__PURE__ */ t.jsx(te, { ref: o, "data-testid": "modal-body", children: r }) })
-      ]
-    }
-  ) }) }) });
-}, se = ({ setOpen: e }) => {
-  const { isMobile: s } = A(), r = G(), a = E(), n = () => {
-    r.mutate(void 0, {
-      onSuccess: (l) => {
-        const { next: h } = l;
-        e(!1), window.open(h);
-      },
-      onError: (l) => {
-        console.error("Failed to start application", l);
-      }
-    });
-  }, o = () => {
-    window.open("https://wayflyer.com/en/privacy-notice", "_blank", "noopener,noreferrer");
-  };
-  return /* @__PURE__ */ t.jsxs(d, { direction: "column", gap: "3", children: [
-    /* @__PURE__ */ t.jsxs(d, { gap: "2", direction: a || s ? "column" : "row", children: [
-      /* @__PURE__ */ t.jsxs(y, { fullWidth: !0, onClick: n, variant: "Primary", external: !0, children: [
-        /* @__PURE__ */ t.jsx(u, { id: "ctaModal.action" }),
-        /* @__PURE__ */ t.jsx(N, {})
-      ] }),
-      /* @__PURE__ */ t.jsx(y, { fullWidth: !0, variant: "Secondary", onClick: () => e(!1), children: /* @__PURE__ */ t.jsx(u, { id: "common.cancel" }) })
-    ] }),
-    /* @__PURE__ */ t.jsxs(m, { size: "sm", lineHeight: "normal", children: [
-      /* @__PURE__ */ t.jsx(u, { id: "ctaModal.consent" }),
-      /* @__PURE__ */ t.jsx(O, { onClick: o, children: /* @__PURE__ */ t.jsx(u, { id: "ctaModal.consent.privacy_policy" }) })
-    ] })
-  ] });
-}, re = S(U)`
-  width: 100%;
-  max-width: none;
-`, oe = ({ isModalOpen: e, setIsModalOpen: s }) => {
-  const { formatMessage: r } = p(), a = E(), { isMobile: n } = A(), o = a || n;
-  return /* @__PURE__ */ t.jsxs(ae, { isModalOpen: e, setIsModalOpen: s, children: [
-    !a && /* @__PURE__ */ t.jsx(re, { src: "https://static.wayflyer.com/flyui-assets/logos/wayflyer-ef.png" }),
-    /* @__PURE__ */ t.jsxs(d, { direction: "column", gap: "8", padding: o ? "4" : "6", children: [
-      /* @__PURE__ */ t.jsxs(d, { direction: "column", gap: "6", children: [
-        /* @__PURE__ */ t.jsx(m, { fontStyle: "regular", fontWeight: "medium", lineHeight: "tight", size: "2xl", children: r({ id: "ctaModal.title" }) }),
-        /* @__PURE__ */ t.jsx(Q, {})
-      ] }),
-      /* @__PURE__ */ t.jsx(se, { setOpen: s })
-    ] })
-  ] });
-};
-export {
-  oe as default
-};