@dynamic-labs/sdk-react-core 4.57.1 → 4.58.0

package/src/lib/widgets/DynamicWidget/views/SetupPasswordKnowledgeCheckView/SetupPasswordKnowledgeCheckView.cjs

@@ -0,0 +1,83 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var Alert = require('../../../../components/Alert/Alert.cjs');
+var Icon = require('../../../../components/Icon/Icon.cjs');
+var IconButton = require('../../../../components/IconButton/IconButton.cjs');
+var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
+var exclamationCircle = require('../../../../shared/assets/exclamation-circle.cjs');
+var knowledgeCheckIcon = require('../../../../shared/assets/knowledge-check-icon.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+
+const CORRECT_ANSWER = 'c';
+const OPTIONS = [
+    {
+        label: 'A',
+        translationKey: 'dyn_setup_password.knowledge_check.option_a',
+        value: 'a',
+    },
+    {
+        label: 'B',
+        translationKey: 'dyn_setup_password.knowledge_check.option_b',
+        value: 'b',
+    },
+    {
+        label: 'C',
+        translationKey: 'dyn_setup_password.knowledge_check.option_c',
+        value: 'c',
+    },
+];
+const SetupPasswordKnowledgeCheckView = ({ onContinue, onBack, onReviewTerms }) => {
+    const { t } = reactI18next.useTranslation();
+    const [selectedAnswer, setSelectedAnswer] = React.useState('');
+    const [showError, setShowError] = React.useState(false);
+    const handleAnswerChange = React.useCallback((e) => {
+        setSelectedAnswer(e.target.value);
+        setShowError(false);
+    }, []);
+    const handleContinue = React.useCallback(() => {
+        if (selectedAnswer === CORRECT_ANSWER) {
+            onContinue();
+        }
+        else {
+            setShowError(true);
+        }
+    }, [selectedAnswer, onContinue]);
+    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-knowledge-check-back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.knowledge_check.title', children: t('dyn_setup_password.knowledge_check.title') }) }), jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view', children: jsxRuntime.jsxs("div", { className: 'setup-password-knowledge-check-view__body', children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: 'setup-password-knowledge-check-view__content', children: [jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view__icon-container', children: jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(knowledgeCheckIcon.ReactComponent, { width: 56, height: 56 }) }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', copykey: 'dyn_setup_password.knowledge_check.description', className: 'setup-password-knowledge-check-view__description', children: t('dyn_setup_password.knowledge_check.description') })] }), jsxRuntime.jsxs("div", { className: 'setup-password-knowledge-check-view__alert', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'semibold', copykey: 'dyn_setup_password.knowledge_check.question', className: 'setup-password-knowledge-check-view__question', children: t('dyn_setup_password.knowledge_check.question') }), jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view__options', children: OPTIONS.map((option) => {
+                                                const isSelected = selectedAnswer === option.value;
+                                                const hasError = showError && isSelected;
+                                                return (jsxRuntime.jsxs("div", { className: `setup-password-knowledge-check-view__option ${isSelected
+                                                        ? 'setup-password-knowledge-check-view__option--selected'
+                                                        : ''} ${hasError
+                                                        ? 'setup-password-knowledge-check-view__option--error'
+                                                        : ''} ${showError
+                                                        ? 'setup-password-knowledge-check-view__option--disabled'
+                                                        : ''}`, onClick: () => {
+                                                        if (!showError) {
+                                                            handleAnswerChange({
+                                                                target: { value: option.value },
+                                                            });
+                                                        }
+                                                    }, children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: hasError
+                                                                ? 'error-1'
+                                                                : isSelected
+                                                                    ? 'brand-primary'
+                                                                    : 'tertiary', weight: 'bold', className: 'setup-password-knowledge-check-view__option-label', children: option.label }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', children: t(option.translationKey) })] }, option.value));
+                                            }) })] })] }), jsxRuntime.jsxs("div", { children: [showError && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Alert.Alert, { variant: 'error', icon: jsxRuntime.jsx(exclamationCircle.ReactComponent, {}), className: 'setup-password-knowledge-check-view__error', children: t('dyn_setup_password.knowledge_check.error') }), jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view__review-button', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { onClick: onReviewTerms, copykey: 'dyn_setup_password.knowledge_check.review_terms', dataTestId: 'setup-password-knowledge-check-review-button', buttonVariant: 'brand-primary', className: 'setup-password-knowledge-check-view__alert-button', typographyProps: {
+                                                    color: 'inherit',
+                                                }, expanded: true, children: t('dyn_setup_password.knowledge_check.review_terms') }) })] })), !showError && (jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-knowledge-check-continue-button', onClick: handleContinue, disabled: !selectedAnswer, copykey: 'dyn_setup_password.button.confirm', buttonVariant: 'brand-primary', typographyProps: {
+                                            color: 'inherit',
+                                        }, expanded: true, children: t('dyn_setup_password.button.confirm') }) }))] })] }) })] }));
+};
+
+exports.SetupPasswordKnowledgeCheckView = SetupPasswordKnowledgeCheckView;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordKnowledgeCheckView/SetupPasswordKnowledgeCheckView.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export type SetupPasswordKnowledgeCheckViewProps = {
+    onContinue: () => void;
+    onBack: () => void;
+    onReviewTerms: () => void;
+};
+export declare const SetupPasswordKnowledgeCheckView: FC<SetupPasswordKnowledgeCheckViewProps>;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordKnowledgeCheckView/SetupPasswordKnowledgeCheckView.js

