DAPP-1966: Integrate Purchase Plan Alerts UI

- Created a common alert component to display various types of alerts with dynamic content
- Moved FAQ component to common components for reuse across multiple pages
- Updated FAQ answer content and UI

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<IllustrationProps>;
@@ -138,3 +139,49 @@ export const channelCategoriesMap: Record<string, string> = {
   '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?',
+  },
+];

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;
+};