feat(console): typeform and upgrade CTA

apps/console/app/components/ContactUs/index.tsx

@@ -0,0 +1,37 @@
+import { Button } from '@proofzero/design-system'
+import { AccountURN } from '@proofzero/urns/account'
+import { Text } from '@proofzero/design-system/src/atoms/text/Text'
+import { useRef } from 'react'
+import { PopupButton } from '@typeform/embed-react'
+
+export default ({ urn, type }: { urn: AccountURN; type: 'btn' | 'text' }) => {
+  const ref = useRef<any>(null)
+  const openPopup = () => ref.current?.open()
+
+  return (
+    <>
+      <PopupButton
+        id="V4FksPxe"
+        ref={ref}
+        hidden={{
+          urn,
+        }}
+      >
+        {null}
+      </PopupButton>
+
+      {type === 'btn' ? (
+        <Button btnType="primary-alt" onClick={() => openPopup()}>
+          Contact us for early access
+        </Button>
+      ) : (
+        <Text size="sm" weight="semibold">
+          <span className="text-gray-600">Any questions?</span>
+          <button className="ml-1" onClick={() => openPopup()}>
+            <span className="text-indigo-500">Contact us</span>
+          </button>
+        </Text>
+      )}
+    </>
+  )
+}

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

@@ -1,25 +1,42 @@
 import { Text } from '@proofzero/design-system/src/atoms/text/Text'
 import { FeaturePill } from '@proofzero/design-system/src/atoms/pills/FeaturePill'
-import { ButtonAnchor } from '@proofzero/design-system/src/atoms/buttons/ButtonAnchor'
-import { FaDiscord, FaGithub, FaTwitter } from 'react-icons/fa'
 import { DocumentationBadge } from '../DocumentationBadge'