@@ -0,0 +1,79 @@
+'use client'
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Alert } from '../../../../components/Alert/Alert.js';
+import { Icon } from '../../../../components/Icon/Icon.js';
+import { IconButton } from '../../../../components/IconButton/IconButton.js';
+import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
+import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
+import { ReactComponent as SvgExclamationCircle } from '../../../../shared/assets/exclamation-circle.js';
+import { ReactComponent as SvgKnowledgeCheckIcon } from '../../../../shared/assets/knowledge-check-icon.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+
+const CORRECT_ANSWER = 'c';
+const OPTIONS = [
+    {
+        label: 'A',
+        translationKey: 'dyn_setup_password.knowledge_check.option_a',
+        value: 'a',
+    },
+    {
+        label: 'B',
+        translationKey: 'dyn_setup_password.knowledge_check.option_b',
+        value: 'b',
+    },
+    {
+        label: 'C',
+        translationKey: 'dyn_setup_password.knowledge_check.option_c',
+        value: 'c',
+    },
+];
+const SetupPasswordKnowledgeCheckView = ({ onContinue, onBack, onReviewTerms }) => {
+    const { t } = useTranslation();
+    const [selectedAnswer, setSelectedAnswer] = useState('');
+    const [showError, setShowError] = useState(false);
+    const handleAnswerChange = useCallback((e) => {
+        setSelectedAnswer(e.target.value);
+        setShowError(false);
+    }, []);
+    const handleContinue = useCallback(() => {
+        if (selectedAnswer === CORRECT_ANSWER) {
+            onContinue();
+        }
+        else {
+            setShowError(true);
+        }
+    }, [selectedAnswer, onContinue]);
+    const backButton = (jsx(IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-knowledge-check-back-button', children: jsx(SvgChevronLeft, {}) }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.knowledge_check.title', children: t('dyn_setup_password.knowledge_check.title') }) }), jsx("div", { className: 'setup-password-knowledge-check-view', children: jsxs("div", { className: 'setup-password-knowledge-check-view__body', children: [jsxs("div", { children: [jsxs("div", { className: 'setup-password-knowledge-check-view__content', children: [jsx("div", { className: 'setup-password-knowledge-check-view__icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgKnowledgeCheckIcon, { width: 56, height: 56 }) }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', copykey: 'dyn_setup_password.knowledge_check.description', className: 'setup-password-knowledge-check-view__description', children: t('dyn_setup_password.knowledge_check.description') })] }), jsxs("div", { className: 'setup-password-knowledge-check-view__alert', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'semibold', copykey: 'dyn_setup_password.knowledge_check.question', className: 'setup-password-knowledge-check-view__question', children: t('dyn_setup_password.knowledge_check.question') }), jsx("div", { className: 'setup-password-knowledge-check-view__options', children: OPTIONS.map((option) => {
+                                                const isSelected = selectedAnswer === option.value;
+                                                const hasError = showError && isSelected;
+                                                return (jsxs("div", { className: `setup-password-knowledge-check-view__option ${isSelected
+                                                        ? 'setup-password-knowledge-check-view__option--selected'
+                                                        : ''} ${hasError
+                                                        ? 'setup-password-knowledge-check-view__option--error'
+                                                        : ''} ${showError
+                                                        ? 'setup-password-knowledge-check-view__option--disabled'
+                                                        : ''}`, onClick: () => {
+                                                        if (!showError) {
+                                                            handleAnswerChange({
+                                                                target: { value: option.value },
+                                                            });
+                                                        }
+                                                    }, children: [jsx(Typography, { variant: 'body_normal', color: hasError
+                                                                ? 'error-1'
+                                                                : isSelected
+                                                                    ? 'brand-primary'
+                                                                    : 'tertiary', weight: 'bold', className: 'setup-password-knowledge-check-view__option-label', children: option.label }), jsx(Typography, { variant: 'body_small', color: 'primary', children: t(option.translationKey) })] }, option.value));
+                                            }) })] })] }), jsxs("div", { children: [showError && (jsxs(Fragment, { children: [jsx(Alert, { variant: 'error', icon: jsx(SvgExclamationCircle, {}), className: 'setup-password-knowledge-check-view__error', children: t('dyn_setup_password.knowledge_check.error') }), jsx("div", { className: 'setup-password-knowledge-check-view__review-button', children: jsx(TypographyButton, { onClick: onReviewTerms, copykey: 'dyn_setup_password.knowledge_check.review_terms', dataTestId: 'setup-password-knowledge-check-review-button', buttonVariant: 'brand-primary', className: 'setup-password-knowledge-check-view__alert-button', typographyProps: {
+                                                    color: 'inherit',
+                                                }, expanded: true, children: t('dyn_setup_password.knowledge_check.review_terms') }) })] })), !showError && (jsx("div", { className: 'setup-password-knowledge-check-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-knowledge-check-continue-button', onClick: handleContinue, disabled: !selectedAnswer, copykey: 'dyn_setup_password.button.confirm', buttonVariant: 'brand-primary', typographyProps: {
+                                            color: 'inherit',
+                                        }, expanded: true, children: t('dyn_setup_password.button.confirm') }) }))] })] }) })] }));
+};
+
+export { SetupPasswordKnowledgeCheckView };

