From af23dc56a9f1998edcb094be9f17f6c0c2d6f2a7 Mon Sep 17 00:00:00 2001 From: Alexandre Magno Date: Mon, 28 Oct 2024 16:33:52 +0100 Subject: [PATCH] adding payment providers component to show all payment types --- .../payment-provider.stories.tsx | 55 ++++++++ .../payment-provider/payment-provider.tsx | 122 ++++++++++++++++++ frontend/src/components/profile/payments.js | 3 +- frontend/src/consts.ts | 13 ++ 4 files changed, 192 insertions(+), 1 deletion(-) create mode 100644 frontend/src/components/design-library/atoms/payment-provider/payment-provider.stories.tsx create mode 100644 frontend/src/components/design-library/atoms/payment-provider/payment-provider.tsx diff --git a/frontend/src/components/design-library/atoms/payment-provider/payment-provider.stories.tsx b/frontend/src/components/design-library/atoms/payment-provider/payment-provider.stories.tsx new file mode 100644 index 00000000..fff74e99 --- /dev/null +++ b/frontend/src/components/design-library/atoms/payment-provider/payment-provider.stories.tsx @@ -0,0 +1,55 @@ +import React from 'react'; + +import PaymentProvider from './payment-provider'; + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'Design Library/Atoms/Payment Provider', + component: PaymentProvider, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + //argTypes: { + // tags: { control: '' }, + //}, +}; + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args +const Template = (args) => ; + +export const Primary = Template.bind({}); +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Primary.args = { + provider: 'stripe', + sourceType: 'card', +}; + +export const Card = Template.bind({}); +Card.args = { + provider: 'stripe', + sourceType: 'card', +}; + +export const Invoice = Template.bind({}); +Invoice.args = { + provider: 'stripe', + sourceType: 'invoice-item', +}; + +export const Paypal = Template.bind({}); +Paypal.args = { + provider: 'paypal', + sourceType: 'unknown', +}; + +export const Wallet = Template.bind({}); +Wallet.args = { + provider: 'wallet', + sourceType: 'unknown', +}; + +export const Unknown = Template.bind({}); +Unknown.args = { + provider: 'unknown', + sourceType: 'unknown', +}; + + diff --git a/frontend/src/components/design-library/atoms/payment-provider/payment-provider.tsx b/frontend/src/components/design-library/atoms/payment-provider/payment-provider.tsx new file mode 100644 index 00000000..b401fb1f --- /dev/null +++ b/frontend/src/components/design-library/atoms/payment-provider/payment-provider.tsx @@ -0,0 +1,122 @@ +import React from 'react'; +import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'; +import { orange, green, blue } from '@material-ui/core/colors'; +import { + CreditCard as CreditCardIcon, + Receipt as InvoiceIcon, + AccountBalanceWallet as WalletIcon, + MoneyOff as UnknownPaymentIcon +} from '@material-ui/icons'; +import { Chip } from '@material-ui/core'; +import { paymentProviders, paymentSources } from '../../../../consts' + +const logoPaypal = require('../../../../images/paypal-icon.png').default; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + card: { + backgroundColor: green[400], + color: theme.palette.common.white, + '& .MuiChip-icon': { + color: theme.palette.common.white, + }, + }, + invoice: { + backgroundColor: orange[600], + color: theme.palette.common.white, + '& .MuiChip-icon': { + color: theme.palette.common.white, + }, + }, + paypal: { + backgroundColor: blue[300], + color: theme.palette.common.white + }, + wallet: { + backgroundColor: theme.palette.grey[500], + color: theme.palette.common.white, + '& .MuiChip-icon': { + color: theme.palette.common.white, + }, + }, + unknown: { + backgroundColor: theme.palette.grey[400], + color: theme.palette.common.white, + '& .MuiChip-icon': { + color: theme.palette.common.white, + }, + } + }), +); + +type statusProps = { + provider: string; + sourceType: string; +} + +type GetPaymentTypesProps = { + label?: string, + color?: 'card' | 'invoice' | 'paypal' | 'wallet' | 'unknown', + icon?: JSX.Element +} +type GetPaymentType = (currentPaymentProvider:string, currentPaymentSource:string) => GetPaymentTypesProps + +export default function PaymentProvider({ provider, sourceType }:statusProps) { + const classes = useStyles(); + + const getStatus:GetPaymentType = (currentPaymentProvider:string, currentPaymentSource:string) => { + let choosenPayment:GetPaymentTypesProps = {}; + switch (currentPaymentProvider) { + case paymentProviders.stripe: + if(currentPaymentSource === paymentSources.invoice) { + choosenPayment = { + label: 'Invoice', + color: 'invoice', + icon: + }; + } else + if(currentPaymentSource === paymentSources.card) { + choosenPayment = { + label: 'Card', + color: 'card', + icon: + }; + } else { + choosenPayment = { + label: 'Card', + color: 'card', + icon: + }; + } + break; + case paymentProviders.paypal: + choosenPayment = { + label: 'Paypal', + color: 'paypal', + icon: Paypal + }; + break; + case paymentProviders.wallet: + choosenPayment = { + label: 'Wallet', + color: 'wallet', + icon: + }; + break; + default: + choosenPayment = { + label: 'Unknown', + color: 'unknown', + icon: + }; + break; + } + return choosenPayment; + } + + const currentPaymentType = getStatus(provider, sourceType); + + return ( + + ); +} diff --git a/frontend/src/components/profile/payments.js b/frontend/src/components/profile/payments.js index e9f6f72f..c4064428 100644 --- a/frontend/src/components/profile/payments.js +++ b/frontend/src/components/profile/payments.js @@ -4,6 +4,7 @@ import 'react-placeholder/lib/reactPlaceholder.css' import { messages } from '../task/messages/task-messages' import MomentComponent from 'moment' import PaymentTypeIcon from '../payment/payment-type-icon' +import PaymentProvider from '../design-library/atoms/payment-provider/payment-provider' import { Container, @@ -292,7 +293,7 @@ const Payments = ({ classes, tasks, orders, order, user, logged, listOrders, lis : , issueRow(item.Task), `$ ${item.amount}`, - , + , MomentComponent(item.createdAt).fromNow(),
{ detailsOrderButton(item, userId) } diff --git a/frontend/src/consts.ts b/frontend/src/consts.ts index f7a85b2a..24ee7c48 100644 --- a/frontend/src/consts.ts +++ b/frontend/src/consts.ts @@ -165,6 +165,19 @@ export const status = { order: orderStatuses } +export enum paymentProviders { + stripe = 'stripe', + paypal = 'paypal', + wallet = 'wallet', + unknown = 'unknown' +} + +export enum paymentSources { + card = 'card', + invoice = 'invoice-item', + unknown = 'unknown' +} + const api = { API_URL: process.env.API_HOST || 'http://localhost:3000', ACCOUNT_FIELDS: {