122 lines
4.6 KiB
TypeScript
122 lines
4.6 KiB
TypeScript
import { Colors } from "~/application/enums/shared/Colors";
|
|
import { t as i18nT } from "i18next";
|
|
import { OnboardingGridDto } from "./grid/OnboardingGridUtils";
|
|
|
|
export type OnboardingBlockDto = {
|
|
style: OnboardingBlockStyle;
|
|
title: string;
|
|
canBeDismissed: boolean;
|
|
height: OnboardingHeightDto;
|
|
steps: OnboardingStepBlockDto[];
|
|
};
|
|
|
|
export type OnboardingHeightDto = "xs" | "sm" | "md" | "lg" | "xl" | "auto";
|
|
|
|
export interface OnboardingStepBlockDto {
|
|
id: string;
|
|
title: string;
|
|
description?: string;
|
|
links: OnboardingLinkDto[];
|
|
gallery: OnboardingGalleryDto[];
|
|
input: OnboardingInputDto[];
|
|
inputGrid?: OnboardingGridDto;
|
|
icon?: string;
|
|
completedAt?: Date | null;
|
|
}
|
|
|
|
interface OnboardingLinkDto {
|
|
text: string;
|
|
href: string;
|
|
isPrimary: boolean;
|
|
target?: string;
|
|
}
|
|
|
|
interface OnboardingGalleryDto {
|
|
id: string;
|
|
type: "image" | "video";
|
|
title: string;
|
|
src: string;
|
|
}
|
|
|
|
export interface OnboardingInputOptionDto {
|
|
name: string;
|
|
value: string;
|
|
color?: Colors;
|
|
}
|
|
|
|
interface OnboardingInputDto {
|
|
id: string;
|
|
type: "text" | "select";
|
|
name: string;
|
|
title: string;
|
|
isRequired: boolean;
|
|
options: OnboardingInputOptionDto[];
|
|
}
|
|
|
|
export const OnboardingBlockStyles = [{ value: "modal", name: "Modal" }] as const;
|
|
export type OnboardingBlockStyle = (typeof OnboardingBlockStyles)[number]["value"];
|
|
|
|
export const defaultOnboardingStepBlock: OnboardingStepBlockDto = {
|
|
id: "",
|
|
title: i18nT("onboarding.block.defaults.stepTitle"),
|
|
description: i18nT("onboarding.block.defaults.stepDescription"),
|
|
icon: `<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 32 32"> <path d="M 19 6 L 19 7.4375 L 19.09375 7.625 L 20.125 10 L 11.4375 10 L 11.125 10.4375 L 8.40625 14.28125 C 7.800781 14.09375 7.164063 14 6.5 14 C 2.917969 14 0 16.914063 0 20.5 C 0 24.085938 2.914063 27 6.5 27 C 9.914063 27 12.707031 24.347656 12.96875 21 L 16.40625 21 L 16.71875 20.5625 L 21.59375 13.375 L 22.25 14.875 C 20.308594 16.003906 19 18.109375 19 20.5 C 19 24.070313 21.929688 27 25.5 27 C 29.070313 27 32 24.070313 32 20.5 C 32 16.929688 29.070313 14 25.5 14 C 25.019531 14 24.546875 14.054688 24.09375 14.15625 L 21.40625 8 L 24.5 8 C 24.785156 8 25 8.214844 25 8.5 C 25 8.785156 24.785156 9 24.5 9 L 24.5 11 C 25.867188 11 27 9.867188 27 8.5 C 27 7.132813 25.867188 6 24.5 6 Z M 8 7 L 8 9 L 14 9 L 13 7 Z M 13.46875 12 L 20.125 12 L 16.09375 17.9375 Z M 11.71875 13 L 14.34375 19 L 6 19 L 6 21 L 10.9375 21 C 10.683594 23.242188 8.808594 25 6.5 25 C 4.019531 25 2 22.980469 2 20.5 C 2 18.019531 4.019531 16 6.5 16 C 8.058594 16 9.441406 16.796875 10.25 18 L 12.5 18 C 12.019531 16.847656 11.230469 15.859375 10.21875 15.15625 Z M 25.5 16 C 27.980469 16 30 18.019531 30 20.5 C 30 22.980469 27.980469 25 25.5 25 C 23.019531 25 21 22.980469 21 20.5 C 21 18.925781 21.832031 17.554688 23.0625 16.75 L 25.09375 21.40625 L 26.90625 20.59375 L 24.9375 16.0625 C 25.125 16.039063 25.308594 16 25.5 16 Z"></path> </svg>`,
|
|
links: [
|
|
{
|
|
text: i18nT("onboarding.block.defaults.primaryLink"),
|
|
href: "#",
|
|
isPrimary: true,
|
|
},
|
|
{
|
|
text: i18nT("onboarding.block.defaults.secondaryLink"),
|
|
href: "#",
|
|
isPrimary: false,
|
|
},
|
|
],
|
|
gallery: [
|
|
{
|
|
id: "",
|
|
type: "image",
|
|
title: i18nT("onboarding.block.defaults.gallery.image1"),
|
|
src: "https://placehold.co/1000x600?text=Image%201",
|
|
},
|
|
{
|
|
id: "",
|
|
type: "image",
|
|
title: i18nT("onboarding.block.defaults.gallery.image2"),
|
|
src: "https://placehold.co/1000x600?text=Image%202",
|
|
},
|
|
],
|
|
input: [
|
|
{
|
|
id: "1",
|
|
type: "text",
|
|
name: "source",
|
|
title: i18nT("onboarding.block.defaults.sourceQuestion"),
|
|
isRequired: true,
|
|
options: [],
|
|
},
|
|
{
|
|
id: "2",
|
|
type: "select",
|
|
name: "What will you use it for?",
|
|
title: i18nT("onboarding.block.defaults.useCaseSelect"),
|
|
isRequired: false,
|
|
options: [
|
|
{ value: "research", name: i18nT("onboarding.block.defaults.useCases.research"), color: Colors.GRAY },
|
|
{ value: "personal", name: i18nT("onboarding.block.defaults.useCases.personal"), color: Colors.BLUE },
|
|
{ value: "smallBusiness", name: i18nT("onboarding.block.defaults.useCases.smallBusiness"), color: Colors.INDIGO },
|
|
{ value: "largeCompany", name: i18nT("onboarding.block.defaults.useCases.largeCompany"), color: Colors.VIOLET },
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
export const defaultOnboardingBlock: OnboardingBlockDto = {
|
|
style: "modal",
|
|
title: i18nT("onboarding.block.defaults.title"),
|
|
canBeDismissed: true,
|
|
height: "md",
|
|
steps: [defaultOnboardingStepBlock],
|
|
};
|