package/src/lib/widgets/DynamicWidget/views/SetupPasswordKnowledgeCheckView/index.d.ts

@@ -0,0 +1,2 @@
+export { SetupPasswordKnowledgeCheckView } from './SetupPasswordKnowledgeCheckView';
+export type { SetupPasswordKnowledgeCheckViewProps } from './SetupPasswordKnowledgeCheckView';

package/src/lib/widgets/DynamicWidget/views/SetupPasswordSuccessView/SetupPasswordSuccessView.cjs

@@ -0,0 +1,27 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var Icon = require('../../../../components/Icon/Icon.cjs');
+var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+var checkCircleFilled = require('../../../../shared/assets/check-circle-filled.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+
+const SetupPasswordSuccessView = ({ onDone, }) => {
+    const { t } = reactI18next.useTranslation();
+    const handleDone = React.useCallback(() => {
+        onDone();
+    }, [onDone]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.success.title', children: t('dyn_setup_password.success.title') }) }), jsxRuntime.jsxs("div", { className: 'setup-password-success-view', children: [jsxRuntime.jsx("div", { className: 'setup-password-success-view__content', children: jsxRuntime.jsxs("div", { className: 'setup-password-success-view__body', children: [jsxRuntime.jsx("div", { className: 'setup-password-success-view__icon-container', children: jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(checkCircleFilled.ReactComponent, { width: 64, height: 64 }) }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.success.description', className: 'setup-password-success-view__description', children: t('dyn_setup_password.success.description') })] }) }), jsxRuntime.jsx("div", { className: 'setup-password-success-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-success-done-button', onClick: handleDone, copykey: 'dyn_setup_password.button.done', buttonVariant: 'brand-primary', typographyProps: {
+                                color: 'inherit',
+                            }, expanded: true, children: t('dyn_setup_password.button.done') }) })] })] }));
+};
+
+exports.SetupPasswordSuccessView = SetupPasswordSuccessView;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordSuccessView/SetupPasswordSuccessView.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export type SetupPasswordSuccessViewProps = {
+    onDone: () => void;
+};
+export declare const SetupPasswordSuccessView: FC<SetupPasswordSuccessViewProps>;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordSuccessView/SetupPasswordSuccessView.js

