feat: update demo organization flow

Author: steveninhle

ui/dashboard/src/@locales/en/auth.json

@@ -28,5 +28,10 @@
   "organization-name": "Organization name",
   "owner-email": "Owner email",
   "demo-agree-terms": "I agree to the Privacy Notice and consent to using my information as described above.",
-  "privacy-notice": "Privacy Notice"
+  "privacy-notice": "Privacy Notice",
+  "demo-organization": "Demo Organization",
+  "sign-in-title": "Sign In",
+  "sign-in-to-bucketeer": "Sign in to Bucketeer",
+  "sign-in-with-google": "Sign in with Google",
+  "sign-in-with-email": "Sign in with Email"
 }

ui/dashboard/src/@locales/en/message.json

@@ -54,6 +54,6 @@
   "empty-segment": "No segments found. Please <comp>create</comp> a segment first.",
   "demo-not-available": "The Demo feature is not available at the moment.",
   "demo-available": "Authenticate with Google and get started!",
-  "demo-privacy-description": "We collect your name and email address to analyze demo usage, and we may contact you for feedback about Bucketeer.<br />We will not share your information with any third parties. For any questions or to delete your information, please contact us via Slack.",
-  "required-agreement-terms": "Agreement to the Terms of Use and Privacy Policy is required to proceed."
+  "demo-privacy-description": "We collect your name and email address to analyze demo usage, and we may contact you for feedback about Bucketeer.<br />We will not share your information with any third parties. For any questions or to delete your information, please contact us via <comp>Slack</comp>.",
+  "required-agreement-terms": "The agreement to the Terms of Use and Privacy Policy is required to proceed."
 }

ui/dashboard/src/@locales/ja/auth.json

@@ -28,5 +28,10 @@
   "organization-name": "組織名",
   "owner-email": "オーナーのメールアドレス",
   "demo-agree-terms": "上記のプライバシー通知を読み、内容に同意します。",
-  "privacy-notice": "プライバシー通知"
+  "privacy-notice": "プライバシー通知",
+  "demo-organization": "デモ 組織",
+  "sign-in-title": "サインイン",
+  "sign-in-to-bucketeer": "Bucketeerにサインイン",
+  "sign-in-with-google": "メールでサインイン",
+  "sign-in-with-email": "Googleでサインイン"
 }

ui/dashboard/src/@locales/ja/message.json

@@ -54,6 +54,6 @@
   "empty-segment": "セグメントがありません。先に<comp>作成</comp>してください。",
   "demo-not-available": "現在、デモ機能はご利用いただけません。",
   "demo-available": "Googleで認証してデモをスタート！",
-  "demo-privacy-description": "デモの利用状況を分析し、必要に応じてBucketeerに関するご意見を伺うため、お名前とメールアドレスを収集しています。.<br />ご提供いただいた情報を第三者に共有することはありません。ご質問や情報の削除をご希望の場合は、Slackからご連絡ください。",
-  "required-agreement-terms": "続行するには、利用規約とプライバシーポリシーに同意する必要があります。"
+  "demo-privacy-description": "デモの利用状況を分析し、必要に応じてBucketeerに関するご意見を伺うため、お名前とメールアドレスを収集しています。.<br />ご提供いただいた情報を第三者に共有することはありません。ご質問や情報の削除をご希望の場合は、<comp>Slack</comp>からご連絡ください。",
+  "required-agreement-terms": "利用規約およびプライバシーポリシーへの同意が必要です。"
 }

ui/dashboard/src/app/index.tsx

@@ -61,6 +61,7 @@ import APIKeysPage from 'pages/api-keys';
 import AuditLogsPage from 'pages/audit-logs';
 import DebuggerPage from 'pages/debugger';
 import AccessDemoPage from 'pages/demo';
+import CreateDemoPage from 'pages/demo/demo-create';
 import MembersPage from 'pages/members';
 import NotFoundPage from 'pages/not-found';
 import NotificationsPage from 'pages/notifications';
