diff --git a/src/common/Common.constants.ts b/src/common/Common.constants.ts index 73a502decc..aaa1640835 100644 --- a/src/common/Common.constants.ts +++ b/src/common/Common.constants.ts @@ -13,6 +13,7 @@ import Optimisim from 'blocks/illustrations/components/Optimisim'; import Polygon from 'blocks/illustrations/components/Polygon'; import PolygonZK from 'blocks/illustrations/components/PolygonZK'; import { FC } from 'react'; +import { FAQItemTypes, PurchasePlanAlertObjType } from 'common'; export const LOGO_ALIAS_CHAIN: { [x: number]: FC; @@ -138,3 +139,49 @@ export const channelCategoriesMap: Record = { '0x63381E4b8fE26cb1f55cc38e8369990594E017b1': 'Service', '0x80375eAD5561e19668eb1Dd2b6A44Fa14D5eB6BF': 'Service', }; + +export const purchasePlanAlertTypes: { [x: string]: (planName?: string) => PurchasePlanAlertObjType } = { + success: (planName) => ({ + description: `Purchase Successful. Push ${planName} Plan`, + actionText: 'View on Explorer', + variant: 'success', + }), + renewalReminder: (planName) => ({ + description: `Your Push ${planName} plan ends in 7 days`, + actionText: 'Renew Plan', + variant: 'warning', + }), + expired: (planName) => ({ + description: `Your Push ${planName} plan has expired`, + actionText: 'Renew Plan', + variant: 'error', + }), + notificationLimit: () => ({ + description: `Web2 Notifications limit reached. Upgrade for more features.`, + actionText: 'Upgrade Plan', + variant: 'warning', + }), +}; + +export const faqList: FAQItemTypes[] = [ + { + id: 1, + question: 'What is Push?', + }, + { + id: 2, + question: 'What is Push trying to solve?', + }, + { + id: 3, + question: 'What are the web3 communication products launched by Push?', + }, + { + id: 4, + question: 'How can I use Push as an end-user?', + }, + { + id: 5, + question: 'Is Push a blockchain? Is Push decentralised?', + }, +]; diff --git a/src/common/Common.types.ts b/src/common/Common.types.ts index 00baba42a2..08545b6dbc 100644 --- a/src/common/Common.types.ts +++ b/src/common/Common.types.ts @@ -1,3 +1,5 @@ +import { AlertVariant } from 'blocks/alert'; + export type ModalResponse = { isOpen: boolean; onClose: () => void; @@ -7,3 +9,14 @@ export type ModalResponse = { export type UnlockProfileModalTypes = 'portal' | 'container'; export type EnvType = 'prod' | 'dev' | 'staging'; + +export type PurchasePlanAlertObjType = { + description: string; + actionText: string; + variant: AlertVariant; +}; + +export type FAQItemTypes = { + id: number; + question: string; +}; diff --git a/src/common/components/FAQContainer.tsx b/src/common/components/FAQContainer.tsx new file mode 100644 index 0000000000..4bd7cc4ef9 --- /dev/null +++ b/src/common/components/FAQContainer.tsx @@ -0,0 +1,409 @@ +import { FC, ReactNode, useState } from 'react'; +import { Add, Box, Button, Dash, Front, Link, Text, ArrowUpRight } from 'blocks'; +import { css } from 'styled-components'; +import { faqList } from 'common'; + +export type FAQContainerProps = {}; + +const FAQContainer: FC = ({}) => { + const [expandedQid, setExpandedQid] = useState(null); + + const answerMapper: { [x: number]: ReactNode } = { + 1: , + 2: , + 3: , + 4: , + 5: , + }; + + return ( + + {/* Render FAQ left side container */} + + + Frequently Asked Questions + + + + + + + {/* Render FAQ Content container */} + + {/* Render list of questions with answers */} + + {faqList.map((faqItem, index) => ( + + + + {faqItem?.question} + + + {expandedQid === faqItem?.id ? ( + setExpandedQid(null)} + size={28} + /> + ) : ( + setExpandedQid(faqItem?.id)} + size={28} + /> + )} + + {expandedQid && expandedQid === faqItem?.id && answerMapper[expandedQid]} + + ))} + + + {/* Render explore more questions view */} + + + + + Explore FAQs + + + + + + + + ); +}; + +export { FAQContainer }; + +const AnswerOne: FC = () => { + return ( + + + Push is the world’s first blockchain-agnostic decentralised communication protocol for Web3. It is an open + network for validating and indexing all sorts of communication (notifications, chats, etc) that can then be + integrated by any crypto frontend (dApps, wallets, etc). + + + Any smart contract, dApp, or backend service can integrate Push to provide a communication layer through + notifications or chats that are tied to the wallet addresses of users. + + + ); +}; + +const AnswerTwo: FC = () => { + return ( + + + Push is building the communication layer for Web3, using which any dApp, smart contracts or backend can send any + real time communications (such as notifications, chats, video and more) that are tied directly to a user's + wallet address (aka web3 usernames). + + + This addresses a major gap in the web3 infrastructure, and improving the everyday experience for blockchain + users. The notifications (or any other communications) are off-chain, gasless for all scenarios except when a + smart contract sends them (in which case the smart contract pays a slightly higher gas fees for the payload that + is sent on blockchain). + + + While communications are encrypted and secure, they utilize Push open network which means any dApp or crypto + wallet can easily integrate them making the lives of all web3 users a lot easier and more akin to web2 UX where + apps (or protocols) communicate with their users whenever something of importance occurs or is about to occur + for them. + + + ); +}; + +const AnswerThree: FC = () => { + return ( + + + ⚬ Push Notifications: Enables any smart contract, dApp, backend to deliver critical informations as + notifications to web3 users directly to their wallet addresses. + + + ⚬ Push Chat(wallet-to-wallet chat): Enabling 2-way communication for web3 users from their wallet + addresses. + + + ); +}; + +const AnswerFour: FC = () => { + return ( + + + Connect to the{' '} + + Push dApp + {' '} + & opt-in to channels to get notifications for protocols that are relevant to you. Channels are protocols that + activate themselves on Push protocol to send notification. + + + + You can receive notifications from any crypto frontends that have already integrated Push. Alternatively, you + can use via{' '} + + Push dApp + + ,{' '} + + browser extension + + , and mobile app ( + + Android + {' '} + &{' '} + + iOS + + ) in case your favorite wallet or dApp doesn't have Push support yet. + + + + Push recently launched a wallet-to-wallet communication product called Push Chat which is in alpha stage. Reach + out to us on{' '} + + Discord + {' '} + to get exclusive Push Chat access. + + + ); +}; + +const AnswerFive: FC = () => { + return ( + + + Push operates on network of nodes called Push Nodes which are responsible for the validation, storage, and + delivery of notifications & chats. + + + Major efforts are put into decentralising Push Nodes which is in the final stages now. Any content or payloads + getting delivered are already immutable and can't be changed as they are secured using crypto-graphical proofs. + The other part which ensures that the content can't be censored is in final stages now of testing and public + alpha push nodes are expected to be rolled out soon. + + + ); +}; diff --git a/src/common/components/PurchasePlanAlert.tsx b/src/common/components/PurchasePlanAlert.tsx new file mode 100644 index 0000000000..6d3e8e8006 --- /dev/null +++ b/src/common/components/PurchasePlanAlert.tsx @@ -0,0 +1,25 @@ +import { Alert } from 'blocks'; +import { PurchasePlanAlertObjType, purchasePlanAlertTypes } from 'common'; +import { FC } from 'react'; + +export type PurchasePlanAlertProps = { + variant: 'success' | 'renewalReminder' | 'expired' | 'notificationLimit'; + onClose?: () => void; + purchasedPlan: { planName: string }; + onAction?: () => void; +}; + +const PurchasePlanAlert: FC = ({ variant, onClose, purchasedPlan, onAction }) => { + const alert: PurchasePlanAlertObjType = purchasePlanAlertTypes[variant](purchasedPlan?.planName); + return ( + onClose?.() : undefined} + onAction={() => onAction?.()} + actionText={alert.actionText} + /> + ); +}; + +export { PurchasePlanAlert }; diff --git a/src/common/components/index.ts b/src/common/components/index.ts index 4b5412cac5..9e8b60c371 100644 --- a/src/common/components/index.ts +++ b/src/common/components/index.ts @@ -10,3 +10,5 @@ export * from './CopyButton'; export * from './VerifiedChannelTooltipContent'; export * from './InAppChannelNotifications'; export * from './InAppChatNotifications'; +export * from './PurchasePlanAlert'; +export * from './FAQContainer'; diff --git a/src/modules/createChannel/CreateChannel.tsx b/src/modules/createChannel/CreateChannel.tsx index a23590fa94..3e7d536228 100644 --- a/src/modules/createChannel/CreateChannel.tsx +++ b/src/modules/createChannel/CreateChannel.tsx @@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom'; import { Alert, Box } from 'blocks'; import { appConfig } from 'config'; import APP_PATHS from 'config/AppPaths'; -import { Stepper } from 'common'; +import { PurchasePlanAlert, Stepper } from 'common'; import { useAccount } from 'hooks'; import { CHANNEL_TYPE } from 'helpers/UtilityHelper'; import { IPFSupload } from 'helpers/IpfsHelper'; @@ -213,17 +213,25 @@ const CreateChannel = () => { return ( handleCreateNewChannel(values)}> + {/* Use this wrapper to display the Alert of purchased plan status */} + {/* + + */} + diff --git a/src/modules/pricing/Pricing.constants.ts b/src/modules/pricing/Pricing.constants.ts index a105dfdaa4..7d4cf43709 100644 --- a/src/modules/pricing/Pricing.constants.ts +++ b/src/modules/pricing/Pricing.constants.ts @@ -1,4 +1,4 @@ -import { FAQItemTypes, PricingPlansItemTypes } from './Pricing.types'; +import { PricingPlansItemTypes } from './Pricing.types'; export const pricingPlanList: PricingPlansItemTypes[] = [ { @@ -134,36 +134,3 @@ export const pricingPlanList: PricingPlansItemTypes[] = [ ], }, ]; - -export const faqList: FAQItemTypes[] = [ - { - id: 1, - question: 'What is Push?', - answer: - 'Push is the world’s first blockchain-agnostic decentralised communication protocol for Web3. It is an open network for validating and indexing all sorts of communication (notifications, chats, etc) that can then be integrated by any crypto frontend (dApps, wallets, etc). Any smart contract, dApp, or backend service can integrate Push to provide a communication layer through notifications or chats that are tied to the wallet addresses of users.', - }, - { - id: 2, - question: 'What is Push trying to solve?', - answer: - 'Push is the world’s first blockchain-agnostic decentralised communication protocol for Web3. It is an open network for validating and indexing all sorts of communication (notifications, chats, etc) that can then be integrated by any crypto frontend (dApps, wallets, etc). Any smart contract, dApp, or backend service can integrate Push to provide a communication layer through notifications or chats that are tied to the wallet addresses of users.', - }, - { - id: 3, - question: 'What are the web3 communication products launched by Push?', - answer: - 'Push is the world’s first blockchain-agnostic decentralised communication protocol for Web3. It is an open network for validating and indexing all sorts of communication (notifications, chats, etc) that can then be integrated by any crypto frontend (dApps, wallets, etc). Any smart contract, dApp, or backend service can integrate Push to provide a communication layer through notifications or chats that are tied to the wallet addresses of users.', - }, - { - id: 4, - question: 'How can I use Push as an end-user?', - answer: - 'Push is the world’s first blockchain-agnostic decentralised communication protocol for Web3. It is an open network for validating and indexing all sorts of communication (notifications, chats, etc) that can then be integrated by any crypto frontend (dApps, wallets, etc). Any smart contract, dApp, or backend service can integrate Push to provide a communication layer through notifications or chats that are tied to the wallet addresses of users.', - }, - { - id: 5, - question: 'Is Push a blockchain? Is Push decentralised?', - answer: - 'Push is the world’s first blockchain-agnostic decentralised communication protocol for Web3. It is an open network for validating and indexing all sorts of communication (notifications, chats, etc) that can then be integrated by any crypto frontend (dApps, wallets, etc). Any smart contract, dApp, or backend service can integrate Push to provide a communication layer through notifications or chats that are tied to the wallet addresses of users.', - }, -]; diff --git a/src/modules/pricing/Pricing.tsx b/src/modules/pricing/Pricing.tsx index 69c0a8dc56..a7750bc1fa 100644 --- a/src/modules/pricing/Pricing.tsx +++ b/src/modules/pricing/Pricing.tsx @@ -1,7 +1,7 @@ import { FC } from 'react'; import { Box } from 'blocks'; +import { FAQContainer } from 'common'; import { PricingView } from './components/PricingView'; -import { FAQMainContainer } from './components/FAQMainContainer'; import { css } from 'styled-components'; export type PricingProps = {}; @@ -22,7 +22,7 @@ const Pricing: FC = () => { {/* Render FAQ Component */} - + ); }; diff --git a/src/modules/pricing/Pricing.types.ts b/src/modules/pricing/Pricing.types.ts index 9edb50165f..fcd4520925 100644 --- a/src/modules/pricing/Pricing.types.ts +++ b/src/modules/pricing/Pricing.types.ts @@ -12,10 +12,4 @@ export type PricingPlansItemTypes = { }[]; }; -export type FAQItemTypes = { - id: number; - question: string; - answer: string; -}; - export type PricingPlanTabsType = 'yearly' | 'monthly'; diff --git a/src/modules/pricing/components/FAQContentContainer.tsx b/src/modules/pricing/components/FAQContentContainer.tsx deleted file mode 100644 index 59370008b6..0000000000 --- a/src/modules/pricing/components/FAQContentContainer.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import { FC, useState } from 'react'; -import { Add, Box, Button, Dash, Front, Link, Text } from 'blocks'; -import { faqList } from '../Pricing.constants'; -import { css } from 'styled-components'; - -export type FAQContentContainerProps = {}; - -const FAQContentContainer: FC = ({}) => { - const [expandedQid, setExpandedQid] = useState(null); - - return ( - - {/* Render list of questions with answers */} - - {faqList.map((faqItem, index) => ( - - - - {faqItem?.question} - - - {expandedQid === faqItem?.id ? ( - setExpandedQid(null)} - size={28} - /> - ) : ( - setExpandedQid(faqItem?.id)} - size={28} - /> - )} - - {expandedQid === faqItem?.id && ( - - {faqItem?.answer} - - )} - - ))} - - - {/* Render explore more questions view */} - - - - - Explore FAQs - - - - - - - ); -}; - -export { FAQContentContainer }; diff --git a/src/modules/pricing/components/FAQMainContainer.tsx b/src/modules/pricing/components/FAQMainContainer.tsx deleted file mode 100644 index b17ac88dee..0000000000 --- a/src/modules/pricing/components/FAQMainContainer.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { FC } from 'react'; -import { ArrowUpRight, Box, Button, Link, Text } from 'blocks'; -import { FAQContentContainer } from './FAQContentContainer'; - -export type FAQMainContainerProps = {}; - -const FAQMainContainer: FC = ({}) => { - return ( - - {/* Render FAQ left side container */} - - - Frequently Asked Questions - - - - - - - {/* Render FAQ Content container */} - - - ); -}; - -export { FAQMainContainer };