@@ -0,0 +1,23 @@
+'use client'
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Icon } from '../../../../components/Icon/Icon.js';
+import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
+import { ReactComponent as SvgCheckCircleFilled } from '../../../../shared/assets/check-circle-filled.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+
+const SetupPasswordSuccessView = ({ onDone, }) => {
+    const { t } = useTranslation();
+    const handleDone = useCallback(() => {
+        onDone();
+    }, [onDone]);
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.success.title', children: t('dyn_setup_password.success.title') }) }), jsxs("div", { className: 'setup-password-success-view', children: [jsx("div", { className: 'setup-password-success-view__content', children: jsxs("div", { className: 'setup-password-success-view__body', children: [jsx("div", { className: 'setup-password-success-view__icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgCheckCircleFilled, { width: 64, height: 64 }) }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.success.description', className: 'setup-password-success-view__description', children: t('dyn_setup_password.success.description') })] }) }), jsx("div", { className: 'setup-password-success-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-success-done-button', onClick: handleDone, copykey: 'dyn_setup_password.button.done', buttonVariant: 'brand-primary', typographyProps: {
+                                color: 'inherit',
+                            }, expanded: true, children: t('dyn_setup_password.button.done') }) })] })] }));
+};
+
+export { SetupPasswordSuccessView };

package/src/lib/widgets/DynamicWidget/views/SetupPasswordSuccessView/index.d.ts

@@ -0,0 +1,2 @@
+export { SetupPasswordSuccessView } from './SetupPasswordSuccessView';
+export type { SetupPasswordSuccessViewProps } from './SetupPasswordSuccessView';

package/src/lib/widgets/DynamicWidget/views/SetupPasswordTermsView/SetupPasswordTermsView.cjs

