.createAndManage {
    position: absolute;
    top: 36px;
    left: 0px;
    line-height: 16px;
}
.employees {
    position: relative;
    line-height: 28px;
}
.employeesWrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 24px;
}
.title {
    width: 716px;
    position: relative;
    height: 52px;
}
.alertIcon {
    width: 20px;
    position: relative;
    height: 20px;
}
.iconAlertcaution {
    align-self: stretch;
    width: 32px;
    background-color: #ef6700;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
}
.messageWithNo {
    align-self: stretch;
    position: relative;
    line-height: 150%;
}
.contentWrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.assetsscloseOnLight {
    width: 32px;
    border-radius: 4px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.contentArea {
    align-self: stretch;
    flex: 1;
    border-radius: 0px 8px 8px 0px;
    background-color: #fff;
    border: 1px solid #ef6700;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px 16px 16px 24px;
    gap: 24px;
}
.messageContextual {
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    height: 54px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.thePeoplesPension {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.name {
    flex: 1;
    position: relative;
    text-transform: capitalize;
}
.nameWrapper {
    align-self: stretch;
    background-color: #335c6d;
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
    padding: 10px;
    box-sizing: border-box;
    color: #fff;
}
.itemCell {
    align-self: stretch;
    background-color: #fff;
    border-bottom: 1px solid #b6c8d9;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
    padding: 10px;
}
.itemCell1 {
    align-self: stretch;
    background-color: #f2f5f6;
    border-bottom: 1px solid #b6c8d9;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
    padding: 10px;
}
.column {
    flex: 1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.workerCategory {
    flex: 1;
    position: relative;
}
.itemCell3 {
    align-self: stretch;
    background-color: #fff;
    border-bottom: 1px solid #b6c8d9;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
}
.itemCell4 {
    align-self: stretch;
    background-color: #f2f5f6;
    border-bottom: 1px solid #b6c8d9;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
}
.erContributions {
    flex: 1;
    position: relative;
    line-height: 130%;
    font-weight: 500;
}
.table {
    width: 1373px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #b6c8d9;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 14px;
}
.thePeoplesPensionMonth2Parent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}
.textHere {
    position: relative;
    letter-spacing: 0.5px;
    line-height: 16px;
    font-weight: 500;
}
.button {
    border-radius: 20px;
    border: 1px solid #007e45;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px 24px;
}
.or {
    width: 16px;
    position: relative;
    text-transform: capitalize;
    font-family: Inter;
    color: #000;
    text-align: left;
    display: inline-block;
    flex-shrink: 0;
}
.button1 {
    width: 141px;
    border-radius: 20px;
    background-color: #007e45;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px 24px;
    box-sizing: border-box;
    color: #fff;
}
.buttonParent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
    font-size: 14px;
    color: #007e45;
    font-family: Roboto;
}
.frameGroup {
    align-self: stretch;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #bdd9e7;
    box-sizing: border-box;
    height: 357px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 20px 30px;
    gap: 20px;
}
.errorEnrolment {
    position: relative;
    text-transform: capitalize;
    font-weight: 500;
}
.macieBernstein1 {
    position: relative;
    text-transform: capitalize;
}
.errorEnrolmentParent {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}
.frameWrapper {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.optInDateIsIncorrectExpe {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    padding-left: 19px;
}
.optInDateContainer {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.optInDateIsIncorrectExpeWrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.changeTheEnrolment {
    margin-bottom: 0px;
}
.changeTheEnrolmentContainer {
    width: 754px;
    position: relative;
    display: -webkit-inline-box;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    flex-shrink: 0;
}
.changeTheEnrolmentDateWithWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 15px;
}
.payrollIsUsingTheTppEnrolParent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
}
.frameParent1 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 112px;
    gap: 10px;
}
.frameDiv {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}
.createAndManage1 {
    align-self: stretch;
    position: relative;
    text-decoration: underline;
    line-height: 16px;
    color: #0c713f;
}
.frameContainer {
    align-self: stretch;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #cecece;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 30px;
    gap: 20px;
    font-size: 14px;
}
.frameParent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
    font-size: 16px;
    color: #000;
}
.titleParent {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 80px;
    box-sizing: border-box;
    gap: 20px;
    text-align: left;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.9);
    font-family: 'Sage UI';
}

import { FunctionComponent } from 'react';
import styles from './Frame.module.css';

const Frame:FunctionComponent = () => {
  	return (

Review the contents of your employee pension contributions before you submit these details to The People’s Pension.

          					Pension Contribution Submission

1 employee has enrolled in The People’s Pension this pay period.

The People’s Pension - Month 2 (Pay Reference Period 06 May 2023 to 05 Jun 2023)

                  									Name

Patrick Scott

Macie Bernstein

Joanna Huff

                  									Worker Category

Eligible

Eligible

Eligible

                  									Pensionable Earnings

3000.00

3000.00

3000.00

                  									Ee Contributions

105.00

105.00

105.00

                  									AVC Contributions

0.00

0.00

0.00

Er Contributions

175.01

175.01

175.01

                  									Enrolment Date

06/05/2024

10/04/2024

04/04/2024

Manage Pension File

or

Submit online

Error Enrolment:

Macie Bernstein

Opt In Date is incorrect. Expected Opt In Date is 30 March 2017.

Payroll is using the TPP enrolment date of 10 April 2024 for submissions. This date is before the employee start date of 31 August 2024. To resolve this, you need to do the following:

Change the enrolment date with TPP to be on or after the employee start date.

In Sage Payroll, in the pay run, select ‘Manage Pension Contributions’. Then, change the enrolment date and resubmit.

Total address must contain at least 15 characters.

Find out more about THE PEOPLES PENSION errors

);
};

export default Frame;

@import url('https://fonts.googleapis.com/css2?family=Sage+UI:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');
body {
  	margin: 0; line-height: normal;
}

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import CarbonProvider from 'carbon-react/lib/components/carbon-provider';
import Box from 'carbon-react/lib/components/box';
import Button from 'carbon-react/lib/components/button';
import { FlatTable, FlatTableRow, FlatTableHeader, FlatTableCell, FlatTableHead, FlatTableBody } from 'carbon-react/lib/components/flat-table';
import Typography from 'carbon-react/lib/components/typography';
import Link from 'carbon-react/lib/components/link';
import Message from 'carbon-react/lib/components/message';
import i18n from './i18n';

