saafe-redirection-flow 2.0.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/.github/workflows/build-and-deploy.yml +41 -0
- package/.gitlab-ci.yml +108 -0
- package/.releaserc.json +18 -0
- package/.storybook/main.ts +28 -0
- package/.storybook/preview.ts +16 -0
- package/.storybook/vitest.setup.ts +9 -0
- package/.vite/deps/@radix-ui_react-avatar.js +230 -0
- package/.vite/deps/@radix-ui_react-avatar.js.map +7 -0
- package/.vite/deps/@radix-ui_react-slot.js +12 -0
- package/.vite/deps/@radix-ui_react-slot.js.map +7 -0
- package/.vite/deps/_metadata.json +79 -0
- package/.vite/deps/chunk-5VGQBUCU.js +597 -0
- package/.vite/deps/chunk-5VGQBUCU.js.map +7 -0
- package/.vite/deps/chunk-DC5AMYBS.js +38 -0
- package/.vite/deps/chunk-DC5AMYBS.js.map +7 -0
- package/.vite/deps/chunk-HUIEPYH7.js +11265 -0
- package/.vite/deps/chunk-HUIEPYH7.js.map +7 -0
- package/.vite/deps/chunk-TKHB4QMX.js +281 -0
- package/.vite/deps/chunk-TKHB4QMX.js.map +7 -0
- package/.vite/deps/chunk-YLDSBLSF.js +1139 -0
- package/.vite/deps/chunk-YLDSBLSF.js.map +7 -0
- package/.vite/deps/class-variance-authority.js +63 -0
- package/.vite/deps/class-variance-authority.js.map +7 -0
- package/.vite/deps/lucide-react.js +36984 -0
- package/.vite/deps/lucide-react.js.map +7 -0
- package/.vite/deps/package.json +3 -0
- package/.vite/deps/react-dom_client.js +17917 -0
- package/.vite/deps/react-dom_client.js.map +7 -0
- package/.vite/deps/react-router-dom.js +452 -0
- package/.vite/deps/react-router-dom.js.map +7 -0
- package/.vite/deps/react-router.js +234 -0
- package/.vite/deps/react-router.js.map +7 -0
- package/.vite/deps/react.js +5 -0
- package/.vite/deps/react.js.map +7 -0
- package/.vite/deps/react_jsx-dev-runtime.js +470 -0
- package/.vite/deps/react_jsx-dev-runtime.js.map +7 -0
- package/CHANGELOG.md +420 -0
- package/LICENSE +21 -0
- package/README.md +129 -0
- package/RELEASE_CHEATSHEET.md +93 -0
- package/RELEASE_NOTES.md +120 -0
- package/components.json +21 -0
- package/docs/DEPLOYMENT_WORKFLOW.md +262 -0
- package/docs/RELEASE_GUIDE.md +591 -0
- package/docs/architecture.md +432 -0
- package/docs/components.md +199 -0
- package/docs/index.md +69 -0
- package/docs/local-release-workflow.md +234 -0
- package/docs/routes.md +118 -0
- package/docs/sdk-integration.md +325 -0
- package/docs/semantic-release.md +124 -0
- package/docs/user-flow.md +206 -0
- package/eslint.config.js +28 -0
- package/index.html +19 -0
- package/install.sh +198 -0
- package/package.json +115 -0
- package/public/images/bank-logo.png +0 -0
- package/public/saafe-icon.svg +9 -0
- package/src/App.tsx +171 -0
- package/src/__tests__/url-parameters.test.ts +82 -0
- package/src/assets/brand/applestore.svg +13 -0
- package/src/assets/brand/playstore.svg +23 -0
- package/src/assets/brand/saafe-color-white-logo.svg +14 -0
- package/src/assets/brand/saafe-icon.svg +9 -0
- package/src/assets/brand/saafe-logo.svg +18 -0
- package/src/assets/icons/check-icon-dark.svg +27 -0
- package/src/assets/icons/check-icon.svg +23 -0
- package/src/components/ErrorBoundary.tsx +132 -0
- package/src/components/alert/alert.tsx +27 -0
- package/src/components/auth/AuthGuard.tsx +76 -0
- package/src/components/cards/BankCard.stories.tsx +69 -0
- package/src/components/cards/BankCard.tsx +227 -0
- package/src/components/cards/OuterCard.tsx +109 -0
- package/src/components/cards/WrapperCard.tsx +64 -0
- package/src/components/documents/PrivacyContent.tsx +1 -0
- package/src/components/dummyFooter.tsx +29 -0
- package/src/components/icons/github.tsx +12 -0
- package/src/components/language/LanguageSwitcher.tsx +44 -0
- package/src/components/layouts/FrostedLayout.stories.tsx +42 -0
- package/src/components/layouts/FrostedLayout.tsx +333 -0
- package/src/components/layouts/MobileLayout.tsx +403 -0
- package/src/components/mobile-background.tsx +136 -0
- package/src/components/mobileAppDownload.tsx +30 -0
- package/src/components/modal/ModalComp.tsx +27 -0
- package/src/components/mode-toggle.tsx +36 -0
- package/src/components/page-header.tsx +50 -0
- package/src/components/session/SessionTimeoutScreen.tsx +134 -0
- package/src/components/session/SessionTimer.tsx +173 -0
- package/src/components/step-navigation.tsx +87 -0
- package/src/components/title/AppBar.stories.tsx +50 -0
- package/src/components/title/AppBar.tsx +150 -0
- package/src/components/title/SectionTitle.tsx +31 -0
- package/src/components/ui/AnimatedButton.module.css +13 -0
- package/src/components/ui/alert.tsx +66 -0
- package/src/components/ui/animatedButton.tsx +111 -0
- package/src/components/ui/avatar.tsx +51 -0
- package/src/components/ui/badge.tsx +36 -0
- package/src/components/ui/bottom-sheet.tsx +122 -0
- package/src/components/ui/button.tsx +59 -0
- package/src/components/ui/calendar.tsx +86 -0
- package/src/components/ui/card.tsx +92 -0
- package/src/components/ui/checkbox.stories.tsx +49 -0
- package/src/components/ui/checkbox.tsx +67 -0
- package/src/components/ui/collapsible.tsx +45 -0
- package/src/components/ui/dialog.tsx +134 -0
- package/src/components/ui/document-link.tsx +26 -0
- package/src/components/ui/dot-stepper.tsx +57 -0
- package/src/components/ui/dropdown-menu.tsx +255 -0
- package/src/components/ui/form.tsx +165 -0
- package/src/components/ui/frosted-panel.stories.tsx +86 -0
- package/src/components/ui/frosted-panel.tsx +276 -0
- package/src/components/ui/input.tsx +39 -0
- package/src/components/ui/label.stories.tsx +67 -0
- package/src/components/ui/label.tsx +23 -0
- package/src/components/ui/mobile-footer.tsx +54 -0
- package/src/components/ui/modal.tsx +90 -0
- package/src/components/ui/otp-input.stories.tsx +62 -0
- package/src/components/ui/otp-input.tsx +221 -0
- package/src/components/ui/platform-specific-behavior.tsx +28 -0
- package/src/components/ui/popover.tsx +46 -0
- package/src/components/ui/progress.tsx +103 -0
- package/src/components/ui/radio-group.tsx +45 -0
- package/src/components/ui/scroll-area.tsx +56 -0
- package/src/components/ui/sdk-params-docs.tsx +53 -0
- package/src/components/ui/select.tsx +159 -0
- package/src/components/ui/separator.tsx +28 -0
- package/src/components/ui/sheet.tsx +137 -0
- package/src/components/ui/sidebar.tsx +724 -0
- package/src/components/ui/skeleton.stories.tsx +50 -0
- package/src/components/ui/skeleton.tsx +15 -0
- package/src/components/ui/sonner.tsx +23 -0
- package/src/components/ui/step.stories.tsx +132 -0
- package/src/components/ui/step.tsx +234 -0
- package/src/components/ui/stepper-progress.tsx +136 -0
- package/src/components/ui/stepper.tsx +259 -0
- package/src/components/ui/tabs.tsx +55 -0
- package/src/components/ui/tooltip.tsx +61 -0
- package/src/components/ui/url-decode-loader.tsx +36 -0
- package/src/components/ui/version-display.tsx +104 -0
- package/src/components/ui/web-footer.tsx +36 -0
- package/src/config/environments.ts +99 -0
- package/src/config/urls.ts +53 -0
- package/src/const/fiTypeCategoryMap.ts +19 -0
- package/src/contexts/LanguageContext.tsx +41 -0
- package/src/contexts/RTLContext.tsx +42 -0
- package/src/contexts/ThemeContext.tsx +93 -0
- package/src/hooks/use-account-discovery.ts +205 -0
- package/src/hooks/use-auth-query.ts +141 -0
- package/src/hooks/use-fip-query.ts +72 -0
- package/src/hooks/use-media-query.ts +32 -0
- package/src/hooks/use-mobile.ts +24 -0
- package/src/hooks/use-page-title.tsx +48 -0
- package/src/hooks/use-platform.ts +52 -0
- package/src/hooks/use-trusted-count.ts +21 -0
- package/src/hooks/use-url-decode.ts +90 -0
- package/src/hooks/useStep.ts +170 -0
- package/src/index.css +154 -0
- package/src/interfaces/app.interfaces.ts +39 -0
- package/src/interfaces/services.interfaces.ts +65 -0
- package/src/lib/i18n.ts +68 -0
- package/src/lib/utils.ts +6 -0
- package/src/locales/en/common.json +167 -0
- package/src/locales/hi/common.json +137 -0
- package/src/locales/kn/common.json +137 -0
- package/src/locales/ml/common.json +137 -0
- package/src/locales/ta/common.json +137 -0
- package/src/locales/te/common.json +137 -0
- package/src/locales/ur/common.json +138 -0
- package/src/main.tsx +46 -0
- package/src/pages/Login.tsx +363 -0
- package/src/pages/accounts/AccountsToProceed.tsx +396 -0
- package/src/pages/accounts/Discover.tsx +76 -0
- package/src/pages/accounts/DiscoverAccount.tsx +751 -0
- package/src/pages/accounts/LinkSelectedAccounts.tsx +638 -0
- package/src/pages/accounts/OldUser.tsx +329 -0
- package/src/pages/accounts/link-accounts.tsx +913 -0
- package/src/pages/consent/ReviewConsent.tsx +836 -0
- package/src/pages/consent/rejected.tsx +253 -0
- package/src/pages/consent/success.tsx +220 -0
- package/src/providers/query-provider.tsx +24 -0
- package/src/providers/toast-provider.tsx +26 -0
- package/src/services/api/account.service.ts +296 -0
- package/src/services/api/auth.service.ts +206 -0
- package/src/services/api/axios.ts +138 -0
- package/src/services/api/consent.service.ts +142 -0
- package/src/services/api/decode.service.ts +53 -0
- package/src/services/api/feedback.service.ts +34 -0
- package/src/services/api/fip.service.ts +187 -0
- package/src/services/api/index.ts +9 -0
- package/src/services/api/public.service.ts +18 -0
- package/src/services/api.ts +2 -0
- package/src/services/postMessage.service.ts +179 -0
- package/src/store/NavigationBlockContext.tsx +34 -0
- package/src/store/auth.store.ts +79 -0
- package/src/store/fip.store.ts +396 -0
- package/src/store/mandatoryConsent.store.ts +24 -0
- package/src/store/redirect.store.ts +73 -0
- package/src/store/step.store.ts +124 -0
- package/src/stories/Button.stories.ts +53 -0
- package/src/stories/Button.tsx +37 -0
- package/src/stories/Configure.mdx +364 -0
- package/src/stories/Header.stories.ts +33 -0
- package/src/stories/Header.tsx +56 -0
- package/src/stories/Page.stories.ts +32 -0
- package/src/stories/Page.tsx +73 -0
- package/src/stories/button.css +30 -0
- package/src/stories/header.css +32 -0
- package/src/stories/page.css +68 -0
- package/src/styles/rtl-utils.css +90 -0
- package/src/styles/rtl.css +105 -0
- package/src/utils/api-error.ts +26 -0
- package/src/utils/cn.ts +10 -0
- package/src/utils/error-callback.ts +116 -0
- package/src/utils/formatAccountNumber.ts +9 -0
- package/src/utils/handleIdentifiers.ts +90 -0
- package/src/utils/posthog.ts +67 -0
- package/src/utils/toast-helpers.ts +61 -0
- package/src/vite-env.d.ts +1 -0
- package/stage-aa-2506251021.zip +0 -0
- package/tsconfig.app.json +33 -0
- package/tsconfig.json +13 -0
- package/tsconfig.node.json +24 -0
- package/vite.config.ts +45 -0
- package/vitest.shims.d.ts +1 -0
- package/vitest.workspace.ts +46 -0
@@ -0,0 +1,67 @@
|
|
1
|
+
'use client'
|
2
|
+
|
3
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
|
4
|
+
import * as React from 'react'
|
5
|
+
|
6
|
+
import { cn } from '@/lib/utils'
|
7
|
+
|
8
|
+
interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
|
9
|
+
tickSize?: string
|
10
|
+
error?: boolean
|
11
|
+
errorMessage?: string
|
12
|
+
}
|
13
|
+
|
14
|
+
const Checkbox = React.forwardRef<
|
15
|
+
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
16
|
+
CheckboxProps
|
17
|
+
>(({ className, tickSize = '12', error, errorMessage, ...props }, ref) => (
|
18
|
+
<div className="flex flex-col gap-1 relative">
|
19
|
+
<CheckboxPrimitive.Root
|
20
|
+
ref={ref}
|
21
|
+
className={cn(
|
22
|
+
'peer size-6 shrink-0 rounded border border-input shadow-sm shadow-black/5 outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=indeterminate]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:text-primary-foreground cursor-pointer',
|
23
|
+
error && 'border-destructive',
|
24
|
+
className
|
25
|
+
)}
|
26
|
+
{...props}
|
27
|
+
>
|
28
|
+
<CheckboxPrimitive.Indicator className='flex items-center justify-center text-current'>
|
29
|
+
{props.checked === 'indeterminate' ? (
|
30
|
+
<svg
|
31
|
+
width={tickSize}
|
32
|
+
height={tickSize}
|
33
|
+
viewBox='0 0 9 9'
|
34
|
+
fill='currentcolor'
|
35
|
+
xmlns='http://www.w3.org/2000/svg'
|
36
|
+
>
|
37
|
+
<path
|
38
|
+
fillRule='evenodd'
|
39
|
+
clipRule='evenodd'
|
40
|
+
d='M0.75 4.5C0.75 4.08579 1.08579 3.75 1.5 3.75H7.5C7.91421 3.75 8.25 4.08579 8.25 4.5C8.25 4.91421 7.91421 5.25 7.5 5.25H1.5C1.08579 5.25 0.75 4.91421 0.75 4.5Z'
|
41
|
+
/>
|
42
|
+
</svg>
|
43
|
+
) : (
|
44
|
+
<svg
|
45
|
+
width={tickSize}
|
46
|
+
height={tickSize}
|
47
|
+
viewBox='0 0 9 9'
|
48
|
+
fill='currentcolor'
|
49
|
+
xmlns='http://www.w3.org/2000/svg'
|
50
|
+
>
|
51
|
+
<path
|
52
|
+
fillRule='evenodd'
|
53
|
+
clipRule='evenodd'
|
54
|
+
d='M8.53547 0.62293C8.88226 0.849446 8.97976 1.3142 8.75325 1.66099L4.5083 8.1599C4.38833 8.34356 4.19397 8.4655 3.9764 8.49358C3.75883 8.52167 3.53987 8.45309 3.3772 8.30591L0.616113 5.80777C0.308959 5.52987 0.285246 5.05559 0.563148 4.74844C0.84105 4.44128 1.31533 4.41757 1.62249 4.69547L3.73256 6.60459L7.49741 0.840706C7.72393 0.493916 8.18868 0.396414 8.53547 0.62293Z'
|
55
|
+
/>
|
56
|
+
</svg>
|
57
|
+
)}
|
58
|
+
</CheckboxPrimitive.Indicator>
|
59
|
+
</CheckboxPrimitive.Root>
|
60
|
+
{error && errorMessage && (
|
61
|
+
<p className="text-sm text-destructive absolute top-7 w-[400px]">{errorMessage}</p>
|
62
|
+
)}
|
63
|
+
</div>
|
64
|
+
))
|
65
|
+
Checkbox.displayName = CheckboxPrimitive.Root.displayName
|
66
|
+
|
67
|
+
export { Checkbox }
|
@@ -0,0 +1,45 @@
|
|
1
|
+
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
|
2
|
+
import { AnimatePresence, motion } from "framer-motion"
|
3
|
+
|
4
|
+
function Collapsible({
|
5
|
+
children,
|
6
|
+
...props
|
7
|
+
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
|
8
|
+
return <CollapsiblePrimitive.Root {...props}>{children}</CollapsiblePrimitive.Root>
|
9
|
+
}
|
10
|
+
|
11
|
+
function CollapsibleTrigger({
|
12
|
+
...props
|
13
|
+
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
|
14
|
+
return <CollapsiblePrimitive.CollapsibleTrigger {...props} />
|
15
|
+
}
|
16
|
+
|
17
|
+
function CollapsibleContent({
|
18
|
+
children,
|
19
|
+
className,
|
20
|
+
open,
|
21
|
+
}: {
|
22
|
+
children: React.ReactNode
|
23
|
+
className?: string
|
24
|
+
open: boolean
|
25
|
+
}) {
|
26
|
+
return (
|
27
|
+
<AnimatePresence initial={false}>
|
28
|
+
{open && (
|
29
|
+
<motion.div
|
30
|
+
key="collapsible-content"
|
31
|
+
initial={{ height: 0, opacity: 0 }}
|
32
|
+
animate={{ height: "auto", opacity: 1 }}
|
33
|
+
exit={{ height: 0, opacity: 0 }}
|
34
|
+
transition={{ duration: 0.3, ease: "easeInOut" }}
|
35
|
+
className={`overflow-hidden ${className}`}
|
36
|
+
>
|
37
|
+
{children}
|
38
|
+
</motion.div>
|
39
|
+
)}
|
40
|
+
</AnimatePresence>
|
41
|
+
)
|
42
|
+
}
|
43
|
+
|
44
|
+
|
45
|
+
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
|
@@ -0,0 +1,134 @@
|
|
1
|
+
import * as React from "react"
|
2
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
3
|
+
import { XIcon } from "lucide-react"
|
4
|
+
|
5
|
+
import { cn } from "@/lib/utils"
|
6
|
+
|
7
|
+
function Dialog({
|
8
|
+
...props
|
9
|
+
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
10
|
+
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
11
|
+
}
|
12
|
+
|
13
|
+
function DialogTrigger({
|
14
|
+
...props
|
15
|
+
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
16
|
+
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
17
|
+
}
|
18
|
+
|
19
|
+
function DialogPortal({
|
20
|
+
...props
|
21
|
+
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
22
|
+
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
23
|
+
}
|
24
|
+
|
25
|
+
function DialogClose({
|
26
|
+
...props
|
27
|
+
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
28
|
+
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
29
|
+
}
|
30
|
+
|
31
|
+
function DialogOverlay({
|
32
|
+
className,
|
33
|
+
...props
|
34
|
+
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
35
|
+
return (
|
36
|
+
<DialogPrimitive.Overlay
|
37
|
+
data-slot="dialog-overlay"
|
38
|
+
className={cn(
|
39
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
40
|
+
className
|
41
|
+
)}
|
42
|
+
{...props}
|
43
|
+
/>
|
44
|
+
)
|
45
|
+
}
|
46
|
+
|
47
|
+
function DialogContent({
|
48
|
+
withCloseIcon = true,
|
49
|
+
className,
|
50
|
+
children,
|
51
|
+
...props
|
52
|
+
}: React.ComponentProps<typeof DialogPrimitive.Content>) {
|
53
|
+
return (
|
54
|
+
<DialogPortal data-slot="dialog-portal">
|
55
|
+
<DialogOverlay />
|
56
|
+
<DialogPrimitive.Content
|
57
|
+
data-slot="dialog-content"
|
58
|
+
className={cn(
|
59
|
+
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[30%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border p-7 shadow-lg duration-200 sm:max-w-lg",
|
60
|
+
className
|
61
|
+
)}
|
62
|
+
{...props}
|
63
|
+
>
|
64
|
+
{children}
|
65
|
+
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-6 right-6 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer">
|
66
|
+
{withCloseIcon ? <XIcon /> : null}
|
67
|
+
<span className="sr-only">Close</span>
|
68
|
+
</DialogPrimitive.Close>
|
69
|
+
</DialogPrimitive.Content>
|
70
|
+
</DialogPortal>
|
71
|
+
)
|
72
|
+
}
|
73
|
+
|
74
|
+
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
75
|
+
return (
|
76
|
+
<div
|
77
|
+
data-slot="dialog-header"
|
78
|
+
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
79
|
+
{...props}
|
80
|
+
/>
|
81
|
+
)
|
82
|
+
}
|
83
|
+
|
84
|
+
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
85
|
+
return (
|
86
|
+
<div
|
87
|
+
data-slot="dialog-footer"
|
88
|
+
className={cn(
|
89
|
+
"flex flex-col-reverse gap-2",
|
90
|
+
className
|
91
|
+
)}
|
92
|
+
{...props}
|
93
|
+
/>
|
94
|
+
)
|
95
|
+
}
|
96
|
+
|
97
|
+
function DialogTitle({
|
98
|
+
className,
|
99
|
+
...props
|
100
|
+
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
101
|
+
return (
|
102
|
+
<DialogPrimitive.Title
|
103
|
+
data-slot="dialog-title"
|
104
|
+
className={cn("text-xl leading-none font-semibold", className)}
|
105
|
+
{...props}
|
106
|
+
/>
|
107
|
+
)
|
108
|
+
}
|
109
|
+
|
110
|
+
function DialogDescription({
|
111
|
+
className,
|
112
|
+
...props
|
113
|
+
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
114
|
+
return (
|
115
|
+
<DialogPrimitive.Description
|
116
|
+
data-slot="dialog-description"
|
117
|
+
className={cn("text-muted-foreground text-sm", className)}
|
118
|
+
{...props}
|
119
|
+
/>
|
120
|
+
)
|
121
|
+
}
|
122
|
+
|
123
|
+
export {
|
124
|
+
Dialog,
|
125
|
+
DialogClose,
|
126
|
+
DialogContent,
|
127
|
+
DialogDescription,
|
128
|
+
DialogFooter,
|
129
|
+
DialogHeader,
|
130
|
+
DialogOverlay,
|
131
|
+
DialogPortal,
|
132
|
+
DialogTitle,
|
133
|
+
DialogTrigger,
|
134
|
+
}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
|
3
|
+
interface DocumentLinkProps {
|
4
|
+
type: 'terms' | 'privacy';
|
5
|
+
className?: string;
|
6
|
+
children: React.ReactNode;
|
7
|
+
}
|
8
|
+
|
9
|
+
/**
|
10
|
+
* A component that renders a link to a document (Terms or Privacy Policy)
|
11
|
+
* that opens the document in a new tab
|
12
|
+
*/
|
13
|
+
export function DocumentLink({ type, className, children }: DocumentLinkProps) {
|
14
|
+
const href = type === 'terms' ? 'https://app.saafe.in/terms' : 'https://app.saafe.in/privacy';
|
15
|
+
|
16
|
+
return (
|
17
|
+
<a
|
18
|
+
href={href}
|
19
|
+
target="_blank"
|
20
|
+
rel="noopener noreferrer"
|
21
|
+
className={className ? `text-primary hover:underline ${className}` : "text-primary hover:underline"}
|
22
|
+
>
|
23
|
+
{children}
|
24
|
+
</a>
|
25
|
+
);
|
26
|
+
}
|
@@ -0,0 +1,57 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import { cn } from "@/lib/utils";
|
3
|
+
|
4
|
+
interface DotStepperProps extends React.HTMLAttributes<HTMLDivElement> {
|
5
|
+
steps: number;
|
6
|
+
currentStep: number;
|
7
|
+
className?: string;
|
8
|
+
}
|
9
|
+
|
10
|
+
export function DotStepper({
|
11
|
+
steps,
|
12
|
+
currentStep,
|
13
|
+
className,
|
14
|
+
...props
|
15
|
+
}: DotStepperProps) {
|
16
|
+
return (
|
17
|
+
<div
|
18
|
+
className={cn(
|
19
|
+
"flex items-center justify-start w-full gap-1 px-4",
|
20
|
+
className
|
21
|
+
)}
|
22
|
+
{...props}
|
23
|
+
>
|
24
|
+
{Array.from({ length: steps }).map((_, index) => {
|
25
|
+
const stepNumber = index + 1;
|
26
|
+
const isActive = stepNumber === currentStep;
|
27
|
+
const isCompleted = stepNumber < currentStep;
|
28
|
+
|
29
|
+
return (
|
30
|
+
<React.Fragment key={index}>
|
31
|
+
{/* Dot */}
|
32
|
+
<div
|
33
|
+
className={cn(
|
34
|
+
"w-1.5 h-1.5 rounded-full transition-all duration-300",
|
35
|
+
isActive && "bg-primary",
|
36
|
+
isCompleted && "bg-primary",
|
37
|
+
!isActive && !isCompleted && "bg-gray-200"
|
38
|
+
)}
|
39
|
+
/>
|
40
|
+
|
41
|
+
{/* Connector line */}
|
42
|
+
{index < steps - 1 && (
|
43
|
+
<div
|
44
|
+
className={cn(
|
45
|
+
"h-[0.5px] flex-1 transition-all duration-300",
|
46
|
+
(isCompleted || (isActive && index === currentStep - 1))
|
47
|
+
? "bg-primary"
|
48
|
+
: "bg-gray-200"
|
49
|
+
)}
|
50
|
+
/>
|
51
|
+
)}
|
52
|
+
</React.Fragment>
|
53
|
+
);
|
54
|
+
})}
|
55
|
+
</div>
|
56
|
+
);
|
57
|
+
}
|
@@ -0,0 +1,255 @@
|
|
1
|
+
import * as React from "react"
|
2
|
+
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
3
|
+
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
|
4
|
+
|
5
|
+
import { cn } from "@/lib/utils"
|
6
|
+
|
7
|
+
function DropdownMenu({
|
8
|
+
...props
|
9
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
10
|
+
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
11
|
+
}
|
12
|
+
|
13
|
+
function DropdownMenuPortal({
|
14
|
+
...props
|
15
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
16
|
+
return (
|
17
|
+
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
18
|
+
)
|
19
|
+
}
|
20
|
+
|
21
|
+
function DropdownMenuTrigger({
|
22
|
+
...props
|
23
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
24
|
+
return (
|
25
|
+
<DropdownMenuPrimitive.Trigger
|
26
|
+
data-slot="dropdown-menu-trigger"
|
27
|
+
{...props}
|
28
|
+
/>
|
29
|
+
)
|
30
|
+
}
|
31
|
+
|
32
|
+
function DropdownMenuContent({
|
33
|
+
className,
|
34
|
+
sideOffset = 4,
|
35
|
+
...props
|
36
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
37
|
+
return (
|
38
|
+
<DropdownMenuPrimitive.Portal>
|
39
|
+
<DropdownMenuPrimitive.Content
|
40
|
+
data-slot="dropdown-menu-content"
|
41
|
+
sideOffset={sideOffset}
|
42
|
+
className={cn(
|
43
|
+
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
44
|
+
className
|
45
|
+
)}
|
46
|
+
{...props}
|
47
|
+
/>
|
48
|
+
</DropdownMenuPrimitive.Portal>
|
49
|
+
)
|
50
|
+
}
|
51
|
+
|
52
|
+
function DropdownMenuGroup({
|
53
|
+
...props
|
54
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
55
|
+
return (
|
56
|
+
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
57
|
+
)
|
58
|
+
}
|
59
|
+
|
60
|
+
function DropdownMenuItem({
|
61
|
+
className,
|
62
|
+
inset,
|
63
|
+
variant = "default",
|
64
|
+
...props
|
65
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
66
|
+
inset?: boolean
|
67
|
+
variant?: "default" | "destructive"
|
68
|
+
}) {
|
69
|
+
return (
|
70
|
+
<DropdownMenuPrimitive.Item
|
71
|
+
data-slot="dropdown-menu-item"
|
72
|
+
data-inset={inset}
|
73
|
+
data-variant={variant}
|
74
|
+
className={cn(
|
75
|
+
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
76
|
+
className
|
77
|
+
)}
|
78
|
+
{...props}
|
79
|
+
/>
|
80
|
+
)
|
81
|
+
}
|
82
|
+
|
83
|
+
function DropdownMenuCheckboxItem({
|
84
|
+
className,
|
85
|
+
children,
|
86
|
+
checked,
|
87
|
+
...props
|
88
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
|
89
|
+
return (
|
90
|
+
<DropdownMenuPrimitive.CheckboxItem
|
91
|
+
data-slot="dropdown-menu-checkbox-item"
|
92
|
+
className={cn(
|
93
|
+
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
94
|
+
className
|
95
|
+
)}
|
96
|
+
checked={checked}
|
97
|
+
{...props}
|
98
|
+
>
|
99
|
+
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
100
|
+
<DropdownMenuPrimitive.ItemIndicator>
|
101
|
+
<CheckIcon className="size-4" />
|
102
|
+
</DropdownMenuPrimitive.ItemIndicator>
|
103
|
+
</span>
|
104
|
+
{children}
|
105
|
+
</DropdownMenuPrimitive.CheckboxItem>
|
106
|
+
)
|
107
|
+
}
|
108
|
+
|
109
|
+
function DropdownMenuRadioGroup({
|
110
|
+
...props
|
111
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
|
112
|
+
return (
|
113
|
+
<DropdownMenuPrimitive.RadioGroup
|
114
|
+
data-slot="dropdown-menu-radio-group"
|
115
|
+
{...props}
|
116
|
+
/>
|
117
|
+
)
|
118
|
+
}
|
119
|
+
|
120
|
+
function DropdownMenuRadioItem({
|
121
|
+
className,
|
122
|
+
children,
|
123
|
+
...props
|
124
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
|
125
|
+
return (
|
126
|
+
<DropdownMenuPrimitive.RadioItem
|
127
|
+
data-slot="dropdown-menu-radio-item"
|
128
|
+
className={cn(
|
129
|
+
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
130
|
+
className
|
131
|
+
)}
|
132
|
+
{...props}
|
133
|
+
>
|
134
|
+
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
135
|
+
<DropdownMenuPrimitive.ItemIndicator>
|
136
|
+
<CircleIcon className="size-2 fill-current" />
|
137
|
+
</DropdownMenuPrimitive.ItemIndicator>
|
138
|
+
</span>
|
139
|
+
{children}
|
140
|
+
</DropdownMenuPrimitive.RadioItem>
|
141
|
+
)
|
142
|
+
}
|
143
|
+
|
144
|
+
function DropdownMenuLabel({
|
145
|
+
className,
|
146
|
+
inset,
|
147
|
+
...props
|
148
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
149
|
+
inset?: boolean
|
150
|
+
}) {
|
151
|
+
return (
|
152
|
+
<DropdownMenuPrimitive.Label
|
153
|
+
data-slot="dropdown-menu-label"
|
154
|
+
data-inset={inset}
|
155
|
+
className={cn(
|
156
|
+
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
157
|
+
className
|
158
|
+
)}
|
159
|
+
{...props}
|
160
|
+
/>
|
161
|
+
)
|
162
|
+
}
|
163
|
+
|
164
|
+
function DropdownMenuSeparator({
|
165
|
+
className,
|
166
|
+
...props
|
167
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
168
|
+
return (
|
169
|
+
<DropdownMenuPrimitive.Separator
|
170
|
+
data-slot="dropdown-menu-separator"
|
171
|
+
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
172
|
+
{...props}
|
173
|
+
/>
|
174
|
+
)
|
175
|
+
}
|
176
|
+
|
177
|
+
function DropdownMenuShortcut({
|
178
|
+
className,
|
179
|
+
...props
|
180
|
+
}: React.ComponentProps<"span">) {
|
181
|
+
return (
|
182
|
+
<span
|
183
|
+
data-slot="dropdown-menu-shortcut"
|
184
|
+
className={cn(
|
185
|
+
"text-muted-foreground ml-auto text-xs tracking-widest",
|
186
|
+
className
|
187
|
+
)}
|
188
|
+
{...props}
|
189
|
+
/>
|
190
|
+
)
|
191
|
+
}
|
192
|
+
|
193
|
+
function DropdownMenuSub({
|
194
|
+
...props
|
195
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
196
|
+
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
|
197
|
+
}
|
198
|
+
|
199
|
+
function DropdownMenuSubTrigger({
|
200
|
+
className,
|
201
|
+
inset,
|
202
|
+
children,
|
203
|
+
...props
|
204
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
205
|
+
inset?: boolean
|
206
|
+
}) {
|
207
|
+
return (
|
208
|
+
<DropdownMenuPrimitive.SubTrigger
|
209
|
+
data-slot="dropdown-menu-sub-trigger"
|
210
|
+
data-inset={inset}
|
211
|
+
className={cn(
|
212
|
+
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
|
213
|
+
className
|
214
|
+
)}
|
215
|
+
{...props}
|
216
|
+
>
|
217
|
+
{children}
|
218
|
+
<ChevronRightIcon className="ml-auto size-4" />
|
219
|
+
</DropdownMenuPrimitive.SubTrigger>
|
220
|
+
)
|
221
|
+
}
|
222
|
+
|
223
|
+
function DropdownMenuSubContent({
|
224
|
+
className,
|
225
|
+
...props
|
226
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
227
|
+
return (
|
228
|
+
<DropdownMenuPrimitive.SubContent
|
229
|
+
data-slot="dropdown-menu-sub-content"
|
230
|
+
className={cn(
|
231
|
+
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
232
|
+
className
|
233
|
+
)}
|
234
|
+
{...props}
|
235
|
+
/>
|
236
|
+
)
|
237
|
+
}
|
238
|
+
|
239
|
+
export {
|
240
|
+
DropdownMenu,
|
241
|
+
DropdownMenuPortal,
|
242
|
+
DropdownMenuTrigger,
|
243
|
+
DropdownMenuContent,
|
244
|
+
DropdownMenuGroup,
|
245
|
+
DropdownMenuLabel,
|
246
|
+
DropdownMenuItem,
|
247
|
+
DropdownMenuCheckboxItem,
|
248
|
+
DropdownMenuRadioGroup,
|
249
|
+
DropdownMenuRadioItem,
|
250
|
+
DropdownMenuSeparator,
|
251
|
+
DropdownMenuShortcut,
|
252
|
+
DropdownMenuSub,
|
253
|
+
DropdownMenuSubTrigger,
|
254
|
+
DropdownMenuSubContent,
|
255
|
+
}
|