.dialogTitle {
    flex: 1;
    position: relative;
    line-height: 125%;
}
.icontitlewrap {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.closeIcon {
    width: 16px;
    position: relative;
    height: 16px;
}
.header {
    align-self: stretch;
    background-color: #f2f5f6;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px 32px 20px;
    gap: 56px;
    font-size: 24px;
}
.dividerIcon {
    align-self: stretch;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    height: 1px;
    flex-shrink: 0;
}
.label {
    width: 388px;
    position: relative;
    line-height: 125%;
    font-weight: 500;
    display: inline-block;
}
.label1 {
    width: 388px;
    position: relative;
    font-size: 14px;
    line-height: 150%;
    display: inline-block;
}
.labelParent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    font-size: 20px;
}
.labelSet {
    width: 118px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.focusBorderrectangle {
    width: calc(100% + 6px);
    position: absolute;
    margin: 0 !important;
    height: calc(100% + 6px);
    top: -3px;
    right: -3px;
    bottom: -3px;
    left: -3px;
    border: 3px solid #ffb500;
    box-sizing: border-box;
    display: none;
    z-index: 0;
}
.inputtext {
    flex: 1;
    position: relative;
    line-height: 150%;
    display: inline-block;
    height: 21px;
}
.placeholder {
    width: 20px;
    position: relative;
    height: 20px;
    display: none;
}
.inputTextContainer {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 8px;
    gap: 8px;
    z-index: 1;
}
.actionButton {
    width: 24px;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    height: 24px;
    display: none;
    z-index: 2;
}
.inputContainer {
    align-self: stretch;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}
.wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.textInput {
    width: 202px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}
.label3 {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.labelSet1 {
    width: 114px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.checkboxs {
    width: 16px;
    position: relative;
    height: 16px;
    overflow: hidden;
    flex-shrink: 0;
    display: none;
    z-index: 0;
}
.focusBorder {
    width: calc(100% + 6px);
    position: absolute;
    margin: 0 !important;
    height: calc(100% + 6px);
    top: 13px;
    right: -3px;
    bottom: -19px;
    left: -3px;
    border: 3px solid #ffb500;
    box-sizing: border-box;
    display: none;
    z-index: 1;
}
.box {
    width: 16px;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 2px;
    position: relative;
    gap: 10px;
}
.checkboxSingle {
    width: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.caretDownIcon {
    width: 20px;
    position: relative;
    height: 20px;
}
.assetsdropdownMenuxs {
    width: 280px;
    box-shadow: 0px 10px 10px rgba(0, 20, 30, 0.1), 0px 5px 5px rgba(0, 20, 30, 0.2);
    background-color: #fff;
    height: 300px;
    display: none;
}
.wrapper1 {
    width: 214px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}
.dropdownSelect {
    width: 383px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}
.whiteBox {
    background-color: #fff;
    border: 1px solid #ced6da;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px;
    gap: 16px;
}
.label7 {
    width: 388px;
    position: relative;
    font-size: 14px;
    line-height: 150%;
    display: none;
}
.labelGroup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.iconAlertnegative {
    align-self: stretch;
    width: 32px;
    background-color: #cb374a;
    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%;
    font-weight: 500;
}
.messageWithNo {
    align-self: stretch;
    position: relative;
    line-height: 150%;
}
.contentArea {
    flex: 1;
    background-color: #fff;
    border: 1px solid #cb374a;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px 16px 16px 24px;
}
.message {
    width: 388px;
    border: 1px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 14px;
}
.whiteBox1 {
    background-color: #fff;
    border: 1px solid #ced6da;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px;
    gap: 16px;
    font-size: 20px;
}
.content {
    width: 480px;
    background-color: #f2f5f6;
    height: 476px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 32px;
    box-sizing: border-box;
    gap: 16px;
}
.majorButton {
    width: 92px;
    background-color: rgba(0, 0, 0, 0);
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    height: 40px;
    display: none;
}
.majorButton1 {
    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;
}
.footer {
    align-self: stretch;
    background-color: #f2f5f6;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 16px 32px;
    gap: 16px;
    color: #fff;
}
.dialog {
    width: 100%;
    position: relative;
    box-shadow: 0px 30px 60px rgba(0, 20, 30, 0.1), 0px 10px 30px rgba(0, 20, 30, 0.1);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.9);
    font-family: 'Sage UI';
}

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

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

          					Edit employee details

Tax and national insurance details

As of 9th December 2022 (Week 36)

Tax code

1275L

Week 1 / Month 1

NI category

A (Over 21 Standard Rate)

On Trade Dispute

Analysis types

As of 9th December 2022 (Week 36)

{`Analysis types are unavailable. `}

Try again later.

Save

);
};

export default Dialog;

@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, useRef } 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 Dialog from 'carbon-react/lib/components/dialog';
import Button from 'carbon-react/lib/components/button';
import Box from 'carbon-react/lib/components/box';
import Typography from 'carbon-react/lib/components/typography';
import Form from "carbon-react/lib/components/form";
import { Checkbox } from "carbon-react/lib/components/checkbox";
import Textbox from 'carbon-react/lib/components/textbox';
import Message from 'carbon-react/lib/components/message';
import { Select, Option } from "carbon-react/lib/components/select";
import './i18n';
import I18n from 'i18n-js';

const App = ({ locale = 'en', niCategories, fieldValues }) => {
  I18n.locale = locale;

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

  const handleCloseButtonClick = () => {
    alert('Close button clicked');
  };

  const niCategoriesRef = useRef(niCategories);
  const [isCheckedTime, setIsCheckedTime] = useState(fieldValues.weekOneMonthOne);
  const [isCheckedDispute, setIsCheckedDispute] = useState(fieldValues.onTradeDispute);
  const [selectedNiCategory, setSelectedNiCategory] = useState(fieldValues.niCategory);

  const onChangeHandler = (event) => {
    const selectedValue = event.target.value;
    setSelectedNiCategory(selectedValue);
  };

  return (
    <CarbonProvider
      theme={ sageTheme }
      validationRedesignOptIn
    >
      <Dialog
        open={ true }
        onCancel={ handleCloseButtonClick }
        size="medium-small"
        title={ I18n.t('editEmployeeDetails') }
      >
        <Form saveButton={
          <Button
            buttonType="primary"
            type="submit"
            onClick={ handlesaveClick }
          >
            { I18n.t('save') }
          </Button>
        }>
          <Box>
            <div
              style={{
                border: '1px solid #bdd9e7',
                borderRadius: "borderRadius000"
              }}
            >
              <Box
                p='15px'
              >
                <Typography variant="h2" mb={ 1 }>
                  { I18n.t('taxAndNationalInsuranceDetails') }
                </Typography>
                <Typography variant="h5" mb={ 2 }>
                  { `${ I18n.t('asOfDate', { date: fieldValues.date, weekNumber: fieldValues.weekNumber }) }`}
                </Typography>
                <Box
                  display="flex"
                  flexDirection="row"
                  alignItems="center"
                  height="40px"
                >
                  <Typography variant="b">
                    { I18n.t('taxCode') }
                  </Typography>
                  <Box
                    display="flex"
                    flexDirection="row"
                    alignItems="center"
                    marginLeft={ 9 }
                  >
                    <Box width={ 130 } marginTop={ 2 }>
                      <Textbox size="small" defaultValue={ fieldValues.taxCode } />
                    </Box>
                  </Box>
                </Box>
                <Box
                  display="flex"
                  flexDirection="row"
                  alignItems="center"
                  height="40px"
                >
                  <Typography variant="b">
                    { `${ I18n.t('weekMonth') }` }
                  </Typography>
                  <Checkbox
                    marginLeft="20px"
                    marginTop="22px"
                    checked={ isCheckedTime }
                    onChange={ e => setIsCheckedTime(e.target.checked) }
                  />
                </Box>
                <Box
                  display="flex"
                  flexDirection="row"
                  alignItems="center"
                  height="40px"
                  marginBottom={ 1 }
                >
                  <Typography variant="b">
                    { I18n.t('niCategory') }
                  </Typography>
                  <Box
                    display="flex"
                    flexDirection="row"
                    alignItems="center"
                  >
                    <Box
                      width={ 300 }
                      marginLeft="54px"
                      marginTop={ 3 }
                    >
                      <Select
                        size="small"
                        id="with-object"
                        name="with-object"
                        data-role='select-ni-category'
                        value={ String(selectedNiCategory) }
                        onChange={ onChangeHandler }
                        labelInline
                      >
                        { niCategoriesRef.current.map((category) => (
                          <Option
                            key={ category.id }
                            text={ category.text }
                            value={ String(category.value) }
                          />
                        )) }
                      </Select>
                    </Box>
                  </Box>
                </Box>
                <Box
                  display="flex"
                  flexDirection="row"
                  alignItems="center"
                  height="40px"
                >
                  <Typography variant="b">
                    { I18n.t('onTradeDispute') }
                  </Typography>
                  <Checkbox
                    marginLeft="18px"
                    marginTop={ 3 }
                    checked={ isCheckedDispute }
                    onChange={ e => setIsCheckedDispute(e.target.checked) }
                  />
                </Box>
              </Box>
            </div>
            <Box m={ 2 } />
            <div
              style={{
                border: '1px solid #bdd9e7',
                borderRadius: "borderRadius000"
              }}
            >
              <Box
                p='15px'
                marginTop='6px'
                marginBottom='3px'
              >
                <Typography variant="h2">
                  { I18n.t('analysisTypes') }
                </Typography>
                <Message variant="error" marginTop={ 2 }>
                  <Box>
                    <Typography variant="b">
                      { I18n.t('analysisTypesUnavailable') }
                    </Typography>
                    <Typography variant="p" marginTop="5px">
                      { I18n.t('tryAgainLater') }
                    </Typography>
                  </Box>
                </Message>
              </Box>
            </div>
          </Box>
        </Form>
      </Dialog>
    </CarbonProvider>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  niCategories: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      value: PropTypes.number.isRequired,
      text: PropTypes.string.isRequired,
    })
  ).isRequired,
  fieldValues: PropTypes.shape({
    taxCode: PropTypes.string.isRequired,
    weekOneMonthOne: PropTypes.bool.isRequired,
    niCategory: PropTypes.number.isRequired,
    onTradeDispute: PropTypes.bool.isRequired,
    date: PropTypes.string.isRequired,
    weekNumber: PropTypes.string.isRequired,
  }).isRequired,
};