@@ -115,6 +116,10 @@ function App() {
                 element={<SignInEmailPage />}
               />
               <Route path={PAGE_PATH_DEMO_SITE} element={<AccessDemoPage />} />
+              <Route
+                path={`${PAGE_PATH_DEMO_SITE}/new`}
+                element={<CreateDemoPage />}
+              />
               <Route path={`${PAGE_PATH_ROOT}*`} element={<Root />} />
             </Routes>
           </AuthProvider>

ui/dashboard/src/assets/logos/logo-primary.svg

@@ -23,7 +23,7 @@ export const AuthDemoCallbackPage: FC = memo(() => {
         const response = await exchangeDemoToken(payload);
         if (response.demoCreationToken) {
           setDemoTokenStorage(response.demoCreationToken);
-          navigate(PAGE_PATH_DEMO_SITE);
+          navigate(`${PAGE_PATH_DEMO_SITE}/new`);
         }
       } catch (error) {
         setIsGoogleAuthError(true);

ui/dashboard/src/auth/auth-demo-callback.tsx

@@ -29,12 +29,12 @@ const Checkbox = forwardRef(
 
     return (
       <div
-        className={cn('flex w-fit items-center gap-x-2', {
+        className={cn('flex w-fit items-start gap-x-2', {
           'w-full justify-between': isExpand,
           'flex-row-reverse': isReverse
         })}
       >
-        <div className="flex-center size-5">
+        <div className="flex-center size-5 mt-0.5">
           <CheckboxPrimitive.Root
             className={cn(
               'flex-center size-5 rounded border border-gray-500 transition-colors duration-200',

ui/dashboard/src/components/checkbox/index.tsx

@@ -0,0 +1,66 @@
+import { useEffect } from 'react';
+import { Trans } from 'react-i18next';
+import { Link, useNavigate } from 'react-router-dom';
+import { useQueryDemoSiteStatus } from '@queries/demo-site-status';
+import { PAGE_PATH_DEMO_SITE } from 'constants/routing';
+import { useTranslation } from 'i18n';
+import { getDemoTokenStorage } from 'storage/demo-token';
+import { IconBackspace } from '@icons';
+import AuthWrapper from 'pages/signin/elements/auth-wrapper';
+import Button from 'components/button';
+import Icon from 'components/icon';
+import DemoForm from './demo-form';
+
+const CreateDemoPage = () => {
+  const navigate = useNavigate();
+  const { t } = useTranslation(['common', 'auth', 'message']);
+
+  const demoAuthToken = getDemoTokenStorage();
+  const { data: demoSiteStatusData, isSuccess } = useQueryDemoSiteStatus();
+
+  const isDemoSiteEnabled = demoSiteStatusData?.isDemoSiteEnabled;
+
+  useEffect(() => {
+    if (!demoAuthToken || (isSuccess && !isDemoSiteEnabled)) {
+      navigate(PAGE_PATH_DEMO_SITE);
+    }
+  }, [isDemoSiteEnabled]);
+
+  return (
+    <AuthWrapper>
+      <div className="-mt-2">
+        <Button
+          variant="secondary-2"
+          onClick={() => navigate(PAGE_PATH_DEMO_SITE)}
+          className="p-2 h-auto"
+        >
+          <Icon icon={IconBackspace} size="sm" />
+        </Button>
+        <h1 className="text-gray-900 typo-head-bold-huge mt-8">
+          {t('auth:demo-organization')}
+        </h1>
+
+        <h3 className="text-gray-900 typo-head-light-medium mt-6">
+          {t('auth:privacy-notice')}
+        </h3>
+        <div className="text-gray-600 typo-para-medium mt-2">
+          <Trans
+            i18nKey="message:demo-privacy-description"
+            components={{
+              comp: (
+                <Link
+                  target="_blank"
+                  to={`https://app.slack.com/client/T08PSQ7BQ/C043026BME1`}
+                  className="text-primary-500 underline"
+                />
+              )
+            }}
+          />
+        </div>
+        <DemoForm isDemoSiteEnabled={isDemoSiteEnabled} />
+      </div>
+    </AuthWrapper>
+  );
+};
+
+export default CreateDemoPage;

ui/dashboard/src/pages/demo/demo-create.tsx

@@ -15,7 +15,7 @@ import Checkbox from 'components/checkbox';
 import Form from 'components/form';
 import Input from 'components/input';
 
-interface AccessDemoForm {
+interface CreateDemoForm {
   organizationName: string;
   organizationUrlCode: string;
   isAgree: boolean;
@@ -39,13 +39,7 @@ const formSchema = ({ requiredMessage, translation }: FormSchemaProps) =>
       .required(requiredMessage)
   });
 
-const DemoForm = ({
-  isDemoSiteEnabled,
-  onDemoAuthenticated
-}: {
-  isDemoSiteEnabled?: boolean;
-  onDemoAuthenticated: (v: boolean) => void;
-}) => {
+const DemoForm = ({ isDemoSiteEnabled }: { isDemoSiteEnabled?: boolean }) => {
   const { errorNotify, notify } = useToast();
   const navigate = useNavigate();
 
@@ -65,7 +59,7 @@ const DemoForm = ({
     formState: { isDirty, isValid, isSubmitting }
   } = form;
 
-  const onSubmit: SubmitHandler<AccessDemoForm> = async values => {
+  const onSubmit: SubmitHandler<CreateDemoForm> = async values => {
     try {
       const response = await organizationDemoCreator({
         name: values.organizationName,
@@ -84,7 +78,6 @@ const DemoForm = ({
       }
     } catch (error) {
       if ((error as AxiosError).status === 401) {
-        onDemoAuthenticated(false);
         clearDemoTokenStorage();
       }
       errorNotify(error);