mirror of
https://github.com/documenso/documenso.git
synced 2026-08-15 02:53:32 +10:00
261 lines
9.0 KiB
TypeScript
261 lines
9.0 KiB
TypeScript
import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
|
|
import { useSession } from '@documenso/lib/client-only/providers/session';
|
|
import { DOCUMENSO_CLOUD_ENTERPRISE_CTA_URL } from '@documenso/lib/constants/app';
|
|
import { Trans } from '@lingui/react/macro';
|
|
import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
|
|
import { FingerprintIcon } from 'lucide-react';
|
|
import type { ReactNode } from 'react';
|
|
import { EASE, POP, SPRING } from './motion';
|
|
import { SettingsUpsellCard } from './settings-upsell-card';
|
|
import { useTimedCycle } from './use-timed-cycle';
|
|
|
|
export const SsoPortalUpsell = () => {
|
|
const isReducedMotion = useReducedMotion();
|
|
const sceneIndex = useTimedCycle(SSO_SCENE_DURATIONS_MS);
|
|
|
|
return (
|
|
<SettingsUpsellCard
|
|
planLabel={<Trans>Enterprise</Trans>}
|
|
title={<Trans>Unlock the Organisation SSO Portal</Trans>}
|
|
description={
|
|
<Trans>
|
|
Give your members a dedicated single sign-on portal. The SSO portal is available on the Enterprise plan.
|
|
</Trans>
|
|
}
|
|
features={[
|
|
<Trans key="oidc">Works with any OIDC provider — Okta, Entra ID, Google and more</Trans>,
|
|
<Trans key="jit">Accounts are automatically added to your organisation on sign-in</Trans>,
|
|
<Trans key="control">Restrict sign-ins by email domain and choose the default role</Trans>,
|
|
]}
|
|
ctaLabel={<Trans>Contact Sales</Trans>}
|
|
ctaTo={DOCUMENSO_CLOUD_ENTERPRISE_CTA_URL}
|
|
ctaExternal
|
|
preview={
|
|
<div className="mx-auto w-full max-w-xs">
|
|
<div className="relative h-[236px]">
|
|
<AnimatePresence mode="wait" initial={false}>
|
|
{sceneIndex === 0 && <PortalScene key="portal" isStatic={isReducedMotion ?? false} />}
|
|
{sceneIndex === 1 && <RedirectScene key="redirect" />}
|
|
{sceneIndex === 2 && <SuccessScene key="success" />}
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
}
|
|
/>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Absolute-positioned panel each scene renders in, handling the shared
|
|
* slide-and-fade transition between scenes.
|
|
*/
|
|
const ScenePanel = ({ children }: { children: ReactNode }) => {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 12, scale: 0.98 }}
|
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
exit={{ opacity: 0, y: -12, scale: 0.98 }}
|
|
transition={{ duration: 0.34, ease: EASE }}
|
|
className="absolute inset-0 flex flex-col items-center justify-center overflow-hidden rounded-lg border bg-background p-6 text-center shadow-sm"
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Scene 1: the organisation's SSO portal, with a timed faux press on the
|
|
* "Continue with SSO" button (cursor flies in, button dips, sheen sweeps).
|
|
*
|
|
* When `isStatic` is set (reduced motion) every element renders with
|
|
* `initial={false}`, skipping entrance and press animations.
|
|
*/
|
|
const PortalScene = ({ isStatic }: { isStatic: boolean }) => {
|
|
const organisation = useCurrentOrganisation();
|
|
|
|
const rise = (delay: number) => ({
|
|
initial: isStatic ? false : { y: 10, opacity: 0 },
|
|
animate: { y: 0, opacity: 1 },
|
|
transition: { ...SPRING, delay },
|
|
});
|
|
|
|
return (
|
|
<ScenePanel>
|
|
<motion.div
|
|
initial={isStatic ? false : { scale: 0.5, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ ...POP, delay: 0.04 }}
|
|
>
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-md bg-documenso-200 font-semibold text-documenso-900">
|
|
{([...organisation.name][0] ?? 'D').toUpperCase()}
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.p {...rise(0.12)} className="mt-3.5 font-semibold text-sm">
|
|
<Trans>Welcome to {organisation.name}</Trans>
|
|
</motion.p>
|
|
|
|
<motion.p {...rise(0.18)} className="mt-1 text-muted-foreground text-xs">
|
|
<Trans>Single sign-on</Trans>
|
|
</motion.p>
|
|
|
|
<div className="relative mt-4 w-full">
|
|
<motion.div
|
|
initial={isStatic ? false : { y: 10, opacity: 0, scale: 1 }}
|
|
animate={{ y: 0, opacity: 1, scale: [1, 1, 0.955, 1] }}
|
|
transition={{
|
|
y: { ...SPRING, delay: 0.24 },
|
|
opacity: { duration: 0.3, delay: 0.24 },
|
|
scale: { duration: 2.6, times: [0, 0.63, 0.72, 0.84], ease: 'easeOut' },
|
|
}}
|
|
className="relative flex h-[38px] w-full items-center justify-center overflow-hidden rounded-md bg-foreground font-semibold text-background text-sm"
|
|
>
|
|
<span>
|
|
<Trans>Continue with SSO</Trans>
|
|
</span>
|
|
|
|
<motion.div
|
|
initial={isStatic ? false : { x: '-130%' }}
|
|
animate={{ x: '150%' }}
|
|
transition={{ duration: 0.85, delay: 1.75, ease: 'easeOut' }}
|
|
className="absolute top-0 bottom-0 left-[20%] w-3/5"
|
|
style={{ background: 'linear-gradient(105deg, transparent, rgba(162, 231, 113, 0.45), transparent)' }}
|
|
/>
|
|
</motion.div>
|
|
|
|
<motion.svg
|
|
initial={isStatic ? false : { x: 30, y: 30, opacity: 0, scale: 1 }}
|
|
animate={{
|
|
x: [30, 30, 0, 0, 0],
|
|
y: [30, 30, 0, 0, 0],
|
|
opacity: [0, 1, 1, 1, 0],
|
|
scale: [1, 1, 1, 0.82, 1],
|
|
}}
|
|
transition={{ duration: 2.6, times: [0, 0.3, 0.63, 0.72, 0.94], ease: EASE }}
|
|
width={17}
|
|
height={17}
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={1.4}
|
|
strokeLinejoin="round"
|
|
className="absolute right-[26px] -bottom-2.5 fill-foreground stroke-background"
|
|
>
|
|
<path d="M4 2.5 19 12l-6.6 1.4L9.7 19.6z" />
|
|
</motion.svg>
|
|
</div>
|
|
</ScenePanel>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Scene 2: redirecting to the identity provider, with a rotating ring around
|
|
* a fingerprint tile and a filling progress bar.
|
|
*/
|
|
const RedirectScene = () => {
|
|
return (
|
|
<ScenePanel>
|
|
<div className="relative flex h-[46px] w-[46px] items-center justify-center">
|
|
<motion.div
|
|
animate={{ rotate: 360 }}
|
|
transition={{ duration: 0.95, repeat: Number.POSITIVE_INFINITY, ease: 'linear' }}
|
|
className="absolute inset-0 rounded-full border-2"
|
|
style={{ borderTopColor: '#A2E771' }}
|
|
/>
|
|
|
|
<div className="flex h-[34px] w-[34px] items-center justify-center rounded-full bg-muted">
|
|
<FingerprintIcon className="h-[18px] w-[18px] text-muted-foreground" strokeWidth={1.6} />
|
|
</div>
|
|
</div>
|
|
|
|
<motion.p
|
|
initial={{ y: 8, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
transition={{ ...SPRING, delay: 0.08 }}
|
|
className="mt-3.5 max-w-[22ch] text-sm"
|
|
>
|
|
<Trans>Redirecting to your identity provider</Trans>
|
|
</motion.p>
|
|
|
|
<div className="mt-4 h-1 w-[140px] overflow-hidden rounded-full bg-border">
|
|
<motion.div
|
|
initial={{ width: '0%' }}
|
|
animate={{ width: '100%' }}
|
|
transition={{ duration: 1.35, ease: 'easeInOut' }}
|
|
className="h-full rounded-full bg-documenso"
|
|
/>
|
|
</div>
|
|
</ScenePanel>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Scene 3: signed in, with an expanding pulse ring, a popping green circle,
|
|
* a drawn checkmark and the signed-in member's email.
|
|
*/
|
|
const SuccessScene = () => {
|
|
const { user } = useSession();
|
|
|
|
return (
|
|
<ScenePanel>
|
|
<div className="relative h-10 w-10">
|
|
<motion.div
|
|
initial={{ scale: 0.7, opacity: 0.85 }}
|
|
animate={{ scale: 2.1, opacity: 0 }}
|
|
transition={{ duration: 1.1, ease: 'easeOut' }}
|
|
className="absolute inset-0 rounded-full border-2"
|
|
style={{ borderColor: '#A2E771' }}
|
|
/>
|
|
|
|
<motion.div
|
|
initial={{ scale: 0.4, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={POP}
|
|
className="absolute inset-0 flex items-center justify-center rounded-full bg-documenso-200"
|
|
>
|
|
<svg
|
|
width={19}
|
|
height={19}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2.4}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="text-documenso-900"
|
|
>
|
|
<motion.path
|
|
d="M20 6 9 17l-5-5"
|
|
initial={{ pathLength: 0 }}
|
|
animate={{ pathLength: 1 }}
|
|
transition={{ duration: 0.4, delay: 0.12, ease: 'easeOut' }}
|
|
/>
|
|
</svg>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<motion.p
|
|
initial={{ y: 10, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
transition={{ ...SPRING, delay: 0.16 }}
|
|
className="mt-3.5 font-semibold text-sm"
|
|
>
|
|
<Trans>Signed in</Trans>
|
|
</motion.p>
|
|
|
|
<motion.p
|
|
initial={{ y: 10, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
transition={{ ...SPRING, delay: 0.24 }}
|
|
className="mt-1 font-mono text-muted-foreground text-xs"
|
|
>
|
|
{user.email}
|
|
</motion.p>
|
|
</ScenePanel>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Milliseconds each scene is shown before advancing: portal, redirect,
|
|
* success.
|
|
*/
|
|
const SSO_SCENE_DURATIONS_MS = [3000, 2500, 3000];
|