+import { AccountURN } from '@proofzero/urns/account'
+import ContactUs from '../ContactUs'
+import { ServicePlanType } from '@proofzero/types/account'
+import { isPlanGuarded } from '~/utils/planGate'
+import plans from '~/routes/__layout/billing/plans'
+import _ from 'lodash'
+import { TbLock } from 'react-icons/tb'
+import { Button } from '@proofzero/design-system'
+import { NavLink } from '@remix-run/react'
 
 type EarlyAccessPanelProps = {
+  clientID: string
   title: string
   subtitle: string
   copy: string
   imgSrc: string
   url: string
   imgClassName?: string
+  currentPlan: ServicePlanType
+  featurePlan?: ServicePlanType
+  accountURN: AccountURN
+  earlyAccess: boolean
 }
 
 const EarlyAccessPanel = ({
+  clientID,
   title,
   subtitle,
   copy,
   imgSrc,
   url,
   imgClassName,
+  currentPlan,
+  featurePlan,
+  accountURN,
+  earlyAccess,
 }: EarlyAccessPanelProps) => {
   return (
     <>
@@ -36,48 +53,43 @@ const EarlyAccessPanel = ({
 
       <div className="bg-white p-10 rounded-lg shadow flex flex-col lg:flex-row lg:space-x-28 space-y-4 lg:space-y-0">
         <section className="flex-1">
-          <div className="mb-4">
-            <FeaturePill text="Early Access" />
+          <div className="mb-4 flex flex-row items-center gap-2">
+            {featurePlan && (
+              <FeaturePill
+                Icon={TbLock}
+                text={`${_.toUpper(
+                  plans[featurePlan].title.split(' ')[0]
+                )} feature`}
+              />
+            )}
+            {earlyAccess && <FeaturePill text="Early Access" />}
           </div>
-
           <Text size="2xl" weight="semibold" className="text-gray-900 mb-2">
             {subtitle}
           </Text>
-
           <Text weight="normal" className="text-gray-500">
             {copy}
           </Text>
-
           <div className="w-full border-t border-gray-200 mt-8 mb-4" />
 
-          <div>
-            <Text size="sm" weight="medium" className="mb-3 text-gray-700">
-              Follow us for updates
-            </Text>
-
-            <div className="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-2">
-              <ButtonAnchor key="twitter" href="https://twitter.com/rollupid">
-                <FaTwitter className="text-base text-[#1D9BF0]" />
-
-                <Text>Twitter</Text>
-              </ButtonAnchor>
+          {featurePlan && isPlanGuarded(currentPlan, featurePlan) && (
+            <NavLink to={`/apps/${clientID}/billing`}>
+              <Button btnType="primary-alt" className="mb-4">
+                Upgrade Plan
+              </Button>
+            </NavLink>
+          )}
 
-              <ButtonAnchor key="discord" href="https://discord.gg/rollupid">
-                <FaDiscord className="text-base text-[#5865F2]" />
-
-                <Text>Discord</Text>
-              </ButtonAnchor>
-
-              <ButtonAnchor
-                key="github"
-                href="https://github.com/proofzero/rollupid"
-              >
-                <FaGithub className="text-base" />
-
-                <Text>GitHub</Text>
-              </ButtonAnchor>
-            </div>
-          </div>
+          <ContactUs
+            urn={accountURN}
+            type={
+              featurePlan
+                ? isPlanGuarded(currentPlan, featurePlan)
+                  ? 'text'
+                  : 'btn'
+                : 'btn'
+            }
+          />
         </section>
 
         <section className="hidden lg:block">

apps/console/app/entry.server.tsx

@@ -38,7 +38,11 @@ export default function handleRequest(
     (nonce, dev) =>
       getCSP({
         directives: {
-          'default-src': [SELF, 'https://verify.walletconnect.com'],
+          'default-src': [
+            SELF,
+            'https://verify.walletconnect.com',
+            'form.typeform.com',
+          ],
           'connect-src': [
             SELF,
             '*.google-analytics.com',

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

@@ -1,12 +1,26 @@
 import EarlyAccessPanel from '~/components/EarlyAccess/EarlyAccessPanel'
 import audienceSVG from '~/assets/early/audience.svg'
+import { useOutletContext } from '@remix-run/react'
+import { appDetailsProps } from '~/types'
+import { AccountURN } from '@proofzero/urns/account'
 
-export default () => (
-  <EarlyAccessPanel
-    title="Audience Builder"
-    subtitle="Direct User Acquisition"
-    copy="With the zero-knowledge audience builder tool, businesses can identify and target specific groups of potential users, creating personalized marketing messages that optimize user acquisition efforts. This feature enables businesses to launch their application and acquire their first and next users efficiently and effectively, ensuring a successful launch."
-    imgSrc={audienceSVG}
-    url={'https://docs.rollup.id/platform/console/audience-builder'}
-  />
-)
+export default () => {
+  const { appDetails, accountURN } = useOutletContext<{
+    appDetails: appDetailsProps
+    accountURN: AccountURN
+  }>()
+
+  return (
+    <EarlyAccessPanel
+      clientID={appDetails.clientId as string}
+      title="Audience Builder"
+      subtitle="Direct User Acquisition"
+      copy="With the zero-knowledge audience builder tool, businesses can identify and target specific groups of potential users, creating personalized marketing messages that optimize user acquisition efforts. This feature enables businesses to launch their application and acquire their first and next users efficiently and effectively, ensuring a successful launch."
+      imgSrc={audienceSVG}
+      url={'https://docs.rollup.id/platform/console/audience-builder'}
+      earlyAccess={true}
+      currentPlan={appDetails.appPlan}
+      accountURN={accountURN}
+    />
+  )
+}

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

@@ -80,16 +80,13 @@ import type { appDetailsProps } from '~/types'
 import { CountdownCircleTimer } from 'react-countdown-circle-timer'
 import { AddressURN } from '@proofzero/urns/address'
 import danger from '~/images/danger.svg'
-import {
-  ToastType,
-  Toaster,
-  toast,
-} from '@proofzero/design-system/src/atoms/toast'
+import { ToastType, toast } from '@proofzero/design-system/src/atoms/toast'
 import classNames from 'classnames'
 import { ServicePlanType } from '@proofzero/types/account'
-import { planGuardWithToastException } from '~/utils/planGate.server'
+import { planGuardWithToastException } from '~/utils/planGate'
 import designerSVG from '~/assets/early/designer.webp'
 import EarlyAccessPanel from '~/components/EarlyAccess/EarlyAccessPanel'
+import { AccountURN } from '@proofzero/urns/account'
 
 const LazyAuth = lazy(() =>
   import('../../../web3/lazyAuth').then((module) => ({
@@ -107,8 +104,9 @@ const DesignerTab = ({
   selected: boolean
 }) => (
   <div
-    className={`box-border -mb-0.5 mr-8 pb-4 px-1 flex flex-row items-center gap-2 border-b-2 ${selected ? 'border-indigo-600' : 'border-transparent'
-      }`}
+    className={`box-border -mb-0.5 mr-8 pb-4 px-1 flex flex-row items-center gap-2 border-b-2 ${
+      selected ? 'border-indigo-600' : 'border-transparent'
+    }`}
   >
     <Icon
       className={`w-5 h-5 ${selected ? 'text-indigo-600' : 'text-gray-500'}`}
@@ -198,8 +196,9 @@ const RadiusButton = ({
   return (
     <button
       type="button"
-      className={`w-full py-1.5 px-2.5 rounded-md ${selected ? 'bg-indigo-500' : ''
-        }`}
+      className={`w-full py-1.5 px-2.5 rounded-md ${
+        selected ? 'bg-indigo-500' : ''
+      }`}
       onClick={(e) => {
         e.preventDefault()
         setRadius(radius)
@@ -331,7 +330,7 @@ const AuthPanel = ({
 
   const [signMessage, setSignMessage] = useState<string>(
     appTheme?.signMessageTemplate ??
-    AuthenticationScreenDefaults.defaultSignMessage
+      AuthenticationScreenDefaults.defaultSignMessage
   )
 
   const [radius, setRadius] = useState<string>(
@@ -354,10 +353,10 @@ const AuthPanel = ({
     }[]
   >(
     appTheme?.providers ??
-    AuthenticationScreenDefaults.knownKeys.map((k) => ({
-      key: k,
-      enabled: true,
-    }))
+      AuthenticationScreenDefaults.knownKeys.map((k) => ({
+        key: k,
+        enabled: true,
+      }))
   )
   const [providerModalOpen, setProviderModalOpen] = useState<boolean>(false)
 
@@ -382,9 +381,9 @@ const AuthPanel = ({
             :root {
                 ${getRGBColor(dark ? color.dark : color.light, 'primary')}
                 ${getRGBColor(
-          getTextColor(dark ? color.dark : color.light),
-          'primary-contrast-text'
-        )}
+                  getTextColor(dark ? color.dark : color.light),
+                  'primary-contrast-text'
+                )}
              {
          `}</style>
       </Helmet>
@@ -607,7 +606,7 @@ const AuthPanel = ({
               <IconPicker
                 maxSize={2097152}
                 id="image"
-                setIsFormChanged={(val) => { }}
+                setIsFormChanged={(val) => {}}
                 setIsImgUploading={(val) => {
                   setLoading(val)
                 }}
@@ -776,8 +775,8 @@ const AuthPanel = ({
                           'urn:rollupid:address/0xc2b930f1fc2a55ddc1bf99e8844ca0479567ac44f3e2eea58216660e26947686',
                       },
                     ]}
-                    selectEmailCallback={() => { }}
-                    addNewEmailCallback={() => { }}
+                    selectEmailCallback={() => {}}
+                    addNewEmailCallback={() => {}}
                     selectedConnectedAccounts={[]}
                     connectedAccounts={[
                       {
@@ -815,16 +814,16 @@ const AuthPanel = ({
                     ]}
                     selectedSCWallets={[]}
                     connectedSmartContractWallets={[]}
-                    addNewAccountCallback={() => { }}
-                    addNewSmartWalletCallback={() => { }}
-                    selectSmartWalletsCallback={() => { }}
-                    selectAccountsCallback={() => { }}
-                    selectAllAccountsCallback={() => { }}
-                    selectAllSmartWalletsCallback={() => { }}
+                    addNewAccountCallback={() => {}}
+                    addNewSmartWalletCallback={() => {}}
+                    selectSmartWalletsCallback={() => {}}
+                    selectAccountsCallback={() => {}}
+                    selectAllAccountsCallback={() => {}}
+                    selectAllSmartWalletsCallback={() => {}}
                     // disableAuthorize={true}
                     transitionState={'idle'}
-                    cancelCallback={() => { }}
-                    authorizeCallback={() => { }}
+                    cancelCallback={() => {}}
+                    authorizeCallback={() => {}}
                     radius={radius}
                   />
                 </Tab.Panel>
@@ -961,7 +960,7 @@ const EmailPanel = ({
               <IconPicker
                 maxSize={2097152}
                 id="logoURL"
-                setIsFormChanged={(val) => { }}
+                setIsFormChanged={(val) => {}}
                 setIsImgUploading={(val) => {
                   setLoading(val)
                 }}
@@ -1317,9 +1316,9 @@ export const action: ActionFunction = getRollupReqFunctionErrorWrapper(
         color:
           color && colorDark
             ? {
-              light: color,
-              dark: colorDark,
-            }
+                light: color,
+                dark: colorDark,
+              }
             : undefined,
         graphicURL: graphicURL,
         providers: providers,
@@ -1412,11 +1411,13 @@ export default () => {
     }[]
   }>()
 
-  const { appDetails, appContactAddress, appContactEmail } = useOutletContext<{
-    appDetails: appDetailsProps
-    appContactAddress?: AddressURN
-    appContactEmail?: string
-  }>()
+  const { appDetails, appContactAddress, appContactEmail, accountURN } =
+    useOutletContext<{
+      appDetails: appDetailsProps
+      appContactAddress?: AddressURN
+      appContactEmail?: string
+      accountURN: AccountURN
+    }>()
 
   const actionData = useActionData()
   const errors = actionData?.errors
@@ -1437,12 +1438,17 @@ export default () => {
   if (appDetails.appPlan === ServicePlanType.FREE) {
     return (
       <EarlyAccessPanel
+        clientID={appDetails.clientId as string}
         title="Designer"
         subtitle="Customize your Login Experience"
         copy="With a white label feature in your authentication tool, you can customize the user interface to match your brand, giving a seamless experience to your users. This not only enhances brand consistency but also establishes trust with users, making it an essential security measure for protecting sensitive data."
         imgSrc={designerSVG}
         imgClassName="w-[363px]"
         url={'https://docs.rollup.id/platform/console/designer'}
+        earlyAccess={false}
+        currentPlan={appDetails.appPlan}
+        featurePlan={ServicePlanType.PRO}
+        accountURN={accountURN}
       />
     )
   }