@@ -0,0 +1,37 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var Checkbox = require('../../../../components/Checkbox/Checkbox.cjs');
+var Icon = require('../../../../components/Icon/Icon.cjs');
+var IconButton = require('../../../../components/IconButton/IconButton.cjs');
+var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+var warningCircleOrange = require('../../../../shared/assets/warning-circle-orange.cjs');
+
+const SetupPasswordTermsView = ({ onContinue, onBack, }) => {
+    const { t } = reactI18next.useTranslation();
+    const [checkedItems, setCheckedItems] = React.useState({
+        term1: false,
+        term2: false,
+        term3: false,
+    });
+    const handleCheckboxChange = React.useCallback((termKey) => {
+        setCheckedItems((prev) => (Object.assign(Object.assign({}, prev), { [termKey]: !prev[termKey] })));
+    }, []);
+    const allChecked = Object.values(checkedItems).every(Boolean);
+    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-terms-back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.terms.title', children: t('dyn_setup_password.terms.title') }) }), jsxRuntime.jsx("div", { className: 'setup-password-terms-view', children: jsxRuntime.jsxs("div", { className: 'setup-password-terms-view__body', children: [jsxRuntime.jsx("div", { className: 'setup-password-terms-view__icon-container', children: jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(warningCircleOrange.ReactComponent, { width: 64, height: 64 }) }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.terms.description', className: 'setup-password-terms-view__description', children: t('dyn_setup_password.terms.description') }), jsxRuntime.jsxs("div", { className: 'setup-password-terms-view__checkboxes', children: [jsxRuntime.jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsxRuntime.jsx(Checkbox.Checkbox, { checked: checkedItems.term1, onChange: () => handleCheckboxChange('term1'), ariaLabel: t('dyn_setup_password.terms.checkbox_1') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_1', children: t('dyn_setup_password.terms.checkbox_1') })] }), jsxRuntime.jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsxRuntime.jsx(Checkbox.Checkbox, { checked: checkedItems.term2, onChange: () => handleCheckboxChange('term2'), ariaLabel: t('dyn_setup_password.terms.checkbox_2') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_2', children: t('dyn_setup_password.terms.checkbox_2') })] }), jsxRuntime.jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsxRuntime.jsx(Checkbox.Checkbox, { checked: checkedItems.term3, onChange: () => handleCheckboxChange('term3'), ariaLabel: t('dyn_setup_password.terms.checkbox_3') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_3', children: t('dyn_setup_password.terms.checkbox_3') })] })] }), jsxRuntime.jsx("div", { className: 'setup-password-terms-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-terms-continue-button', onClick: onContinue, disabled: !allChecked, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
+                                    color: 'inherit',
+                                }, expanded: true, children: t('dyn_setup_password.button.continue') }) })] }) })] }));
+};
+
+exports.SetupPasswordTermsView = SetupPasswordTermsView;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordTermsView/SetupPasswordTermsView.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export type SetupPasswordTermsViewProps = {
+    onContinue: () => void;
+    onBack: () => void;
+};
+export declare const SetupPasswordTermsView: FC<SetupPasswordTermsViewProps>;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordTermsView/SetupPasswordTermsView.js

@@ -0,0 +1,33 @@
+'use client'
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Checkbox } from '../../../../components/Checkbox/Checkbox.js';
+import { Icon } from '../../../../components/Icon/Icon.js';
+import { IconButton } from '../../../../components/IconButton/IconButton.js';
+import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
+import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgWarningCircleOrange } from '../../../../shared/assets/warning-circle-orange.js';
+
+const SetupPasswordTermsView = ({ onContinue, onBack, }) => {
+    const { t } = useTranslation();
+    const [checkedItems, setCheckedItems] = useState({
+        term1: false,
+        term2: false,
+        term3: false,
+    });
+    const handleCheckboxChange = useCallback((termKey) => {
+        setCheckedItems((prev) => (Object.assign(Object.assign({}, prev), { [termKey]: !prev[termKey] })));
+    }, []);
+    const allChecked = Object.values(checkedItems).every(Boolean);
+    const backButton = (jsx(IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-terms-back-button', children: jsx(SvgChevronLeft, {}) }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.terms.title', children: t('dyn_setup_password.terms.title') }) }), jsx("div", { className: 'setup-password-terms-view', children: jsxs("div", { className: 'setup-password-terms-view__body', children: [jsx("div", { className: 'setup-password-terms-view__icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgWarningCircleOrange, { width: 64, height: 64 }) }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.terms.description', className: 'setup-password-terms-view__description', children: t('dyn_setup_password.terms.description') }), jsxs("div", { className: 'setup-password-terms-view__checkboxes', children: [jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsx(Checkbox, { checked: checkedItems.term1, onChange: () => handleCheckboxChange('term1'), ariaLabel: t('dyn_setup_password.terms.checkbox_1') }), jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_1', children: t('dyn_setup_password.terms.checkbox_1') })] }), jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsx(Checkbox, { checked: checkedItems.term2, onChange: () => handleCheckboxChange('term2'), ariaLabel: t('dyn_setup_password.terms.checkbox_2') }), jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_2', children: t('dyn_setup_password.terms.checkbox_2') })] }), jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsx(Checkbox, { checked: checkedItems.term3, onChange: () => handleCheckboxChange('term3'), ariaLabel: t('dyn_setup_password.terms.checkbox_3') }), jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_3', children: t('dyn_setup_password.terms.checkbox_3') })] })] }), jsx("div", { className: 'setup-password-terms-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-terms-continue-button', onClick: onContinue, disabled: !allChecked, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
+                                    color: 'inherit',
+                                }, expanded: true, children: t('dyn_setup_password.button.continue') }) })] }) })] }));
+};
+
+export { SetupPasswordTermsView };

