Monetization Feature(Payment Section)

[corlard3y]

Pull Request Template

#1965

Description

• Add Monetization Payment Plan section

• Problem/Feature:

Type of Change

• Bug fix
• New feature
• Code refactor
• Documentation update
• Other (please describe):

Checklist

• Quick PR: Is this a quick PR? Can be approved before finishing a coffee.
  • Quick PR label added
• Not Merge Ready: Is this PR dependent on some other PR/tasks and not ready to be merged right now.
  • DO NOT Merge PR label added

Frontend Guidelines

• [ x Followed frontend guidelines as per the Guidelines Notion Doc

Build & Testing

• No errors in the build terminal
• Engineer has tested the changes on their local environment
• Engineer has tested the changes on deploy preview

Screenshots/Video with Explanation

• Before: Explain the previous behavior

• After: What's changed now

Additional Context

Review & Approvals

• Self-review completed
• Code review by at least one other engineer
• Documentation updates if applicable

Notes

[github-actions]

There are a few issues in the code snippets provided:

1. In src/App.tsx:

• There is a missing closing bracket } after the definition for the 'warning' variant in the alertVariants object.
• The Info and Basic variants are not closed properly with a closing bracket in the alertVariants object.

2. In src/blocks/icons/components/Meteor.tsx:

• There seems to be some incomplete path elements like d="M10.5 11L13.5 8" without enclosing <path> tags.

Other than the above mentioned issues, the code looks good.

Please address the identified issues and re-check the code. If there are any other issues or if you need further assistance, feel free to ask.

[github-actions]

In Alert.utils.ts:

• There are missing closing brackets for the 'warning' and 'info' objects.
• The 'basic' and 'error' objects are not closed properly with a closing bracket.
• The structure of the objects for different alert variants should be fixed to have proper closing brackets for each object.
• The property 'ctaColor' is missing for the 'basic' object in the 'alertVariants' object.

In Meteor.tsx:

• The SVG path elements are not properly closed with </>
• Some lines are missing complete path elements.

The component files PushLogo.tsx, PushLogoWithNameDark.tsx, PushLogoWithNameLight.tsx in illustrations/components are empty. They should contain valid component code.

Review the other files as well for any logic or syntax errors.

All looks good.

[github-actions]

All looks good.

[github-actions]

All looks good.

[github-actions]

In Alert.utils.ts file, there are some mistakes in defining the alert variants object. The "info" and "basic" variants are missing closing curly braces and commas after each variant object.

Here's the corrected version:

export const alertVariants: Record<
  AlertVariant,
  { icon: FC<IconProps>; iconColor: ThemeColors; borderColor: ThemeColors; bgColor: ThemeColors; ctaColor: ThemeColors }
> = {
  success: {
    icon: TickCircleFilled,
    iconColor: 'components-alert-icon-success',
    borderColor: 'components-alert-stroke-success',
    bgColor: 'components-alert-background-success',
    ctaColor: 'components-alert-text-cta-success',
  },
  warning: {
    icon: WarningCircleFilled,
    iconColor: 'components-alert-icon-warning',
    borderColor: 'components-alert-stroke-warning',
    bgColor: 'components-alert-background-warning',
    ctaColor: 'components-alert-text-cta-warning',
  },
  info: {
    icon: InfoFilled,
    iconColor: 'components-alert-icon-info',
    borderColor: 'components-alert-stroke-info',
    bgColor: 'components-alert-background-info',
    ctaColor: 'components-alert-text-cta-info',
  },
  basic: {
    iconColor: 'components-alert-icon-basic',
    borderColor: 'components-alert-stroke-basic',
    bgColor: 'components-alert-background-basic',
    ctaColor: 'components-alert-text-cta-basic',
  },
  error: {
    iconColor: 'components-alert-icon-error',
    borderColor: 'components-alert-stroke-error',
    bgColor: 'components-alert-background-error',
    ctaColor: 'components-alert-text-cta-error',
  },
};

Please check the code and confirm if this correction is accurate.

[github-actions]

All looks good.

[github-actions]

All looks good.

[github-actions]

In the file src/blocks/alert/Alert.utils.ts, there are some issues:

1. Missing closing curly braces for the 'warning' and 'error' objects.
2. 'info' and 'basic' objects are missing opening curly braces.
3. Missing closing curly braces for the 'info' and 'basic' objects.
4. The 'info' and 'basic' objects should be at the same level as 'success' and 'warning', not nested within them.

Here is the corrected version:

export const alertVariants: Record<
  AlertVariant,
  { icon: FC<IconProps>; iconColor: ThemeColors; borderColor: ThemeColors; bgColor: ThemeColors; ctaColor: ThemeColors }
> = {
  success: {
    icon: TickCircleFilled,
    iconColor: 'components-alert-icon-success',
    borderColor: 'components-alert-stroke-success',
    bgColor: 'components-alert-background-success',
    ctaColor: 'components-alert-text-cta-success',
  },
  warning: {
    icon: WarningCircleFilled,
    iconColor: 'components-alert-icon-warning',
    borderColor: 'components-alert-stroke-warning',
    bgColor: 'components-alert-background-warning',
    ctaColor: 'components-alert-text-cta-warning',
  },
  info: {
    icon: InfoFilled,
    iconColor: 'components-alert-icon-info',
    borderColor: 'components-alert-stroke-info',
    bgColor: 'components-alert-background-info',
    ctaColor: 'components-alert-text-cta-info',
  },
  basic: {
    iconColor: 'components-alert-icon-basic',
    borderColor: 'components-alert-stroke-basic',
    bgColor: 'components-alert-background-basic',
    ctaColor: 'components-alert-text-cta-basic',
  },
  error: {
    iconColor: 'components-alert-icon-error',
    borderColor: 'components-alert-stroke-error',
    bgColor: 'components-alert-background-error',
    ctaColor: 'components-alert-text-cta-error',
  },
};

All the other files are not under scrutiny as per the request.

[github-actions]

All looks good.

[github-actions]

All looks good.