1966 Other push monetization payment UI (Purchase a plan) #1974

meKushdeepSingh · 2024-11-18T14:31:34Z

Ticket Number

👾 [Other] - <Push Monetization Payment UI> #1966

… Spacing Variables - Completed the integration of the Pricing Page UI. - Tabs background and spacing variables are still under review; awaiting final decisions from the design team.

- Updated tab background color & button semantics for active tab - Updated get started button background style - Added padding at the bottom of the benefit list in the Pricing Plan Box

- Integrated UI for the Purchase Plan feature.

- Integrated UI for the purchase plan modals. - Adjusted spacing and layout on the pricing page for consistency.

- 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

rohitmalhotra1420 · 2024-12-03T13:25:55Z

src/common/Common.constants.ts

@@ -138,3 +139,49 @@ export const channelCategoriesMap: Record<string, string> = {
  '0x63381E4b8fE26cb1f55cc38e8369990594E017b1': 'Service',
  '0x80375eAD5561e19668eb1Dd2b6A44Fa14D5eB6BF': 'Service',
 };
+
+export const purchasePlanAlertTypes: { [x: string]: (planName?: string) => PurchasePlanAlertObjType } = {


Suggested change

export const purchasePlanAlertTypes: { [x: string]: (planName?: string) => PurchasePlanAlertObjType } = {

export const purchasePlanAlertConfig: { [x: string]: (planName?: string) => PurchasePlanAlertConfig } = {

rohitmalhotra1420 · 2024-12-03T13:26:05Z

src/common/Common.types.ts

@@ -7,3 +9,14 @@ export type ModalResponse = {
 export type UnlockProfileModalTypes = 'portal' | 'container';

 export type EnvType = 'prod' | 'dev' | 'staging';
+
+export type PurchasePlanAlertObjType = {


Suggested change

export type PurchasePlanAlertObjType = {

export type PurchasePlanAlertConfig = {

rohitmalhotra1420 · 2024-12-03T13:26:34Z

src/common/Common.types.ts

@@ -1,3 +1,5 @@
+import { AlertVariant } from 'blocks/alert';


Suggested change

import { AlertVariant } from 'blocks/alert';

import { AlertVariant } from 'blocks';

rohitmalhotra1420 · 2024-12-03T13:26:56Z

src/common/Common.types.ts

+  description: string;
+  actionText: string;


Suggested change

description: string;

actionText: string;

description: AlertProps["description"];

actionText: AlertProps["actionText"];

rohitmalhotra1420 · 2024-12-03T13:30:11Z

src/common/components/FAQContainer.tsx

+
+export { FAQContainer };
+
+const AnswerOne: FC = () => {


All the answer components goes to FAQAnswers.tsx file

rohitmalhotra1420 · 2024-12-03T13:34:50Z

src/modules/purchasePlan/components/PlanPurchasedModal.tsx

+
+const PlanPurchasedModal: FC<PlanPurchasedModalProps> = ({ plan, modalControl, onClose }) => {
+  const { mode } = useBlocksTheme();
+  const { isOpen } = modalControl || {};


Suggested change

const { isOpen } = modalControl || {};

const { isOpen } = modalControl;

rohitmalhotra1420 · 2024-12-03T13:35:05Z

src/modules/purchasePlan/components/PlanPurchasedModal.tsx

+const Logo = styled.img`
+  height: 40px;
+`;


Remove this

rohitmalhotra1420 · 2024-12-03T13:35:51Z

src/modules/purchasePlan/components/PurchaseSummery.tsx

+        >
+          <Button
+            css={css`
+              flex: 1 0 0;


Not required.

rohitmalhotra1420 · 2024-12-03T13:36:09Z

src/modules/purchasePlan/components/PurchaseSummery.tsx

+              modalControl?.open();
+            }}
+            css={css`
+              flex: 1 0 0;


Not required. In correct approach.

rohitmalhotra1420 · 2024-12-03T13:38:04Z

src/modules/pricing/Pricing.utils.ts

Delete this

- Added illustrations for Push logo with name - Implemented conditional leading icon in approve button - Extracted FAQ container and list into separate components - Created a common file for FAQ answer components - Refactored code for improved readability and maintainability

github-actions · 2024-12-04T10:41:49Z

All looks good.

rohitmalhotra1420 · 2024-12-04T11:01:03Z

src/blocks/illustrations/components/PushLogoWithNameDark.tsx

+  const { svgProps: props, ...restProps } = allProps;
+  return (
+    <IllustrationWrapper
+      componentName="PushDev"


componentName prop should same as the component name PushLogoWithNameDark

rohitmalhotra1420 · 2024-12-04T11:01:10Z

src/blocks/illustrations/components/PushLogoWithNameLight.tsx

+  const { svgProps: props, ...restProps } = allProps;
+  return (
+    <IllustrationWrapper
+      componentName="PushDev"


… illustration and removed unused imports

github-actions · 2024-12-04T11:28:41Z

All looks good.

meKushdeepSingh added 5 commits November 12, 2024 15:16

DAPP-1966: Pricing plan UI integration WIP

1f77ff1

DAPP-1966: Integrate Pricing Page UI - Finalizing Tabs Background and…

c9b6f25

… Spacing Variables - Completed the integration of the Pricing Page UI. - Tabs background and spacing variables are still under review; awaiting final decisions from the design team.

DAPP-1966: Integrate pricing UI

cdcb20b

- Updated tab background color & button semantics for active tab - Updated get started button background style - Added padding at the bottom of the benefit list in the Pricing Plan Box

DAPP-1966: Integrate Purchase Plan UI

efe2dfd

- Integrated UI for the Purchase Plan feature.

DAPP-1966: Integrate Purchase Plan Modal UI

6effa17

- Integrated UI for the purchase plan modals. - Adjusted spacing and layout on the pricing page for consistency.

meKushdeepSingh requested review from rohitmalhotra1420 and corlard3y November 18, 2024 14:31

meKushdeepSingh self-assigned this Nov 18, 2024

meKushdeepSingh linked an issue Nov 18, 2024 that may be closed by this pull request

👾 [Other] - <Push Monetization Payment UI> #1966

Closed

DAPP-1966: Integrate Purchase Plan Alerts UI

170662b

- 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

rohitmalhotra1420 requested changes Dec 3, 2024

View reviewed changes

rohitmalhotra1420 requested changes Dec 4, 2024

View reviewed changes

DAPP-1966: Keep componentName props value as actual component name in…

83f0f1a

… illustration and removed unused imports

rohitmalhotra1420 approved these changes Dec 5, 2024

View reviewed changes

rohitmalhotra1420 merged commit fb2525f into 1965-new-feature-monetization-payment Dec 5, 2024
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

1966 Other push monetization payment UI (Purchase a plan) #1974

1966 Other push monetization payment UI (Purchase a plan) #1974

meKushdeepSingh commented Nov 18, 2024

rohitmalhotra1420 Dec 3, 2024

rohitmalhotra1420 Dec 3, 2024

rohitmalhotra1420 Dec 3, 2024

rohitmalhotra1420 Dec 3, 2024

rohitmalhotra1420 Dec 3, 2024

rohitmalhotra1420 Dec 3, 2024

rohitmalhotra1420 Dec 3, 2024

rohitmalhotra1420 Dec 3, 2024

rohitmalhotra1420 Dec 3, 2024

rohitmalhotra1420 Dec 3, 2024

github-actions bot commented Dec 4, 2024

rohitmalhotra1420 Dec 4, 2024

rohitmalhotra1420 Dec 4, 2024

github-actions bot commented Dec 4, 2024

	export const purchasePlanAlertTypes: { [x: string]: (planName?: string) => PurchasePlanAlertObjType } = {
	export const purchasePlanAlertConfig: { [x: string]: (planName?: string) => PurchasePlanAlertConfig } = {

	export type PurchasePlanAlertObjType = {
	export type PurchasePlanAlertConfig = {

	import { AlertVariant } from 'blocks/alert';
	import { AlertVariant } from 'blocks';

	const { isOpen } = modalControl \|\| {};
	const { isOpen } = modalControl;

1966 Other push monetization payment UI (Purchase a plan) #1974

1966 Other push monetization payment UI (Purchase a plan) #1974

Conversation

meKushdeepSingh commented Nov 18, 2024

Ticket Number

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Dec 4, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Dec 4, 2024