package/src/lib/widgets/DynamicWidget/views/SetupPasswordTermsView/index.d.ts

@@ -0,0 +1,2 @@
+export { SetupPasswordTermsView } from './SetupPasswordTermsView';
+export type { SetupPasswordTermsViewProps } from './SetupPasswordTermsView';

package/src/lib/widgets/DynamicWidget/views/SetupPasswordView/SetupPasswordView.cjs

@@ -0,0 +1,76 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
+var SetupPasswordTermsView = require('../SetupPasswordTermsView/SetupPasswordTermsView.cjs');
+var SetupPasswordEnterView = require('../SetupPasswordEnterView/SetupPasswordEnterView.cjs');
+require('../../../../../../_virtual/_tslib.cjs');
+require('@dynamic-labs/utils');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+var SetupPasswordConfirmView = require('../SetupPasswordConfirmView/SetupPasswordConfirmView.cjs');
+var SetupPasswordKnowledgeCheckView = require('../SetupPasswordKnowledgeCheckView/SetupPasswordKnowledgeCheckView.cjs');
+var SetupPasswordSuccessView = require('../SetupPasswordSuccessView/SetupPasswordSuccessView.cjs');
+
+const SetupPasswordView = ({ onComplete, skipKnowledgeCheck = false, }) => {
+    const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
+    const [currentStep, setCurrentStep] = React.useState('terms');
+    const [password, setPassword] = React.useState('');
+    const goToAccountAndSecurity = React.useCallback(() => {
+        setDynamicWidgetView('account-and-security-settings');
+    }, [setDynamicWidgetView]);
+    const handleTermsContinue = React.useCallback(() => {
+        setCurrentStep('enter');
+    }, []);
+    const handleEnterContinue = React.useCallback((newPassword) => {
+        setPassword(newPassword);
+        setCurrentStep('confirm');
+    }, []);
+    const handleEnterBack = React.useCallback(() => {
+        setCurrentStep('terms');
+    }, []);
+    const handleConfirmContinue = React.useCallback(() => {
+        if (skipKnowledgeCheck) {
+            setCurrentStep('success');
+        }
+        else {
+            setCurrentStep('knowledge-check');
+        }
+    }, [skipKnowledgeCheck]);
+    const handleConfirmBack = React.useCallback(() => {
+        setCurrentStep('enter');
+    }, []);
+    const handleKnowledgeCheckContinue = React.useCallback(() => {
+        setCurrentStep('success');
+    }, []);
+    const handleKnowledgeCheckBack = React.useCallback(() => {
+        setCurrentStep('confirm');
+    }, []);
+    const handleKnowledgeCheckReviewTerms = React.useCallback(() => {
+        setCurrentStep('terms');
+    }, []);
+    const handleSuccess = React.useCallback(() => {
+        onComplete(password);
+        goToAccountAndSecurity();
+    }, [onComplete, password, goToAccountAndSecurity]);
+    switch (currentStep) {
+        case 'terms':
+            return (jsxRuntime.jsx(SetupPasswordTermsView.SetupPasswordTermsView, { onContinue: handleTermsContinue, onBack: goToAccountAndSecurity }));
+        case 'enter':
+            return (jsxRuntime.jsx(SetupPasswordEnterView.SetupPasswordEnterView, { onContinue: handleEnterContinue, onBack: handleEnterBack }));
+        case 'confirm':
+            return (jsxRuntime.jsx(SetupPasswordConfirmView.SetupPasswordConfirmView, { password: password, onContinue: handleConfirmContinue, onBack: handleConfirmBack }));
+        case 'knowledge-check':
+            return (jsxRuntime.jsx(SetupPasswordKnowledgeCheckView.SetupPasswordKnowledgeCheckView, { onContinue: handleKnowledgeCheckContinue, onBack: handleKnowledgeCheckBack, onReviewTerms: handleKnowledgeCheckReviewTerms }));
+        case 'success':
+            return jsxRuntime.jsx(SetupPasswordSuccessView.SetupPasswordSuccessView, { onDone: handleSuccess });
+        default:
+            return null;
+    }
+};
+
+exports.SetupPasswordView = SetupPasswordView;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordView/SetupPasswordView.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export type SetupPasswordViewProps = {
+    onComplete: (password: string) => void;
+    skipKnowledgeCheck?: boolean;
+};
+export declare const SetupPasswordView: FC<SetupPasswordViewProps>;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordView/SetupPasswordView.js