export default App;

import I18n from 'i18n-js';

I18n.translations = {
  en: {
    editEmployeeDetails: "Edit employee details",
    taxAndNationalInsuranceDetails: "Tax and national insurance details",
    taxCode: "Tax code",
    niCategory: "NI category",
    onTradeDispute: "On Trade Dispute",
    analysisTypes: "Analysis types",
    analysisTypesUnavailable: "Analysis types are unavailable.",
    tryAgainLater: "Try again later.",
    save: "Save",
    asOfDate: "As of %{date} (Week %{weekNumber})",
    weekMonth: "Week 1 / Month 1"
  },
};

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 niCategories = [
  { id: "A", value: 1, text: "A (Over 21 Standard Rate)" },
  { id: "B", value: 2, text: "B (Married Women and Widows Reduced Rate)" },
  { id: "C", value: 3, text: "C (Employees over state pension age)" },
  { id: "H", value: 4, text: "H (Apprentice under 25)" },
  { id: "J", value: 5, text: "J (Deferment)" },
  { id: "M", value: 6, text: "M (Employees under 21)" },
  { id: "Z", value: 7, text: "Z (Employees under 21 - deferment)" },
  { id: "X", value: 8, text: "X (Employees who do not pay NI)" }
];

const fieldValues = {
  taxCode: "1257L",
  weekOneMonthOne: false,
  niCategory: 1,
  onTradeDispute: false,
  date: "9th December 2022",
  weekNumber: "36"
};

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


