Add SaaS frontend code (#5879)

# Description of Changes Adds the code for the SaaS frontend as proprietary code to the OSS repo. This version of the code is adapted from 22/1/2026, which was the last SaaS version based on the 'V2' design. This will move us closer to being able to have the OSS products understand whether the user has a SaaS account, and provide the correct UI in those cases.
2026-09-13 12:15:29 +02:00 · 2026-03-11 11:53:54 +00:00
parent 8bc37bf5ae
commit fa8c52b2be
114 changed files with 12408 additions and 99 deletions
@@ -0,0 +1,81 @@
+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,
+    },
+  };
+}