All files / src/components/common/Tag BusinessProfileTag.tsx

0% Statements 0/5
0% Branches 0/4
0% Functions 0/1
0% Lines 0/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105                                                                                                                                                                                                                 
import { memo } from "react";
import { Text } from "@common/Text";
import { palette } from "@palette";
 
export type BusinessProfileStatusType =
  | "pending"
  | "pending_review"
  | "move_back_to_pending"
  | "approved"
  | "declined"
  | "suspended"
  | "ready_for_verification"
  | "declined_by_msp"
  | "pending_review_issue"
  | "In progress"
  | "Delivered"
  | "Undeliverable";
 
interface Props {
  statusCode?: BusinessProfileStatusType;
}
function BusinessProfileTag({ statusCode }: Props) {
  if (!statusCode || !BusinessProfileStatus[statusCode]) return <></>;
  const { label, color, backgroundColor } = BusinessProfileStatus[statusCode];
 
  return (
    <Text
      fontSize="14px"
      fontWeight="regular"
      bgcolor={backgroundColor}
      color={color}
      borderRadius="16px"
      p="2px 16px"
    >
      {label}
    </Text>
  );
}
 
export default memo(BusinessProfileTag);
 
type StatusObject = { label: string; color: string; backgroundColor: string };
export const BusinessProfileStatus: Record<BusinessProfileStatusType, StatusObject> = {
  pending_review: {
    label: "Pending Review",
    color: palette.filled.orange,
    backgroundColor: palette.tag.warning.bg,
  },
  move_back_to_pending: {
    label: "Pending",
    color: palette.neutral[80],
    backgroundColor: palette.neutral[10],
  },
  approved: {
    label: "Approved",
    color: palette.filled.success,
    backgroundColor: palette.tag.success.bg,
  },
  declined: {
    label: "Declined",
    color: palette.filled.red,
    backgroundColor: palette.tag.error.bg,
  },
  suspended: {
    label: "Suspended",
    color: palette.filled.orange,
    backgroundColor: palette.tag.warning.bg,
  },
  ready_for_verification: {
    label: "Ready for Verification",
    color: palette.accent[3],
    backgroundColor: "#EAEFF8",
  },
  pending: {
    label: "Pending",
    color: palette.neutral[80],
    backgroundColor: palette.neutral[10],
  },
  declined_by_msp: {
    label: "Pending",
    color: palette.neutral[80],
    backgroundColor: palette.neutral[10],
  },
  pending_review_issue: {
    label: "Pending",
    color: palette.neutral[80],
    backgroundColor: palette.neutral[10],
  },
  "In progress": {
    color: palette.filled?.orange,
    backgroundColor: palette.tag.warning.bg,
    label: "In progress",
  },
  Delivered: {
    color: palette.neutral[80],
    backgroundColor: palette.neutral[10],
    label: "Delivered",
  },
  Undeliverable: {
    color: palette.error.hover,
    backgroundColor: palette.tag.error.bg,
    label: "Undeliverable",
  },
};