[UI] [Storybook] Make payment status components use the BaseStatus

[alexanmtz]

✏️ Summary

We now have a centralized logic for any status component on the platform, and we need to migrate all payment status components to use BaseStatus

📋 Description

We have the BaseStatus component to hold the logic and display all statuses in the platform.

🔍 Steps to Reproduce

1. Follow the steps to run the project locally on README: https://github.com/worknenjoy/gitpay?tab=readme-ov-file#readme
2. Run Storybook (on frontend folder, run npm run storybook
3. You can see the Status on Storybook: http://localhost:6006/?path=/story/design-library-atoms-status-basestatus--primary

Here's the BaseStatus: https://github.com/worknenjoy/gitpay/blob/master/frontend/src/components/design-library/atoms/status/base-status/base-status.tsx

You can check AccountHolderStatus: https://github.com/worknenjoy/gitpay/blob/79d37873625c2c9046e7719b0bfaa8f2dcbee352/frontend/src/components/design-library/atoms/status/account-status/account-holder-status/account-holder-status.tsx Youc an check BankAccountStatus: https://github.com/worknenjoy/gitpay/blob/79d37873625c2c9046e7719b0bfaa8f2dcbee352/frontend/src/components/design-library/atoms/status/account-status/bank-account-status/bank-account-status.tsx

They use the BaseStatus, now we need that all the components here (PaymentStatus and InvoiceStatus) use the BaseStatus to reuse the same logic to create Status components: https://github.com/worknenjoy/gitpay/tree/79d37873625c2c9046e7719b0bfaa8f2dcbee352/frontend/src/components/design-library/atoms/status/payment-types-status

✅ Expected Result

By checking the Storybook examples for all status components, all should continue working as expected on Storybook.

You don't need to run the platform for this issue.

🖼️ Screenshot / Mockup

Please provide the screenshot and mockups in your PR

🧰 UI Stack Used

React, Material UI, Storybook

💰 Is there a bounty for this issue?

No

💵 Bounty Amount (if any)

No bounty for this one

📜 Bounty Details (if applicable)

There's no Bounty for this issue.

This issue is part of the Only Dust Hackathon: https://onlydust.notion.site/May-28th-Open-Source-Hackathon-1f244b682a80801890e5fda15b779746

[Sia714]

Hi! I’m interested in working on this issue. Is it still available, and is there any specific deadline I should be aware of? Thanks!

[EmmanuelIbiyemi]

Good day , I would like to work on this project

[alexanmtz]

closed #1236 #1221