@@ -0,0 +1,72 @@
+'use client'
+import { jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
+import { SetupPasswordTermsView } from '../SetupPasswordTermsView/SetupPasswordTermsView.js';
+import { SetupPasswordEnterView } from '../SetupPasswordEnterView/SetupPasswordEnterView.js';
+import '../../../../../../_virtual/_tslib.js';
+import '@dynamic-labs/utils';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import { SetupPasswordConfirmView } from '../SetupPasswordConfirmView/SetupPasswordConfirmView.js';
+import { SetupPasswordKnowledgeCheckView } from '../SetupPasswordKnowledgeCheckView/SetupPasswordKnowledgeCheckView.js';
+import { SetupPasswordSuccessView } from '../SetupPasswordSuccessView/SetupPasswordSuccessView.js';
+
+const SetupPasswordView = ({ onComplete, skipKnowledgeCheck = false, }) => {
+    const { setDynamicWidgetView } = useWidgetContext();
+    const [currentStep, setCurrentStep] = useState('terms');
+    const [password, setPassword] = useState('');
+    const goToAccountAndSecurity = useCallback(() => {
+        setDynamicWidgetView('account-and-security-settings');
+    }, [setDynamicWidgetView]);
+    const handleTermsContinue = useCallback(() => {
+        setCurrentStep('enter');
+    }, []);
+    const handleEnterContinue = useCallback((newPassword) => {
+        setPassword(newPassword);
+        setCurrentStep('confirm');
+    }, []);
+    const handleEnterBack = useCallback(() => {
+        setCurrentStep('terms');
+    }, []);
+    const handleConfirmContinue = useCallback(() => {
+        if (skipKnowledgeCheck) {
+            setCurrentStep('success');
+        }
+        else {
+            setCurrentStep('knowledge-check');
+        }
+    }, [skipKnowledgeCheck]);
+    const handleConfirmBack = useCallback(() => {
+        setCurrentStep('enter');
+    }, []);
+    const handleKnowledgeCheckContinue = useCallback(() => {
+        setCurrentStep('success');
+    }, []);
+    const handleKnowledgeCheckBack = useCallback(() => {
+        setCurrentStep('confirm');
+    }, []);
+    const handleKnowledgeCheckReviewTerms = useCallback(() => {
+        setCurrentStep('terms');
+    }, []);
+    const handleSuccess = useCallback(() => {
+        onComplete(password);
+        goToAccountAndSecurity();
+    }, [onComplete, password, goToAccountAndSecurity]);
+    switch (currentStep) {
+        case 'terms':
+            return (jsx(SetupPasswordTermsView, { onContinue: handleTermsContinue, onBack: goToAccountAndSecurity }));
+        case 'enter':
+            return (jsx(SetupPasswordEnterView, { onContinue: handleEnterContinue, onBack: handleEnterBack }));
+        case 'confirm':
+            return (jsx(SetupPasswordConfirmView, { password: password, onContinue: handleConfirmContinue, onBack: handleConfirmBack }));
+        case 'knowledge-check':
+            return (jsx(SetupPasswordKnowledgeCheckView, { onContinue: handleKnowledgeCheckContinue, onBack: handleKnowledgeCheckBack, onReviewTerms: handleKnowledgeCheckReviewTerms }));
+        case 'success':
+            return jsx(SetupPasswordSuccessView, { onDone: handleSuccess });
+        default:
+            return null;
+    }
+};
+
+export { SetupPasswordView };

package/src/lib/widgets/DynamicWidget/views/SetupPasswordView/index.d.ts

@@ -0,0 +1,2 @@
+export { SetupPasswordView } from './SetupPasswordView';
+export type { SetupPasswordViewProps } from './SetupPasswordView';

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupInfoView.cjs

@@ -13,8 +13,8 @@ var Typography = require('../../../../components/Typography/Typography.cjs');
 var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
 var cautionTriangle = require('../../../../shared/assets/caution-triangle.cjs');
 var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
-require('@dynamic-labs/iconic');
 var filledQuestionMark = require('../../../../shared/assets/filled-question-mark.cjs');
+require('@dynamic-labs/iconic');
 
 const WaasBackupInfoView = () => {
     const { goBack } = ViewContext.useViewContext();

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupInfoView.js

@@ -9,8 +9,8 @@ import { Typography } from '../../../../components/Typography/Typography.js';
 import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgCautionTriangle } from '../../../../shared/assets/caution-triangle.js';
 import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
-import '@dynamic-labs/iconic';
 import { ReactComponent as SvgFilledQuestionMark } from '../../../../shared/assets/filled-question-mark.js';
+import '@dynamic-labs/iconic';
 
 const WaasBackupInfoView = () => {
     const { goBack } = useViewContext();

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupSuccessView.cjs

@@ -15,10 +15,10 @@ require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
+var backupWaas = require('../../../../shared/assets/backup-waas.cjs');
 var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
 var questionMark = require('../../../../shared/assets/question-mark.cjs');
 var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
-var backupWaas = require('../../../../shared/assets/backup-waas.cjs');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupSuccessView.js

@@ -11,10 +11,10 @@ import '../../../../context/DynamicContext/DynamicContext.js';
 import '../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
+import { ReactComponent as SvgBackupWaas } from '../../../../shared/assets/backup-waas.js';
 import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
 import { ReactComponent as SvgQuestionMark } from '../../../../shared/assets/question-mark.js';
 import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
-import { ReactComponent as SvgBackupWaas } from '../../../../shared/assets/backup-waas.js';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupView.cjs

@@ -16,10 +16,10 @@ require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
+var backupWaas = require('../../../../shared/assets/backup-waas.cjs');
 var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
 var questionMark = require('../../../../shared/assets/question-mark.cjs');
 var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
-var backupWaas = require('../../../../shared/assets/backup-waas.cjs');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupView.js

@@ -12,10 +12,10 @@ import '../../../../context/DynamicContext/DynamicContext.js';
 import '../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
+import { ReactComponent as SvgBackupWaas } from '../../../../shared/assets/backup-waas.js';
 import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
 import { ReactComponent as SvgQuestionMark } from '../../../../shared/assets/question-mark.js';
 import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
-import { ReactComponent as SvgBackupWaas } from '../../../../shared/assets/backup-waas.js';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';

package/src/lib/widgets/DynamicWidget/views/index.d.ts

@@ -6,6 +6,12 @@ export { ManagePasskeysWidgetView } from './ManagePasskeysWidgetView';
 export { SettingsView } from './SettingsView';
 export { AccountAndSecuritySettingsView } from './AccountAndSecuritySettingsView';
 export { SessionManagementView } from './SessionManagementView';
+export { SetupPasswordView } from './SetupPasswordView';
+export { SetupPasswordTermsView } from './SetupPasswordTermsView';
+export { SetupPasswordEnterView } from './SetupPasswordEnterView';
+export { SetupPasswordConfirmView } from './SetupPasswordConfirmView';
+export { SetupPasswordKnowledgeCheckView } from './SetupPasswordKnowledgeCheckView';
+export { SetupPasswordSuccessView } from './SetupPasswordSuccessView';
 export { WalletsDelegatedSettingsView } from './WalletsDelegatedSettingsView';
 export { WaasBackupView } from './WaasBackupView';
 export { WaasBackupInfoView } from './WaasBackupView';