.sendInvite {
    position: absolute;
    top: 325px;
    left: 780px;
    font-family: Lato;
}
.globalBarBackground {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    background-color: #000;
}
.iconPerson {
    width: 14px;
    position: relative;
    height: 14px;
}
.iconCaretDown {
    width: 7.1px;
    position: relative;
    border-radius: 1px;
    height: 4.5px;
}
.iconPersonParent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0px 16px 0px 0px;
    gap: 7px;
}
.cannyCakes {
    position: relative;
    font-weight: 500;
}
.companyName {
    height: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px 16px;
    box-sizing: border-box;
}
.rightControls {
    position: absolute;
    height: 100%;
    top: 0%;
    right: 40px;
    bottom: 0%;
    width: 450px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
.rectangle {
    position: absolute;
    top: calc(50% - 12px);
    left: 96px;
    background-color: #333;
    width: 1px;
    height: 24px;
}
.accounting {
    position: relative;
    line-height: 21px;
    font-weight: 500;
}
.triangleIcon {
    width: 8px;
    position: relative;
    height: 5px;
}
.carat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 4px 0px 0px;
}
.productSwitcher {
    position: absolute;
    top: calc(50% - 12px);
    left: 113px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    text-align: left;
}
.vectorIcon {
    position: absolute;
    top: calc(50% - 12px);
    left: 40px;
    width: 40px;
    height: 24px;
}
.header1 {
    align-self: stretch;
    position: relative;
    height: 40px;
}
.navChildItems {
    background-color: #fff;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 16px;
    box-sizing: border-box;
}
.boundingBox {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    background-color: #c7384f;
    opacity: 0;
}
.caretDownIcon {
    position: absolute;
    height: 31.67%;
    width: 50%;
    top: 37.5%;
    right: 25%;
    bottom: 30.83%;
    left: 25%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.caretDown {
    width: 12px;
    position: relative;
    height: 12px;
}
.carat1 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2px 0px 0px;
}
.navChildItems5 {
    background-color: #fff;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 16px;
    box-sizing: border-box;
    gap: 4px;
}
.navChildItems6 {
    background-color: #f2f5f6;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 16px;
    box-sizing: border-box;
}
.navigation {
    align-self: stretch;
    box-shadow: 0px 1px 0px #d9e0e4;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 40px;
    text-align: left;
    color: rgba(0, 0, 0, 0.9);
}
.header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1600px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: right;
}
.employees {
    position: relative;
    line-height: 28px;
}
.iconQuestionCircle {
    width: 20px;
    position: relative;
    height: 20px;
}
.employeesParent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}
.createAndManage {
    width: 682px;
    position: relative;
    font-size: 14px;
    line-height: 150%;
    display: inline-block;
}
.titleAndSubtitle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.plusIcon {
    width: 16px;
    position: relative;
    height: 16px;
}
.label {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.majorButton {
    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;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
}
.title {
    width: 1518px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.employees1 {
    position: relative;
    line-height: 125%;
    font-weight: 500;
}
.employeesWrapper {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.tileHeader {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.majorButton1 {
    border: 2px solid #007e45;
    box-sizing: border-box;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
}
.ctas {
    width: 150px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    font-size: 14px;
    color: #007e45;
}
.tileHeaderParent {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}
.appearsInAccounting {
    margin: 0;
    font-weight: 500;
}
.sales {
    white-space: pre-wrap;
}
.purchasesInvoicesAndCred {
    margin-bottom: 0px;
}
.bankPaymentsAndReceipts {
    margin-bottom: 0px;
    white-space: pre-wrap;
}
.salesInvoicesAndCredit {
    margin: 0;
    font-size: inherit;
    padding-left: 19px;
}
.blankLine {
    margin: 0;
}
.header3 {
    flex: 1;
    position: relative;
    line-height: 150%;
}
.headerWrapper {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
}
.analysisTile {
    flex: 1;
    border-radius: 16px;
    background-color: #fff;
    border: 1px solid #ccd6db;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px;
    gap: 16px;
}
.analysisTile1 {
    flex: 1;
    border-radius: 16px;
    background-color: #fff;
    border: 1px solid #ccd6db;
    box-sizing: border-box;
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px;
    gap: 16px;
}
.analysisTileParent {
    align-self: stretch;
    height: 250px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    font-size: 18px;
}
.employeesContainer {
    height: 31px;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0px;
    box-sizing: border-box;
}
.analysisTileGroup {
    align-self: stretch;
    height: 217px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    font-size: 18px;
}
.frameParent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px 0px 0px;
    gap: 16px;
    font-size: 22px;
}
.body {
    position: absolute;
    width: calc(100% - 2px);
    top: 120px;
    right: 2px;
    left: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 40px;
    box-sizing: border-box;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.9);
}
.analysisIndex1600pxReacheChild {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 20, 30, 0.6);
    width: 1600px;
    height: 996px;
    display: none;
}
.dialogTitle {
    flex: 1;
    position: relative;
    line-height: 125%;
}
.icontitlewrap {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.header14 {
    align-self: stretch;
    background-color: #f2f5f6;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px 32px 20px;
    gap: 56px;
    font-size: 24px;
}
.dividerIcon {
    align-self: stretch;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    height: 1px;
    flex-shrink: 0;
}
.thereIsA {
    font-weight: 500;
    font-family: 'Sage UI';
}
.toAddA {
    margin: 0;
    white-space: pre-wrap;
}
.label7 {
    width: 388px;
    position: relative;
    line-height: 150%;
    display: inline-block;
}
.content {
    background-color: #f2f5f6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 32px;
}
.label8 {
    position: relative;
    line-height: 150%;
}
.majorButton7 {
    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;
}
.footer {
    align-self: stretch;
    box-shadow: 0px -4px 12px rgba(0, 20, 30, 0.05);
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 16px 32px;
    color: #fff;
}
.dialog {
    position: absolute;
    top: 319px;
    left: 574px;
    box-shadow: 0px 30px 60px rgba(0, 20, 30, 0.1), 0px 10px 30px rgba(0, 20, 30, 0.1);
    background-color: #fff;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: rgba(0, 0, 0, 0.9);
}
.analysisIndex1600pxReache {
    width: 100%;
    position: relative;
    background-color: #f2f5f6;
    height: 984px;
    overflow: hidden;
    text-align: left;
    font-size: 14px;
    color: #fff;
    font-family: 'Sage UI';
}

import { FunctionComponent, useCallback } from 'react';
import styles from './AnalysisIndex1600pxReache.module.css';

const AnalysisIndex1600pxReache:FunctionComponent = () => {

  	const onMajorButtonContainerClick = useCallback(() => {
    		// Add your code here
  	}, []);

  	return (

      			Send invite

Canny Cakes

Help

Payroll

Summary

Pay Runs

Employees

Pensions

Year End

Reporting

Settings

              							Analysis Types

Create unique fields to unlock powerful employee reports and filters.

Add analysis type

{`Accounting and Payroll `}

Department

Edit

Appears in Accounting:

                      											Sales -   invoices and credit notes

                      											Purchases -  invoices and credit notes

                      											Bank payments and receipts

                      											Journals

Appears in Payroll

                      											Employees

Cost Centre

Edit

Appears in Accounting:

                      											Sales

                      											Purchases - invoices and credit notes

                      											Bank - payment and receipts

                      											Journals

Project

Edit

Appears in Accounting:

                      											Sales

                      											Purchases

Payroll only

Region

Edit

{`Appears in: `}

                      											{`Employees `}

Company Car

Edit

{`Appears in: `}

                      											{`Employees `}

Status

Edit

{`Appears in: `}

                      											{`Employees `}

            						Maximum number of analysis types reached

              							There is a limit of 3 Payroll only analysis types.
              							{`  `}

To add a new one, you would need to delete an existing analysis type. This would remove that analysis type from your employee records.  You would no longer be able to report or filter by it.

            						Close

);
};

export default AnalysisIndex1600pxReache;

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');
@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 GlobalHeader from "carbon-react/lib/components/global-header";
import Box from 'carbon-react/lib/components/box';
import Button from 'carbon-react/lib/components/button';
import sageTheme from "carbon-react/lib/style/themes/sage";
import Image from "carbon-react/lib/components/image";
import Icon from 'carbon-react/lib/components/icon';
import Typography, { List, ListItem } from "carbon-react/lib/components/typography";
import CarbonProvider from 'carbon-react/lib/components/carbon-provider';
import Pod from "carbon-react/lib/components/pod";
import { Menu, MenuItem } from "carbon-react/lib/components/menu";
import NavigationBar from "carbon-react/lib/components/navigation-bar";
import VerticalDivider from "carbon-react/lib/components/vertical-divider";
import { i18n } from './i18n';
import logo from "./Logo.png";

const App = ({ locale = 'en', analysisTypeData }) => {
  const t = i18n[locale];
  const [analysisTypes, setAnalysisTypes] = useState(analysisTypeData);

  const handleHomeClick = () => {
    alert('Home button clicked');
  };

  const handleCompanyClick = () => {
    alert('Company button clicked');
  };

  const handleHelpClick = () => {
    alert('Help button clicked');
  };

  const handleSummaryClick = () => {
    alert('Summary button clicked');
  };

  const handlePayRunClick = () => {
    alert('Pay Run button clicked');
  };

  const handleEmployeeClick = () => {
    alert('Employee button clicked');
  };

  const handlePensionClick = () => {
    alert('Pension button clicked');
  };

  const handleYearEndClick = () => {
    alert('Year End button clicked');
  };

  const handleSettingsClick = () => {
    alert('Settings button clicked');
  };

  const handleChildClick = () => {
    alert('Child button clicked');
  };

  const handleAddAnalysisTypeClick = () => {
    setAnalysisTypes([...analysisTypes, { title: `${ t.newAnalysisType } ${ analysisTypes.length + 1 }`, appearsIn: [`<${ t.dummy }>`] }]);
    alert('Add analysis type button clicked. New Analysis Type Pod added at the end.');
  };

  const handleEditClick = () => {
    alert('Edit button clicked');
  };

  const Logo = () => (
    <Image
      onClick ={ handleHomeClick }
      alt = "Logo"
      src = { logo }
      maxHeight = { 30 }
      marginLeft = { 1 }
    />
  );

  return (
    <CarbonProvider theme = { sageTheme } validationRedesignOptIn>
      <GlobalHeader
        logo ={ <Logo />}
        aria-label ="Global header"
        pl = '2px'
      >
        <VerticalDivider height={10} p={1} tint={40}/>
        <Menu menuType = "black" flex = "1">
          <MenuItem
            flex = "1"
            submenu = { t.payroll }
            aria-label = { t.payrollLabel }
            data-role = "menu-item-payroll"
          >
            <MenuItem
              aria-label = { t.dummyLabel }
              data-role = "menu-item-payroll-child"
              onClick = { handleChildClick }>
              { t.dummy }
            </MenuItem>
          </MenuItem>
          <Box
            display = "flex"
            flexDirection = "row"
            alignItems = "center"
            marginRight = { 3 }
          >
            <MenuItem
              flex = "0 0 auto"
              submenu = " "
              icon = "person"
              aria-label = { t.profileLabel }
              data-role = "menu-item-profile"
            >
              <MenuItem
                href = "#"
                aria-label = { t.dummyLabel }
                data-role = "menu-item-profile-child"
                onClick = { handleChildClick }
              >
                { t.dummy }
              </MenuItem>
            </MenuItem>
            <MenuItem
              href = "#"
              aria-label = { t.cannyCakesLabel }
              data-role = "menu-item-company-name"
              onClick = { handleCompanyClick }
            >
              { t.cannyCakes }
            </MenuItem>
            <MenuItem
              href = "#"
              aria-label = { t.helpLabel }
              data-role = "menu-item-help"
              onClick = { handleHelpClick }
            >
              { t.help }
            </MenuItem>
          </Box>
        </Menu>
      </GlobalHeader>
      <NavigationBar
        position = "fixed"
        orientation = "top"
        offset = "40px"
        aria-label = "Local nav bar"
        navigationType = "white"
        textColor = "black"
        textHoverColor = "white"
      >
        <Menu flex="1" menuType="white">
          <MenuItem
          href = "#"
          aria-label = { t.summaryLabel }
          data-role = "menu-item-summary"
          onClick = { handleSummaryClick }
          >
            { t.summary }
          </MenuItem>
          <MenuItem
            href = "#"
            aria-label = { t.payRunsLabel }
            data-role = "menu-item-pay-runs"
            onClick = { handlePayRunClick }
          >
            { t.payRuns }
          </MenuItem>
          <MenuItem
            href = "#"
            aria-label = { t.employeesLabel }
            data-role = "menu-item-employees"
            onClick = { handleEmployeeClick }
          >
            { t.employees }
          </MenuItem>
          <MenuItem
            href = "#"
            aria-label = { t.pensionsLabel }
            data-role = "menu-item-pensions"
            onClick = { handlePensionClick }
          >
            { t.pensions }
          </MenuItem>
          <MenuItem
            href = "#"
            aria-label = { t.yearEndLabel }
            data-role = "menu-item-year-end"
            onClick = { handleYearEndClick }
          >
            { t.yearEnd }
          </MenuItem>
          <MenuItem
            href = "#"
            submenu = { t.reportingLabel }
            data-role = "menu-item-reporting"
          >
            <MenuItem
              href = "#"
              aria-label = { t.dummyLabel }
              data-role = "menu-item-reporting-child"
              onClick = { handleChildClick }
            >
              { t.dummy }
            </MenuItem>
          </MenuItem>
          <MenuItem
            href = "#"
            aria-label = { t.settingsLabel }
            data-role = "menu-item-settings"
            onClick = { handleSettingsClick }
            selected
          >
            { t.settings }
          </MenuItem>
        </Menu>
      </NavigationBar>
      <Box marginTop = '15px' marginLeft = '15px'>
        <Box>
          <Box
            display = "flex"
            flexDirection = "row"
            alignItems = "center"
          >
            <Box>
              <Box
                marginTop = { 80 }
                marginLeft = { 25 }
                display = "flex"
                flexDirection = "row"
                alignItems = "center"
              >
                <Typography variant = "h1">
                  { t.analysisTypes }
                </Typography>
                <Icon
                  type = "help"
                  size = "small"
                  ml = { 1 }
                  disabled
                />
              </Box>
              <Typography
                variant = "p"
                marginTop = { 1 }
                marginLeft={ 25 }
              >
                { t.createAndManage }
              </Typography>
            </Box>
            <Box
              flex = "1"
              justifyContent = "flex-end"
              display = "flex"
              marginRight = { 60 }
            >
              <Button
                ml = { 2 }
                mt = { 7 }
                buttonType = "primary"
                iconType = "add"
                aria-label = { t.addAnalysisTypeLabel }
                data-role = "button-add-analysis-type"
                onClick = { handleAddAnalysisTypeClick }
              >
                { t.addAnalysisType }
              </Button>
            </Box>
          </Box>
          {Array.from({ length: Math.ceil(analysisTypes.length / 3) }).map((_, rowIndex) =>
            (
              <Box
                key = { rowIndex }
                display = "flex"
                flexDirection = "row"
                alignItems = "center"
                flexWrap = "wrap"
                marginTop = { rowIndex > 0 ? "-20px" : "0" }
              >
                {analysisTypes.slice(rowIndex * 3, rowIndex * 3 + 3).map((analysisType, analysisTypeIndex) => {
                  const actualIndex = rowIndex * 3 + analysisTypeIndex
                  return (
                    <Box
                      size = "medium"
                      key={analysisTypeIndex}
                      margin = { `0 0 35px ${ analysisTypeIndex === 0 ? '25px' : '30px' }` }
                    >
                      <Pod
                        key = { analysisTypeIndex }
                        title = { analysisType.title }
                        size = "medium"
                        internalEditButton onClick = { handleEditClick }
                        height = { 300 }
                        editContentFullWidth = { true }
                      >
                        <Box width = "400px">
                          <Typography variant = "strong">
                            { actualIndex < 3 ? 'Appears in Accounting:' : 'Appears in:' }
                          </Typography>
                          <Box marginTop = "2px">
                            <Typography>
                              <List listStyleType = 'disc'>
                                { analysisType.appearsInAccounting?.map((item, idx) => (
                                  <ListItem key = { idx } marginBottom = '4px'>
                                    { item }
                                  </ListItem>
                                )) }
                              </List>
                            </Typography>
                          </Box>
                          { analysisType.appearsInPayroll && (
                            <>
                              <Typography variant = "strong">
                                { t.appearsInPayroll }
                              </Typography>
                              <Box marginTop = "5px">
                                <Typography>
                                  <List listStyleType = 'disc'>
                                    { analysisType.appearsInPayroll.map((item, idx) => (
                                      <ListItem key = { idx } marginBottom = '4px'>
                                        { item }
                                      </ListItem>
                                    )) }
                                  </List>
                                </Typography>
                              </Box>
                            </>
                          )}
                          { analysisType.appearsIn && (
                            <Box marginTop = "-10px">
                              <Typography>
                                <List listStyleType='disc'>
                                  { analysisType.appearsIn.map((item, idx) => (
                                    <ListItem key={ idx } marginBottom = '4px'>
                                      { item }
                                    </ListItem>
                                  )) }
                                </List>
                              </Typography>
                            </Box>
                          ) }
                          <Box
                            position = "absolute"
                            right = "14px"
                            top = "12px"
                          >
                            <Button
                              size = "small"
                              aria-label = { `${ analysisType.title } ${ t.editButton }` }
                              data-role = { `edit-${ analysisType.title.toLowerCase().replace(/\s+/g, '-')  }` }
                            >
                              { t.edit }
                            </Button>
                          </Box>
                        </Box>
                      </Pod>
                    </Box>
                  );
                }) }
              </Box>
            )) }
        </Box>
      </Box>
    </CarbonProvider>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  analysisTypeData: PropTypes.arrayOf(
    PropTypes.shape({
      title: PropTypes.string.isRequired,
      appearsInAccounting: PropTypes.arrayOf(PropTypes.string),
      appearsInPayroll: PropTypes.arrayOf(PropTypes.string),
      appearsIn: PropTypes.arrayOf(PropTypes.string)
    })
  ).isRequired
};

export default App;

export const i18n = {
  en: {
    cannyCakes: "Canny Cakes",
    cannyCakesLabel: "Canny Cakes Menu Item",
    help: "Help",
    helpLabel: "Help Menu Item",
    payroll: "Payroll",
    payrollLabel: "Payroll Menu Item",
    summary: "Summary",
    summaryLabel: "Summary Menu Item",
    payRuns: "Pay Runs",
    payRunsLabel: "Pay Runs Menu Item",
    employees: "Employees",
    employeesLabel: "Employees Menu Item",
    pensions: "Pensions",
    pensionsLabel: "Pensions Menu Item",
    yearEnd: "Year End",
    yearEndLabel: "Year End Menu Item",
    reporting: "Reporting",
    reportingLabel: "Reporting Menu Item",
    settings: "Settings",
    settingsLabel: "Settings Menu Item",
    profile: "Profile",
    profileLabel: "Profile Menu Item",
    analysisTypes: "Analysis Types",
    createAndManage: "Create unique fields to unlock powerful employee reports and filters.",
    addAnalysisType: "Add analysis type",
    addAnalysisTypeLabel: "Add analysis type Button",
    edit: "Edit",
    editButton: "Edit Button",
    appearsInPayroll: "Appears in Payroll:",
    appearsIn: "Appears in:",
    newAnalysisType: 'New Analysis Type',
    dummy: "Dummy",
    dummyLabel: "Dummy Menu Item Child"
  }
};

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 analysisTypeData = [
  {
    title: 'Department',
    appearsInAccounting: ['Sales - invoices and credit notes', 'Purchases - invoices and credit notes', 'Bank Payments and receipts', 'Journals'],
    appearsInPayroll: ['Employees']
  },
  {
    title: 'Cost Centre',
    appearsInAccounting: ['Sales', 'Purchases - invoices and credit notes', 'Bank - payments and receipts', 'Journals']
  },
  {
    title: 'Project',
    appearsInAccounting: ['Sales', 'Purchases']
  },
  {
    title: 'Region',
    appearsIn: ['Employees']
  },
  {
    title: 'Company Car',
    appearsIn: ['Employees']
  },
  {
    title: 'Status',
    appearsIn: ['Employees']
  }
];

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


.logoX2c169Icon {
    width: 120px;
    position: relative;
    height: 67.5px;
}
.header {
    align-self: stretch;
    box-shadow: 1px 0px 0px #ccd6db inset, 0px 1px 0px #ccd6db inset, -1px 0px 0px #ccd5db inset;
    border-radius: 4px 4px 0px 0px;
    background-color: #000;
    height: 126px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 32px 10px;
    box-sizing: border-box;
}
.titleOptional {
    width: 564px;
    position: relative;
    line-height: 40px;
    font-weight: 500;
    display: inline-block;
}
.header1 {
    width: 584px;
    box-shadow: 1px 0px 0px #ccd6db inset, 0px 1px 0px #ccd6db inset, -1px 0px 0px #ccd5db inset;
    background-color: #fff;
    height: 104px;
    overflow: hidden;
    flex-shrink: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 32px 10px 64px;
    box-sizing: border-box;
    text-align: center;
    font-size: 32px;
}
.hiJoe {
    margin: 0;
    font-size: 18px;
    line-height: 23px;
}
.blankLine {
    margin: 0;
}
.weNeedSome {
    line-height: 21px;
}
.sex {
    margin-bottom: 0px;
}
.sexRaceOccupationalLevelCi {
    margin: 0;
    font-family: inherit;
    padding-left: 19px;
}
.comments1 {
    line-height: 23px;
}
.hiSebastianWeRequestContainer {
    align-self: stretch;
    position: relative;
}
.label {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.majorButton {
    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;
}
.body {
    align-self: stretch;
    box-shadow: 1px 0px 0px #ccd6db inset, -1px 0px 0px #ccd6db inset, 0px -1px 0px #ccd6db inset;
    border-radius: 0px 0px 4px 4px;
    background-color: #f2f5f6;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 32px;
    gap: 24px;
    color: rgba(0, 0, 0, 0.9);
}
.sentBy {
    position: absolute;
    top: 0px;
    left: 0px;
    line-height: 21px;
}
.vectorIcon {
    position: absolute;
    height: 95.24%;
    width: 41.86%;
    top: 16.67%;
    right: -1.16%;
    bottom: -11.9%;
    left: 59.3%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.sentByParent {
    width: 86px;
    position: relative;
    height: 21px;
}
.helpCentre {
    text-decoration: underline;
    color: #007e45;
}
.pleaseDoNotContainer {
    width: 398px;
    position: relative;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    display: inline-block;
}
.footer {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 24px;
    gap: 16px;
    color: rgba(0, 0, 0, 0.65);
}
.emailTemplate {
    position: absolute;
    top: 130px;
    left: 158px;
    border-radius: 4px;
    width: 584px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.desktopLightSubjectEeoR {
    width: 100%;
    position: relative;
    background-color: #fff;
    height: 1100px;
    overflow: hidden;
    text-align: left;
    font-size: 14px;
    color: #000;
    font-family: 'Sage UI';
}

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

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

[Title - optional]

Hi Joe,

                								We need some information about employees for our EEA2 equity report.

                								Please make sure all relevant employees have the following information in their profile:

                  									sex

                  									race

                  									occupational level

                  									citizenship status

                								{`You can edit this information in Settings > Employee data or in an employee’s profile. Employees can update sex and race fields themselves.`}

                								Comments:

                								[message_typed_by_users]

                								If you have any questions, please contact your HR manager.

Log into Sage HR

Sent by

            						{`Please do not reply as this email address it not monitored. If you need help, please visit our `}
            						{`Help Centre. `}

);
};

export default DesktopLightSubjectEEOR;

@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 Box from "carbon-react/lib/components/box";
import Typography, { List, ListItem } from "carbon-react/lib/components/typography";
import Button from "carbon-react/lib/components/button";
import Link from "carbon-react/lib/components/link";
import Image from "carbon-react/lib/components/image";
import I18n from "i18n-js";
import "./i18n";
import logo from "./Logo.png";
import vector from "./Vector.svg";

const App = ({ locale = "en", reportDetails }) => {
  I18n.locale = locale;

  const handleButtonClick = () => {
    alert(I18n.t("logIntoSageHR"));
  };

  return (
    <CarbonProvider theme={ sageTheme } validationRedesignOptIn>
      <Box>
        <Box
          position="absolute"
          top="130px"
          left="158px"
          width="584px"
          display="flex"
          flexDirection="column"
          alignItems="center"
          justifyContent="flex-start"
        >
          <Box
            alignSelf="stretch"
            bg="black"
            height="60px"
            display="flex"
            flexDirection="column"
            alignItems="center"
            justifyContent="flex-start"
            p="32px 10px"
          >
            <Image
              alt="Logo"
              src={ logo }
              width="120px"
              height="67.5px"
            />
          </Box>
          <Box
            alignSelf="stretch"
            bg="#f2f5f6"
            display="flex"
            flexDirection="column"
            alignItems="flex-start"
            justifyContent="flex-start"
            p="32px"
            gap="24px"
          >
            <Box alignSelf="stretch">
              <Typography variant="h4">{ I18n.t("welcomeMessage", { name: reportDetails.name }) }</Typography>
              <Typography variant="p"></Typography>
              <Typography variant="p">{ I18n.t("reportInfo", { reportType: reportDetails.reportType })  }</Typography>
              <Typography variant="p">{ I18n.t("employeeProfileInfo") }</Typography>
              <List listStyleType="disc">
                <ListItem>{ I18n.t("sex") }</ListItem>
                <ListItem>{ I18n.t("race") }</ListItem>
                <ListItem>{ I18n.t("occupationalLevel") }</ListItem>
                <ListItem>{ I18n.t("citizenshipStatus") }</ListItem>
              </List>
              <Typography variant="p">{ I18n.t("editInfo") }</Typography>
              <Typography variant="p">{ I18n.t("comments") }</Typography>
              <Typography variant="p">{ I18n.t("messageTypedByUsers", { comments: reportDetails.comments }) }</Typography>
              <Typography variant="p">{ I18n.t("contactHR") }</Typography>
            </Box>
            <Button
                buttonType="primary"
                onClick={ handleButtonClick }
                aria-label={ I18n.t("logIntoSageHR") }
              >
                { I18n.t("logIntoSageHR") }
            </Button>
          </Box>
          <Box
            alignSelf="stretch"
            display="flex"
            flexDirection="column"
            alignItems="center"
            justifyContent="flex-start"
            p="24px"
            gap="16px"
            color="rgba(0, 0, 0, 0.65)"
          >
            <Box
              display="flex"
              flexDirection="row"
              width="100px"
              height="21px"
            >
              <Typography variant="p">{ I18n.t("sentBy") }</Typography>
              <Box pl="5px" pt="3px">
                <Image alt="Vector Icon" src={ vector } />
              </Box>
            </Box>
            <Typography
              variant="p"
              textAlign="center"
              fontSize="12px"
              lineHeight="16px"
            >
              { I18n.t("doNotReply") }
              <Link href="#" target="_blank" rel="noreferrer">
                <Typography variant="small" color="green">{ I18n.t("helpCentre") }</Typography>
              </Link>
            </Typography>
          </Box>
        </Box>
      </Box>
    </CarbonProvider>
  );
};

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

export default App;

import I18n from 'i18n-js';

I18n.translations = {
  en: {
    welcomeMessage: "Hi %{name},",
    reportInfo: "We need some information about employees for our %{reportType}.",
    employeeProfileInfo: "Please make sure all relevant employees have the following information in their profile:",
    sex: "sex",
    race: "race",
    occupationalLevel: "occupational level",
    citizenshipStatus: "citizenship status",
    editInfo: "You can edit this information in Settings > Employee data or in an employee’s profile. Employees can update sex and race fields themselves.",
    comments: "Comments:",
    messageTypedByUsers: "[%{comments}]",
    contactHR: "If you have any questions, please contact your HR manager.",
    logIntoSageHR: "Log into Sage HR",
    sentBy: "Sent by",
    doNotReply: "Please do not reply as this email address is not monitored. If you need help, please visit our ",
    helpCentre: "Help Centre."
  },
};

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

export default I18n;

import React from "react";
import { createRoot } from "react-dom/client";
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 container = document.getElementById("app");
const root = createRoot(container);

const reportDetails = {
  name: "Joe",
  reportType: "EEA2 equity report",
  comments: "message_typed_by_users"
};

root.render(
  <CarbonProvider focusRedesignOptOut theme={ sageTheme }>
    <GlobalStyle />
    <App
      reportDetails={ reportDetails }
    />
  </CarbonProvider>
);


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

.exclamationTriangle {
    width: 24px;
    position: relative;
    height: 24px;
    display: none;
}
.dialogTitle1 {
    position: relative;
    line-height: 30px;
}
.dialogTitle {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.boundingBox {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    background-color: #c7384f;
    opacity: 0;
}
.crossIcon {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.cross {
    width: 16px;
    position: relative;
    height: 16px;
}
.header {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 32px;
    font-size: 24px;
}
.separator {
    align-self: stretch;
    position: relative;
    border-top: 1px solid #ccd6db;
    box-sizing: border-box;
    height: 1px;
}
.assigning {
    width: 149px;
    height: 77px;
    display: none;
}
.multipleEmployees {
    width: 686px;
    height: 276px;
    display: none;
}
.assigningEmployee {
    width: 686px;
    height: 69px;
    display: none;
}
.label1 {
    position: relative;
    line-height: 21px;
    font-weight: 500;
}
.label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.bg {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
}
.inputText {
    position: absolute;
    top: 9.5px;
    left: 16px;
    line-height: 21px;
}
.dropdown1 {
    align-self: stretch;
    position: relative;
    height: 40px;
}
.dropdown {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.trainingName {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.meetingSummary {
    position: relative;
    line-height: 20px;
}
.screenshot20210704At2258 {
    position: absolute;
    top: 0px;
    left: 120px;
    width: 205px;
    height: 33px;
    object-fit: cover;
}
.screenshot20210704At22581 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 120px;
    height: 33px;
    object-fit: cover;
}
.screenshot20210704At2258Parent {
    width: 325px;
    position: relative;
    height: 33px;
}
.icons {
    align-self: stretch;
    box-shadow: 0px 1px 0px #668494 inset, 0px -1px 0px #668494 inset, 1px 0px 0px #668494 inset, -1px 0px 0px #668494 inset;
    border-radius: 4px 4px 0px 0px;
    background-color: #edf1f2;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 4px 16px;
}
.loremIpsumDolor {
    margin: 0;
}
.inputText1 {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-block;
    width: 625px;
    height: 118px;
}
.inputTextWrapper {
    align-self: stretch;
    position: relative;
    box-shadow: 0px -1px 0px #668494 inset, 1px 0px 0px #668494 inset, -1px 0px 0px #668494 inset;
    border-radius: 0px 0px 4px 4px;
    background-color: #fff;
    height: 150px;
    overflow: hidden;
    flex-shrink: 0;
}
.iconsParent {
    align-self: stretch;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    font-family: 'Sage UI';
}
.trainingDetail {
    width: 686px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    font-family: Lato;
}
.icon {
    width: 16px;
    position: relative;
    height: 16px;
    display: none;
}
.icon1 {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 18px;
    line-height: 40px;
    text-transform: uppercase;
    font-family: 'Font Awesome 5 Pro';
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}
.dropdown2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.trainingFormat {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}
.dropdown6 {
    width: 148px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.trainingCost {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.labelParent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}
.labelForCheckbox {
    position: relative;
    line-height: 20px;
    font-weight: 500;
}
.radio {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.radioParent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.trainingDate {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}
.switchOnThis {
    position: relative;
    font-weight: 500;
}
.employeesWillNeed {
    position: relative;
}
.groupChild {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    border-radius: 4px;
    background-color: #ccd6db;
}
.block {
    position: absolute;
    height: 83.33%;
    width: 33.33%;
    top: 8.33%;
    right: 63.33%;
    bottom: 8.33%;
    left: 3.33%;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background-color: #f2f5f6;
}
.rectangleParent {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
}
.off {
    position: absolute;
    top: 16.67%;
    left: 56.67%;
    line-height: 16px;
}
.switch {
    width: 60px;
    position: relative;
    height: 24px;
    font-family: 'Font Awesome 5 Pro';
}
.label10 {
    position: relative;
    line-height: 21px;
}
.icon3 {
    width: 16px;
    position: relative;
    line-height: 20px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    flex-shrink: 0;
}
.label11 {
    position: relative;
    line-height: 20px;
    font-weight: 500;
    font-family: 'Sage UI';
    color: #007e45;
}
.button {
    border-radius: 4px;
    border: 2px solid #007e45;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    gap: 8px;
}
.buttonParent {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    text-align: center;
    color: #00815d;
    font-family: 'Font Awesome 5 Pro';
}
.trainingAttachments {
    width: 684px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    font-family: Lato;
}
.checkbox {
    width: 20px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 20px;
}
.mandatoryLabel {
    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);
}
.labelSet {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.checkboxSingle {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.boxChild {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
}
.proofCompletion {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.icon4 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    left: 0%;
    line-height: 40px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sendEmployeeAn {
    position: relative;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    font-family: 'Sage UI';
    text-align: left;
}
.sendEmail {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: center;
    font-size: 12px;
    font-family: 'Font Awesome 5 Pro';
}
.assigningParent {
    align-self: stretch;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 32px 56px;
    gap: 32px;
}
.content {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px 0px 0px;
}
.button1 {
    width: 116px;
    border-radius: 4px;
    border: 2px solid #007e45;
    box-sizing: border-box;
    height: 40px;
    display: none;
}
.button2 {
    border-radius: 4px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    box-sizing: border-box;
}
.button3 {
    border-radius: 4px;
    background-color: #007e45;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    box-sizing: border-box;
    color: #fff;
}
.buttons {
    align-self: stretch;
    border-radius: 0px 0px 4px 4px;
    background-color: #f2f5f6;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0px 32px 32px 0px;
    gap: 16px;
    text-align: center;
    color: #007e45;
}
.newTraining {
    width: 100%;
    position: relative;
    box-shadow: 0px 10px 30px rgba(0, 20, 29, 0.1), 0px 30px 60px rgba(0, 20, 29, 0.1);
    border-radius: 4px;
    background-color: #f2f5f6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.9);
    font-family: 'Sage UI';
}

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

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

          					Edit “[training–name]” training

Training course name

First Aid Trainings

            						Training details (optional)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper, arcu eget mattis fermentum, massa arcu sollicitudin tellus, sit amet convallis neque augue vitae nunc. Fusce at arcu risus. Fusce eleifend erat sit amet tellus tincidunt interdum. Nunc convallis condimentum nisl, eu interdum massa faucibus fringilla. Fusce at lacinia augue. Suspendisse potenti. Praesent ante mauris, ornare non sapien quis, ultrices feugiat lacus. Donec elit arcu, dictum in maximus ut, imperdiet ac sem. Donec eleifend nisl et nisl efficitur gravida.

Training format

Mentoring



Payment type

Invoice



Cost

Training date

Set a date this training should be completed by.

Single date

Multiple dates

Add an expiry date for this training

Employees will need to renew their training by a certain date or after a specified period of time.



            						Attach instructions



Choose file

Count this training in equity reports

{`This training will be included in equity reports if an employee completes it within the selected time period. `}

Require proof of completion when completing this training



Send employee an email about this training

Cancel

Save

);
};

export default NewTraining;

import React, {
  useState,
  useCallback,
  useRef
} from 'react';
import PropTypes from 'prop-types';
import { EditorState, ContentState } from 'draft-js';
import CarbonProvider from 'carbon-react/lib/components/carbon-provider';
import sageTheme from "carbon-react/lib/style/themes/sage";
import Dialog from 'carbon-react/lib/components/dialog';
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 Decimal from "carbon-react/lib/components/decimal";
import Textbox from 'carbon-react/lib/components/textbox';
import { Select, Option } from "carbon-react/lib/components/select";
import { RadioButton, RadioButtonGroup } from "carbon-react/lib/components/radio-button";
import TextEditor from "carbon-react/lib/components/text-editor";
import Switch from "carbon-react/lib/components/switch";
import FileInput from "carbon-react/lib/components/file-input";
import './i18n';
import I18n from 'i18n-js';

const App = ({ locale = 'en',
  fieldValues,
  trainingFormats,
  paymentTypes }) => {

  I18n.locale = locale;

  const [isOpen, setIsOpen] = useState(true);
  const [trainingName, setTrainingName] = useState(fieldValues.trainingName);
  const [editorValue, setEditorValue] =
    useState(EditorState.createWithContent(ContentState.createFromText(fieldValues.trainingDetailsText)));
  const trainingFormatsRef = useRef(trainingFormats);
  const [selectedTrainingFormat, setSelectedTrainingFormat] = useState(fieldValues.trainingFormat);
  const paymentTypesRef = useRef(paymentTypes);
  const [selectedPaymentType, setSelectedPaymentType] = useState(fieldValues.paymentType);
  const [trainingCost, setTrainingCost] = useState(fieldValues.trainingCost);
  const [trainingDate, setTrainingDate] = useState(fieldValues.trainingDate);
  const [expiryDate, setExpiryDate] = useState(fieldValues.expiryDate);
  const [countTraining, setCountTraining] = useState(fieldValues.countTraining);
  const [requireProof, setRequireProof] = useState(fieldValues.requireProof);
  const [sendEmail, setSendEmail] = useState(fieldValues.sendEmail);

  const [error, setError] = useState(undefined);
  const [uploadStatus, setUploadStatus] = useState(undefined);
  const reader = useRef();

  const getReader = () => {
    if (!reader.current) {
      reader.current = new FileReader();
    }
    return reader.current;
  };

  const removeFile = () => setUploadStatus(undefined);

  const onChangeFile = (files) => {
    if (!files.length) {
      setError(undefined);
      removeFile();
      return;
    }
    const fileUploaded = files[0];

    if (fileUploaded.size > 10 * 1024 * 1024) {
      setError("This file is too big to be uploaded - maximum size 10MB");
      return;
    }
    setError(undefined);
    const fileReader = getReader();

    const handleLoad = () => {
      const uploadProps = {
        status: "uploading",
        filename: fileUploaded.name,
        onAction: () => fileReader.abort(),
        progress: 0
      };
      setUploadStatus(uploadProps);
    };

    const handleProgress = (e) => {
      const progress = 100 * e.loaded / e.total;
      const isComplete = e.type === "loadend" || progress >= 100;
      if (isComplete) {
        removeListeners();
      }
      const uploadProps = isComplete ? {
        status: "completed",
        filename: fileUploaded.name,
        onAction: () => removeFile(),
        href: fileReader.result,
        message: "File uploaded"
      } : {
        status: "uploading",
        filename: fileUploaded.name,
        onAction: () => fileReader.abort(),
        progress,
        message: `${progress} percent uploaded`
      };
      setUploadStatus(uploadProps);
    };

    const handleError = () => {
      const uploadProps = {
        status: "error",
        filename: fileUploaded.name,
        onAction: () => removeFile(),
        message: "failed to upload"
      };
      setUploadStatus(uploadProps);
      removeListeners();
    };

    const handleAbort = () => {
      removeFile();
      removeListeners();
    };

    const removeListeners = () => {
      fileReader.removeEventListener("loadstart", handleLoad);
      fileReader.removeEventListener("load", handleLoad);
      fileReader.removeEventListener("loadend", handleProgress);
      fileReader.removeEventListener("progress", handleProgress);
      fileReader.removeEventListener("error", handleError);
      fileReader.removeEventListener("abort", handleAbort);
    };

    fileReader.addEventListener("loadstart", handleLoad);
    fileReader.addEventListener("load", handleProgress);
    fileReader.addEventListener("loadend", handleProgress);
    fileReader.addEventListener("progress", handleProgress);
    fileReader.addEventListener("error", handleError);
    fileReader.addEventListener("abort", handleAbort);
    fileReader.readAsDataURL(fileUploaded);
  };

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

  const handleCancelButtonClick = useCallback(() => {
    setIsOpen(false)
  }, []);

  const handleTrainingNameChange = (event) => {
    const selectedValue = event.target.value;
    setTrainingName(selectedValue);
  };

  const handleTrainingFormatChange = (event) => {
    const selectedValue = event.target.value;
    setSelectedTrainingFormat(selectedValue);
  };

  const handlePaymentTypeChange = (event) => {
    const selectedValue = event.target.value;
    setSelectedPaymentType(selectedValue);
  };

  const handleTrainingCostChange = ({ target }) => {
    setTrainingCost(target.value.rawValue);
  };

  const handleTrainingDateChange = (event) => {
    const selectedValue = event.target.value;
    setTrainingDate(selectedValue);
  };

  return (
    <CarbonProvider theme={ sageTheme } >
      <Dialog
        title={`${ I18n.t('editTrainingTitle', { trainingName: fieldValues.trainingTitle }) }`}
        open={ isOpen }
        onCancel={ handleCancelButtonClick }
      >
        <Box p="12px">
          <Box>
            <Box marginBottom="16px">
              <Textbox
                label={ I18n.t('trainingCourseName') }
                aria-label={ I18n.t('trainingCourseLabel') }
                data-role='training-course-name-textbox'
                value={ trainingName }
                onChange={ handleTrainingNameChange }
              />
            </Box>
            <Box mb="16px">
              <Box>
                <TextEditor
                  onChange={ newValue => setEditorValue(newValue) }
                  value={ editorValue }
                  labelText={ I18n.t('trainingDetails') }
                  rows={ 4 }
                  aria-label={ I18n.t('trainingDetailsLabel') }
                  data-role='training-details-text-editor'
                />
              </Box>
            </Box>
            <Box
              display="flex"
              justifyContent="space-between"
              mb="16px">
              <Box flex="1" mr="16px">
                <Select
                  label={ I18n.t('trainingFormat') }
                  aria-label={ I18n.t('trainingFormatLabel') }
                  data-role='select-training-format'
                  value={ String(selectedTrainingFormat) }
                  onChange={ handleTrainingFormatChange }
                >
                  { trainingFormatsRef.current.map((category) => (
                    <Option
                      key={ category.id }
                      text={ category.text }
                      value={ String(category.value) }
                    />
                  )) }
                </Select>
              </Box>
              <Box flex="1">
                <Select
                  label={ I18n.t('paymentType') }
                  aria-label={ I18n.t('paymentTypeLabel') }
                  data-role='select-payment-type'
                  value={ String(selectedPaymentType) }
                  onChange={ handlePaymentTypeChange }
                >
                  { paymentTypesRef.current.map((category1) => (
                    <Option
                      key={ category1.id }
                      text={ category1.text }
                      value={ String(category1.value) }
                    />
                  )) }
                </Select>
              </Box>
            </Box>
            <Box mb="16px">
              <Decimal
                label={ I18n.t('trainingCost') }
                aria-label={ I18n.t('trainingCostLabel') }
                data-role='training-cost-textbox'
                prefix={ fieldValues.currency }
                value={ String(trainingCost) }
                onChange={ handleTrainingCostChange }
                maxWidth="30%"
              />
            </Box>
            <Box mb="24px">
              <RadioButtonGroup
                legend={ I18n.t('trainingDate') }
                legendHelp={ I18n.t('trainingDateDescription') }
                aria-label={ I18n.t('trainingDateLabel') }
                data-role='training-date-radio-button-group'
                onChange={ handleTrainingDateChange }
                value={ trainingDate }
              >
                <RadioButton
                  id="radio-1"
                  value="single"
                  label="Single date"
                  checked={ trainingDate === "single" }
                />
                <RadioButton
                  id="radio-2"
                  value="multiple"
                  label="Multiple dates"
                  checked={ trainingDate === "multiple" }
                  />
              </RadioButtonGroup>
            </Box>
            <Box mb="24px">
              <Switch
                label={ I18n.t('addExpiryDate') }
                aria-label={ I18n.t('addExpiryDateLabel') }
                data-role='expiry-date-switch'
                fieldHelp={ I18n.t('addExpiryDateDescription') }
                checked={ expiryDate }
                onChange={ (e) => setExpiryDate(e.target.checked) }
              />
            </Box>
            <Box mb="16px">
              <FileInput
                label={ I18n.t('attachInstructions') }
                aria-label={ I18n.t('attachInstructionsLabel') }
                data-role='attach-file-instructions-file-input'
                onChange={ onChangeFile }
                uploadStatus={ uploadStatus }
                error={ error }
              />
            </Box>
            <Box mb="16px">
              <Checkbox
                label={ I18n.t('countInEquityReports') }
                aria-label={ I18n.t('countTrainingLabel') }
                data-role='count-in-equity-reports-checkbox'
                fieldHelp={ I18n.t('countInEquityReportsDescription') }
                checked={ countTraining }
                onChange={ e => setCountTraining(e.target.checked) }
              />
            </Box>
            <Box mb="24px">
              <Checkbox
                label={ I18n.t('requireProofOfCompletion') }
                aria-label={ I18n.t('requireProofLabel') }
                data-role='require-proof-checkbox'
                checked={ requireProof }
                onChange={ e => setRequireProof(e.target.checked) }
              />
            </Box>
            <Box mb="16px">
              <Checkbox
                label={ I18n.t('sendEmail') }
                aria-label={ I18n.t('sendEmailLabel') }
                data-role='send-email-checkbox'
                checked={ sendEmail }
                onChange={ e => setSendEmail(e.target.checked) }
              />
            </Box>
          </Box>
          <Box
            display="flex"
            justifyContent="flex-end"
            mt="32px"
          >
            <Button
              buttonType="tertiary"
              type="cancel"
              onClick={ handleCancelButtonClick }
            >
              { I18n.t('cancel') }
            </Button>
            <Button
              buttonType="primary"
              type="submit"
              onClick={ handleSaveButtonClick }
              marginLeft="16px"
            >
              { I18n.t('save') }
            </Button>
          </Box>
        </Box>
      </Dialog>
    </CarbonProvider>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  fieldValues: PropTypes.shape({
    trainingTitle: PropTypes.string.isRequired,
    trainingName: PropTypes.string.isRequired,
    trainingDetailsText: PropTypes.string.isRequired,
    trainingFormat: PropTypes.string.isRequired,
    paymentType: PropTypes.string.isRequired,
    currency: PropTypes.string.isRequired,
    trainingCost: PropTypes.string.isRequired,
    trainingDate: PropTypes.string.isRequired,
    expiryDate: PropTypes.bool.isRequired,
    countTraining: PropTypes.bool.isRequired,
    requireProof: PropTypes.bool.isRequired,
    sendEmail: PropTypes.bool.isRequired,
  }).isRequired,
  trainingFormats: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      value: PropTypes.string.isRequired,
      text: PropTypes.string.isRequired
    })
  ).isRequired,
  paymentTypes: 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: {
    editTrainingTitle: "Edit %{trainingName} training",
    trainingCourseName: "Training course name",
    trainingCourseLabel: "Training course name Label",
    trainingDetails: "Training details (optional)",
    trainingDetailsLabel: "Training details label",
    trainingFormat: "Training format",
    trainingFormatLabel: "Training format label",
    paymentType: "Payment type",
    paymentTypeLabel: "Payment type label",
    trainingCost: "Cost",
    trainingCostLabel: "Cost label",
    trainingDate: "Training date",
    trainingDateLabel: "Training date label",
    trainingDateDescription: "Set a date this training should be completed by.",
    addExpiryDate: "Add an expiry date for this training",
    addExpiryDateLabel: "Expiry Date Label",
    addExpiryDateDescription: "Employees will need to renew their training by a certain date or after a specified period of time.",
    attachInstructions: "Attach instructions",
    attachInstructionsLabel: "Attach instructions Label",
    countInEquityReports: "Count this training in equity reports",
    countInEquityReportsDescription: "This training will be included in equity reports if an employee completes it within the selected time period.",
    requireProofOfCompletion: "Require proof of completion when completing this training",
    sendEmail: "Send employee an email about this training",
    countTrainingLabel: "Count training in equity reports label",
    requireProofLabel: "Require proof of completion label",
    sendEmailLabel: "Send email label",
    cancel: "Cancel",
    save: "Save"
  },
};

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 fieldValues = {
  trainingTitle: "First Aid",
  trainingName: "First Aid Trainings",
  trainingDetailsText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper, arcu eget mattis fermentum, massa arcu sollicitudin tellus, sit amet convallis neque augue vitae nunc. Fusce at arcu risus. Fusce eleifend erat sit amet tellus tincidunt interdum. Nunc convallis condimentum nisl, eu interdum massa faucibus fringilla. Fusce at lacinia augue. Suspendisse potenti. Praesent ante mauris, ornare non sapien quis, ultrices feugiat lacus. Donec elit arcu, dictum in maximus ut, imperdiet ac sem. Donec eleifend nisl et nisl efficitur gravida.",
  trainingFormat: "1",
  paymentType: "1",
  currency: "£",
  trainingCost: "500.00",
  trainingDate: "single",
  expiryDate: false,
  countTraining: false,
  requireProof: false,
  sendEmail: true
};

const trainingFormats = [
  { id: "A", value: "1", text: "Mentoring" },
  { id: "B", value: "2", text: "Workshop" }
];

const paymentTypes = [
  { id: "A", value: "1", text: "Invoice" },
  { id: "B", value: "2", text: "Credit Card" }
];
ReactDOM.render(
  <CarbonProvider
    focusRedesignOptOut
    theme={ sageTheme }
  >
    <GlobalStyle />
    <App
      fieldValues = { fieldValues }
      trainingFormats = { trainingFormats }
      paymentTypes = { paymentTypes }
    />
  </CarbonProvider>,
  document.getElementById("app")
);


.dialogTitle {
    flex: 1;
    position: relative;
    line-height: 125%;
}
.icontitlewrap {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.closeIcon {
    width: 16px;
    position: relative;
    height: 16px;
}
.header {
    align-self: stretch;
    background-color: #f2f5f6;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px 32px 20px;
    gap: 56px;
    font-size: 24px;
}
.dividerIcon {
    align-self: stretch;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    height: 1px;
    flex-shrink: 0;
}
.label {
    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;
}
.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: 160px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.textInput1 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.content {
    align-self: stretch;
    background-color: #f2f5f6;
    height: 288px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 32px;
    box-sizing: border-box;
    gap: 24px;
}
.label3 {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.majorButton {
    background-color: rgba(0, 0, 0, 0);
    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;
}
.majorButton1 {
    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;
    color: #fff;
}
.footer {
    align-self: stretch;
    box-shadow: 0px -4px 12px rgba(0, 20, 30, 0.05);
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 16px 32px;
    gap: 16px;
    color: #007e45;
}
.dialog {
    width: 100%;
    position: relative;
    box-shadow: 0px 30px 60px rgba(0, 20, 30, 0.1), 0px 10px 30px rgba(0, 20, 30, 0.1);
    background-color: #fff;
    height: 379px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.9);
    font-family: 'Sage UI';
}

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

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

          					Add new option

{`Add a new option for the ‘Department’ analysis type. `}

Option code

006

Option name

Bakery

Cancel

Add option

);
};

export default Dialog;

@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, 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 Button from 'carbon-react/lib/components/button';
import Form from 'carbon-react/lib/components/form';
import Typography from 'carbon-react/lib/components/typography';
import Textbox from 'carbon-react/lib/components/textbox';
import Box from 'carbon-react/lib/components/box';
import sageTheme from 'carbon-react/lib/style/themes/sage';
import i18n from './i18n';

const App = ({ locale = 'en', analysisTypeLabel }) => {
  const [isOpen, setIsOpen] = useState(true);
  const [optionCode, setOptionCode] = useState('006');
  const [optionName, setOptionName] = useState('Bakery');
  useEffect(() => {
    i18n.locale = locale;
  }, [locale]);

  const onCancel = () => {
    alert('Cancel button clicked');
    setIsOpen(false);
  };

  const onAddOption = () => {
    alert('Add option button clicked');
  };

  return (
    <CarbonProvider theme={ sageTheme } >
      <Dialog
        open={ isOpen }
        greyBackground
        onCancel={ () => setIsOpen(false) }
        title={ i18n.t('addNewOption') }
        size="small"
        aria-label="Add new option dialog"
      >
        <Box>
          <Typography
            fontWeight="bold"
            mb="24px"
            mt="32px"
            ml="32px"
            mr="32px"
          >
            { i18n.t('dialogText', { analysisTypeLabel }) }
          </Typography>
          <Box mb="16px">
            <Textbox
              ml="32px"
              mr="180px"
              label={ i18n.t('optionCode') }
              value={ optionCode }
              onChange={ (e) => setOptionCode(e.target.value) }
              aria-label="Option code"
            />
          </Box>
          <Box mb="16px">
            <Textbox
              ml="32px"
              mr="32px"
              label={ i18n.t('optionName') }
              value={ optionName }
              onChange={ (e) => setOptionName(e.target.value) }
              aria-label="Option name"
            />
          </Box>
          <Form
              stickyFooter
              saveButton={
              <Button
                onClick={ onAddOption }
                buttonType="primary"
              >
                { i18n.t('addOption') }
              </Button>
              }
              leftSideButtons={
              <Button
                onClick={ onCancel }
                buttonType="tertiary"
              >
                { i18n.t('cancel') }
              </Button>
            }
          />
        </Box>
      </Dialog>
    </CarbonProvider>
  );
};
App.propTypes = {
  locale: PropTypes.string,
  analysisTypeLabel: PropTypes.string.isRequired,
};
export default App;

import I18n from 'i18n-js';

I18n.translations = {
  en: {
    addNewOption: 'Add new option',
    addOption: 'Add option',
    cancel: 'Cancel',
    dialogText: 'Add a new option for the \'%{analysisTypeLabel}\' analysis type.',
    optionCode: 'Option code',
    optionName: 'Option name',
  },
};

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 focusRedesignOptOut theme = { sageTheme } >
    <GlobalStyle />
    <App analysisTypeLabel="Department" />
  </CarbonProvider>,
  document.getElementById("app")
);