const App = ({ data, locale = 'en' }) => {
  const [selectedRow, setSelectedRow] = useState(null);

  useEffect(() => {
    i18n.locale = locale;
  }, [locale]);

  const handleRowClick = (index) => {
    setSelectedRow(index);
  };

  const handleManagePensionFileClick = () => {
    alert('Manage Pension File button clicked');
  };

  const handleSubmitOnlineClick = () => {
    alert('Submit Online button clicked');
  };

  return (
    <CarbonProvider validationRedesignOptIn>
      <Box padding="20px">
        <Typography variant="h2" aria-label={i18n.t('pensionSubmission')}>
          {i18n.t('pensionSubmission')}
        </Typography>
        <Typography variant="p" aria-label={i18n.t('reviewPension')}>
          {i18n.t('reviewPension')}
        </Typography>
        <Message variant="warning">
          {i18n.t('employeeEnrolled')}
        </Message>

          <Typography variant="strong" aria-label={i18n.t('thePeoplesPension')} marginBottom="10px">
            {i18n.t('thePeoplesPension')}
          </Typography>
          <FlatTable aria-label="Pension Table">
            <FlatTableHead>
              <FlatTableRow>
                <FlatTableHeader>{i18n.t('name')}</FlatTableHeader>
                <FlatTableHeader>{i18n.t('workerCategory')}</FlatTableHeader>
                <FlatTableHeader>{i18n.t('pensionableEarnings')}</FlatTableHeader>
                <FlatTableHeader>{i18n.t('eeContributions')}</FlatTableHeader>
                <FlatTableHeader>{i18n.t('avcContributions')}</FlatTableHeader>
                <FlatTableHeader>{i18n.t('erContributions')}</FlatTableHeader>
                <FlatTableHeader>{i18n.t('enrolmentDate')}</FlatTableHeader>
              </FlatTableRow>
            </FlatTableHead>
            <FlatTableBody>
              {data.columns[0].items.map((_, rowIndex) => (
                <FlatTableRow
                  key={rowIndex}
                  onClick={() => handleRowClick(rowIndex)}
                  selected={selectedRow === rowIndex}
                >
                  {data.columns.map((column, colIndex) => (
                    <FlatTableCell key={colIndex}>{column.items[rowIndex]}</FlatTableCell>
                  ))}
                </FlatTableRow>
              ))}
            </FlatTableBody>
          </FlatTable>
          <Box display="flex" justifyContent="flex-end" marginTop="10px" gap="20px">
            <Button buttonType="secondary" aria-label={i18n.t('managePensionFile')} onClick={handleManagePensionFileClick}>
              {i18n.t('managePensionFile')}
            </Button>
            <Typography variant="span" aria-label={i18n.t('or')}>
              {i18n.t('or')}
            </Typography>
            <Button buttonType="primary" aria-label={i18n.t('submitOnline')} onClick={handleSubmitOnlineClick}>
              {i18n.t('submitOnline')}
            </Button>
          </Box>

          <Box display="flex" flexDirection="row" alignItems="center">
            <Typography variant="strong" aria-label={i18n.t('errorEnrolment')}>
              {i18n.t('errorEnrolment')}
            </Typography>
            <Box ml="10px">
              <Typography variant="span" aria-label={i18n.t('employeeName')}>
                {i18n.t('employeeName')}
              </Typography>
            </Box>
          </Box>
          {i18n.t('errors').map((error, index) => (
            <Box key={index} marginTop="10px" marginLeft="60px">
              <Typography variant="p">

{error.message}

</Typography>
              {error.steps && (
                <Box marginLeft="20px">

                    {error.steps.map((step, idx) => (

                        <Typography variant="p">{step}</Typography>

                    ))}

                </Box>
              )}
            </Box>
          ))}
          <Link href="#" aria-label={i18n.t('findOutMore')}>
            {i18n.t('findOutMore')}
          </Link>

      </Box>
    </CarbonProvider>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  data: PropTypes.shape({
    columns: PropTypes.arrayOf(
      PropTypes.shape({
        items: PropTypes.arrayOf(PropTypes.string).isRequired
      })
    ).isRequired
  }).isRequired
};

export default App;

import I18n from 'i18n-js';

I18n.translations = {
  en: {
    reviewPension: 'Review the contents of your employee pension contributions before you submit these details to The People’s Pension.',
    pensionSubmission: 'Pension Contribution Submission',
    employeeEnrolled: '1 employee has enrolled in The People’s Pension this pay period.',
    thePeoplesPension: 'The People’s Pension - Month 2 (Pay Reference Period 06 May 2023 to 05 Jun 2023)',
    name: 'Name',
    workerCategory: 'Worker Category',
    pensionableEarnings: 'Pensionable Earnings',
    eeContributions: 'Ee Contributions',
    avcContributions: 'AVC Contributions',
    erContributions: 'Er Contributions',
    enrolmentDate: 'Enrolment Date',
    managePensionFile: 'Manage Pension File',
    or: 'or',
    submitOnline: 'Submit online',
    errorEnrolment: 'Error Enrolment:',
    employeeName: 'Macie Bernstein',
    findOutMore: 'Find out more about THE PEOPLES PENSION errors',
    errors: [
      {
        message: 'Opt In Date is incorrect. Expected Opt In Date is 30 March 2017.',
      },
      {
        message: 'Payroll is using the TPP enrolment date of 10 April 2024 for submissions. This date is before the employee start date of 31 August 2024. To resolve this, you need to do the following:',
        steps: [
          'Change the enrolment date with TPP to be on or after the employee start date.',
          'In Sage Payroll, in the pay run, select ‘Manage Pension Contributions’. Then, change the enrolment date and resubmit.',
        ],
      },
      {
        message: 'Total address must contain at least 15 characters.',
      },
    ],
  },
};

I18n.locale = 'en';
I18n.fallbacks = true;

export default I18n;

import React from "react";
import ReactDOM from "react-dom";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import sageTheme from "carbon-react/lib/style/themes/sage";
import GlobalStyle from "carbon-react/lib/style/global-style";
import "carbon-react/lib/style/fonts.css";

import App from "./app";

const dummyData = {
    columns: [
      {
        header: 'name',
        items: ['Patrick Scott', 'Macie Bernstein', 'Joanna Huff'],
      },
      {
        header: 'workerCategory',
        items: ['Eligible', 'Eligible', 'Eligible'],
      },
      {
        header: 'pensionableEarnings',
        items: ['3000.00', '3000.00', '3000.00'],
      },
      {
        header: 'eeContributions',
        items: ['105.00', '105.00', '105.00'],
      },
      {
        header: 'avcContributions',
        items: ['0.00', '0.00', '0.00'],
      },
      {
        header: 'erContributions',
        items: ['175.01', '175.01', '175.01'],
      },
      {
        header: 'enrolmentDate',
        items: ['06/05/2024', '10/04/2024', '04/04/2024'],
      },
    ],
  };

ReactDOM.render(
    <CarbonProvider focusRedesignOptOut theme={sageTheme}>
      <GlobalStyle />
      <App data={ dummyData } />;
    </CarbonProvider>,
    document.getElementById("app")
);


@import url('https://fonts.googleapis.com/css2?family=Sage+UI:wght@400;500;700&display=swap');
body {
  	margin: 0; line-height: normal;
}

.clockIn {
    align-self: stretch;
    position: relative;
    line-height: 125%;
    font-weight: 500;
}
.addOrCustomise {
    margin: 0;
}
.addOrCustomiseContainer {
    align-self: stretch;
    position: relative;
    font-size: 14px;
    line-height: 150%;
}
.clockInOutReporParent {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.raceInner {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 20px;
}
.alertIcon {
    width: 20px;
    position: relative;
    height: 20px;
}
.iconAlertcaution {
    align-self: stretch;
    width: 32px;
    background-color: #ef6700;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
}
.messageHeadingOptional {
    align-self: stretch;
    position: relative;
    line-height: 150%;
}
.goToMass {
    text-decoration: underline;
    color: #007e45;
}
.contentArea {
    flex: 1;
    border-radius: 0px 8px 8px 0px;
    background-color: #fff;
    border: 1px solid #ef6700;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px 16px 16px 24px;
}
.messageContextual1 {
    width: 861px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.messageContextual {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.leftAliTitle {
    position: absolute;
    top: 12px;
    left: 24px;
    line-height: 24px;
    font-weight: 500;
}
.headingCellTransparentL {
    flex: 1;
    position: relative;
    height: 48px;
}
.actions {
    position: absolute;
    top: 12px;
    left: 16px;
    line-height: 24px;
    font-weight: 500;
}
.headingRow {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.bennysDiner {
    position: relative;
    line-height: 24px;
}
.label {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.labelWrapper {
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 8px;
    box-sizing: border-box;
    max-width: 288px;
}
.contentWrapper1 {
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
}
.pill1 {
    border-radius: 8px;
    border: 2px solid #ba4e00;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 24px;
}
.pill {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.95);
}
.bennysDinerParent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.categoryName {
    align-self: stretch;
    flex: 0.8885;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 16px 24px;
}
.cellActions {
    align-self: stretch;
    flex: 1;
    position: relative;
    background-color: #fff;
}
.tableRow {
    align-self: stretch;
    box-shadow: 0px 1px 0px #b3c2c8 inset;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.tableRow1 {
    align-self: stretch;
    box-shadow: 0px 1px 0px #b3c2c8 inset;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
}
.tableRow2 {
    align-self: stretch;
    box-shadow: 0px 1px 0px #b3c2c8 inset;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.tableRow3 {
    align-self: stretch;
    box-shadow: 0px -1px 0px #b3c2c8 inset, 0px 1px 0px #b3c2c8 inset;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.bennysDinerWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.majorButton {
    border-radius: 32px;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 16px;
    gap: 8px;
    min-height: 32px;
}
.majorButtonParent {
    position: absolute;
    top: calc(50% - 16px);
    left: 0px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 3px;
}
.cellActions4 {
    align-self: stretch;
    flex: 1;
    position: relative;
    background-color: #fff;
    color: #007e45;
}
.tableRow4 {
    align-self: stretch;
    box-shadow: 0px -1px 0px #b3c2c8 inset;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.headingRowParent {
    width: 861px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.race {
    width: 100%;
    position: relative;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #ccd6db;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px;
    gap: 16px;
    text-align: left;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.9);
    font-family: 'Sage UI';
}

import { FunctionComponent } from 'react';
import styles from './Race.module.css';

const Race:FunctionComponent = () => {
  	return (

Race

{`Add or customise options for race and ethnicity. `}

This information will appear under the employee profile, under Personal.

              							Categories included in equity reports

To generate correct equity reports, all relevant employees must be assigned to a category marked with “Included in reports”.

You may need to reassign employees from existing categories.

                  									{`To reassign employees in bulk, `}
                  									go to mass editing.

Race

Actions

African

Included in reports

Coloured

Included in reports

Indian

Included in reports

White

Included in reports

African

Edit

Delete

Coloured

Edit

Delete

Indian

Edit

Delete

White

Edit

Delete

);
};

export default Race;

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import Box from 'carbon-react/lib/components/box';
import { FlatTable, FlatTableRow, FlatTableHeader, FlatTableCell, FlatTableHead, FlatTableBody } from 'carbon-react/lib/components/flat-table';
import Typography from 'carbon-react/lib/components/typography';
import Message from 'carbon-react/lib/components/message';
import IconButton from 'carbon-react/lib/components/icon-button';
import Icon from 'carbon-react/lib/components/icon';
import Pill from 'carbon-react/lib/components/pill';
import i18n from './i18n';
import Link from 'carbon-react/lib/components/link';

const App = ({ data, locale = 'en' }) => {
  useEffect(() => {
    i18n.locale = locale;
  }, [locale]);

  return (
    <Box display="flex" justifyContent="center" alignItems="center">
      <Box width="861px" height="48px" padding="16px" border="1px solid #ccd6db" borderRadius="8px">
        <Typography variant="h2">{i18n.t('title')}</Typography>
        <Typography variant="span">{i18n.t('subtitle1')}</Typography>
        <Typography variant="p">{i18n.t('subtitle2')}</Typography>
        <Message variant="warning" mb = "20px" title={i18n.t('infoTitle')}>
          <Typography variant="span">{i18n.t('infoText1')}</Typography>
          <Typography variant="ol">{i18n.t('infoText2')}</Typography>
          <Typography variant="ol">{i18n.t('infoText3')}
            <Link href="https://carbon.sage.com" target="_blank" rel="noreferrer noopener">
              {i18n.t('linkText')}
            </Link>.
          </Typography>
        </Message>
        <FlatTable colorTheme="transparent-white" aria-label={i18n.t('tableAriaLabel')} hasOuterVerticalBorders={false}>
          <FlatTableHead>
            <FlatTableRow>
              <FlatTableHeader>{i18n.t('tableHeaderRace')}</FlatTableHeader>
              <FlatTableHeader>{i18n.t('tableHeaderActions')}</FlatTableHeader>
            </FlatTableRow>
          </FlatTableHead>
          <FlatTableBody>
            {data.map((item, index) => (
              <FlatTableRow key={`included-${index}`}>
                <FlatTableCell width="50%">
                  <Box display="flex" alignItems="center" gap="8px">
                    <Typography variant="ol">{item.race}</Typography>
                    {item.includedInReports && (
                      <Pill borderColor="#ba4e00" borderRadius="16px">
                        {i18n.t('includedInReports')}
                      </Pill>
                    )}
                  </Box>
                </FlatTableCell>
                <FlatTableCell width="50%" />
              </FlatTableRow>
            ))}
            {data.map((item, index) => (
              <FlatTableRow key={`actions-${index}`}>
                <FlatTableCell width="50%">
                  <Typography variant="ol">{item.race}</Typography>
                </FlatTableCell>
                <FlatTableCell width="50%">
                  <Box display="flex" alignItems="center">
                    <IconButton aria-label={i18n.t('editAriaLabel')} onClick={() => { /* handle edit */ }}>
                      <Box display="flex" flexDirection="row" mr = "30px">
                        <Icon type="edit" color="green" />
                        <Typography variant="ol" color="green" ml = "8px">{i18n.t('editAltText')}</Typography>
                      </Box>
                    </IconButton>
                    <IconButton aria-label={i18n.t('deleteAriaLabel')} onClick={() => { /* handle delete */ }}>
                      <Box display="flex" flexDirection="row">
                        <Icon type="delete" color="green" />
                        <Typography variant="ol" color="green" ml = "8px">{i18n.t('deleteAltText')}</Typography>
                      </Box>
                    </IconButton>
                  </Box>
                </FlatTableCell>
              </FlatTableRow>
            ))}
          </FlatTableBody>
        </FlatTable>
      </Box>
    </Box>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  data: PropTypes.arrayOf(
    PropTypes.shape({
      race: PropTypes.string.isRequired,
      includedInReports: PropTypes.bool.isRequired,
    })
  ).isRequired,
};

export default App;

import I18n from 'i18n-js';

I18n.translations = {
  en: {
    title: 'Race',
    subtitle1: 'Add or customise options for race and ethnicity.',
    subtitle2: 'This information will appear under the employee profile, under Personal.',
    infoTitle: 'Categories included in equity reports',
    infoText1: 'To generate correct equity reports, all relevant employees must be assigned to a category marked with “Included in reports”.',
    infoText2: 'You may need to reassign employees from existing categories.',
    infoText3: 'To reassign employees in bulk, ',
    linkText: 'go to mass editing',
    tableAriaLabel: 'Race and Actions Table',
    tableHeaderRace: 'Race',
    tableHeaderActions: 'Actions',
    includedInReports: 'Included in reports',
    editAriaLabel: 'Edit Race',
    editAltText: 'Edit',
    deleteAriaLabel: 'Delete Race',
    deleteAltText: 'Delete',
  },
};

I18n.locale = 'en';
I18n.fallbacks = true;

export default I18n;

import React from "react";
import ReactDOM from "react-dom";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import sageTheme from "carbon-react/lib/style/themes/sage";
import GlobalStyle from "carbon-react/lib/style/global-style";
import "carbon-react/lib/style/fonts.css";

import App from "./app";

// Example usage with dummy data
const dummyData = [
  { race: 'African', includedInReports: true },
  { race: 'Coloured', includedInReports: true },
  { race: 'Indian', includedInReports: true },
  { race: 'White', includedInReports: true },
];

ReactDOM.render(
  <CarbonProvider focusRedesignOptOut theme={sageTheme}>
    <GlobalStyle />
    <App data={dummyData} />;
  </CarbonProvider>,
  document.getElementById("app")
);


.spacer {
    align-self: stretch;
    flex: 1;
}
.label {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.majorButton {
    border-radius: 32px;
    border: 2px solid #007e45;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 16px;
    min-height: 40px;
}
.majorButtonWrapper {
    width: 440px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.prevBtn {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 0px 16px;
    gap: 24px;
}
.stepFlow {
    flex: 1;
    height: 7613.6px;
}
.indicatesARequired {
    position: relative;
    line-height: 150%;
    color: rgba(0, 0, 0, 0.65);
}
.requiredValue {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}
.titleHint {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: #cb374a;
}
.clientcreationclienttypelabe {
    align-self: stretch;
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.labelSetWrapper {
    width: 368px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.clientcreationbasicdetailsor {
    flex: 1;
    position: relative;
    line-height: 150%;
}
.hint {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    color: rgba(0, 0, 0, 0.55);
}
.labelSetWrapperParent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.circle {
    width: 20px;
    border-radius: 50px;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 20px;
}
.personIcon {
    width: 20px;
    position: relative;
    height: 20px;
}
.clientcreationclienttypeindi1 {
    align-self: stretch;
    position: relative;
    line-height: 150%;
    color: rgba(0, 0, 0, 0.55);
}
.clientcreationclienttypeindiParent {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.individualOff {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.dot {
    width: 10px;
    position: relative;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.9);
    height: 10px;
}
.circle1 {
    width: 20px;
    border-radius: 50px;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 2px;
}
.radioButtonList {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
}
.entityTypeSelect {
    width: 440px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}
.span {
    color: #cb374a;
}
.addressirelandlabel {
    flex: 1;
    position: relative;
    line-height: 150%;
    display: inline-block;
    height: 21px;
}
.inputTextContainer {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 12px;
    gap: 12px;
}
.inputContainer {
    align-self: stretch;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.wrapper {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: #000;
}
.countryDropdownError {
    align-self: stretch;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.inputTextContainer1 {
    flex: 1;
    height: 21px;
    overflow: hidden;
}
.name {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.checkboxm {
    width: 20px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 20px;
}
.unchecked {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.anotherNameCheckboxes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.basicDetails {
    align-self: stretch;
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 0px 32px;
    gap: 16px;
}
.form {
    width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 40px;
    box-sizing: border-box;
}
.rightSpacer {
    align-self: stretch;
    flex: 0.9847;
}
.stepFlowParent {
    align-self: stretch;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    color: rgba(0, 0, 0, 0.9);
}
.pageLayout {
    align-self: stretch;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.addEntityStepFlowMaster1 {
    position: absolute;
    width: 100%;
    top: 141px;
    right: 0%;
    left: 0%;
    background-color: #fff;
    height: 687px;
    overflow-y: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px 0px 32px;
    box-sizing: border-box;
}
.div {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    box-shadow: 0px -4px 12px rgba(0, 20, 30, 0.05);
    background-color: #fff;
}
.shadow {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: #fff;
    height: 72px;
    z-index: 0;
}
.previous {
    flex: 1;
    height: 40px;
    z-index: 1;
}
.cancelButton {
    border-radius: 32px;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    z-index: 2;
}
.nextButton {
    border-radius: 32px;
    background-color: #007e45;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    z-index: 3;
    color: #fff;
}
.sfaFooterHorizontaldefault {
    position: absolute;
    width: 100%;
    right: 0%;
    bottom: 0px;
    left: 0%;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 16px 32px;
    box-sizing: border-box;
    gap: 16px;
}
.title {
    align-self: stretch;
    position: relative;
    font-size: 24px;
    line-height: 125%;
    color: rgba(0, 0, 0, 0.9);
}
.icon {
    width: 32px;
    border-radius: 4px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.wrapper1 {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    z-index: 0;
}
.label1 {
    align-self: stretch;
    position: relative;
    line-height: 150%;
}
.sequenceLineIcon {
    align-self: stretch;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.stepStatecompleted {
    flex: 1;
    height: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.progressIndicators {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}
.progressTracker {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    max-width: 750px;
    z-index: 1;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.9);
}
.dividerOnLight {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    right: 0px;
    bottom: 0px;
    left: 0px;
    max-width: 100%;
    overflow: hidden;
    height: 1px;
    flex-shrink: 0;
    z-index: 2;
}
.header {
    flex: 1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px 24px 20px;
    position: relative;
    gap: 12px;
}
.stepFlow1 {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.addEntityHeaders {
    position: absolute;
    width: 100%;
    top: 0px;
    right: 0%;
    left: 0%;
    border-bottom: 1px solid #d9e0e4;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    color: rgba(0, 0, 0, 0.55);
}
.addEntityDialogMaster {
    width: 100%;
    position: relative;
    background-color: #fff;
    height: 900px;
    overflow-y: auto;
    text-align: left;
    font-size: 14px;
    color: #007e45;
    font-family: 'Sage UI';
}

import { FunctionComponent } from 'react';
import styles from './AddEntityDialogMASTER.module.css';

const AddEntityDialogMASTER:FunctionComponent = () => {
  	return (

Previous

{`* `}

indicates a required value.

Client type

We'll display this on the client list and when creating a folder.

Individual

Gives access to Personal Tax, VAT Overview, GoProposal and AutoEntry.

Organisation (includes sole trades)

Gives access to Accounting (Individual, Start, Standard, Plus), Payroll, VAT Overview, Final Accounts, Corporation Tax, GoProposal and AutoEntry.

                            														{`Country `}
                            														*

The country where the client is registered for tax.

Ireland

                          													{`Name `}
                          													*

Typically the legal name. We'll display this on the client list and when creating a folder.

Is this client also known by another name?

Internal code / reference

Your own reference code or number for this client.

Cancel

Next

Add client

                                      																			Basic details

Step 2 of 5

);
                          													};

                          													export default AddEntityDialogMASTER;

@import url('https://fonts.googleapis.com/css2?family=Sage+UI:wght@400;500;700&display=swap');
body {
  	margin: 0; line-height: normal;
}

import React, { useState, useCallback, useRef } from "react";
import PropTypes from "prop-types";
import Box from "carbon-react/lib/components/box";
import Button from "carbon-react/lib/components/button";
import { Checkbox } from "carbon-react/lib/components/checkbox";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import Dialog from "carbon-react/lib/components/dialog";
import Form from "carbon-react/lib/components/form";
import Icon from "carbon-react/lib/components/icon";
import { RadioButton, RadioButtonGroup } from "carbon-react/lib/components/radio-button";
import sageTheme from "carbon-react/lib/style/themes/sage";
import { StepFlow } from "carbon-react/lib/components/step-flow";
import { Select, Option } from "carbon-react/lib/components/select";
import Textbox from "carbon-react/lib/components/textbox";
import Typography from "carbon-react/lib/components/typography";
import I18n from "./i18n";

const App = ({ locale = "en", fieldValues, options }) => {
  I18n.locale = locale;
  const [clientType, setClientType] = useState(fieldValues.clientType);
  const [countryValue, setCountryValue] = useState(fieldValues.country);
  const [ isOpen, setIsOpen ] = useState(true);
  const [name, setName] = useState(fieldValues.name);
  const [nameValidation, setNameValidation] = useState("");
  const optionsRef = useRef(options);

  const handlePreviousClick = useCallback(() => {
    alert("Previous button clicked");
  }, []);

  const handleNextClick = useCallback(() => {
    let valid = true;
    if (!name.trim()) {
      setNameValidation("Name is required");
      valid = false;
    } else {
      setNameValidation("");
    }
    if (valid){
      alert("Next button clicked. Form is valid");
    }
  }, [name]);

  const handleCancelClick = useCallback(() => {
    alert("Cancel button clicked");
    setIsOpen(false);
  }, []);

  const handleCountryValue = (event) => {
    const countryValue = event.target.value;
    setCountryValue(countryValue);
  };

  const handleNameChange = (event) => {
    setName(event.target.value);
    if (event.target.value.trim()) {
      setNameValidation("");
    }
  };

  return (
    <CarbonProvider validationRedesignOptIn theme={ sageTheme }>
      <Dialog
        open={ isOpen }
        onCancel={ handleCancelClick }
        size="extra-large"
      >
        <Form
          stickyFooter
          rightSideButtons={
            <Box display="flex">
              <Button onClick={ handleCancelClick } buttonType="tertiary" mr="10px">
                { I18n.t("cancel") }
              </Button>
              <Button onClick={ handleNextClick } buttonType="primary">
                { I18n.t("next") }
              </Button>
            </Box>
          }
        >
          <Box width="60%" marginTop="0px">
            <StepFlow
              category={ I18n.t("addClient") }
              title={ I18n.t("basicDetails") }
              currentStep={ 2 }
              totalSteps={ 5 }
              showProgressIndicator
              showCloseIcon={ false }
              titleVariant="h2"
            />
          </Box>

            <Box
              display="flex"
              flexDirection="column"
              mx="300px"
              mt="2px"
              width="40%"
            >
              <Box>
                <Button
                  key="previous"
                  buttonType="secondary"
                  mt="16px"
                  mb={ 1 }
                  onClick={ handlePreviousClick }
                >
                  { I18n.t("previous") }
                </Button>
              </Box>
              <Typography variant="p">
                * { I18n.t("requiredValue") }
              </Typography>
              <Box mb="8px">
                <RadioButtonGroup
                  name="clientType"
                  legend={ I18n.t("clientType") }
                  legendHelp={ I18n.t("clientTypeList") }
                  value={ clientType }
                  onChange={ (event) => setClientType(event.target.value) }
                  aria-label="Client type"
                  mb="16px"
                >
                  <RadioButton
                    value="individual"
                    label={
                      <>
                        <Icon type="person" size="small" />
                        { I18n.t("individual") }
                      </>
                    }
                    fieldHelp={ I18n.t("individualRadioButton") }
                    mb="12px"
                  />
                  <RadioButton
                    value="organisation"
                    label={
                      <>
                        <Icon type="shop" size="small" />
                        { I18n.t("organisation") }
                      </>
                    }
                    fieldHelp={ I18n.t("organisationRadioButton") }
                  />
                </RadioButtonGroup>
              </Box>
              <Box mb="8px">
                <Select
                  label={ I18n.t("country") }
                  aria-label="Country"
                  value={ String(countryValue) }
                  onChange= { handleCountryValue }
                  required
                >
                  { optionsRef.current.map((category) => (
                    <Option key={ category.id }
                      id={ category.id }
                      value={ category.value }
                      text={ category.text }
                    />
                  )) }
                </Select>
              </Box>
              <Box mb="8px">
                <Textbox
                  label={ I18n.t("name") }
                  inputHint={ I18n.t("legalName") }
                  required
                  value={ name }
                  onChange={ handleNameChange }
                  error={ nameValidation }
                />
              </Box>
              <Box mb="8px">
                <Checkbox
                  label={ I18n.t("otherName") }
                  aria-label="Known by other name"
                />
              </Box>
              <Box mb="8px">
                <Textbox label={ I18n.t("reference") } inputHint={ I18n.t("ownReferenceCode") } />
              </Box>
            </Box>

        </Form>
      </Dialog>
    </CarbonProvider>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  fieldValues: PropTypes.shape({
    clientType: PropTypes.string,
    country: PropTypes.string,
    name: PropTypes.string,
  }).isRequired,
  options: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      value: PropTypes.string.isRequired,
      text: PropTypes.string.isRequired,
    })
  ).isRequired,
};

export default App;

import I18n from "i18n-js";

I18n.translations = {
  en: {
    addClient: "Add client",
    basicDetails: "Basic details",
    requiredValue: "indicates a required value.",
    clientType: "Client type",
    clientTypeList: "We'll display this on the client list and when creating a folder.",
    individual: "Individual",
    individualRadioButton: "Gives access to Personal Tax, VAT Overview, GoProposal and AutoEntry.",
    organisation: "Organisation (includes sole trades)",
    organisationRadioButton: "Gives access to Accounting(Individual, Start, Standard, Plus), Payroll, VAT Overview, Final Accounts, Corporation Tax, GoProposal and AutoEntry.",
    country: "Country",
    countryTax: "The country where the client is registered for tax.",
    name: "Name",
    legalName: "Typically the legal name. We'll display this on the client list and when creating a folder.",
    otherName: "Is this client also known by another name?",
    reference: "Internal code / reference",
    ownReferenceCode: "Your own reference code or number for this client.",
    previous: "Previous",
    cancel: "Cancel",
    next: "Next",
  },
};

export default I18n;

import React from "react";
import ReactDOM from "react-dom";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import sageTheme from "carbon-react/lib/style/themes/sage";
import GlobalStyle from "carbon-react/lib/style/global-style";
import "carbon-react/lib/style/fonts.css";

import App from "./app";

const options=[
  { id: "A", value: "1", text: "Ireland" }
];

const fieldValues={
  clientType: "organisation",
  country: "1",
  name: "",
};

ReactDOM.render(
  <CarbonProvider focusRedesignOptOut theme={ sageTheme }>
    <GlobalStyle />
    <App fieldValues={ fieldValues } options={ options }/>
  </CarbonProvider>,
  document.getElementById("app")
);


.stepFlow {
	flex: 1;
	height: 7613.6px;
}
.loaderRingSpinner {
	width: 54.6px;
	position: relative;
	height: 54.6px;
}
.commonloading {
	width: 320px;
	position: relative;
	line-height: 150%;
	display: inline-block;
}
.processingSpinners {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px 0px;
	gap: 16px;
}
.form {
	align-self: stretch;
	width: 440px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0px 0px 40px;
	box-sizing: border-box;
}
.rightSpacer {
	align-self: stretch;
	flex: 0.9847;
}
.stepFlowParent {
	align-self: stretch;
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 24px;
}
.pageLayout {
	align-self: stretch;
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.addEntityStepFlowMaster1 {
	position: absolute;
	width: 100%;
	top: 141px;
	right: 0%;
	left: 0%;
	background-color: #fff;
	height: 687px;
	overflow-y: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 16px 0px 32px;
	box-sizing: border-box;
}
.div {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0%;
	right: 0%;
	bottom: 0%;
	left: 0%;
	box-shadow: 0px -4px 12px rgba(0, 20, 30, 0.05);
	background-color: #fff;
}
.shadow {
	width: 100%;
	position: absolute;
	margin: 0 !important;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background-color: #fff;
	height: 72px;
	z-index: 0;
}
.sfaFooterHorizontaldefault {
	position: absolute;
	width: 100%;
	right: 0%;
	bottom: 0px;
	left: 0%;
	background-color: #fff;
	height: 72px;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 16px 32px;
	box-sizing: border-box;
}
.title {
	align-self: stretch;
	position: relative;
	line-height: 125%;
}
.header1 {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.closeIcon {
	width: 20px;
	position: relative;
	height: 20px;
}
.icon {
	width: 32px;
	border-radius: 4px;
	height: 32px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.wrapper {
	align-self: stretch;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 12px;
	z-index: 0;
}
.dividerOnLight {
	width: 100%;
	position: absolute;
	margin: 0 !important;
	right: 0px;
	bottom: 0px;
	left: 0px;
	max-width: 100%;
	overflow: hidden;
	height: 1px;
	flex-shrink: 0;
	z-index: 1;
}
.header {
	flex: 1;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 24px 24px 20px;
	position: relative;
	gap: 12px;
}
.stepFlow1 {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
}
.addEntityHeaders {
	position: absolute;
	width: 100%;
	top: 0px;
	right: 0%;
	left: 0%;
	border-bottom: 1px solid #d9e0e4;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	font-size: 24px;
}
.addEntityDialogMaster {
	width: 100%;
	position: relative;
	background-color: #fff;
	height: 900px;
	overflow-y: auto;
	text-align: center;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.9);
	font-family: 'Sage UI';
}

import { FunctionComponent } from 'react';
import styles from './AddEntityDialogMASTER.module.css';

const AddEntityDialogMASTER:FunctionComponent = () => {
  	return (

Saving...

                								Add client

);
};

export default AddEntityDialogMASTER;

@import url('https://fonts.googleapis.com/css2?family=Sage+UI:wght@400;700&display=swap');
body {
  	margin: 0; line-height: normal;
}

import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import Dialog from "carbon-react/lib/components/dialog";
import Form from "carbon-react/lib/components/form";
import Button from "carbon-react/lib/components/button";
import Box from "carbon-react/lib/components/box";
import { LoaderSpinner } from "carbon-react/lib/components/loader-spinner";
import sageTheme from "carbon-react/lib/style/themes/sage";
import "./i18n";
import I18n from "i18n-js";

const App = ({ locale = "en" }) => {
  const [ isOpen, setIsOpen ] = useState(true);
  const [ isLoading, setIsLoading ] = useState(false);

  useEffect(() => {
    I18n.locale = locale;
  }, [ locale ]);

  const handleSaveButtonClick = () => {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
      alert("Save successful!");
    }, 5000);
  };

  const handleCancelButtonClick = () => {
    setIsOpen(false);
  };

  return (
    <CarbonProvider theme={ sageTheme }>
      <Dialog
        open={ isOpen }
        onCancel={ handleCancelButtonClick }
        size="extra-large"
        title={ I18n.t("add_client") }
      >
        <Form
          stickyFooter
          footerPadding={ { pt: 2 } }
          rightSideButtons={
            <Box display="flex">
              <Button onClick={ handleCancelButtonClick } buttonType="tertiary" mr="10px">
                { I18n.t("cancel") }
              </Button>
              <Button onClick={ handleSaveButtonClick } buttonType="primary">
                { I18n.t("save") }
              </Button>
            </Box>
          }
        >
          <Box
            height="500px"
            display="flex"
            justifyContent="center"
            alignItems="center"
          >
            { isLoading ? (
              <LoaderSpinner mx="3" spinnerLabel={ I18n.t("saving") } variant="action" />
            ) : (
              <Box></Box>
            )}
          </Box>
        </Form>
      </Dialog>
    </CarbonProvider>
  );
};

App.propTypes = {
  locale: PropTypes.string,
};

export default App;

import I18n from 'i18n-js';

I18n.translations = {
  en: {
    add_client: "Add client",
    save: "Save",
    cancel: "Cancel",
    saving: "Saving..."
  },
};

I18n.locale = 'en';
I18n.fallbacks = true;

export default I18n;

import React from "react";
import ReactDOM from "react-dom";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import sageTheme from "carbon-react/lib/style/themes/sage";
import GlobalStyle from "carbon-react/lib/style/global-style";
import "carbon-react/lib/style/fonts.css";
import App from "./app";

ReactDOM.render(
  <CarbonProvider theme={ sageTheme }>
    <GlobalStyle />
    <App />
  </CarbonProvider>,
  document.getElementById('app')
);


.title {
    flex: 1;
    position: relative;
    line-height: 125%;
}
.header {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 8px 0px 0px;
    z-index: 0;
}
.closeIcon {
    width: 20px;
    position: relative;
    height: 20px;
}
.icon {
    width: 32px;
    border-radius: 4px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.dividerOnLight {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    right: 0px;
    bottom: 0px;
    left: 0px;
    max-width: 100%;
    overflow: hidden;
    height: 1px;
    z-index: 2;
}
.headerdialogOnly {
    align-self: stretch;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px 24px 20px;
    position: relative;
    gap: 16px;
    font-size: 24px;
}
.mandatoryLabel {
    align-self: stretch;
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.labelSet {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.handle {
    width: 16px;
    position: relative;
    border-radius: 32px;
    background-color: #668494;
    height: 16px;
}
.optionLabel {
    position: relative;
    line-height: 150%;
    text-transform: uppercase;
    font-weight: 500;
}
.switch1 {
    width: 55px;
    border-radius: 32px;
    border: 2px solid #668494;
    box-sizing: border-box;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0px 8px 0px 4px;
    text-align: right;
    font-size: 12px;
    color: #335b70;
}
.switch {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    color: rgba(0, 0, 0, 0.9);
}
.pensionProvider {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.thePeoplesPension {
    margin: 0;
}
.thePeoplesPensionContainer {
    position: relative;
    line-height: 150%;
}
.pensionProviderParent {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
}
.frameGroup {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 44px;
}
.handle1 {
    width: 16px;
    position: relative;
    border-radius: 32px;
    background-color: #fff;
    height: 16px;
}
.switch3 {
    width: 55px;
    border-radius: 32px;
    background-color: #e6ebed;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0px 4px 0px 8px;
}
.switch2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.3);
}
.frameParent {
    align-self: stretch;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #b3c2c9;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px;
    gap: 20px;
}
.hintText {
    align-self: stretch;
    position: relative;
    line-height: 150%;
    color: rgba(0, 0, 0, 0.55);
}
.labelSet1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.inputtext {
    flex: 1;
    position: relative;
    line-height: 150%;
    display: inline-block;
    height: 21px;
}
.inputTextContainer {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 12px;
    gap: 4px;
}
.inputContainer {
    align-self: stretch;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.dropdownSelectStandard {
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.hintText1 {
    align-self: stretch;
    position: relative;
    line-height: 150%;
}
.inputtext1 {
    flex: 1;
    position: relative;
    line-height: 150%;
}
.inputTextContainer1 {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 12px;
    gap: 12px;
}
.inputContainer1 {
    align-self: stretch;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    color: rgba(0, 0, 0, 0.9);
}
.textInput {
    width: 177px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    color: rgba(0, 0, 0, 0.55);
}
.dropdownSelectStandardParent {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 30px;
    color: rgba(0, 0, 0, 0.9);
}
.switch5 {
    width: 55px;
    border-radius: 32px;
    border: 2px solid #668494;
    box-sizing: border-box;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0px 8px 0px 4px;
}
.switch4 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: right;
    font-size: 12px;
    color: #335b70;
}
.wrapper1 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px;
    gap: 10px;
}
.swappableContentdefault {
    align-self: stretch;
    background-color: #fff;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    color: #000;
}
.majorButton {
    border-radius: 32px;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 24px;
    min-height: 40px;
}
.majorButton1 {
    border-radius: 32px;
    background-color: #007e45;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 24px;
    min-height: 40px;
    color: #fff;
}
.footerHorizontaldefault {
    align-self: stretch;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 16px 24px;
    gap: 16px;
    color: #007e45;
}
.changeAutoEnrolmentDisabled {
    width: 100%;
    position: relative;
    box-shadow: 0px 10px 30px rgba(0, 20, 30, 0.1), 0px 30px 60px rgba(0, 20, 30, 0.1);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 288px;
    max-width: 750px;
    text-align: left;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.9);
    font-family: 'Sage UI';
}

import { FunctionComponent } from 'react';
import styles from './ChangeAutoEnrolmentDisabled.module.css';

const ChangeAutoEnrolmentDisabled:FunctionComponent = () => {
  	return (

            						Manage Pension Contributions

Change Auto Enrolment dates?

OFF

Pension Provider:

The People’s Pension:

Monthly

Plan Name:

People’s Plan 1

Deduct before tax

ON

Employee Contributions

Employee’s Standard Contribution

(Plan default: Percentage)

Percentage

(Plan default: 5.0)

5.00

Deduct Additional Voluntary Contribution

OFF

Employer Contributions

Employer’s Standard Contribution

(Plan default: Percentage)

Percentage

(Plan default: 5.0)

3.00

Cancel

Save

);
              							};

              							export default ChangeAutoEnrolmentDisabled;

@import url('https://fonts.googleapis.com/css2?family=Sage+UI:wght@400;500;700&display=swap');
body {
  	margin: 0; line-height: normal;
}

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import CarbonProvider from 'carbon-react/lib/components/carbon-provider';
import Dialog from 'carbon-react/lib/components/dialog';
import Form from 'carbon-react/lib/components/form';
import Box from 'carbon-react/lib/components/box';
import Button from 'carbon-react/lib/components/button';
import Typography from 'carbon-react/lib/components/typography';
import Switch from 'carbon-react/lib/components/switch';
import Textbox from 'carbon-react/lib/components/textbox';
import Icon from "carbon-react/lib/components/icon";
import { Select, Option } from "carbon-react/lib/components/select";
import { i18n } from './i18n';

const App = ({ locale = 'en', pensionDetails, taxPlans }) => {
  const t = i18n[locale];
  const [isCheckedAutoEnrolment, setIsCheckedAutoEnrolment] =
    useState(pensionDetails.changeAutoEnrolmentDates);
  const [isCheckedDeductBeforeTax, setIsCheckedDeductBeforeTax] = useState(true);
  const [isCheckedAdditionalVoluntaryContribution, setIsCheckedAdditionalVoluntaryContribution] =
    useState(pensionDetails.deductAdditionalVoluntaryContribution);
  const [employeeContribution, setEmployeeContribution] = useState(pensionDetails.employeePlanPercentage);
  const [employerContribution, setEmployerContribution] = useState(pensionDetails.employerPlanPercentage);
  const [selectedTaxPlan, setSelectedTaxPlan] = useState(taxPlans[0].value);
  const [selectedTaxPlan1, setSelectedTaxPlan1] = useState(taxPlans[0].value);
  const [isDialogOpen, setIsDialogOpen] = useState(true);

  const handleCancelButtonClick = () => {
    setIsDialogOpen(false);
  };

  const handleSaveButtonClick = () => {
    alert('Save button clicked');
  };

  const validateContribution = (value) => {
    return value >= 0 && value <= 100;
  };

  const handleSelectChangeEmployee = (event) => {
    setSelectedTaxPlan(event.target.value);
  };

  const handleSelectChangeEmployer = (event) => {
    setSelectedTaxPlan1(event.target.value);
  };

  return (
    <CarbonProvider validationRedesignOptIn>
      <Dialog
        open={ isDialogOpen }
        onCancel={ handleCancelButtonClick }
        size="medium"
        title={ t.managePensionContributions }
      >
        <Form
          stickyFooter
          leftSideButtons={
            <Button onClick={ handleCancelButtonClick } buttonType="secondary">
              { t.cancel }
            </Button>
          }
          saveButton={
            <Button onClick={ handleSaveButtonClick } buttonType="primary">
              { t.save }
            </Button>
          }
        >
          <Box>
            <Box>
              <Box>
                <Typography variant="strong">
                  { t.changeAutoEnrolmentDates }
                </Typography>
              </Box>
              <Switch
                name="auto-enrolment-switch"
                checked={ isCheckedAutoEnrolment }
                onChange={ (e) => setIsCheckedAutoEnrolment(e.target.checked) }
                mb="15px"
                data-role='auto-enrollment-switch'
              />
            </Box>
            <div
              style={{
                border: '1px solid #bdd9e7',
                borderRadius: '8px',
              }}
            >
              <Box p="15px">
                <Box>
                  <Box
                    display="flex"
                    flexDirection="row"
                    alignItems="left">
                    <Typography
                      variant="strong"
                      aria-label={ t.pensionProvider }
                    >
                      { t.pensionProvider }:
                    </Typography>
                    <Box ml="30px">
                      <Typography
                        variant="span"
                        aria-label={ pensionDetails.provider }
                        data-role='pension-provider-label'
                      >
                        { pensionDetails.provider }:
                      </Typography>
                      <Box ml="0px">
                        <Typography
                          variant="span"
                          aria-label={ pensionDetails.frequency }
                          data-role='pension-frequency-label'
                        >
                          { pensionDetails.frequency }
                        </Typography>
                      </Box>
                    </Box>
                    <Typography
                      variant="strong"
                      aria-label={ t.planName }
                      ml="30px"
                    >
                      { t.planName }:
                    </Typography>
                    <Box ml="30px">
                      <Typography
                        variant="span"
                        aria-label={ pensionDetails.planName }
                        data-role='pension-plan-name-label'
                      >
                        { pensionDetails.planName }
                      </Typography>
                    </Box>
                  </Box>
                </Box>
                <Box
                  display="flex"
                  flexDirection="row"
                  alignItems="center"
                >
                  <Typography variant="strong">
                    { t.deductBeforeTax }
                  </Typography>
                  <Box ml="30px">
                    <Switch
                      checked={ isCheckedDeductBeforeTax }
                      onChange={ (e) => setIsCheckedDeductBeforeTax(e.target.checked) }
                      disabled
                      mb="-1px" />
                  </Box>
                </Box>
              </Box>
            </div>
            <Box m={ 2 } />
            <div
              style={{
                border: '1px solid #bdd9e7',
                borderRadius: '8px',
              }}
            >
              <Box p="15px">
                <Typography variant="strong">{ t.employeeContributions }</Typography>
                <Typography variant="p"></Typography>
                <Box
                  display="flex"
                  flexDirection="row"
                  alignItems="left">
                  <Select
                    id="with-object"
                    name="with-object"
                    data-role='select-employee-contribution'
                    label={ t.employerStandardContribution }
                    inputHint={ t.planDefaultPercentage }
                    value={ selectedTaxPlan }
                    onChange={ handleSelectChangeEmployee }
                    labelInline
                  >
                    {taxPlans.map((plan) => (
                      <Option
                        key={  plan.id }
                        text={ plan.text }
                        value={ plan.value }
                      />
                    ))}
                  </Select>
                  <Box ml="40px">
                    <Textbox
                      inputHint={ t.planDefault5 }
                      value={ employeeContribution }
                      onChange={ (e) => setEmployeeContribution(e.target.value) }
                      validation={ (value) => validateContribution(value) }
                      marginTop={ 3 }
                      data-role='employee-contribution-text'
                    >
                      <Icon m={ 1 } type="percentage_boxed" />
                    </Textbox>
                  </Box>
                </Box>
                <Box
                  display="flex"
                  flexDirection="row"
                  alignItems="center"
                >
                  <Typography variant="strong">
                    { t.deductAdditionalVoluntaryContribution }
                  </Typography>
                  <Box ml="20px">
                    <Switch
                      checked={ isCheckedAdditionalVoluntaryContribution }
                      onChange={ (e) => setIsCheckedAdditionalVoluntaryContribution(e.target.checked) }
                      mb="-2px"
                      data-role='deduct-additional-voluntary-contribution-switch'
                    />
                  </Box>
                </Box>
              </Box>
            </div>
            <Box m={ 2 } />
            <div
              style={{
                border: '1px solid #bdd9e7',
                borderRadius: '8px',
              }}
            >
              <Box mb="-10px" p="15px">
                <Typography variant="strong">
                  { t.employerContributions }
                </Typography>
                <Typography variant="p"/>
                <Box
                  display="flex"
                  flexDirection="row"
                  alignItems="left">
                  <Select
                    id="with-object"
                    name="with-object"
                    data-role='select-employer-contribution'
                    label={t.employerStandardContribution}
                    inputHint={t.planDefaultPercentage}
                    value={selectedTaxPlan1}
                    onChange={handleSelectChangeEmployer}
                    labelInline
                  >
                    { taxPlans.map((plan) => (
                      <Option
                        key={ plan.id }
                        text={ plan.text }
                        value={ plan.value }
                      />
                    )) }
                  </Select>
                  <Box ml="40px">
                    <Textbox
                      inputHint={ t.planDefault5 }
                      value={ employerContribution }
                      onChange={ (e) => setEmployerContribution(e.target.value) }
                      validation={ (value) => validateContribution(value) }
                      marginTop={ 3 }
                      data-role='employer-contribution-text'
                    >
                      <Icon m={ 1 } type="percentage_boxed" />
                    </Textbox>
                  </Box>
                </Box>
              </Box>
            </div>
          </Box>
        </Form>
      </Dialog>
    </CarbonProvider>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  pensionDetails: PropTypes.shape({
    provider: PropTypes.string.isRequired,
    frequency: PropTypes.string.isRequired,
    planName: PropTypes.string.isRequired,
    taxPlan: PropTypes.number.isRequired,
    employeePlanPercentage: PropTypes.string.isRequired,
    employerPlanPercentage: PropTypes.string.isRequired,
    changeAutoEnrolmentDates: PropTypes.bool.isRequired,
    deductAdditionalVoluntaryContribution: PropTypes.bool.isRequired
  }).isRequired,
  taxPlans: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      value: PropTypes.string.isRequired,
      text: PropTypes.string.isRequired
    })
  ).isRequired
};

export default App;

export const i18n = {
  en: {
    cancel: 'Cancel',
    save: 'Save',
    managePensionContributions: 'Manage Pension Contributions',
    changeAutoEnrolmentDates: 'Change Auto Enrolment dates?',
    pensionProvider: 'Pension Provider',
    planName: 'Plan Name',
    deductBeforeTax: 'Deduct before tax',
    employeeContributions: 'Employee Contributions',
    employeeStandardContribution: 'Employee’s Standard Contribution',
    planDefaultPercentage: '(Plan default: Percentage)',
    percentage: 'Percentage',
    planDefault5: '(Plan default: 5.0)',
    deductAdditionalVoluntaryContribution: 'Deduct Additional Voluntary Contribution',
    employerContributions: 'Employer Contributions',
    employerStandardContribution: 'Employer’s Standard Contribution'
  },
};

import React from "react";
import ReactDOM from "react-dom";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import sageTheme from "carbon-react/lib/style/themes/sage";
import GlobalStyle from "carbon-react/lib/style/global-style";
import "carbon-react/lib/style/fonts.css";

import App from "./app";

const taxPlans = [
  { id: "1", value: "1", text: "Percentage" },
  { id: "2", value: "2", text: "Fixed Amount" },
  { id: "3", value: "3", text: "Tiered" },
  { id: "4", value: "4", text: "Age-Based" },
  { id: "5", value: "5", text: "Service-Based" },
  { id: "6", value: "6", text: "Matching" }
];

const pensionDetails = {
  provider: "The People's Pension",
  frequency: "Monthly",
  planName: "People's Plan 1",
  taxPlan: 1,
  employeePlanPercentage: "5.00",
  employerPlanPercentage: "3.00",
  changeAutoEnrolmentDates: false,
  deductAdditionalVoluntaryContribution: false
};

ReactDOM.render(
  <CarbonProvider focusRedesignOptOut theme={ sageTheme }>
    <GlobalStyle />
    <App
      pensionDetails={ pensionDetails }
      taxPlans={ taxPlans }
    />
  </CarbonProvider>,
  document.getElementById("app")
);


.label {
    align-self: stretch;
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.hintText {
    align-self: stretch;
    position: relative;
    line-height: 150%;
    color: rgba(0, 0, 0, 0.55);
    white-space: pre-wrap;
}
.labelSet {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.inputtext {
    flex: 1;
    position: relative;
    line-height: 150%;
    display: inline-block;
    height: 21px;
}
.inputTextContainer {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 12px;
}
.inputContainer {
    align-self: stretch;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.textInput {
    width: 702px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.label1 {
    width: 492px;
    position: relative;
    line-height: 150%;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.9);
    display: inline-block;
}
.hintText1 {
    align-self: stretch;
    position: relative;
    line-height: 150%;
    color: rgba(0, 0, 0, 0.55);
}
.doNotSwapstemtablecellbor {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.headerText {
    flex: 1;
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.content1 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 16px;
    box-sizing: border-box;
}
.assetsheaderCelltable {
    width: 128px;
    position: relative;
    background-color: #f2f5f6;
    height: 40px;
    overflow: hidden;
    flex-shrink: 0;
}
.assetsheaderCelltable1 {
    width: 479px;
    position: relative;
    background-color: #f2f5f6;
    height: 40px;
    overflow: hidden;
    flex-shrink: 0;
}
.assetsheaderCelltable2 {
    width: 95px;
    position: relative;
    height: 40px;
    overflow: hidden;
    flex-shrink: 0;
}
.assetsheaderRowstable {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    color: rgba(0, 0, 0, 0.9);
}
.borderleftIcon {
    position: absolute;
    height: 100%;
    top: 0px;
    bottom: 0px;
    left: 0px;
    max-height: 100%;
    width: 1px;
    object-fit: contain;
}
.borderbottomIcon {
    position: absolute;
    width: 100%;
    right: 0px;
    bottom: 0px;
    left: 0px;
    max-width: 100%;
    overflow: hidden;
    height: 1px;
}
.doNotSwapstemtablecellbor3 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}
.validationBar {
    position: absolute;
    height: 100%;
    top: 0px;
    bottom: 0px;
    left: -10px;
    width: 2px;
}
.barframe {
    align-self: stretch;
    width: 0px;
    position: relative;
}
.doNotSwapbasevalidationbar {
    align-self: stretch;
    width: 0px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.spacer {
    width: 8px;
    height: 8px;
}
.containermain {
    flex: 1;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 0px 8px;
}
.containerfocus {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.textInput1 {
    flex: 1;
    height: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.content4 {
    position: absolute;
    width: 100%;
    top: calc(50% - 16px);
    right: 0px;
    left: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 16px;
    box-sizing: border-box;
}
.assetsbodyCelltable {
    width: 120px;
    position: relative;
    background-color: #fff;
    height: 48px;
}
.content5 {
    position: absolute;
    width: 100%;
    top: calc(50% - 24px);
    right: 0px;
    left: 0px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 16px;
    box-sizing: border-box;
}
.assetsbodyCelltable1 {
    width: 481px;
    position: relative;
    background-color: #fff;
    height: 48px;
}
.iconPlaceholder {
    width: 16px;
    position: relative;
    height: 16px;
}
.label2 {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.majorButton {
    width: 74px;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    gap: 8px;
}
.content6 {
    position: absolute;
    width: 100%;
    top: calc(50% - 20px);
    right: 0px;
    left: 0px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 16px;
    box-sizing: border-box;
}
.assetsbodyCelltable2 {
    width: 101px;
    position: relative;
    background-color: #fff;
    height: 48px;
}
.row {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.tableWithoutInUseColumn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.majorButton2 {
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    gap: 8px;
}
.table {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    color: #007e45;
}
.tickIcon {
    width: 15px;
    position: relative;
    height: 15px;
}
.box {
    width: 20px;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 2px;
}
.focus {
    width: 20px;
    height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.boxwrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.labelwrapper {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 0px 8px;
}
.content {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #f2f5f6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px;
    box-sizing: border-box;
    gap: 24px;
    text-align: left;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.9);
    font-family: 'Sage UI';
}

import { FunctionComponent } from 'react';
import styles from './Content.module.css';

const Content:FunctionComponent = () => {
  	return (

Name *

Enter the name of your analysis type.  For example, region or salary band.

Options

Enter a code and name for each of your options. For example, 001 North and 002 South.

Code

Name

Action

Delete

Delete

Add an option

Enable analysis type

);
};

export default Content;

@import url('https://fonts.googleapis.com/css2?family=Sage+UI:wght@400;500&display=swap');
body {
  	margin: 0; line-height: normal;
}

import React, { useState } from "react";
import PropTypes from "prop-types";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import sageTheme from "carbon-react/lib/style/themes/sage";
import Button from "carbon-react/lib/components/button";
import Box from "carbon-react/lib/components/box";
import { Checkbox } from "carbon-react/lib/components/checkbox";
import Dialog from "carbon-react/lib/components/dialog";
import Form from "carbon-react/lib/components/form";
import Icon from "carbon-react/lib/components/icon";
import IconButton from "carbon-react/lib/components/icon-button";
import Textbox from "carbon-react/lib/components/textbox";
import Typography from "carbon-react/lib/components/typography";
import { GridContainer, GridItem } from "carbon-react/lib/components/grid";
import i18n from "./i18n";

const App = ({ locale = "en" }) => {
  i18n.locale = locale;

  const [ isChecked, setIsChecked ] = useState(true);
  const [ dialogOpen, setDialogOpen ] = useState(true);
  const [ analysisName, setAnalysisName ] = useState("");
  const [ options, setOptions ] = useState([{ code: "", name: "" }, { code: "", name: "" }]);

  const handleCheckboxChange = (event) => {
    setIsChecked(event.target.checked);
  };

  const handleAddOption = () => {
    setOptions([ ...options, { code: "", name: "" } ]);
  };

  const handleRemoveOption = (index) => {
    setOptions(options.filter((_, i) => i !== index));
  };

  const handleOptionChange = (index, field, value) => {
    const updatedOptions = [ ...options ];
    updatedOptions[index][field] = value;
    setOptions(updatedOptions);
  };

  const handleSave = () => {
    alert("Analysis type saved!");
    setDialogOpen(false);
  };

  const handleCancel = () => {
    setDialogOpen(false);
  };

  const handleStubbedAddAnalysisType = () => {
    alert("Add analysis type clicked");
  };

  const codeColumnWidth = "1 / 3";
  const nameColumnWidth = "3 / 12";
  const actionColumnWidth = "12 / 16";

  return (
    <CarbonProvider theme={ sageTheme }>
      <Box style={{ padding: "24px", backgroundColor: "#f2f5f6" }}>
        <Dialog
          open={ dialogOpen }
          title={ i18n.t("content.dialogTitle") }
          onCancel={ handleCancel }
          saveButton={{
            text: i18n.t("content.save"),
            onClick: handleSave,
            buttonType: "primary",
          }}
          leftSideButtons={[
            {
              text: i18n.t("content.cancel"),
              onClick: handleCancel,
              buttonType: "secondary",
            },
          ]}
        >
          <Form>
            <Box>
              <Textbox
                label={ i18n.t("content.name") }
                inputHint={ i18n.t("content.nameHint") }
                aria-label={ i18n.t("content.name") }
                required
                value={ analysisName }
                onChange={(e) => setAnalysisName(e.target.value)}
              />
            </Box>

            <Box mb="24px">
              <Typography variant="h5" style={{ fontWeight: "bold" }}>
                { i18n.t("content.options") }
              </Typography>
              <Typography variant="p" style={{ color: "rgba(0, 0, 0, 0.55)" }}>
                { i18n.t("content.optionsHint") }
              </Typography>

              <GridContainer gap={ 1 } p={ 1 }>
                <GridItem gridColumn={ codeColumnWidth }>
                  <Typography variant="strong">{ i18n.t("content.code") }</Typography>
                </GridItem>
                <GridItem gridColumn={ nameColumnWidth }>
                  <Typography variant="strong">{ i18n.t("content.nameColumn") }</Typography>
                </GridItem>
                <GridItem gridColumn={ actionColumnWidth }>
                  <Typography variant="strong">{ i18n.t("content.action") }</Typography>
                </GridItem>
              </GridContainer>

              { options.map((option, index) => (
                <GridContainer key={ index } p={ 1 }>
                  <GridItem gridColumn={ codeColumnWidth }>
                    <Textbox
                      aria-label={ i18n.t("content.code", { index: index + 1 }) }
                      mr="16px"
                      value={ option.code }
                      onChange={(e) =>
                        handleOptionChange(index, "code", e.target.value)
                      }
                    />
                  </GridItem>

                  <GridItem gridColumn={ nameColumnWidth }>
                    <Textbox
                      aria-label={ i18n.t("content.nameColumn", { index: index + 1 }) }
                      mr="16px"
                      value={ option.name }
                      onChange={(e) =>
                        handleOptionChange(index, "name", e.target.value)
                      }
                    />
                  </GridItem>

                  <GridItem gridColumn={ actionColumnWidth }>
                    <IconButton aria-label={ i18n.t("content.delete") } onClick={() => handleRemoveOption(index)}>
                      <Box display="flex" flexDirection="row" mt="8px">
                        <Icon type="delete" color="green" />
                        <Typography variant="ol" color="green" ml="8px" mr="8px">
                          { i18n.t("content.delete") }
                        </Typography>
                      </Box>
                    </IconButton>
                  </GridItem>
                </GridContainer>
              ))}

              <Button buttonType="darkBackground" size="small" onClick={ handleAddOption }>
                <Icon type="add" />
                { i18n.t("content.addOption") }
              </Button>
            </Box>

            <Box>
              <Checkbox checked={ isChecked } onChange={ handleCheckboxChange }
                label={ i18n.t("content.enableAnalysisType") }
              />
            </Box>
          </Form>

          <Box mt="32px" display="flex" justifyContent="flex-end" gap="16px">
            <Button buttonType="secondary" onClick={ handleCancel }>
              { i18n.t("content.cancel") }
            </Button>
            <Button buttonType="primary" onClick={ handleStubbedAddAnalysisType }>
              { i18n.t("content.addAnalysisType") }
            </Button>
          </Box>
        </Dialog>
      </Box>
    </CarbonProvider>
  );
};

App.propTypes = {
  locale: PropTypes.string,
};

export default App;

import i18n from "i18n-js";
i18n.translations = {
  en: {
    content: {
      dialog: "Open Analysis Dialog",
      dialogTitle: "Add analysis type",
      save: "Save",
      cancel: "Cancel",
      name: "Name",
      nameHint: "Enter the name of your analysis type. For example, region or salary band.",
      options: "Options",
      optionsHint: "Enter a code and name for each of your options. For example, 001 North and 002 South.",
      code: "Code",
      nameColumn: "Name",
      action: "Action",
      delete: "Delete",
      addOption: "Add an option",
      save: "Save",
      cancel: "Cancel",
      enableAnalysisType: "Enable analysis type",
      addAnalysisType: "Add analysis type",
    },
  },
};
i18n.locale = "en";
i18n.fallbacks = true;

export default i18n;

import React from "react";
import ReactDOM from "react-dom";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import sageTheme from "carbon-react/lib/style/themes/sage";
import GlobalStyle from "carbon-react/lib/style/global-style";
import "carbon-react/lib/style/fonts.css";

import App from "./app";

const textToDisplay = "Button Clicked!";

ReactDOM.render(
  <CarbonProvider theme={ sageTheme }>
    <GlobalStyle />
    <App text={ textToDisplay }/>
  </CarbonProvider>,
  document.getElementById("app")
);