mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-14 10:34:06 +02:00
update saas onboarding (#6619)
<img width="1002" height="487" alt="Screenshot 2026-06-11 at 6 20 10 PM" src="https://github.com/user-attachments/assets/5ee3cfc2-6c4f-4b35-9586-ef45fa216c6a" />
This commit is contained in:
EthanHealy01
@@ -50,12 +50,9 @@ help = "Help"
|
||||
imgPrompt = "Select Image(s)"
|
||||
incorrectPasswordMessage = "Current password is incorrect."
|
||||
info = "Info"
|
||||
insufficientCredits = "Insufficient credits. Required: {{requiredCredits}}, Available: {{currentBalance}}, Shortfall: {{shortfall}}"
|
||||
invalidUndoData = "Cannot undo: invalid operation data"
|
||||
keepWorking = "Keep Working"
|
||||
loading = "Loading..."
|
||||
loadingCredits = "Checking credits..."
|
||||
loadingProStatus = "Checking subscription status..."
|
||||
logOut = "Log out"
|
||||
marginTooltip = "Distance between the page number and the edge of the page."
|
||||
moreOptions = "More Options"
|
||||
@@ -66,7 +63,6 @@ noFileSelected = "No file loaded. Please upload one."
|
||||
noFilesToUndo = "Cannot undo: no files were processed in the last operation"
|
||||
noOperationToUndo = "No operation to undo"
|
||||
nothingToUndo = "Nothing to undo"
|
||||
noticeTopUpOrPlan = "Not enough credits, please top up or upgrade to a plan"
|
||||
noValidFiles = "No valid files to process"
|
||||
oops = "Oops!"
|
||||
openInNewWindow = "Open in new window"
|
||||
@@ -3099,18 +3095,6 @@ integration = "Integration Configuration"
|
||||
security = "Security Configuration"
|
||||
system = "System Configuration"
|
||||
|
||||
[config.payg]
|
||||
label = "Billing & usage"
|
||||
section = "Pay-as-you-go"
|
||||
|
||||
[connectionMode.status]
|
||||
localOffline = "Offline mode running"
|
||||
localOnline = "Offline mode running"
|
||||
saas = "Connected to Stirling Cloud"
|
||||
selfhostedChecking = "Connected to self-hosted server (checking...)"
|
||||
selfhostedOffline = "Self-hosted server unreachable"
|
||||
selfhostedOnline = "Connected to self-hosted server"
|
||||
|
||||
[convert]
|
||||
autoRotate = "Auto Rotate"
|
||||
autoRotateDescription = "Automatically rotate images to better fit the PDF page"
|
||||
@@ -4903,15 +4887,6 @@ body = "Stirling works best as a desktop app. You can use it offline, access doc
|
||||
title = "Download"
|
||||
titleWithOs = "Download for {{osLabel}}"
|
||||
|
||||
[onboarding.freeTrial]
|
||||
afterTrialWithoutPayment = "After your trial ends, you'll continue with our free tier. Add a payment method to keep Pro access."
|
||||
afterTrialWithPayment = "Your Pro subscription will start automatically when the trial ends."
|
||||
body = "You have full access to Stirling PDF Pro features during your trial. Enjoy unlimited conversions, larger file sizes, and priority processing."
|
||||
daysRemaining = "{{days}} days remaining"
|
||||
daysRemainingSingular = "{{days}} day remaining"
|
||||
title = "Your 30-Day Pro Trial"
|
||||
trialEnds = "Trial ends {{date}}"
|
||||
|
||||
[onboarding.mfa]
|
||||
authenticationCode = "Authentication code"
|
||||
qrCodeLoading = "Generating your QR code…"
|
||||
@@ -4923,6 +4898,22 @@ adminTitle = "Admin Overview"
|
||||
userBody = "Invite teammates, assign roles, and keep your documents organized in one secure workspace. Enable login mode whenever you're ready to grow beyond solo use."
|
||||
userTitle = "Plan Overview"
|
||||
|
||||
[onboarding.saas.freeEditor]
|
||||
freeLine = "And the best part? The editor is now <free>completely free</free>."
|
||||
premium = "We've added a whole host of new features, including <strong>Policies</strong> and <strong>Agent Chat</strong>."
|
||||
title = "Welcome to Stirling"
|
||||
|
||||
[onboarding.saas.team]
|
||||
addButton = "Add"
|
||||
createBody = "Work on documents together — teammates share files, automations and your plan. Add the first member by email to create your team."
|
||||
createTitle = "Create your team"
|
||||
inviteBody = "Everyone on your team shares files, automations and your plan. Add teammates by email — they'll get an invite right away."
|
||||
inviteTitle = "Invite members to your team"
|
||||
|
||||
[onboarding.saas.usage]
|
||||
body = "Automations, AI and API requests draw from your one-time free allowance. Here's where you stand - manual editing never counts against it."
|
||||
title = "Your free Processor allowance"
|
||||
|
||||
[onboarding.securityCheck]
|
||||
message = "The application has undergone significant changes recently. Your server admin's attention may be required. Please confirm your role to continue."
|
||||
roleAdmin = "Admin"
|
||||
@@ -5193,50 +5184,24 @@ title = "Page Ranges"
|
||||
bullet1 = "<strong>all</strong> → selects all pages"
|
||||
title = "Special Keywords"
|
||||
|
||||
[pageSelection.tooltip.syntax]
|
||||
text = "Use numbers, ranges, keywords, and progressions (n starts at 0). Parentheses are supported."
|
||||
title = "Syntax Basics"
|
||||
|
||||
[pageSelection.tooltip.syntax.bullets]
|
||||
keywords = "Keywords: odd, even"
|
||||
numbers = "Numbers/ranges: 5, 10-20"
|
||||
progressions = "Progressions: 3n, 4n+1"
|
||||
|
||||
[pageSelection.tooltip.tips]
|
||||
bullet1 = "Page numbers start from 1 (not 0)"
|
||||
bullet2 = "Spaces are automatically removed"
|
||||
bullet3 = "Invalid expressions are ignored"
|
||||
text = "Keep these guidelines in mind:"
|
||||
title = "Tips"
|
||||
|
||||
[payg]
|
||||
subtitle = "Pay-as-you-go: you only pay for what you process. Billing period {{start}} – {{end}}."
|
||||
|
||||
[payg.activity]
|
||||
docs = "docs"
|
||||
empty = "No billable activity yet this period."
|
||||
subtitle = "Only AI and automation draw from your budget. Everyday tools are free and aren't listed here."
|
||||
title = "Recent billable activity"
|
||||
units = "units"
|
||||
viewAll = "View all"
|
||||
|
||||
[payg.cap]
|
||||
amount = "Cap amount"
|
||||
currency = "Currency"
|
||||
custom = "Custom"
|
||||
degradeAt = "Limit spend at"
|
||||
degradeAtDesc = "Set below 100% to leave yourself headroom."
|
||||
docsEstimate = "≈ {{docs}} processed PDFs / month"
|
||||
docsRate = "at {{rate}} / PDF"
|
||||
noCapDesc = "Usage is billed without an upper limit. You can re-enable a cap at any time."
|
||||
noCapLabel = "No cap"
|
||||
noneShort = "No cap"
|
||||
perMonth = "/ month"
|
||||
preview = "{{money}} ≈ {{units}} PDFs per month"
|
||||
previewNote = "At current pricing. Final translation happens server-side on save."
|
||||
previewShort = "≈ {{units}} PDFs per month at current pricing."
|
||||
save = "Update cap"
|
||||
subtitle = "Set your maximum spend. We convert this to PDFs using the current price tier."
|
||||
title = "Monthly spending cap"
|
||||
warnAt = "Warn me at"
|
||||
warnAtDesc = "Notify when usage crosses this threshold."
|
||||
|
||||
[payg.checkout]
|
||||
connecting = "Connecting to Stripe…"
|
||||
@@ -5259,6 +5224,13 @@ note = "You can change your cap, cancel, or open the Stripe customer portal any
|
||||
summaryLabel = "Monthly ceiling"
|
||||
title = "Welcome to the Processor plan"
|
||||
|
||||
[payg.docHelp]
|
||||
billable = "Only automation runs, AI tools, and API calls count. Manual tools in the editor are always free."
|
||||
chains = "Running the same file through several steps of one automation counts it once, not once per step."
|
||||
perFile = "Each file you process counts as one PDF. Very long or very large files can count as more than one."
|
||||
refunds = "If a job fails on its first step, the PDF is credited back automatically."
|
||||
toggle = "What counts as a PDF?"
|
||||
|
||||
[payg.error]
|
||||
body = "We couldn't reach the billing service. Refresh the page to try again."
|
||||
title = "Couldn't load your plan"
|
||||
@@ -5283,29 +5255,17 @@ title = "Turn on the Processor plan"
|
||||
[payg.free.editor]
|
||||
eyebrow = "Editor plan · Always free"
|
||||
|
||||
[payg.free.explainer]
|
||||
alwaysFreeBody = "Manual tools: viewing, editing, merging, splitting, signing, watermarks, compression, conversion, manual OCR. Use them as much as you want, no matter where you trigger them from."
|
||||
alwaysFreeForYouBody = "Manual tools: viewing, editing, merging, splitting, signing, watermarks, compression, conversion, manual OCR. Use them as much as you want, never counted."
|
||||
alwaysFreeForYouLabel = "Always free for you"
|
||||
alwaysFreeLabel = "Always free"
|
||||
countsBody = "Automation pipelines (chained tools, scheduled runs), AI tools (summaries, classification, AI-OCR), and API calls (programmatic access). Past your free PDFs you'll need Processor."
|
||||
countsLabel = "Counts toward your 500 free"
|
||||
sharedBody = "Automation pipelines, AI tools, and API calls share a single one-time allowance of 500 free PDFs across the whole team. Once it's used up, ask your owner to enable Processor."
|
||||
sharedLabel = "Shared with the team"
|
||||
|
||||
[payg.free.header]
|
||||
subtitle = "Editor plan: manual tools are always free. Pay only for automation, AI & API. Billing period {{period}}."
|
||||
freeBody = "View, edit, merge, split, sign, watermark, compress, convert and manual OCR — as much as you want, no matter where you trigger it."
|
||||
freeTitle = "Unlimited PDF editing"
|
||||
|
||||
[payg.free.hero]
|
||||
capSuffix = "/ {{limit}} free PDFs"
|
||||
eyebrow = "Your free PDFs"
|
||||
metaCategories = "Automation · AI · API requests"
|
||||
neverResets = "One-time, never resets"
|
||||
|
||||
[payg.free.member]
|
||||
body = "Your team owner can enable the Processor plan and set a monthly ceiling. Until then, manual tools are free for you to use as much as you like. Automation, AI, and API access share the team's one-time allowance of 500 free PDFs."
|
||||
ownerOnly = "Only your team owner can turn on Processor. Manual tools stay free for you to use as much as you like."
|
||||
title = "Want to process more than your 500 free PDFs?"
|
||||
|
||||
[payg.free.proc]
|
||||
eyebrow = "Processor plan · metered"
|
||||
@@ -5321,9 +5281,17 @@ automation = "Automations & pipelines"
|
||||
client = "Browser-only tools (viewer, page editor, file management)"
|
||||
offsite = "Server tools (compress, OCR, convert, watermark…)"
|
||||
pauses = "pauses at cap"
|
||||
subtitle = "Your everyday tools keep working. Only AI and automation pause until the cap resets or is raised."
|
||||
title = "What happens when the cap is reached"
|
||||
|
||||
[payg.header]
|
||||
eyebrow = "Processor plan · {{start}} – {{end}}"
|
||||
freeBody = "View, edit, merge, split, sign, watermark, compress, convert and manual OCR — as much as you want, no matter where you trigger it."
|
||||
freeLabel = "Always free"
|
||||
freeTitle = "Unlimited PDF editing"
|
||||
meterBody = "{{limit}} free PDFs to start, then billed per PDF up to your cap."
|
||||
meterLabel = "Metered"
|
||||
meterTitle = "Automation · AI · API"
|
||||
|
||||
[payg.member]
|
||||
askLeader = "Only your team owner can change the cap."
|
||||
|
||||
@@ -5364,26 +5332,20 @@ body = "Billing portal isn't available right now. Try again in a moment."
|
||||
title = "Billing portal unavailable"
|
||||
|
||||
[payg.upgrade]
|
||||
backAria = "Back"
|
||||
closeAria = "Close"
|
||||
|
||||
[payg.upgrade.button]
|
||||
back = "← Back"
|
||||
cancel = "Cancel"
|
||||
continue = "Continue →"
|
||||
finish = "Finish"
|
||||
|
||||
[payg.upgrade.cap]
|
||||
customPlaceholder = "Or enter your own amount ($0 keeps it free)"
|
||||
help = "We'll never charge above this. Set $0 if you want to keep everything free while testing."
|
||||
noCapHint = "You can still cancel anytime from the customer portal."
|
||||
noCapLabel = "No cap, I'll manage spend manually"
|
||||
perMonthSuffix = "/ month"
|
||||
presetsAria = "Monthly cap preset"
|
||||
title = "Set your monthly spend ceiling"
|
||||
usdNote = "Estimated in USD. You can adjust your cap any time after subscribing, in your own currency."
|
||||
|
||||
[payg.upgrade.checkout]
|
||||
capLabel = "Monthly ceiling:"
|
||||
capValue = "{{symbol}}{{amount}} / month"
|
||||
edit = "Edit"
|
||||
help = "Stripe handles your card details. Stirling never sees them."
|
||||
@@ -5391,11 +5353,6 @@ loading = "Loading checkout…"
|
||||
noCap = "No cap"
|
||||
title = "Add your payment method"
|
||||
|
||||
[payg.upgrade.footer]
|
||||
capHint = "You can change your cap any time later."
|
||||
checkoutHint = "Card details handled by Stripe, never touched by Stirling."
|
||||
confirmHint = "Your wallet will refresh automatically in a moment."
|
||||
|
||||
[payg.upgrade.help]
|
||||
aiBody = "summarise, classify, redact, AI-OCR"
|
||||
aiTitle = "AI tools"
|
||||
@@ -5419,11 +5376,15 @@ confirm = "You're subscribed"
|
||||
default = "Upgrade to Processor plan"
|
||||
|
||||
[payg.usage]
|
||||
credit = "{{amount}} account credit"
|
||||
docs = "documents"
|
||||
breakdown = "AI {{ai}} • Automation {{automation}} • API {{api}}"
|
||||
capLine = "{{cap}}/mo cap"
|
||||
estBill = "≈ {{amount}} so far this period"
|
||||
firstFree = "First {{free}} free"
|
||||
noCap = "No monthly cap"
|
||||
ofLimitProcessed = "/ {{limit}} PDFs processed"
|
||||
processed = "PDFs processed"
|
||||
resetsIn = "Resets in {{days}} days"
|
||||
resetsTomorrow = "Resets tomorrow"
|
||||
spent = "{{spend}} of {{cap}} used"
|
||||
thisPeriod = "This billing period"
|
||||
|
||||
[payment]
|
||||
@@ -5749,28 +5710,17 @@ manage = "Manage"
|
||||
perMonth = "/month"
|
||||
perSeat = "/seat"
|
||||
popular = "Popular"
|
||||
purchase = "Purchase"
|
||||
selectCredits = "Select Credit Amount"
|
||||
selectPlan = "Select Plan"
|
||||
showComparison = "Compare All Features"
|
||||
totalCost = "Total Cost"
|
||||
upgrade = "Upgrade"
|
||||
withServer = "+ Server Plan"
|
||||
|
||||
[plan.activePlan]
|
||||
subtitle = "Your current subscription details"
|
||||
title = "Active Plan"
|
||||
|
||||
[plan.api]
|
||||
large = "5,000 Credits"
|
||||
medium = "1,000 Credits"
|
||||
small = "500 Credits"
|
||||
xsmall = "100 Credits"
|
||||
|
||||
[plan.apiPackages]
|
||||
subtitle = "Purchase API credits for your applications"
|
||||
title = "API Credit Packages"
|
||||
|
||||
[plan.availablePlans]
|
||||
loadError = "Unable to load plan pricing. Using default values."
|
||||
subtitle = "Choose the plan that fits your needs"
|
||||
@@ -5881,18 +5831,17 @@ successMessage = "Your license has been successfully activated. You can now clos
|
||||
name = "Team"
|
||||
|
||||
[plan.trial]
|
||||
badge = "Trial"
|
||||
continueWithFree = "Continue with Free"
|
||||
daysRemaining = "Your trial ends in {{days}} days"
|
||||
endDate = "Expires: {{date}}"
|
||||
expired = "Your Trial Has Ended"
|
||||
expiredMessage = "Your 30-day Pro trial has expired. Subscribe to Pro to continue accessing premium features, or continue with our free tier."
|
||||
freeTierLimitations = "Free tier includes basic PDF tools with usage limits."
|
||||
message = ""
|
||||
subscribe = "Subscribe to Pro"
|
||||
subscribeToPro = "Subscribe to Pro"
|
||||
subscriptionScheduled = "Subscription scheduled - starts {{date}}"
|
||||
title = "Free Trial Active"
|
||||
|
||||
[policies]
|
||||
deleteConfirmBody = "This removes the policy and its workflow. Documents already processed are not affected."
|
||||
deleteConfirmTitle = "Delete {{label}} policy?"
|
||||
|
||||
[policies]
|
||||
deleteConfirmBody = "This removes the policy and its workflow. Documents already processed are not affected."
|
||||
|
||||
+5
-6
@@ -34,8 +34,8 @@
|
||||
}
|
||||
|
||||
.standaloneIcon {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
object-fit: contain;
|
||||
animation: heroLogoScale 0.25s ease forwards;
|
||||
}
|
||||
@@ -124,8 +124,6 @@
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
animation: heroLogoEnter 0.25s ease forwards;
|
||||
position: relative;
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
.iconWrapper {
|
||||
@@ -175,8 +173,8 @@
|
||||
}
|
||||
|
||||
.downloadIcon {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
object-fit: contain;
|
||||
animation: heroLogoScale 0.25s ease forwards;
|
||||
}
|
||||
@@ -205,6 +203,7 @@
|
||||
}
|
||||
|
||||
.bodyCopy {
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
transform: translateX(24px);
|
||||
animation: bodySlideIn 0.25s ease forwards;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { SlideConfig } from "@app/types/types";
|
||||
import { UNIFIED_CIRCLE_CONFIG } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
|
||||
import { UNIFIED_LIGHT_BACKGROUND } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
|
||||
import {
|
||||
DesktopInstallTitle,
|
||||
type OSOption,
|
||||
@@ -47,9 +47,6 @@ export default function DesktopInstallSlide({
|
||||
),
|
||||
body: <DesktopInstallBody />,
|
||||
downloadUrl: osUrl,
|
||||
background: {
|
||||
gradientStops: ["#2563EB", "#0EA5E9"],
|
||||
circles: UNIFIED_CIRCLE_CONFIG,
|
||||
},
|
||||
background: UNIFIED_LIGHT_BACKGROUND,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
import { AnimatedCircleConfig } from "@app/types/types";
|
||||
import {
|
||||
AnimatedCircleConfig,
|
||||
AnimatedSlideBackgroundProps,
|
||||
} from "@app/types/types";
|
||||
|
||||
/**
|
||||
* Unified circle background configuration used across all onboarding slides.
|
||||
@@ -27,3 +30,36 @@ export const UNIFIED_CIRCLE_CONFIG: AnimatedCircleConfig[] = [
|
||||
offsetY: 18,
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Build a light slide background in a slide-specific accent colour: a white
|
||||
* hero fading into a pale horizon tint, with the unified sphere geometry
|
||||
* glowing in the accent on each sphere's inner edge.
|
||||
*/
|
||||
export function createLightSlideBackground(
|
||||
accentRgb: [number, number, number],
|
||||
horizon: string,
|
||||
): AnimatedSlideBackgroundProps {
|
||||
const [r, g, b] = accentRgb;
|
||||
const sphereColors = [
|
||||
`linear-gradient(45deg, rgba(${r}, ${g}, ${b}, 0.04), rgba(${r}, ${g}, ${b}, 0.3))`,
|
||||
`linear-gradient(225deg, rgba(${r}, ${g}, ${b}, 0.04), rgba(${r}, ${g}, ${b}, 0.26))`,
|
||||
];
|
||||
return {
|
||||
gradientStops: ["#FFFFFF", horizon],
|
||||
circles: UNIFIED_CIRCLE_CONFIG.map((circle, index) => ({
|
||||
...circle,
|
||||
color: sphereColors[index],
|
||||
})),
|
||||
tone: "light",
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Default light slide background: white with a light blue horizon and
|
||||
* blue-glow spheres.
|
||||
*/
|
||||
export const UNIFIED_LIGHT_BACKGROUND = createLightSlideBackground(
|
||||
[37, 99, 235],
|
||||
"#DBEAFE",
|
||||
);
|
||||
|
||||
@@ -16,6 +16,8 @@ export interface AnimatedCircleConfig {
|
||||
export interface AnimatedSlideBackgroundProps {
|
||||
gradientStops: [string, string];
|
||||
circles: AnimatedCircleConfig[];
|
||||
/** Overall background tone; controls on top of the hero (e.g. close button) adapt to stay visible. Defaults to "dark". */
|
||||
tone?: "light" | "dark";
|
||||
}
|
||||
|
||||
export interface SlideConfig {
|
||||
|
||||
@@ -21,7 +21,9 @@ export function PolicyDeleteConfirmModal({
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={onCancel}
|
||||
title={t("policies.deleteConfirmTitle", `Delete ${label} policy?`)}
|
||||
title={t("policies.deleteConfirmTitle", "Delete {{label}} policy?", {
|
||||
label,
|
||||
})}
|
||||
centered
|
||||
size="sm"
|
||||
>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from "react";
|
||||
import { Modal, Stack } from "@mantine/core";
|
||||
import DiamondOutlinedIcon from "@mui/icons-material/DiamondOutlined";
|
||||
import BoltRoundedIcon from "@mui/icons-material/BoltRounded";
|
||||
import GroupAddRoundedIcon from "@mui/icons-material/GroupAddRounded";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
import AnimatedSlideBackground from "@app/components/onboarding/slides/AnimatedSlideBackground";
|
||||
import OnboardingStepper from "@app/components/onboarding/OnboardingStepper";
|
||||
import { renderButtons } from "@app/components/onboarding/renderButtons";
|
||||
@@ -48,18 +48,23 @@ export default function SaasOnboardingModal(props: SaasOnboardingModalProps) {
|
||||
);
|
||||
}
|
||||
|
||||
if (slideDefinition.hero.type === "logo") {
|
||||
return (
|
||||
<img
|
||||
src={`${BASE_PATH}/modern-logo/logo512.png`}
|
||||
alt="Stirling logo"
|
||||
className={styles.standaloneIcon}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.heroLogoCircle}>
|
||||
{slideDefinition.hero.type === "rocket" && (
|
||||
<LocalIcon
|
||||
icon="rocket-launch"
|
||||
width={64}
|
||||
height={64}
|
||||
className={styles.heroIcon}
|
||||
/>
|
||||
{slideDefinition.hero.type === "bolt" && (
|
||||
<BoltRoundedIcon sx={{ fontSize: 64, color: "#000000" }} />
|
||||
)}
|
||||
{slideDefinition.hero.type === "diamond" && (
|
||||
<DiamondOutlinedIcon sx={{ fontSize: 64, color: "#000000" }} />
|
||||
{slideDefinition.hero.type === "team" && (
|
||||
<GroupAddRoundedIcon sx={{ fontSize: 56, color: "#000000" }} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,42 +1,25 @@
|
||||
import { TrialStatus } from "@app/auth/UseSession";
|
||||
import {
|
||||
FLOW_SEQUENCES,
|
||||
SlideId,
|
||||
} from "@app/components/onboarding/saasOnboardingFlowConfig";
|
||||
import { SlideId } from "@app/components/onboarding/saasOnboardingFlowConfig";
|
||||
|
||||
export interface FlowConfig {
|
||||
type: "saas-trial" | "saas-paid";
|
||||
ids: SlideId[];
|
||||
export interface SaasFlowInputs {
|
||||
/** Free-tier wallet with one-time allowance remaining — show the usage meter. */
|
||||
showUsageSlide: boolean;
|
||||
/** Team leaders only — invited members and anonymous guests skip the team slide. */
|
||||
showTeamSlide: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolves the appropriate onboarding flow based on user's subscription status.
|
||||
*
|
||||
* @param trialStatus - User's trial information from Supabase
|
||||
* @param _isPro - Whether user has Pro subscription
|
||||
* @returns FlowConfig with the appropriate slide sequence
|
||||
* Resolves the SaaS onboarding slide sequence. The free-editor pitch and
|
||||
* desktop install bookend the flow; the usage meter and team slides slot in
|
||||
* when their conditions hold.
|
||||
*/
|
||||
export function resolveSaasFlow(
|
||||
trialStatus: TrialStatus | null,
|
||||
_isPro: boolean | null,
|
||||
): FlowConfig {
|
||||
// Show free trial card if:
|
||||
// 1. User has active trial (isTrialing = true)
|
||||
// 2. Trial has not expired (daysRemaining > 0)
|
||||
// 3. User is not paid Pro (or Pro is from trial)
|
||||
const hasActiveTrial =
|
||||
trialStatus?.isTrialing === true && trialStatus.daysRemaining > 0;
|
||||
|
||||
if (hasActiveTrial) {
|
||||
return {
|
||||
type: "saas-trial",
|
||||
ids: FLOW_SEQUENCES.saasTrialUser,
|
||||
};
|
||||
}
|
||||
|
||||
// For paid users, expired trials, or no trial info
|
||||
return {
|
||||
type: "saas-paid",
|
||||
ids: FLOW_SEQUENCES.saasPaidUser,
|
||||
};
|
||||
export function resolveSaasFlow({
|
||||
showUsageSlide,
|
||||
showTeamSlide,
|
||||
}: SaasFlowInputs): SlideId[] {
|
||||
return [
|
||||
"free-editor",
|
||||
...(showUsageSlide ? (["usage"] as const) : []),
|
||||
...(showTeamSlide ? (["team"] as const) : []),
|
||||
"desktop-install",
|
||||
];
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import WelcomeSlide from "@app/components/onboarding/slides/WelcomeSlide";
|
||||
import FreeEditorSlide from "@app/components/onboarding/slides/FreeEditorSlide";
|
||||
import UsageSnapshotSlide from "@app/components/onboarding/slides/UsageSnapshotSlide";
|
||||
import TeamSlide from "@app/components/onboarding/slides/TeamSlide";
|
||||
import DesktopInstallSlide from "@app/components/onboarding/slides/DesktopInstallSlide";
|
||||
import FreeTrialSlide from "@app/components/onboarding/slides/FreeTrialSlide";
|
||||
import { SlideConfig } from "@app/types/types";
|
||||
import { TrialStatus } from "@app/auth/UseSession";
|
||||
|
||||
export type SlideId = "welcome" | "free-trial" | "desktop-install";
|
||||
export type SlideId = "free-editor" | "usage" | "team" | "desktop-install";
|
||||
|
||||
export type HeroType = "rocket" | "dual-icon" | "diamond";
|
||||
export type HeroType = "logo" | "bolt" | "team" | "dual-icon";
|
||||
|
||||
export type ButtonAction = "next" | "prev" | "close" | "download-selected";
|
||||
|
||||
@@ -23,7 +23,6 @@ export interface SlideFactoryParams {
|
||||
osUrl: string;
|
||||
osOptions?: OSOption[];
|
||||
onDownloadUrlChange?: (url: string) => void;
|
||||
trialStatus?: TrialStatus | null;
|
||||
}
|
||||
|
||||
export interface HeroDefinition {
|
||||
@@ -48,47 +47,46 @@ export interface SlideDefinition {
|
||||
buttons: ButtonDefinition[];
|
||||
}
|
||||
|
||||
const BACK_BUTTON: ButtonDefinition = {
|
||||
key: "back",
|
||||
type: "icon",
|
||||
icon: "chevron-left",
|
||||
group: "left",
|
||||
action: "prev",
|
||||
};
|
||||
|
||||
const NEXT_BUTTON: ButtonDefinition = {
|
||||
key: "next",
|
||||
type: "button",
|
||||
label: "onboarding.buttons.next",
|
||||
variant: "primary",
|
||||
group: "right",
|
||||
action: "next",
|
||||
};
|
||||
|
||||
export const SLIDE_DEFINITIONS: Record<SlideId, SlideDefinition> = {
|
||||
welcome: {
|
||||
id: "welcome",
|
||||
createSlide: () => WelcomeSlide(),
|
||||
hero: { type: "rocket" },
|
||||
"free-editor": {
|
||||
id: "free-editor",
|
||||
createSlide: () => FreeEditorSlide(),
|
||||
hero: { type: "logo" },
|
||||
buttons: [{ ...NEXT_BUTTON, key: "free-editor-next" }],
|
||||
},
|
||||
usage: {
|
||||
id: "usage",
|
||||
createSlide: () => UsageSnapshotSlide(),
|
||||
hero: { type: "bolt" },
|
||||
buttons: [
|
||||
{
|
||||
key: "welcome-next",
|
||||
type: "button",
|
||||
label: "onboarding.buttons.next",
|
||||
variant: "primary",
|
||||
group: "right",
|
||||
action: "next",
|
||||
},
|
||||
{ ...BACK_BUTTON, key: "usage-back" },
|
||||
{ ...NEXT_BUTTON, key: "usage-next" },
|
||||
],
|
||||
},
|
||||
"free-trial": {
|
||||
id: "free-trial",
|
||||
createSlide: ({ trialStatus }) => {
|
||||
if (!trialStatus) {
|
||||
throw new Error("Trial status is required for free-trial slide");
|
||||
}
|
||||
return FreeTrialSlide({ trialStatus });
|
||||
},
|
||||
hero: { type: "diamond" },
|
||||
team: {
|
||||
id: "team",
|
||||
createSlide: () => TeamSlide(),
|
||||
hero: { type: "team" },
|
||||
buttons: [
|
||||
{
|
||||
key: "trial-back",
|
||||
type: "icon",
|
||||
icon: "chevron-left",
|
||||
group: "left",
|
||||
action: "prev",
|
||||
},
|
||||
{
|
||||
key: "trial-next",
|
||||
type: "button",
|
||||
label: "onboarding.buttons.next",
|
||||
variant: "primary",
|
||||
group: "right",
|
||||
action: "next",
|
||||
},
|
||||
{ ...BACK_BUTTON, key: "team-back" },
|
||||
{ ...NEXT_BUTTON, key: "team-next" },
|
||||
],
|
||||
},
|
||||
"desktop-install": {
|
||||
@@ -97,13 +95,7 @@ export const SLIDE_DEFINITIONS: Record<SlideId, SlideDefinition> = {
|
||||
DesktopInstallSlide({ osLabel, osUrl, osOptions, onDownloadUrlChange }),
|
||||
hero: { type: "dual-icon" },
|
||||
buttons: [
|
||||
{
|
||||
key: "desktop-back",
|
||||
type: "icon",
|
||||
icon: "chevron-left",
|
||||
group: "left",
|
||||
action: "prev",
|
||||
},
|
||||
{ ...BACK_BUTTON, key: "desktop-back" },
|
||||
{
|
||||
key: "desktop-skip",
|
||||
type: "button",
|
||||
@@ -123,8 +115,3 @@ export const SLIDE_DEFINITIONS: Record<SlideId, SlideDefinition> = {
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const FLOW_SEQUENCES = {
|
||||
saasTrialUser: ["welcome", "free-trial", "desktop-install"] as SlideId[],
|
||||
saasPaidUser: ["welcome", "desktop-install"] as SlideId[],
|
||||
};
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import React from "react";
|
||||
import { Trans } from "react-i18next";
|
||||
import { SlideConfig } from "@app/types/types";
|
||||
import { createLightSlideBackground } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
|
||||
import styles from "@app/components/onboarding/slides/SaasOnboardingSlides.module.css";
|
||||
|
||||
// Stirling logo red (sampled from modern-logo/logo512.png)
|
||||
const FREE_EDITOR_BACKGROUND = createLightSlideBackground(
|
||||
[142, 49, 49],
|
||||
"#F8E0E0",
|
||||
);
|
||||
|
||||
const FreeEditorBody = () => (
|
||||
<span>
|
||||
<Trans
|
||||
i18nKey="onboarding.saas.freeEditor.premium"
|
||||
components={{ strong: <strong /> }}
|
||||
defaults="We've added a whole host of new features, including <strong>Policies</strong> and <strong>Agent Chat</strong>."
|
||||
/>
|
||||
<span className={styles.freeLine}>
|
||||
<Trans
|
||||
i18nKey="onboarding.saas.freeEditor.freeLine"
|
||||
components={{ free: <strong className={styles.freeHighlight} /> }}
|
||||
defaults="And the best part? The editor is now <free>completely free</free>."
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
|
||||
export default function FreeEditorSlide(): SlideConfig {
|
||||
const title = (
|
||||
<Trans
|
||||
i18nKey="onboarding.saas.freeEditor.title"
|
||||
defaults="Welcome to Stirling"
|
||||
/>
|
||||
);
|
||||
|
||||
return {
|
||||
key: "free-editor",
|
||||
title,
|
||||
body: <FreeEditorBody />,
|
||||
background: FREE_EDITOR_BACKGROUND,
|
||||
};
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { SlideConfig } from "@app/types/types";
|
||||
import { UNIFIED_CIRCLE_CONFIG } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
|
||||
import { TrialStatus } from "@app/auth/UseSession";
|
||||
|
||||
interface FreeTrialSlideProps {
|
||||
trialStatus: TrialStatus;
|
||||
}
|
||||
|
||||
function FreeTrialSlideTitle() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<span>{t("onboarding.freeTrial.title", "Your 30-Day Pro Trial")}</span>
|
||||
);
|
||||
}
|
||||
|
||||
const FreeTrialSlideBody = ({ trialStatus }: { trialStatus: TrialStatus }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// Format the trial end date
|
||||
const trialEndDate = new Date(trialStatus.trialEnd).toLocaleDateString(
|
||||
undefined,
|
||||
{
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
},
|
||||
);
|
||||
|
||||
// Determine which message to show based on payment method
|
||||
const afterTrialMessage = trialStatus.hasScheduledSub
|
||||
? t(
|
||||
"onboarding.freeTrial.afterTrialWithPayment",
|
||||
"Your Pro subscription will start automatically when the trial ends.",
|
||||
)
|
||||
: trialStatus.hasPaymentMethod
|
||||
? t(
|
||||
"onboarding.freeTrial.afterTrialWithPayment",
|
||||
"Your Pro subscription will start automatically when the trial ends.",
|
||||
)
|
||||
: t(
|
||||
"onboarding.freeTrial.afterTrialWithoutPayment",
|
||||
"After your trial ends, you'll continue with our free tier. Add a payment method to keep Pro access.",
|
||||
);
|
||||
|
||||
// Pluralize days remaining
|
||||
const daysText =
|
||||
trialStatus.daysRemaining === 1
|
||||
? t(
|
||||
"onboarding.freeTrial.daysRemainingSingular",
|
||||
"{{days}} day remaining",
|
||||
{ days: trialStatus.daysRemaining },
|
||||
)
|
||||
: t("onboarding.freeTrial.daysRemaining", "{{days}} days remaining", {
|
||||
days: trialStatus.daysRemaining,
|
||||
});
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
|
||||
<p>
|
||||
{t(
|
||||
"onboarding.freeTrial.body",
|
||||
"You have full access to Stirling PDF Pro features during your trial. Enjoy unlimited conversions, larger file sizes, and priority processing.",
|
||||
)}
|
||||
</p>
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(255, 255, 255, 0.1)",
|
||||
borderRadius: "8px",
|
||||
padding: "1rem",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "1.25rem",
|
||||
fontWeight: "bold",
|
||||
marginBottom: "0.5rem",
|
||||
}}
|
||||
>
|
||||
{daysText}
|
||||
</div>
|
||||
<div style={{ fontSize: "0.9rem", opacity: 0.9 }}>
|
||||
{t("onboarding.freeTrial.trialEnds", "Trial ends {{date}}", {
|
||||
date: trialEndDate,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<p style={{ fontSize: "0.9rem", opacity: 0.9 }}>{afterTrialMessage}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function FreeTrialSlide({
|
||||
trialStatus,
|
||||
}: FreeTrialSlideProps): SlideConfig {
|
||||
return {
|
||||
key: "free-trial",
|
||||
title: <FreeTrialSlideTitle />,
|
||||
body: <FreeTrialSlideBody trialStatus={trialStatus} />,
|
||||
background: {
|
||||
gradientStops: ["#10B981", "#06B6D4"],
|
||||
circles: UNIFIED_CIRCLE_CONFIG,
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
/* Shared styles for the SaaS onboarding slides */
|
||||
|
||||
/* ── Slide 1: free editor pitch ─────────────────────────────────────────── */
|
||||
|
||||
.freeLine {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.freeHighlight {
|
||||
background: linear-gradient(135deg, #6366f1, #ec4899);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ── Slide 2: usage meter snapshot ──────────────────────────────────────── */
|
||||
|
||||
.usageMeterWrap {
|
||||
max-width: 420px;
|
||||
margin: 16px auto 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* ── Slide 3: team ──────────────────────────────────────────────────────── */
|
||||
|
||||
.teamCard {
|
||||
max-width: 460px;
|
||||
margin: 12px auto 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.memberList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--border-default, #d1d5db);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.memberRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.memberRow + .memberRow {
|
||||
border-top: 1px solid var(--border-subtle, #e5e7eb);
|
||||
}
|
||||
|
||||
.memberIdentity {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.memberName {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--onboarding-title, #111827);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.memberEmail {
|
||||
font-size: 12px;
|
||||
color: var(--onboarding-body, #6b7280);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.inviteRow {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.inviteRow > :first-child {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.inviteFeedback {
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Badge, Button, TextInput } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { SlideConfig } from "@app/types/types";
|
||||
import { createLightSlideBackground } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
|
||||
import { useSaaSTeam } from "@app/contexts/SaaSTeamContext";
|
||||
import styles from "@app/components/onboarding/slides/SaasOnboardingSlides.module.css";
|
||||
|
||||
const TEAM_BACKGROUND = createLightSlideBackground([79, 70, 229], "#E0E7FF");
|
||||
|
||||
const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
function useHasTeamMembers(): boolean {
|
||||
const { teamMembers, teamInvitations } = useSaaSTeam();
|
||||
const pendingInvitations = teamInvitations.filter(
|
||||
(invitation) => invitation.status === "PENDING",
|
||||
);
|
||||
// The leader themselves is always in teamMembers, so "has a team" means
|
||||
// anyone beyond them — or an invite already on its way.
|
||||
return teamMembers.length > 1 || pendingInvitations.length > 0;
|
||||
}
|
||||
|
||||
function TeamSlideTitle() {
|
||||
const { t } = useTranslation();
|
||||
const hasTeam = useHasTeamMembers();
|
||||
|
||||
return hasTeam
|
||||
? t("onboarding.saas.team.inviteTitle", "Invite members to your team")
|
||||
: t("onboarding.saas.team.createTitle", "Create your team");
|
||||
}
|
||||
|
||||
function InviteForm() {
|
||||
const { t } = useTranslation();
|
||||
const { inviteUser } = useSaaSTeam();
|
||||
const [email, setEmail] = useState("");
|
||||
const [inviting, setInviting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
|
||||
const emailValid = EMAIL_PATTERN.test(email);
|
||||
|
||||
const handleInvite = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!emailValid) return;
|
||||
|
||||
setInviting(true);
|
||||
setError(null);
|
||||
setSuccess(null);
|
||||
|
||||
try {
|
||||
await inviteUser(email);
|
||||
setSuccess(
|
||||
t("team.inviteSent", "Invitation sent to {{email}}", { email }),
|
||||
);
|
||||
setEmail("");
|
||||
} catch (err) {
|
||||
const inviteError = err as { response?: { data?: { error?: string } } };
|
||||
setError(
|
||||
inviteError.response?.data?.error ||
|
||||
t("team.inviteError", "Failed to send invitation"),
|
||||
);
|
||||
} finally {
|
||||
setInviting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleInvite}>
|
||||
<span className={styles.inviteRow}>
|
||||
<TextInput
|
||||
type="email"
|
||||
placeholder={t("team.invite.placeholder", "[email protected]")}
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
error={
|
||||
email && !emailValid
|
||||
? t("team.invite.invalidEmail", "Invalid email format")
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
<Button type="submit" loading={inviting} disabled={!emailValid}>
|
||||
{t("onboarding.saas.team.addButton", "Add")}
|
||||
</Button>
|
||||
</span>
|
||||
{error && (
|
||||
<span
|
||||
className={styles.inviteFeedback}
|
||||
style={{ color: "var(--mantine-color-red-6)", display: "block" }}
|
||||
>
|
||||
{error}
|
||||
</span>
|
||||
)}
|
||||
{success && (
|
||||
<span
|
||||
className={styles.inviteFeedback}
|
||||
style={{ color: "var(--mantine-color-green-7)", display: "block" }}
|
||||
>
|
||||
{success}
|
||||
</span>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
const TeamSlideBody = () => {
|
||||
const { t } = useTranslation();
|
||||
const { teamMembers, teamInvitations, refreshTeams } = useSaaSTeam();
|
||||
const hasTeam = useHasTeamMembers();
|
||||
const pendingInvitations = teamInvitations.filter(
|
||||
(invitation) => invitation.status === "PENDING",
|
||||
);
|
||||
|
||||
// Onboarding shows right after first login — make sure team data is fresh.
|
||||
useEffect(() => {
|
||||
refreshTeams();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<span>
|
||||
{hasTeam
|
||||
? t(
|
||||
"onboarding.saas.team.inviteBody",
|
||||
"Everyone on your team shares files, automations and your plan. Add teammates by email — they'll get an invite right away.",
|
||||
)
|
||||
: t(
|
||||
"onboarding.saas.team.createBody",
|
||||
"Work on documents together — teammates share files, automations and your plan. Add the first member by email to create your team.",
|
||||
)}
|
||||
<span className={styles.teamCard} style={{ display: "block" }}>
|
||||
{hasTeam && (
|
||||
<span className={styles.memberList} style={{ display: "flex" }}>
|
||||
{teamMembers.map((member) => (
|
||||
<span
|
||||
key={`member-${member.id}`}
|
||||
className={styles.memberRow}
|
||||
style={{ display: "flex" }}
|
||||
>
|
||||
<span
|
||||
className={styles.memberIdentity}
|
||||
style={{ display: "flex" }}
|
||||
>
|
||||
<span className={styles.memberName}>{member.username}</span>
|
||||
<span className={styles.memberEmail}>{member.email}</span>
|
||||
</span>
|
||||
<Badge
|
||||
size="sm"
|
||||
color={member.role === "LEADER" ? "blue" : "gray"}
|
||||
variant="light"
|
||||
>
|
||||
{member.role}
|
||||
</Badge>
|
||||
</span>
|
||||
))}
|
||||
{pendingInvitations.map((invitation) => (
|
||||
<span
|
||||
key={`invitation-${invitation.invitationId}`}
|
||||
className={styles.memberRow}
|
||||
style={{ display: "flex" }}
|
||||
>
|
||||
<span
|
||||
className={styles.memberIdentity}
|
||||
style={{ display: "flex" }}
|
||||
>
|
||||
<span className={styles.memberName}>
|
||||
{invitation.inviteeEmail.split("@")[0]}
|
||||
</span>
|
||||
<span className={styles.memberEmail}>
|
||||
{invitation.inviteeEmail}
|
||||
</span>
|
||||
</span>
|
||||
<Badge size="sm" color="yellow" variant="light">
|
||||
{t("team.members.pending", "PENDING")}
|
||||
</Badge>
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
<InviteForm />
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default function TeamSlide(): SlideConfig {
|
||||
return {
|
||||
key: "team",
|
||||
title: <TeamSlideTitle />,
|
||||
body: <TeamSlideBody />,
|
||||
background: TEAM_BACKGROUND,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { SlideConfig } from "@app/types/types";
|
||||
import { createLightSlideBackground } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
|
||||
import {
|
||||
FreeMeterPanel,
|
||||
useFreeSnapshot,
|
||||
} from "@app/components/shared/config/configSections/PaygFree";
|
||||
import i18n from "@app/i18n";
|
||||
import styles from "@app/components/onboarding/slides/SaasOnboardingSlides.module.css";
|
||||
|
||||
const USAGE_BACKGROUND = createLightSlideBackground([249, 115, 22], "#FFEDD5");
|
||||
|
||||
const UsageSnapshotBody = () => {
|
||||
const { t } = useTranslation();
|
||||
const snap = useFreeSnapshot();
|
||||
|
||||
return (
|
||||
<span>
|
||||
{t(
|
||||
"onboarding.saas.usage.body",
|
||||
"Automations, AI and API requests draw from your one-time free allowance. Here's where you stand - manual editing never counts against it.",
|
||||
)}
|
||||
{/* .payg provides the CSS variables the meter styles are scoped to */}
|
||||
<span
|
||||
className={`payg ${styles.usageMeterWrap}`}
|
||||
style={{ display: "block" }}
|
||||
>
|
||||
<FreeMeterPanel snap={snap} />
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default function UsageSnapshotSlide(): SlideConfig {
|
||||
return {
|
||||
key: "usage-snapshot",
|
||||
title: i18n.t(
|
||||
"onboarding.saas.usage.title",
|
||||
"Your free Processor allowance",
|
||||
),
|
||||
body: <UsageSnapshotBody />,
|
||||
background: USAGE_BACKGROUND,
|
||||
};
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
import { useCallback, useEffect, useMemo, useState, useRef } from "react";
|
||||
import { useAuth } from "@app/auth/UseSession";
|
||||
import { useOs } from "@app/hooks/useOs";
|
||||
import { useWallet } from "@app/hooks/useWallet";
|
||||
import { useSaaSTeam } from "@app/contexts/SaaSTeamContext";
|
||||
import {
|
||||
SLIDE_DEFINITIONS,
|
||||
type ButtonAction,
|
||||
@@ -28,7 +30,9 @@ export function useSaasOnboardingState({
|
||||
opened,
|
||||
onClose,
|
||||
}: UseSaasOnboardingStateProps): UseSaasOnboardingStateResult | null {
|
||||
const { trialStatus, isPro, loading } = useAuth();
|
||||
const { loading } = useAuth();
|
||||
const { wallet } = useWallet();
|
||||
const { isTeamLeader } = useSaaSTeam();
|
||||
const osType = useOs();
|
||||
const selectedDownloadUrlRef = useRef<string>("");
|
||||
|
||||
@@ -70,13 +74,15 @@ export function useSaasOnboardingState({
|
||||
selectedDownloadUrlRef.current = url;
|
||||
}, []);
|
||||
|
||||
// Resolve flow based on trial status
|
||||
const resolvedFlow = useMemo(
|
||||
() => resolveSaasFlow(trialStatus, isPro),
|
||||
[trialStatus, isPro],
|
||||
);
|
||||
// Usage meter only makes sense for free-tier wallets with allowance left;
|
||||
// the team slide is for leaders (anonymous guests are never leaders).
|
||||
const showUsageSlide = wallet?.status === "free" && wallet.freeRemaining > 0;
|
||||
const showTeamSlide = isTeamLeader;
|
||||
|
||||
const flowSlideIds = resolvedFlow.ids;
|
||||
const flowSlideIds = useMemo(
|
||||
() => resolveSaasFlow({ showUsageSlide, showTeamSlide }),
|
||||
[showUsageSlide, showTeamSlide],
|
||||
);
|
||||
const totalSteps = flowSlideIds.length;
|
||||
const maxIndex = Math.max(totalSteps - 1, 0);
|
||||
|
||||
@@ -99,16 +105,8 @@ export function useSaasOnboardingState({
|
||||
osUrl: os.url,
|
||||
osOptions,
|
||||
onDownloadUrlChange: handleDownloadUrlChange,
|
||||
trialStatus: trialStatus ?? undefined,
|
||||
});
|
||||
}, [
|
||||
slideDefinition,
|
||||
os.label,
|
||||
os.url,
|
||||
osOptions,
|
||||
handleDownloadUrlChange,
|
||||
trialStatus,
|
||||
]);
|
||||
}, [slideDefinition, os.label, os.url, osOptions, handleDownloadUrlChange]);
|
||||
|
||||
// Navigation functions
|
||||
const goNext = useCallback(() => {
|
||||
|
||||
@@ -209,9 +209,7 @@ function UsageHero({ wallet }: { wallet: Wallet }) {
|
||||
|
||||
const limit = wallet.billableLimit;
|
||||
const hasLimit = limit != null && limit > 0;
|
||||
const pct = hasLimit
|
||||
? Math.min(100, (wallet.billableUsed / limit) * 100)
|
||||
: 0;
|
||||
const pct = hasLimit ? Math.min(100, (wallet.billableUsed / limit) * 100) : 0;
|
||||
const state = hasLimit
|
||||
? pct >= 100
|
||||
? "DEGRADED"
|
||||
@@ -387,7 +385,13 @@ function CapEditor({
|
||||
);
|
||||
}
|
||||
|
||||
function CapReadOnly({ capUsd, noCap }: { capUsd: number | null; noCap: boolean }) {
|
||||
function CapReadOnly({
|
||||
capUsd,
|
||||
noCap,
|
||||
}: {
|
||||
capUsd: number | null;
|
||||
noCap: boolean;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const hasCap = !noCap && capUsd != null;
|
||||
return (
|
||||
@@ -567,10 +571,7 @@ function ActivityFeed({ recent }: { recent: Wallet["recent"] }) {
|
||||
</div>
|
||||
{recent.length === 0 ? (
|
||||
<Text size="sm" c="dimmed">
|
||||
{t(
|
||||
"payg.activity.empty",
|
||||
"No billable activity yet this period.",
|
||||
)}
|
||||
{t("payg.activity.empty", "No billable activity yet this period.")}
|
||||
</Text>
|
||||
) : (
|
||||
<div>
|
||||
@@ -603,7 +604,11 @@ function ActivityFeed({ recent }: { recent: Wallet["recent"] }) {
|
||||
|
||||
// ─── Stripe CTA ──────────────────────────────────────────────────────────────
|
||||
|
||||
function StripePortalLink({ onOpenPortal }: { onOpenPortal: () => Promise<void> }) {
|
||||
function StripePortalLink({
|
||||
onOpenPortal,
|
||||
}: {
|
||||
onOpenPortal: () => Promise<void>;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
@@ -662,7 +667,12 @@ function StripePortalLink({ onOpenPortal }: { onOpenPortal: () => Promise<void>
|
||||
|
||||
// ─── Main component ───────────────────────────────────────────────────────
|
||||
|
||||
const Payg: React.FC<PaygProps> = ({ role, wallet, onSaveCap, onOpenPortal }) => {
|
||||
const Payg: React.FC<PaygProps> = ({
|
||||
role,
|
||||
wallet,
|
||||
onSaveCap,
|
||||
onOpenPortal,
|
||||
}) => {
|
||||
useRenderCount(role === "LEADER" ? "PaygLeader" : "PaygMember");
|
||||
const { t } = useTranslation();
|
||||
const isLeader = role === "LEADER";
|
||||
@@ -681,10 +691,14 @@ const Payg: React.FC<PaygProps> = ({ role, wallet, onSaveCap, onOpenPortal }) =>
|
||||
<div className="payg-planhead">
|
||||
<div className="payg-planhead__top">
|
||||
<span className="payg-planhead__eyebrow">
|
||||
{t("payg.header.eyebrow", "Processor plan · {{start}} – {{end}}", {
|
||||
start: fmt(wallet.billingPeriodStart),
|
||||
end: fmt(wallet.billingPeriodEnd),
|
||||
})}
|
||||
{t(
|
||||
"payg.header.eyebrow",
|
||||
"Processor plan · {{start}} – {{end}}",
|
||||
{
|
||||
start: fmt(wallet.billingPeriodStart),
|
||||
end: fmt(wallet.billingPeriodEnd),
|
||||
},
|
||||
)}
|
||||
</span>
|
||||
<span className="payg-role-pill" data-leader={isLeader}>
|
||||
{isLeader
|
||||
@@ -715,7 +729,10 @@ const Payg: React.FC<PaygProps> = ({ role, wallet, onSaveCap, onOpenPortal }) =>
|
||||
|
||||
<div className="payg-planhead__col payg-planhead__col--meter">
|
||||
<div className="payg-planhead__lbl payg-planhead__lbl--meter">
|
||||
<BoltIcon className="payg-planhead__lbl-icon" fontSize="small" />
|
||||
<BoltIcon
|
||||
className="payg-planhead__lbl-icon"
|
||||
fontSize="small"
|
||||
/>
|
||||
{t("payg.header.meterLabel", "Metered")}
|
||||
</div>
|
||||
<p className="payg-planhead__title">
|
||||
|
||||
@@ -227,7 +227,9 @@
|
||||
font-size: 0.95rem;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: transform 120ms ease, box-shadow 120ms ease;
|
||||
transition:
|
||||
transform 120ms ease,
|
||||
box-shadow 120ms ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.paygf-cta__button:hover {
|
||||
|
||||
@@ -43,7 +43,7 @@ import { DocHelp } from "./Payg";
|
||||
|
||||
// ─── Shared free-tier snapshot ────────────────────────────
|
||||
|
||||
interface FreeSnapshot {
|
||||
export interface FreeSnapshot {
|
||||
/** One-time free documents used so far (grant − remaining). */
|
||||
billableUsed: number;
|
||||
/**
|
||||
@@ -61,7 +61,7 @@ interface FreeSnapshot {
|
||||
* numbers. Earlier versions returned a mock "62 of 500" sentinel which leaked
|
||||
* into the rendered UI and made the page look like nothing was wired up.
|
||||
*/
|
||||
function useFreeSnapshot(): FreeSnapshot {
|
||||
export function useFreeSnapshot(): FreeSnapshot {
|
||||
const { wallet } = useWallet();
|
||||
return useMemo(() => {
|
||||
if (wallet) {
|
||||
@@ -80,7 +80,10 @@ function useFreeSnapshot(): FreeSnapshot {
|
||||
type MeterState = "FULL" | "WARNED" | "DEGRADED";
|
||||
|
||||
/** Warn/degrade band for the one-time grant meter (mirrors the BE thresholds). */
|
||||
function meterState(used: number, limit: number): { state: MeterState; pct: number } {
|
||||
function meterState(
|
||||
used: number,
|
||||
limit: number,
|
||||
): { state: MeterState; pct: number } {
|
||||
const pct = limit > 0 ? Math.min(100, (used / limit) * 100) : 100;
|
||||
const state: MeterState =
|
||||
pct >= 100 ? "DEGRADED" : pct >= 80 ? "WARNED" : "FULL";
|
||||
@@ -113,7 +116,10 @@ function EditorPlanCard({ pill, leader }: EditorPlanCardProps) {
|
||||
/>
|
||||
{t("payg.free.editor.eyebrow", "Editor plan · Always free")}
|
||||
</span>
|
||||
<span className="payg-role-pill" data-leader={leader ? "true" : "false"}>
|
||||
<span
|
||||
className="payg-role-pill"
|
||||
data-leader={leader ? "true" : "false"}
|
||||
>
|
||||
{pill}
|
||||
</span>
|
||||
</div>
|
||||
@@ -132,7 +138,7 @@ function EditorPlanCard({ pill, leader }: EditorPlanCardProps) {
|
||||
|
||||
// ─── Compact one-time free meter (right column of the Processor card) ──────
|
||||
|
||||
function FreeMeterPanel({ snap }: { snap: FreeSnapshot }) {
|
||||
export function FreeMeterPanel({ snap }: { snap: FreeSnapshot }) {
|
||||
const { t } = useTranslation();
|
||||
const { state, pct } = meterState(snap.billableUsed, snap.billableLimit);
|
||||
const stateLabel =
|
||||
@@ -174,7 +180,9 @@ function FreeMeterPanel({ snap }: { snap: FreeSnapshot }) {
|
||||
{t("payg.free.hero.metaCategories", "Automation · AI · API requests")}
|
||||
</span>
|
||||
<span className="payg-hero__meta-dot">•</span>
|
||||
<span>{t("payg.free.hero.neverResets", "One-time, never resets")}</span>
|
||||
<span>
|
||||
{t("payg.free.hero.neverResets", "One-time — never resets")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -240,8 +248,10 @@ function ProcessorCard({ snap, isLeader, onTurnOn }: ProcessorCardProps) {
|
||||
<li>
|
||||
<CheckIcon className="paygf-cta__check" fontSize="small" />
|
||||
<span>
|
||||
<strong>{t("payg.free.cta.benefit3Title", "API access")}</strong>
|
||||
{": "}
|
||||
<strong>
|
||||
{t("payg.free.cta.benefit3Title", "API access")}
|
||||
</strong>
|
||||
{" — "}
|
||||
{t(
|
||||
"payg.free.cta.benefit3Body",
|
||||
"call any Stirling endpoint programmatically",
|
||||
|
||||
@@ -59,7 +59,10 @@ const Plan: React.FC = () => {
|
||||
|
||||
if (error || !wallet) {
|
||||
return (
|
||||
<Alert color="red" title={t("payg.error.title", "Couldn't load your plan")}>
|
||||
<Alert
|
||||
color="red"
|
||||
title={t("payg.error.title", "Couldn't load your plan")}
|
||||
>
|
||||
{error ??
|
||||
t(
|
||||
"payg.error.body",
|
||||
|
||||
+7
-2
@@ -53,7 +53,10 @@
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
font-variant-numeric: tabular-nums;
|
||||
transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
|
||||
transition:
|
||||
color 0.12s ease,
|
||||
border-color 0.12s ease,
|
||||
background 0.12s ease;
|
||||
}
|
||||
.scc-chip:hover:not(:disabled) {
|
||||
color: var(--text-primary);
|
||||
@@ -82,7 +85,9 @@
|
||||
border: 1px dashed var(--scc-chip-border);
|
||||
background: transparent;
|
||||
cursor: text;
|
||||
transition: border-color 0.12s ease, background 0.12s ease;
|
||||
transition:
|
||||
border-color 0.12s ease,
|
||||
background 0.12s ease;
|
||||
}
|
||||
.scc-custom:hover {
|
||||
border-color: var(--border-strong);
|
||||
|
||||
+8
-2
@@ -62,7 +62,10 @@ export interface SpendCapControlProps {
|
||||
}
|
||||
|
||||
/** Format minor units of an ISO currency ("$2.24", "£0.40"). */
|
||||
function formatMinor(minor: number, currency: string | null | undefined): string {
|
||||
function formatMinor(
|
||||
minor: number,
|
||||
currency: string | null | undefined,
|
||||
): string {
|
||||
const code = (currency ?? "usd").toUpperCase();
|
||||
try {
|
||||
return new Intl.NumberFormat(undefined, {
|
||||
@@ -212,7 +215,10 @@ const SpendCapControl: React.FC<SpendCapControlProps> = ({
|
||||
|
||||
{previewDocs != null && (
|
||||
<div className="scc-estimate">
|
||||
<DescriptionIcon className="scc-estimate__icon" sx={{ fontSize: 22 }} />
|
||||
<DescriptionIcon
|
||||
className="scc-estimate__icon"
|
||||
sx={{ fontSize: 22 }}
|
||||
/>
|
||||
<div>
|
||||
<div className="scc-estimate__main">
|
||||
{t("payg.cap.docsEstimate", "≈ {{docs}} processed PDFs / month", {
|
||||
|
||||
+4
-3
@@ -148,8 +148,7 @@ const StripeCheckoutPanel: React.FC<StripeCheckoutPanelProps> = ({
|
||||
const tRef = useRef(t);
|
||||
tRef.current = t;
|
||||
|
||||
const publishableKey =
|
||||
import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY ?? "";
|
||||
const publishableKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY ?? "";
|
||||
|
||||
// Dev preview route has no backend — skip the API call and go straight
|
||||
// to the mock placeholder so the design + completion path stay testable.
|
||||
@@ -214,7 +213,9 @@ const StripeCheckoutPanel: React.FC<StripeCheckoutPanelProps> = ({
|
||||
}
|
||||
if (cancelled) return;
|
||||
setClientSecret(data.client_secret);
|
||||
setIsMock(Boolean(data.mock) || data.client_secret.startsWith("cs_mock_"));
|
||||
setIsMock(
|
||||
Boolean(data.mock) || data.client_secret.startsWith("cs_mock_"),
|
||||
);
|
||||
} catch (e: unknown) {
|
||||
if (cancelled) return;
|
||||
const msg =
|
||||
|
||||
@@ -112,7 +112,9 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 120ms ease, color 120ms ease;
|
||||
transition:
|
||||
background 120ms ease,
|
||||
color 120ms ease;
|
||||
}
|
||||
.upm-header__close:hover {
|
||||
background: var(--upm-divider);
|
||||
@@ -141,7 +143,9 @@
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-left: -6px;
|
||||
transition: background 120ms ease, color 120ms ease;
|
||||
transition:
|
||||
background 120ms ease,
|
||||
color 120ms ease;
|
||||
}
|
||||
.upm-header__back:hover {
|
||||
background: var(--upm-divider);
|
||||
@@ -177,7 +181,10 @@
|
||||
justify-content: center;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
|
||||
transition:
|
||||
background 200ms ease,
|
||||
border-color 200ms ease,
|
||||
color 200ms ease;
|
||||
}
|
||||
.upm-step[data-state="active"] {
|
||||
color: var(--upm-text);
|
||||
|
||||
@@ -161,7 +161,10 @@ export default function UpgradeModal({
|
||||
<h2 className="upm-header__title">
|
||||
{step === "confirm"
|
||||
? t("payg.upgrade.title.confirm", "You're subscribed")
|
||||
: t("payg.upgrade.title.default", "Upgrade to Processor plan")}
|
||||
: t(
|
||||
"payg.upgrade.title.default",
|
||||
"Upgrade to Processor plan",
|
||||
)}
|
||||
</h2>
|
||||
</div>
|
||||
<button
|
||||
@@ -213,10 +216,7 @@ export default function UpgradeModal({
|
||||
>
|
||||
<span className="upm-step__dot">2</span>
|
||||
<span>
|
||||
{t(
|
||||
"payg.upgrade.steps.payment",
|
||||
"Add payment method",
|
||||
)}
|
||||
{t("payg.upgrade.steps.payment", "Add payment method")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -342,10 +342,7 @@ function CapStep({
|
||||
</div>
|
||||
|
||||
<h3 className="upm-section-title">
|
||||
{t(
|
||||
"payg.upgrade.cap.title",
|
||||
"Set your monthly spend ceiling",
|
||||
)}
|
||||
{t("payg.upgrade.cap.title", "Set your monthly spend ceiling")}
|
||||
</h3>
|
||||
<p className="upm-section-help">
|
||||
{t(
|
||||
@@ -377,18 +374,12 @@ function CapStep({
|
||||
|
||||
<div className="upm-help-card" style={{ marginTop: 16 }}>
|
||||
<span className="upm-help-card__title">
|
||||
{t(
|
||||
"payg.upgrade.help.title",
|
||||
"What we count toward billing",
|
||||
)}
|
||||
{t("payg.upgrade.help.title", "What we count toward billing")}
|
||||
</span>
|
||||
<ul style={{ margin: "4px 0 0", paddingLeft: 18, lineHeight: 1.55 }}>
|
||||
<li>
|
||||
<strong>
|
||||
{t(
|
||||
"payg.upgrade.help.automationTitle",
|
||||
"Automation pipelines",
|
||||
)}
|
||||
{t("payg.upgrade.help.automationTitle", "Automation pipelines")}
|
||||
</strong>
|
||||
{" — "}
|
||||
{t(
|
||||
@@ -397,9 +388,7 @@ function CapStep({
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
<strong>
|
||||
{t("payg.upgrade.help.aiTitle", "AI tools")}
|
||||
</strong>
|
||||
<strong>{t("payg.upgrade.help.aiTitle", "AI tools")}</strong>
|
||||
{" — "}
|
||||
{t(
|
||||
"payg.upgrade.help.aiBody",
|
||||
@@ -407,9 +396,7 @@ function CapStep({
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
<strong>
|
||||
{t("payg.upgrade.help.apiTitle", "API calls")}
|
||||
</strong>
|
||||
<strong>{t("payg.upgrade.help.apiTitle", "API calls")}</strong>
|
||||
{" — "}
|
||||
{t(
|
||||
"payg.upgrade.help.apiBody",
|
||||
@@ -447,10 +434,7 @@ function CheckoutStep({
|
||||
return (
|
||||
<>
|
||||
<h3 className="upm-section-title">
|
||||
{t(
|
||||
"payg.upgrade.checkout.title",
|
||||
"Add your payment method",
|
||||
)}
|
||||
{t("payg.upgrade.checkout.title", "Add your payment method")}
|
||||
</h3>
|
||||
<p className="upm-section-help">
|
||||
{t(
|
||||
@@ -498,10 +482,7 @@ function ConfirmationStep({
|
||||
<div className="upm-confirm">
|
||||
<CheckCircleIcon className="upm-confirm__icon" />
|
||||
<h3 className="upm-confirm__title">
|
||||
{t(
|
||||
"payg.confirm.title",
|
||||
"Welcome to the Processor plan",
|
||||
)}
|
||||
{t("payg.confirm.title", "Welcome to the Processor plan")}
|
||||
</h3>
|
||||
<p className="upm-confirm__body">
|
||||
{t(
|
||||
|
||||
@@ -151,11 +151,7 @@ function appendMcpSection(
|
||||
export function createSaasConfigNavSections(
|
||||
Overview: OverviewComponent,
|
||||
onLogoutClick: () => void,
|
||||
{
|
||||
isDev = false,
|
||||
isAnonymous = false,
|
||||
t,
|
||||
}: CreateSaasConfigNavSectionsOptions,
|
||||
{ isDev = false, isAnonymous = false, t }: CreateSaasConfigNavSectionsOptions,
|
||||
): ConfigNavSection[] {
|
||||
const baseSections = createCoreConfigNavSections(false, false, false);
|
||||
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem; /* 12px */
|
||||
margin-bottom: 0.625rem; /* 10px */
|
||||
}
|
||||
|
||||
.oauth-button-fullwidth {
|
||||
|
||||
@@ -112,9 +112,7 @@ describe("extractSignupCategory", () => {
|
||||
expect(
|
||||
extractSignupCategory({ response: { data: { category: 7 } } }),
|
||||
).toBeNull();
|
||||
expect(
|
||||
extractSignupCategory({ response: { data: {} } }),
|
||||
).toBeNull();
|
||||
expect(extractSignupCategory({ response: { data: {} } })).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user