Skip to content

Commit

Permalink
feat(console): typeform and early access upgrade CTA (#2516)
Browse files Browse the repository at this point in the history
  • Loading branch information
Cosmin-Parvulescu authored Jul 18, 2023
1 parent 99d6329 commit e3aeafb
Show file tree
Hide file tree
Showing 15 changed files with 249 additions and 107 deletions.
Binary file not shown.
Binary file not shown.
37 changes: 37 additions & 0 deletions apps/console/app/components/ContactUs/index.tsx
Original file line number Diff line number Diff line change
@@ -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>
)}
</>
)
}
80 changes: 46 additions & 34 deletions apps/console/app/components/EarlyAccess/EarlyAccessPanel.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<>
Expand All @@ -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">
Expand Down
6 changes: 5 additions & 1 deletion apps/console/app/entry.server.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
32 changes: 23 additions & 9 deletions apps/console/app/routes/apps/$clientId/audience.tsx
Original file line number Diff line number Diff line change
@@ -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}
/>
)
}
82 changes: 44 additions & 38 deletions apps/console/app/routes/apps/$clientId/designer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) => ({
Expand All @@ -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'}`}
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -331,7 +330,7 @@ const AuthPanel = ({

const [signMessage, setSignMessage] = useState<string>(
appTheme?.signMessageTemplate ??
AuthenticationScreenDefaults.defaultSignMessage
AuthenticationScreenDefaults.defaultSignMessage
)

const [radius, setRadius] = useState<string>(
Expand All @@ -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)

Expand All @@ -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>
Expand Down Expand Up @@ -607,7 +606,7 @@ const AuthPanel = ({
<IconPicker
maxSize={2097152}
id="image"
setIsFormChanged={(val) => { }}
setIsFormChanged={(val) => {}}
setIsImgUploading={(val) => {
setLoading(val)
}}
Expand Down Expand Up @@ -776,8 +775,8 @@ const AuthPanel = ({
'urn:rollupid:address/0xc2b930f1fc2a55ddc1bf99e8844ca0479567ac44f3e2eea58216660e26947686',
},
]}
selectEmailCallback={() => { }}
addNewEmailCallback={() => { }}
selectEmailCallback={() => {}}
addNewEmailCallback={() => {}}
selectedConnectedAccounts={[]}
connectedAccounts={[
{
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -961,7 +960,7 @@ const EmailPanel = ({
<IconPicker
maxSize={2097152}
id="logoURL"
setIsFormChanged={(val) => { }}
setIsFormChanged={(val) => {}}
setIsImgUploading={(val) => {
setLoading(val)
}}
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand All @@ -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}
/>
)
}
Expand Down
Loading

0 comments on commit e3aeafb

Please sign in to comment.