@wf-financing/ui 4.6.2 → 4.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.env.development +1 -0
- package/CHANGELOG.md +11 -0
- package/dist/ConsentModal-p-i_efvJ.mjs +7186 -0
- package/dist/Modal-P9Kk1lUG.mjs +2561 -0
- package/dist/embedded-journey-panel.es-CbWFRFL6.mjs +3569 -0
- package/dist/index-BN3wo8mJ.mjs +24984 -0
- package/dist/index.es.js +1 -34103
- package/dist/ui.css +1 -1
- package/package.json +4 -2
- package/src/CtaWidget.tsx +25 -7
- package/src/components/modal/ConsentModal.snapshot.stories.tsx +1 -1
- package/src/components/modal/ConsentModal.tsx +3 -1
- package/src/components/modal/Modal.tsx +1 -1
- package/src/config/index.ts +1 -0
- package/src/config/isEmbeddedJourney.ts +1 -0
package/dist/ui.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root,:host{--app-theme-key: wayflyer;--app-override-key: wayflyer;--defaults-borderRadius: 8px;--defaults-button-borderRadius:
|
|
1
|
+
:root,:host{--app-theme-key: wayflyer;--app-override-key: wayflyer;--defaults-borderRadius: 8px;--defaults-button-borderRadius: 9999px;--defaults-button-sizes-normal: 40px;--defaults-button-sizes-small: 32px;--defaults-modal-large-width-lg: 900px;--defaults-modal-large-width-md: 900px;--defaults-modal-normal-width-lg: 600px;--defaults-modal-normal-width-md: 504px;--defaults-page-width: 968px;--sizes-spacing-0: 0px;--sizes-spacing-0-5: 2px;--sizes-spacing-1: 4px;--sizes-spacing-1-5: 6px;--sizes-spacing-2: 8px;--sizes-spacing-3: 12px;--sizes-spacing-4: 16px;--sizes-spacing-5: 20px;--sizes-spacing-6: 24px;--sizes-spacing-7: 28px;--sizes-spacing-8: 32px;--sizes-spacing-9: 36px;--sizes-spacing-10: 40px;--sizes-spacing-11: 44px;--sizes-spacing-12: 48px;--sizes-spacing-13: 52px;--sizes-spacing-14: 56px;--sizes-spacing-15: 60px;--sizes-spacing-16: 64px;--sizes-spacing-17: 68px;--sizes-spacing-18: 72px;--sizes-spacing-19: 76px;--sizes-spacing-20: 80px;--sizes-spacing-24: 96px;--sizes-spacing-32: 128px;--sizes-spacing-auto: auto;--cta-content: default;--cta-surface: light;--effects-blur: blur(6px);--effects-focus: 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 2px var(--palette-border-interactive-focusRingOuter);--effects-shadow: 0px 2px 20px rgba(22, 21, 23, .08);--palette-bg-accent-strong: #001eff;--palette-bg-accent-subtle: #e4edff;--palette-bg-interactive-active: #000000;--palette-bg-interactive-activeInverse: #ffffff;--palette-bg-interactive-activeSubtle: #000000;--palette-bg-interactive-activeSubtleInverse: #ffffff;--palette-bg-interactive-hover: #000000;--palette-bg-interactive-hoverInverse: #ffffff;--palette-bg-interactive-hoverSubtle: #000000;--palette-bg-interactive-hoverSubtleInverse: #ffffff;--palette-bg-neutral-base: #ffffff;--palette-bg-neutral-inverse: #333333;--palette-bg-neutral-medium: #f5f5f5;--palette-bg-neutral-overlay: #000000;--palette-bg-neutral-step: #929292;--palette-bg-neutral-strong: #d9d9d9;--palette-bg-neutral-subtle: #f9f9f8;--palette-bg-status-critical: #fde4e4;--palette-bg-status-criticalStrong: #cf2048;--palette-bg-status-info: #dcf0fe;--palette-bg-status-neutral: #ededed;--palette-bg-status-positive: #d8f3d8;--palette-bg-status-positiveStrong: #48834d;--palette-bg-status-warning: #ffe4d7;--palette-bg-status-warningStrong: #c94f30;--palette-border-accent-strong: #001eff;--palette-border-interactive-active: #000000;--palette-border-interactive-activeInverse: #ffffff;--palette-border-interactive-focusRingInner: #ffffff;--palette-border-interactive-focusRingInnerInverse: #333333;--palette-border-interactive-focusRingOuter: #001eff;--palette-border-interactive-focusRingOuterInverse: #f0f5ff;--palette-border-interactive-hover: #000000;--palette-border-interactive-hoverInverse: #ffffff;--palette-border-neutral-inverse: #333333;--palette-border-neutral-onInverse: #ffffff;--palette-border-neutral-strong: #8d8d8d;--palette-border-neutral-subtle: #d9d9d9;--palette-border-status-critical: #cf2048;--palette-border-status-info: #117baf;--palette-border-status-neutral: #8d8d8d;--palette-border-status-positive: #48834d;--palette-border-status-warning: #c94f30;--palette-content-accent-onAccent: #ffffff;--palette-content-accent-strong: #001eff;--palette-content-interactive-active: #000000;--palette-content-interactive-activeInverse: #ffffff;--palette-content-interactive-hover: #000000;--palette-content-interactive-hoverInverse: #ffffff;--palette-content-neutral-onInverse: #ffffff;--palette-content-neutral-strong: #333333;--palette-content-neutral-subtle: #737373;--palette-content-status-critical: #cf2048;--palette-content-status-info: #117baf;--palette-content-status-neutral: #333333;--palette-content-status-onCritical: #ffffff;--palette-content-status-positive: #48834d;--palette-content-status-warning: #c94f30;--palette-datavis-accent: #001eff;--palette-datavis-accentStrong: #000b6a;--palette-datavis-accentSubtle: #82aaff;--sizes-blur-100: 12px;--sizes-breakpoint-lg: 1280px;--sizes-breakpoint-md: 1024px;--sizes-breakpoint-sm: 768px;--sizes-breakpoint-xl: 1536px;--sizes-breakpoint-xs: 640px;--sizes-breakpoint-xxl: 1920px;--sizes-breakpoint-xxs: 375px;--sizes-breakpoint-xxxl: 2560px;--sizes-breakpoint-xxxs: 320px;--sizes-radius-2xl: 24px;--sizes-radius-full: 9999px;--sizes-radius-lg: 12px;--sizes-radius-md: 8px;--sizes-radius-none: 0px;--sizes-radius-sm: 4px;--sizes-radius-xl: 16px;--sizes-stroke-default: 1px;--sizes-stroke-focusRing: 2px;--sizes-stroke-strong: 2px;--typography-fontFamily-primaryTypeface: Inter;--typography-fontFamily-secondaryTypeface: Inter;--typography-fontSize-2xl: 22px;--typography-fontSize-3xl: 24px;--typography-fontSize-4xl: 28px;--typography-fontSize-5xl: 32px;--typography-fontSize-6xl: 36px;--typography-fontSize-lg: 18px;--typography-fontSize-md: 16px;--typography-fontSize-sm: 14px;--typography-fontSize-xl: 20px;--typography-fontSize-xs: 12px;--typography-fontWeight-medium: 500;--typography-fontWeight-mediumItalic: 500;--typography-fontWeight-regular: 400;--typography-fontWeight-regularItalic: 400;--typography-fontWeight-semibold: 600;--typography-fontWeight-semiboldItalic: 600;--typography-lineHeight-loose: 1.5;--typography-lineHeight-none: 1;--typography-lineHeight-normal: 1.4;--typography-lineHeight-tight: 1.2;--extendedPalette-chart-background: #fff;--extendedPalette-chart-boxShadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);--extendedPalette-chart-color: fade(@black, 85%);--extendedPalette-chart-colors-deselectedColor: #C0C0C0;--extendedPalette-chart-colors-gridColor: #E8E8E8;--extendedPalette-chart-colors-primaryColor: #54C4FC;--extendedPalette-chart-colors-primaryLabelColor: #262626;--extendedPalette-chart-colors-secondaryColor: #FCB779;--extendedPalette-chart-colors-secondaryColorPaler: #ada8ae;--extendedPalette-chart-colors-secondaryLabelColor: #8c8c8c;--extendedPalette-chart-delta-negative: #AD0000;--extendedPalette-chart-delta-positive: #0D610C;--extendedPalette-chart-multichartColors-chart1: #6B7280;--extendedPalette-chart-multichartColors-chart10: #6366F1;--extendedPalette-chart-multichartColors-chart11: #8B5CF6;--extendedPalette-chart-multichartColors-chart12: #EC4899;--extendedPalette-chart-multichartColors-chart13: #F43F5E;--extendedPalette-chart-multichartColors-chart2: #EF4444;--extendedPalette-chart-multichartColors-chart3: #F97316;--extendedPalette-chart-multichartColors-chart4: #F59E0B;--extendedPalette-chart-multichartColors-chart5: #0D610C;--extendedPalette-chart-multichartColors-chart6: #14B8A6;--extendedPalette-chart-multichartColors-chart7: #06B6D4;--extendedPalette-chart-multichartColors-chart8: #0EA5E9;--extendedPalette-chart-multichartColors-chart9: #3B82F6;--extendedPalette-chart-multiLineBarChartColors-bar-color1: #A7F3D0;--extendedPalette-chart-multiLineBarChartColors-bar-color2: #34D399;--extendedPalette-chart-multiLineBarChartColors-bar-color3: #059669;--extendedPalette-chart-multiLineBarChartColors-bar-color4: #06B6D4;--extendedPalette-chart-multiLineBarChartColors-bar-color5: #0EA5E9;--extendedPalette-chart-multiLineBarChartColors-bar-color6: #3B82F6;--extendedPalette-chart-multiLineBarChartColors-line-color1: #F59E0B;--extendedPalette-chart-multiLineBarChartColors-line-color2: #6366F1;--extendedPalette-chart-multiLineBarChartColors-line-color3: #EF4444;--extendedPalette-chart-multiLineBarChartColors-line-color4: #10B981;--extendedPalette-chart-multiLineBarChartColors-line-color5: #EC4899;--extendedPalette-chart-multiLineBarChartColors-line-color6: #F43F5E;--extendedPalette-chart-shadowColor: rgba(0, 0, 0, .15);--extendedPalette-pinnedMetrics-borderColor-default: #FFFFFF;--extendedPalette-pinnedMetrics-borderColor-sorted: #1D44CE;--extendedPalette-pinnedMetrics-borderColor-summary: #0D610C;--extendedPalette-pinnedMetrics-borderStyle: solid;--extendedPalette-pinnedMetrics-borderWidth: 2;--extendedPalette-scaler-iconColor: #ffffff;--extendedPalette-task-completed: #059669;--extendedPalette-task-pending: #faad14}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wf-financing/ui",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.7.0",
|
|
4
4
|
"exports": {
|
|
5
5
|
".": {
|
|
6
6
|
"import": "./dist/index.es.js",
|
|
@@ -39,7 +39,8 @@
|
|
|
39
39
|
"styled-components": "^6.1.19",
|
|
40
40
|
"@wf-financing/embedded-types": "1.1.1",
|
|
41
41
|
"@wf-financing/logger": "2.2.2",
|
|
42
|
-
"@wf-financing/ui-assets": "1.1.3"
|
|
42
|
+
"@wf-financing/ui-assets": "1.1.3",
|
|
43
|
+
"@wf-financing/embedded-journey": "0.2.0"
|
|
43
44
|
},
|
|
44
45
|
"publishConfig": {
|
|
45
46
|
"access": "public"
|
|
@@ -48,6 +49,7 @@
|
|
|
48
49
|
"clean": "rm -rf dist",
|
|
49
50
|
"dev": "vite",
|
|
50
51
|
"build": "vite build",
|
|
52
|
+
"build-dev": "NODE_ENV=development vite build --mode development",
|
|
51
53
|
"preview": "vite preview",
|
|
52
54
|
"analyze": "vite build --mode analyze-html && npx http-server dist/bundle-stats -p 8083",
|
|
53
55
|
"publish-sdk-cta-ui": "pnpm clean && pnpm build && pnpm publish --access public --no-git-checks",
|
package/src/CtaWidget.tsx
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { useState } from 'react';
|
|
1
|
+
import { useState, lazy, Suspense, ComponentProps } from 'react';
|
|
2
2
|
import type { CtaResponseType, ContinueHostedApplicationResponseType } from '@wf-financing/embedded-types';
|
|
3
3
|
import type { Copy } from '@wf-financing/ui-assets';
|
|
4
4
|
|
|
5
5
|
import { CtaBanner } from './components/banner/CtaBanner';
|
|
6
|
-
import { ConsentModal } from './components/modal/ConsentModal.tsx';
|
|
7
6
|
import { buildCtaUiProps } from './utils';
|
|
8
|
-
import { useContinueHostedApplication, useNotificationOnRender } from './hooks';
|
|
7
|
+
import { useContinueHostedApplication, useNotificationOnRender, usePartnerContext } from './hooks';
|
|
8
|
+
import { IS_EMBEDDED_JOURNEY } from './config';
|
|
9
9
|
|
|
10
10
|
type CtaWidgetProps = {
|
|
11
11
|
cta: Exclude<CtaResponseType, null>;
|
|
@@ -13,12 +13,16 @@ type CtaWidgetProps = {
|
|
|
13
13
|
skipAnimation: boolean;
|
|
14
14
|
};
|
|
15
15
|
|
|
16
|
+
const EmbeddedJourneyPanel = lazy(() => import('@wf-financing/embedded-journey/embedded-journey-panel'));
|
|
17
|
+
const ConsentModal = lazy(() => import('./components/modal/ConsentModal'));
|
|
18
|
+
|
|
16
19
|
export const CtaWidget = ({ cta, copy, skipAnimation }: CtaWidgetProps) => {
|
|
17
|
-
const [
|
|
20
|
+
const [isWidgetOpen, setIsWidgetOpen] = useState(false);
|
|
18
21
|
const { mutate: continueHostedApplicationMutation } = useContinueHostedApplication();
|
|
19
22
|
const sendNotification = useNotificationOnRender();
|
|
23
|
+
const { portalContainer } = usePartnerContext();
|
|
20
24
|
|
|
21
|
-
const
|
|
25
|
+
const toggleIsWidgetOpen = () => setIsWidgetOpen((isOpen) => !isOpen);
|
|
22
26
|
const handleContinueHostedApplication = () => {
|
|
23
27
|
continueHostedApplicationMutation(undefined, {
|
|
24
28
|
onSuccess: (nextUrl: ContinueHostedApplicationResponseType) => {
|
|
@@ -34,16 +38,30 @@ export const CtaWidget = ({ cta, copy, skipAnimation }: CtaWidgetProps) => {
|
|
|
34
38
|
const { bannerProps, consentModalProps, partnerTemplateProps } = buildCtaUiProps(
|
|
35
39
|
cta,
|
|
36
40
|
copy,
|
|
37
|
-
|
|
41
|
+
toggleIsWidgetOpen,
|
|
38
42
|
handleContinueHostedApplication,
|
|
39
43
|
);
|
|
40
44
|
|
|
41
45
|
sendNotification(cta, bannerProps);
|
|
42
46
|
|
|
47
|
+
const embeddedJourneyPanelProps: ComponentProps<typeof EmbeddedJourneyPanel> = {
|
|
48
|
+
portalContainer,
|
|
49
|
+
isOpen: isWidgetOpen,
|
|
50
|
+
closePanel: () => toggleIsWidgetOpen(),
|
|
51
|
+
};
|
|
52
|
+
|
|
43
53
|
return (
|
|
44
54
|
<>
|
|
45
55
|
<CtaBanner skipAnimation={skipAnimation} {...bannerProps} />
|
|
46
|
-
|
|
56
|
+
<Suspense fallback={null}>
|
|
57
|
+
{IS_EMBEDDED_JOURNEY ? (
|
|
58
|
+
<EmbeddedJourneyPanel {...embeddedJourneyPanelProps} />
|
|
59
|
+
) : (
|
|
60
|
+
consentModalProps && (
|
|
61
|
+
<ConsentModal {...consentModalProps} {...partnerTemplateProps} isModalOpen={isWidgetOpen} />
|
|
62
|
+
)
|
|
63
|
+
)}
|
|
64
|
+
</Suspense>
|
|
47
65
|
</>
|
|
48
66
|
);
|
|
49
67
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
2
|
|
|
3
3
|
import { PartnerContext } from '../../utils';
|
|
4
|
-
import
|
|
4
|
+
import ConsentModal from './ConsentModal.tsx';
|
|
5
5
|
|
|
6
6
|
const portalContainer = document.createElement('div');
|
|
7
7
|
document.body.append(portalContainer);
|
|
@@ -6,7 +6,7 @@ import { Modal } from './Modal.tsx';
|
|
|
6
6
|
|
|
7
7
|
type ConsentModalProps = ModalProps & { isModalOpen: boolean; partnerLogoUrl?: string };
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
const ConsentModal = ({
|
|
10
10
|
isModalOpen,
|
|
11
11
|
logoUrl,
|
|
12
12
|
button,
|
|
@@ -24,3 +24,5 @@ export const ConsentModal = ({
|
|
|
24
24
|
</Modal>
|
|
25
25
|
);
|
|
26
26
|
};
|
|
27
|
+
|
|
28
|
+
export default ConsentModal;
|
|
@@ -29,7 +29,7 @@ export const Modal = ({ isModalOpen, setIsModalOpen, children }: ModalProps) =>
|
|
|
29
29
|
<PortalProvider getContainer={() => portalContainer}>
|
|
30
30
|
<MotionModalPrimitive
|
|
31
31
|
isDismissable
|
|
32
|
-
shouldCloseOnInteractOutside={(el:
|
|
32
|
+
shouldCloseOnInteractOutside={(el: Element) => el.getAttribute('data-id') === 'modal-mask'}
|
|
33
33
|
isOpen={isModalOpen}
|
|
34
34
|
onOpenChange={() => setIsModalOpen(false)}
|
|
35
35
|
$size="normal"
|
package/src/config/index.ts
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const IS_EMBEDDED_JOURNEY: string | undefined = import.meta.env.VITE_IS_EMBEDDED_JOURNEY;
|