adding payment providers component to show all payment types

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) => <PaymentProvider {...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',
+};
+
+

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: <InvoiceIcon />
+          };
+        } else
+        if(currentPaymentSource === paymentSources.card) {
+          choosenPayment = {
+            label: 'Card',
+            color: 'card',
+            icon: <CreditCardIcon />
+          };
+        } else {
+          choosenPayment = {
+            label: 'Card',
+            color: 'card',
+            icon: <CreditCardIcon />
+          };
+        }
+      break;
+      case paymentProviders.paypal:
+        choosenPayment = {
+          label: 'Paypal',
+          color: 'paypal',
+          icon: <img src={logoPaypal} width={24} alt="Paypal" />
+        };
+      break;
+      case paymentProviders.wallet:
+        choosenPayment = {
+          label: 'Wallet',
+          color: 'wallet',
+          icon: <WalletIcon />
+        };
+      break;
+      default:
+        choosenPayment = {
+          label: 'Unknown',
+          color: 'unknown',
+          icon: <UnknownPaymentIcon />
+        };
+      break;
+    }
+    return choosenPayment;
+  }
+
+  const currentPaymentType = getStatus(provider, sourceType);
+
+  return (
+    <Chip size="small" label={currentPaymentType.label} className={classes[currentPaymentType.color]} icon={currentPaymentType.icon} />
+  );
+}

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
       : <PaymentStatus orderStatus={item.status} />,
       issueRow(item.Task),
       `$ ${item.amount}`,
-      <PaymentTypeIcon type={ item.provider } />,
+      <PaymentProvider provider={item.provider} sourceType={item.source_type} />,
       MomentComponent(item.createdAt).fromNow(),
       <div style={ { display: 'flex', justifyContent: 'space-around' } }>
         { detailsOrderButton(item, userId) }

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: {