chore(passport|console): Add live preview for Designer (#2720)

apps/console/app/components/EarlyAccess/EarlyAccessPanel.tsx

@@ -23,6 +23,8 @@ type EarlyAccessPanelProps = {
   featurePlan?: ServicePlanType
   identityURN: IdentityURN
   earlyAccess: boolean
+  showPreviewButton?: boolean
+  handlePreviewButtonClick?: () => void
 }
 
 const EarlyAccessPanel = ({
@@ -37,6 +39,8 @@ const EarlyAccessPanel = ({
   featurePlan,
   identityURN,
   earlyAccess,
+  showPreviewButton = false,
+  handlePreviewButtonClick,
 }: EarlyAccessPanelProps) => {
   return (
     <>
@@ -72,13 +76,22 @@ const EarlyAccessPanel = ({
           </Text>
           <div className="w-full border-t border-gray-200 mt-8 mb-4" />
 
-          {featurePlan && isPlanGuarded(currentPlan, featurePlan) && (
-            <NavLink to={`/apps/${clientID}/billing`}>
-              <Button btnType="primary-alt" className="mb-4">
-                Upgrade Plan
+          <div className="flex flex-row gap-4 items-center mb-4">
+            {featurePlan && isPlanGuarded(currentPlan, featurePlan) && (
+              <NavLink to={`/apps/${clientID}/billing`}>
+                <Button btnType="primary-alt">Upgrade Plan</Button>
+              </NavLink>
+            )}
+
+            {showPreviewButton && (
+              <Button
+                btnType="secondary-alt"
+                onClick={handlePreviewButtonClick}
+              >
+                Preview
               </Button>
-            </NavLink>
-          )}
+            )}
+          </div>
 
           <ContactUs
             urn={identityURN}

apps/console/app/routes/apps/$clientId/designer.tsx

@@ -93,13 +93,13 @@ import danger from '~/images/danger.svg'
 import { ToastType, toast } from '@proofzero/design-system/src/atoms/toast'
 import classNames from 'classnames'
 import { ServicePlanType } from '@proofzero/types/billing'
-import { planGuardWithToastException } from '~/utils/planGate'
 import designerSVG from '~/assets/early/designer.webp'
 import EarlyAccessPanel from '~/components/EarlyAccess/EarlyAccessPanel'
 import { IdentityURN } from '@proofzero/urns/identity'
 import { GetOgThemeResult } from '@proofzero/platform.starbase/src/jsonrpc/methods/getOgTheme'
 
 const LazyAuth = lazy(() =>
+  // @ts-ignore :(
   import('../../../web3/lazyAuth').then((module) => ({
     default: module.LazyAuth,
   }))
@@ -323,13 +323,17 @@ const AuthPanel = ({
   appTheme,
   avatarURL,
   appIconURL,
+  authorizationURL,
+  appPublished,
   setLoading,
   errors,
 }: {
   appName: string
   appTheme?: AppTheme
   avatarURL: string
   appIconURL?: string
+  authorizationURL: string
+  appPublished: boolean
   setLoading: React.Dispatch<React.SetStateAction<boolean>>
   errors?: {
     [key: string]: string
@@ -402,6 +406,13 @@ const AuthPanel = ({
     )
   }
 
+  const previewAuth = () => {
+    const authURL = new URL(authorizationURL)
+    authURL.searchParams.set('rollup_action', 'preview')
+
+    window.open(authURL.toString(), '_blank')
+  }
+
   return (
     <>
       <Helmet>
@@ -667,21 +678,6 @@ const AuthPanel = ({
 
           <div className="w-full border-b border-gray-200"></div>
 
-          <FormElement label="Default Style Settings">
-            <button
-              type="button"
-              onClick={() => {
-                resetToDefaults()
-              }}
-            >
-              <Text size="sm" weight="normal" className="text-indigo-600">
-                Reset to default
-              </Text>
-            </button>
-          </FormElement>
-
-          <div className="w-full border-b border-gray-200"></div>
-
           <FormElement label="Login Provider Configuration">
             <input
               type="hidden"
@@ -703,6 +699,55 @@ const AuthPanel = ({
           </FormElement>
 
           <div className="w-full border-b border-gray-200"></div>
+
+          <FormElement
+            label="Live Preview Mode"
+            sublabel={
+              appPublished ? undefined : `Application has to be published`
+            }
+          >
+            <button
+              className="flex flex-row items-center gap-2"
+              type="button"
+              onClick={previewAuth}
+              disabled={!appPublished}
+            >
+              <Text
+                size="sm"
+                weight="normal"
+                className={classNames(
+                  { 'text-indigo-600': appPublished },
+                  { 'text-gray-300': !appPublished }
+                )}
+              >
+                Open in new tab
+              </Text>
+
+              <HiOutlineExternalLink
+                className={classNames(
+                  { 'text-indigo-600': appPublished },
+                  { 'text-gray-300': !appPublished }
+                )}
+              />
+            </button>
+          </FormElement>
+
+          <div className="w-full border-b border-gray-200"></div>
+
+          <FormElement label="Default Style Settings">
+            <button
+              type="button"
+              onClick={() => {
+                resetToDefaults()
+              }}
+            >
+              <Text size="sm" weight="normal" className="text-indigo-600">
+                Reset to default
+              </Text>
+            </button>
+          </FormElement>
+
+          <div className="w-full border-b border-gray-200"></div>
         </section>
 
         <section className="bg-white border rounded-lg pb-3 px-6">
@@ -1478,17 +1523,6 @@ export const action: ActionFunction = getRollupReqFunctionErrorWrapper(
       ...traceHeader,
     })
 
-    const appDetails = await coreClient.starbase.getAppDetails.query({
-      clientId,
-    })
-
-    await planGuardWithToastException(
-      appDetails.appPlan,
-      ServicePlanType.PRO,
-      request,
-      context.env
-    )
-
     let errors: {
       [key: string]: string
     } = {}
@@ -1676,13 +1710,23 @@ export default () => {
     }[]
   }>()
 
-  const { appDetails, appContactAddress, appContactEmail, identityURN } =
-    useOutletContext<{
-      appDetails: appDetailsProps
-      appContactAddress?: AccountURN
-      appContactEmail?: string
-      identityURN: IdentityURN
-    }>()
+  const {
+    appDetails,
+    appContactAddress,
+    appContactEmail,
+    identityURN,
+    avatarUrl,
+    notificationHandler,
+    authorizationURL,
+  } = useOutletContext<{
+    appDetails: appDetailsProps
+    appContactAddress?: AccountURN
+    appContactEmail?: string
+    identityURN: IdentityURN
+    avatarUrl: string
+    notificationHandler: notificationHandlerType
+    authorizationURL: string
+  }>()
 
   const actionData = useActionData()
   const errors = actionData?.errors
@@ -1693,14 +1737,10 @@ export default () => {
     }
   }, [errors])
 
-  const { avatarUrl, notificationHandler } = useOutletContext<{
-    avatarUrl: string
-    notificationHandler: notificationHandlerType
-  }>()
-
   const [loading, setLoading] = useState<boolean>(false)
+  const [previewState, setPreviewState] = useState<boolean>(false)
 
-  if (appDetails.appPlan === ServicePlanType.FREE) {
+  if (appDetails.appPlan === ServicePlanType.FREE && !previewState) {
     return (
       <EarlyAccessPanel
         clientID={appDetails.clientId as string}
@@ -1714,6 +1754,10 @@ export default () => {
         currentPlan={appDetails.appPlan}
         featurePlan={ServicePlanType.PRO}
         identityURN={identityURN}
+        showPreviewButton={true}
+        handlePreviewButtonClick={() => {
+          setPreviewState(true)
+        }}
       />
     )
   }
@@ -1791,6 +1835,8 @@ export default () => {
               appTheme={appTheme}
               avatarURL={avatarUrl}
               appIconURL={appDetails.app.icon}
+              authorizationURL={authorizationURL}
+              appPublished={appDetails.published ?? false}
               setLoading={setLoading}
               errors={errors}
             />

apps/passport/app/root.tsx

@@ -72,7 +72,10 @@ export const links: LinksFunction = () => [
 export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
   async ({ request, context, params }) => {
     const clientId = new URL(request.url).searchParams.get('client_id')
-    if (request.cf &&
+    if (
+      // @ts-ignore :(
+      request.cf &&
+      // @ts-ignore :(
       request.cf.botManagement.score <= 30 &&
       !['localhost', '127.0.0.1'].includes(new URL(request.url).hostname)
     ) {
@@ -122,8 +125,14 @@ export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
           }
         } else {
           const coreClient = getCoreClient({ context })
+
+          const rollupAction = new URL(request.url).searchParams.get(
+            'rollup_action'
+          )
+
           appProps = await coreClient.starbase.getAppPublicProps.query({
             clientId: (params.clientId || clientId) as string,
+            previewMode: rollupAction === 'preview',
           })
         }
       }

apps/passport/app/routes/authenticate/$clientId.tsx

@@ -1,6 +1,6 @@
 import { Outlet, useLoaderData, useOutletContext } from '@remix-run/react'
 import { json } from '@remix-run/cloudflare'
-import { getAuthzCookieParams, isSupportedRollupAction } from '~/session.server'
+import { getAuthzCookieParams } from '~/session.server'
 
 import sideGraphics from '~/assets/auth-side-graphics.svg'
 
@@ -12,6 +12,7 @@ import { useContext } from 'react'
 import { getRollupReqFunctionErrorWrapper } from '@proofzero/utils/errors'
 import { AuthenticationScreenDefaults } from '@proofzero/design-system/src/templates/authentication/Authentication'
 import { ThemeContext } from '@proofzero/design-system/src/contexts/theme'
+import { isSupportedRollupAction } from '~/utils/actions'
 
 export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
   async ({ request, context, params }) => {
@@ -54,23 +55,23 @@ export default () => {
         <style type="text/css">{`
             :root {
                 ${getRGBColor(
-          dark
-            ? appProps?.appTheme?.color?.dark ??
-            AuthenticationScreenDefaults.color.dark
-            : appProps?.appTheme?.color?.light ??
-            AuthenticationScreenDefaults.color.light,
-          'primary'
-        )}
+                  dark
+                    ? appProps?.appTheme?.color?.dark ??
+                        AuthenticationScreenDefaults.color.dark
+                    : appProps?.appTheme?.color?.light ??
+                        AuthenticationScreenDefaults.color.light,
+                  'primary'
+                )}
                 ${getRGBColor(
-          getTextColor(
-            dark
-              ? appProps?.appTheme?.color?.dark ??
-              AuthenticationScreenDefaults.color.dark
-              : appProps?.appTheme?.color?.light ??
-              AuthenticationScreenDefaults.color.light
-          ),
-          'primary-contrast-text'
-        )}
+                  getTextColor(
+                    dark
+                      ? appProps?.appTheme?.color?.dark ??
+                          AuthenticationScreenDefaults.color.dark
+                      : appProps?.appTheme?.color?.light ??
+                          AuthenticationScreenDefaults.color.light
+                  ),
+                  'primary-contrast-text'
+                )}
              {
          `}</style>
       </Helmet>
@@ -84,8 +85,9 @@ export default () => {
               'basis-2/5 h-[100dvh] w-full hidden lg:flex justify-center items-center bg-indigo-50 dark:bg-[#1F2937] overflow-hidden'
             }
             style={{
-              backgroundImage: `url(${appProps?.appTheme?.graphicURL ?? sideGraphics
-                })`,
+              backgroundImage: `url(${
+                appProps?.appTheme?.graphicURL ?? sideGraphics
+              })`,
               backgroundSize: 'cover',
               backgroundPosition: 'center',
               backgroundRepeat: 'no-repeat',