All files / src/components/EnterpriseSettings/Branding constants.tsx

100% Statements 5/5
66.66% Branches 2/3
100% Functions 2/2
100% Lines 5/5

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      1x                                   1x               1x 20x                                                               100x                
import { Stack } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
 
export const brandingHeadings = {
  logo: {
    title: "Portal Logo",
    description:
      "Upload your logo to ensure consistent branding across the platform. The 267 x 64 logo is used on the signup and login pages, while the 64 x 64 logo appears in areas such as the sidebar, emails, and various provider and acquirer views.",
  },
  cards: {
    title: "Theme Colors",
    description:
      "This color palette will be inherited by all merchants operating under your provider.",
  },
  iframe: {
    title: "Embed Code for Signup",
    description:
      "A snippet of code that allows you to integrate a Sign Up form directly into your website.",
  },
};
 
const embedCodeInstructions = [
  "Copy provided embedded code.",
  "Navigate to your website or the platform where you want to embed the content.",
  "Paste the copied code into the HTML of your page at the desired location.",
  "Some attributes allow you to customize settings such as size or autoplay. Modify these settings within the iframe code if needed.",
  "Preview your webpage to ensure the embedded content looks and functions as expected. Once you're satisfied, publish the changes.",
];
 
export const getTooltipContent = (includePadding = false) => {
  return (
    <Stack spacing={0}>
      <GiveText
        variant="bodyS"
        color="default"
        sx={{
          ...(includePadding && { padding: "0 16px" }),
          marginBottom: "16px",
        }}
      >
        How to use embedded code?
      </GiveText>
      <Stack
        component="ol"
        spacing={1}
        sx={{
          padding: 0,
          margin: 0,
          counterReset: "item",
          listStyle: "none",
          "& li": {
            counterIncrement: "item",
            display: "flex",
            gap: "9px",
            "&::before": {
              content: 'counter(item) "."',
              flexShrink: 0,
            },
          },
        }}
      >
        {embedCodeInstructions.map((instruction, index) => (
          <GiveText key={index} variant="bodyS" color="default" component="li">
            {instruction}
          </GiveText>
        ))}
      </Stack>
    </Stack>
  );
};