.header {
    position: relative;
    line-height: 125%;
    font-weight: 500;
}
.tileHeader {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.label {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.majorButton {
    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;
    gap: 0px;
}
.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;
}
.header1 {
    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 {
    height: 100%;
    flex: 1;
    width: 100%;
    position: relative;
    border-radius: 16px;
    background-color: #fff;
    border: 1px solid #ccd6db;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px;
    gap: 16px;
    text-align: left;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.9);
    font-family: 'Sage UI';
}

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

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

Department

Edit

Appears in Accounting:

              							Sales -   invoices and credit notes

              							Purchases -  invoices and credit notes

              							Bank payments and receipts

              							Journals

);
};

export default AnalysisTile;

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

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import CarbonProvider from 'carbon-react/lib/components/carbon-provider';
import Box from 'carbon-react/lib/components/box';
import Button from 'carbon-react/lib/components/button';
import Pod from 'carbon-react/lib/components/pod';
import Typography, { List, ListItem } from 'carbon-react/lib/components/typography';
import sageTheme from 'carbon-react/lib/style/themes/sage';
import i18n from './i18n';

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

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

  return (
    <CarbonProvider validationRedesignOptIn theme={ sageTheme }>
      <Box p="20px" width={0.3}>
        <Pod
          title={ title }
          aria-label="Department analysis information"
        >
          <Box
            position = "absolute"
            left = "520px"
            top = "33px"
          >
            <Button
              buttonType="secondary"
              onClick={ handleEditClick }
              aria-label={ i18n.t('analysisTile.editButton') }
              data-role="edit-button"
              size="small"
            >
              { i18n.t('analysisTile.editButton') }
            </Button>
          </Box>
          <Box width="100%">
            <Typography fontWeight="500" lineHeight="150%">
              { i18n.t('analysisTile.accountingHeader') }
            </Typography>
            <List pl="19px" m={0}>
              {accountingItems.map((item, index) => (
                <ListItem key={ index }>{ item }</ListItem>
              ))}
            </List>
          </Box>
        </Pod>
      </Box>
    </CarbonProvider>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  title: PropTypes.string.isRequired,
  accountingItems: PropTypes.arrayOf(PropTypes.string).isRequired
};

export default App;

import I18n from 'i18n-js';

I18n.translations = {
  en: {
    analysisTile: {
      editButton: "Edit",
      accountingHeader: "Appears in Accounting:"
    }
  },
};

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 title = "Department";
const accountingItems = [
  "Sales - invoices and credit notes",
  "Purchases - invoices and credit notes",
  "Bank payments and receipts",
  "Journals"
];

root.render(
  <CarbonProvider validationRedesignOptIn theme={ sageTheme }>
    <GlobalStyle />
    <App locale="en"
      title={ title }
      accountingItems={ accountingItems }
    />
  </CarbonProvider>
);


.spacer {
    align-self: stretch;
    flex: 1;
}
.label {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.majorButton {
    border-radius: 32px;
    border: 2px solid #007e45;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 16px;
    min-height: 40px;
}
.majorButtonWrapper {
    width: 440px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.prevBtn {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 0px 16px;
    gap: 24px;
}
.stepFlow {
    flex: 1;
    height: 7613.6px;
}
.indicatesARequired {
    position: relative;
    line-height: 150%;
    color: rgba(0, 0, 0, 0.65);
}
.requiredValue {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}
.titleHint {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.addresstypelabel {
    align-self: stretch;
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.mainwrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.removeIcon {
    width: 8px;
    position: relative;
    height: 8px;
}
.focus {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0);
    width: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 4px;
    box-sizing: border-box;
}
.doNotSwapbaseremovepill {
    width: 20px;
    position: relative;
    border-radius: 0px 50px 50px 0px;
    height: 20px;
}
.doNotSwapbasepill {
    border-radius: 50px;
    border: 2px solid #335b70;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 0px 8px;
    gap: 4px;
}
.pill {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.pills {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
}
.caretLargeDownIcon {
    width: 20px;
    position: relative;
    height: 20px;
}
.inputTextContainer {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 9.5px 12px;
    gap: 12px;
}
.inputContainer {
    align-self: stretch;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #668494;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.wrapper {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 12px;
}
.dropdownSelect {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.ukAddressTypeMultiSelect {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
}
.addressuklabel {
    flex: 1;
    position: relative;
    line-height: 150%;
    display: inline-block;
    height: 21px;
}
.inputTextContainer1 {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 12px;
    gap: 12px;
}
.inputContainer1 {
    align-self: stretch;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.wrapper1 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: #000;
}
.dropdownSelectStandard {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.inputTextContainer2 {
    flex: 1;
    height: 21px;
    overflow: hidden;
}
.postcode1 {
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.deleteAddressButton {
    border-radius: 32px;
    border: 2px solid #cb374a;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    gap: 8px;
}
.deleteAddress {
    width: 368px;
    border-bottom: 1px solid #ccd6db;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 8px 0px 24px;
    color: #cb374a;
}
.addAnotherAddress {
    border-radius: 32px;
    border: 2px solid #007e45;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    gap: 8px;
}
.button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.addAddressBtn {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    color: #007e45;
}
.ukAddress {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}
.address {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: rgba(0, 0, 0, 0.9);
}
.clientAddress {
    align-self: stretch;
    background-color: rgba(255, 255, 255, 0.01);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 0px 24px;
    gap: 16px;
}
.form {
    width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 40px;
    box-sizing: border-box;
}
.rightSpacer {
    align-self: stretch;
    flex: 0.9847;
}
.stepFlowParent {
    align-self: stretch;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    color: #cb374a;
}
.pageLayout {
    align-self: stretch;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.addEntityStepFlowMaster1 {
    position: absolute;
    width: 100%;
    top: 141px;
    right: 0%;
    left: 0%;
    background-color: #fff;
    height: 687px;
    overflow-y: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px 0px 32px;
    box-sizing: border-box;
}
.div {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    box-shadow: 0px -4px 12px rgba(0, 20, 30, 0.05);
    background-color: #fff;
}
.shadow {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: #fff;
    height: 72px;
    z-index: 0;
}
.previous {
    flex: 1;
    height: 40px;
    z-index: 1;
}
.cancelButton {
    border-radius: 32px;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    z-index: 2;
}
.nextButton {
    border-radius: 32px;
    background-color: #007e45;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    cursor: pointer;
    z-index: 3;
    color: #fff;
}
.sfaFooterHorizontaldefault {
    position: absolute;
    width: 100%;
    right: 0%;
    bottom: 0px;
    left: 0%;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 16px 32px;
    box-sizing: border-box;
    gap: 16px;
}
.title {
    align-self: stretch;
    position: relative;
    font-size: 24px;
    line-height: 125%;
    color: rgba(0, 0, 0, 0.9);
}
.icon {
    width: 32px;
    border-radius: 4px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.wrapper2 {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    z-index: 0;
}
.label1 {
    align-self: stretch;
    position: relative;
    line-height: 150%;
}
.sequenceLineIcon {
    align-self: stretch;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.stepStatecompleted {
    flex: 1;
    height: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.progressIndicators {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}
.progressTracker {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    max-width: 750px;
    z-index: 1;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.9);
}
.dividerOnLight {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    right: 0px;
    bottom: 0px;
    left: 0px;
    max-width: 100%;
    overflow: hidden;
    height: 1px;
    flex-shrink: 0;
    z-index: 2;
}
.header {
    flex: 1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px 24px 20px;
    position: relative;
    gap: 12px;
}
.stepFlow1 {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.addEntityHeaders {
    position: absolute;
    width: 100%;
    top: 0px;
    right: 0%;
    left: 0%;
    border-bottom: 1px solid #d9e0e4;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    color: rgba(0, 0, 0, 0.55);
}
.addEntityDialogMaster {
    width: 100%;
    position: relative;
    background-color: #fff;
    height: 900px;
    overflow-y: auto;
    text-align: left;
    font-size: 14px;
    color: #007e45;
    font-family: 'Sage UI';
}

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

const AddEntityDialogMASTER:FunctionComponent = () => {

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

  	return (

Previous

{`* `}

indicates a required value.

Address type

Registered

Country

United Kingdom

Address 1

Address 2

Town / City

County

Postcode

Delete this address

Add another address

Cancel

Next

Add client

                								Client Address

Step 4 of 6

);
};

export default AddEntityDialogMASTER;

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

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import CarbonProvider from 'carbon-react/lib/components/carbon-provider';
import Box from 'carbon-react/lib/components/box';
import Button from 'carbon-react/lib/components/button';
import Form from 'carbon-react/lib/components/form';
import { Select, MultiSelect, Option } from 'carbon-react/lib/components/select';
import Textbox from 'carbon-react/lib/components/textbox';
import Typography from 'carbon-react/lib/components/typography';
import i18n from './i18n';
import { StepFlow } from "carbon-react/lib/components/step-flow";
import sageTheme from "carbon-react/lib/style/themes/sage";

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

  const handlePreviousClick = () => {
    alert('Previous button clicked');
  };

  const handleNextClick = () => {
    alert('Next button clicked');
  };

  const handleCancelClick = () => {
    alert('Cancel button clicked');
  };

  return (
    <CarbonProvider validationRedesignOptIn theme={ sageTheme }>
      <Box mb="10px" mt="10px" ml="10px" width="50%">
        <StepFlow category={ i18n.t('add_client') } title={ i18n.t('client_address') } currentStep={ 4 } totalSteps={ 6 } showProgressIndicator titleVariant="h2" />
      </Box>

      <Box>
        <Form stickyFooter
          saveButton={ <Button buttonType="primary" onClick={ handleNextClick }>{ i18n.t('next') }</Button> }
          leftSideButtons={[
            <Button key="cancel" buttonType="secondary" onClick={ handleCancelClick }>{ i18n.t('cancel') }</Button>
          ]}
        >
          <Box display="flex" justifyContent="center">
            <Box width="600px">
              <Box mb="20px" mt="15px">
                <Button key="previous" buttonType="secondary" onClick={ handlePreviousClick }>{ i18n.t('previous') }</Button>
              </Box>
              <Box mb="20px">
                <Typography variant="small">
                  * { i18n.t('required_value') }
                </Typography>
              </Box>
              <MultiSelect
                mb="10px"
                label={ i18n.t('address_type') }
                aria-label="Address Type"
              >
                { addressTypes.map(type => (
                  <Option key={ type.id } text={ type.text } value={ type.id } />
                )) }
              </MultiSelect>
              <Select
                mb="10px"
                label={ i18n.t('country') }
                aria-label="Country"
              >
                { countries.map(country => (
                  <Option key={ country.id } text={ country.text } value={ country.id } />
                )) }
              </Select>
              <Textbox
                mb="10px"
                label={ i18n.t('address_1') }
                aria-label="Address 1"
              />
              <Textbox
                mb="10px"
                label={ i18n.t('address_2') }
                aria-label="Address 2"
              />
              <Textbox
                mb="10px"
                label={ i18n.t('town_city') }
                aria-label="Town / City"
              />
              <Textbox
                mb="10px"
                label={ i18n.t('county') }
                aria-label="County"
              />
              <Box width="40%">
                <Textbox
                  mb="10px"
                  label={ i18n.t('postcode') }
                  aria-label="Postcode"
                />
              </Box>
            </Box>
          </Box>
        </Form>
      </Box>
    </CarbonProvider>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  addressTypes: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      text: PropTypes.string.isRequired,
      value: PropTypes.number.isRequired,
    })
  ).isRequired,
  countries: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      text: PropTypes.string.isRequired,
      value: PropTypes.number.isRequired,
    })
  ).isRequired,
};

export default App;

import I18n from 'i18n-js';

I18n.translations = {
  en: {
    add_client: 'Add client',
    client_address: 'Client Address',
    required_value: 'indicates a required value.',
    address_type: 'Address type',
    country: 'Country',
    address_1: 'Address 1',
    address_2: 'Address 2',
    town_city: 'Town / City',
    county: 'County',
    postcode: 'Postcode',
    add_another_address: 'Add another address',
    previous: 'Previous',
    next: 'Next',
    cancel: 'Cancel',
  },
};

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 addressTypes = [
  { id: '1', text: 'Registered', value: 1 },
  { id: '2', text: 'Residential', value: 2 },
];

const countries = [
  { id: '1', text: 'United Kingdom', value: 1 },
  { id: '2', text: 'United States', value: 2 },
];

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


.employees {
    position: relative;
    line-height: 28px;
    font-weight: 900;
}
.pageTitle {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.createAndManage {
    position: relative;
    font-size: 14px;
    line-height: 16px;
    color: rgba(0, 0, 0, 0.9);
}
.title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    z-index: 0;
    font-size: 24px;
    color: #3c424f;
    font-family: Lato;
}
.selected {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.majorButton {
    border-radius: 32px;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 16px;
    min-height: 32px;
    color: #007e45;
}
.selection {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.emailIcon {
    width: 20px;
    position: relative;
    height: 20px;
}
.majorButton1 {
    border-radius: 32px;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 16px;
    gap: 8px;
    min-height: 32px;
}
.label5 {
    position: relative;
    line-height: 150%;
    font-weight: 500;
    white-space: pre-wrap;
}
.actions {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    color: #007e45;
}
.left {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.rigth {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: #007e45;
}
.bulkActionsBar {
    align-self: stretch;
    box-shadow: 0px 5px 5px rgba(0, 20, 30, 0.2), 0px 10px 10px rgba(0, 20, 30, 0.1);
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 8px;
    z-index: 1;
}
.borderWrapperIcon {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.headerText {
    flex: 1;
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.content1 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 16px;
    box-sizing: border-box;
}
.assetsheaderCell {
    flex: 1;
    position: relative;
    background-color: #335b70;
    height: 40px;
    overflow: hidden;
}
.tableHeaderRow {
    align-self: stretch;
    box-shadow: -1px 0px 0px #ccd6db inset;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.checkboxm {
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #668494;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.content2 {
    position: absolute;
    width: 100%;
    top: calc(50% - 20px);
    right: 0px;
    left: 0px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 16px;
    box-sizing: border-box;
}
.assetsrowCell {
    align-self: stretch;
    position: relative;
    background-color: #fff;
    height: 40px;
}
.assetsrowCell1 {
    align-self: stretch;
    position: relative;
    background-color: #f2f5f6;
    height: 40px;
}
.column {
    width: 76px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: #fff;
}
.content10 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 16px;
    box-sizing: border-box;
    gap: 8px;
}
.tableHeaderRow1 {
    align-self: stretch;
    box-shadow: -1px 0px 0px #ccd6db inset;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    color: #fff;
}
.content11 {
    position: absolute;
    width: 100%;
    top: calc(50% - 20px);
    right: 0px;
    left: 0px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 16px;
    box-sizing: border-box;
}
.column1 {
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.borderWrapperIcon27 {
    position: absolute;
    height: 100%;
    width: calc(100% + 0.2px);
    top: 0px;
    right: -0.2px;
    bottom: 0px;
    left: 0px;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.content44 {
    position: absolute;
    height: 100%;
    width: calc(100% + 0.2px);
    top: 0px;
    right: -0.2px;
    bottom: 0px;
    left: 0px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 16px;
    box-sizing: border-box;
    gap: 8px;
}
.content45 {
    position: absolute;
    width: calc(100% + 0.2px);
    top: calc(50% - 20px);
    right: -0.2px;
    left: 0px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 16px;
    box-sizing: border-box;
}
.column3 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.content113 {
    position: absolute;
    width: calc(100% + 0.2px);
    top: calc(50% - 20px);
    right: -0.2px;
    left: 0px;
    height: 40px;
}
.assetsrowCellIcon {
    align-self: stretch;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    height: 40px;
    flex-shrink: 0;
}
.column7 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: #fff;
}
.columns {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.show {
    position: relative;
    line-height: 150%;
}
.inputtext {
    flex: 1;
    position: relative;
    line-height: 150%;
}
.inputTextContainer {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 8px;
    gap: 4px;
}
.inputContainer {
    align-self: stretch;
    border-radius: 4px;
    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;
}
.wrapper {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.dropdownSelectStandard {
    width: 72px;
    height: 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.currentItems {
    position: absolute;
    top: calc(50% - 11.5px);
    left: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 0px 16px;
    gap: 4px;
}
.link {
    position: relative;
    text-decoration: underline;
    line-height: 150%;
    z-index: 0;
}
.firstLink {
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.inputtext1 {
    flex: 1;
    position: relative;
    line-height: 150%;
    display: inline-block;
    height: 21px;
}
.inputTextContainer1 {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 8px;
}
.wrapper1 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.textInput {
    width: 42px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.pageNumbers {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: rgba(0, 0, 0, 0.9);
}
.link2 {
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    opacity: 0.1;
}
.pageNavigation {
    position: absolute;
    top: calc(50% - 12px);
    left: calc(50% - 186.49px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 32px;
    color: rgba(0, 0, 0, 0.3);
}
.numberOfItems {
    position: absolute;
    top: 10px;
    right: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0px 16px 0px 0px;
    text-align: right;
}
.pagination {
    align-self: stretch;
    position: relative;
    background-color: #fafbfb;
    border-right: 1px solid #ccd6db;
    border-bottom: 1px solid #ccd6db;
    border-left: 1px solid #ccd6db;
    box-sizing: border-box;
    height: 40px;
}
.employeesTable {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 2;
}
.basepillnothumbnail {
    border-radius: 50px;
    border: 2px solid #cd384b;
    box-sizing: border-box;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 8px;
}
.pill {
    margin: 0 !important;
    position: absolute;
    top: 228px;
    left: 1342px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 3;
}
.pill1 {
    margin: 0 !important;
    position: absolute;
    top: 268px;
    left: 1342px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 4;
}
.pill2 {
    margin: 0 !important;
    position: absolute;
    top: 309px;
    left: 1342px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 5;
}
.pill3 {
    margin: 0 !important;
    position: absolute;
    top: 348px;
    left: 1342px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 6;
}
.pill4 {
    margin: 0 !important;
    position: absolute;
    top: 388px;
    left: 1342px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 7;
}
.pill5 {
    margin: 0 !important;
    position: absolute;
    top: 429px;
    left: 1342px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 8;
}
.pill6 {
    margin: 0 !important;
    position: absolute;
    top: 468px;
    left: 1342px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 9;
}
.pill7 {
    margin: 0 !important;
    position: absolute;
    top: 509px;
    left: 1342px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 10;
}
.content {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 32px 40px;
    box-sizing: border-box;
    gap: 24px;
    text-align: left;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.9);
    font-family: 'Sage UI';
}

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

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

Employees

Create and manage your employee records.

8 selected

Deselect 8 employees

Invite to Online Payslips

Add or remove Payslip Message

Add finish date

Add or update bank account

Change  Payment Method

Exit Bulk Actions

Select

Name

Jamie

Katherine

David

Cameron

Hope

Hana

Shannon

Charlie

Surname

Briggs

Harper

Lawson

Spencer

Owen

Murphy

Davies

Nicholson

Pay Cycle

Monthly

Monthly

Monthly

Monthly

Monthly

Monthly

Monthly

Monthly

Payment Method

Salary payments

Salary payments

Salary payments

Salary payments

Salary payments

Salary payments

Salary payments

Salary payments

Pay Document Preference

Online

Online

Online

Online

Online

Online

Online

Online

Payslip Message

Yes

No

No

No

No

No

No

Yes

Status

Show

25

items

First

Previous

Page

1

of 1

Next

Last

8 items

Missing bank account details

Missing bank account details

Missing bank account details

Missing bank account details

Missing bank account details

Missing bank account details

Missing bank account details

Missing bank account details

);
};

export default Content;

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

import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import Box from "carbon-react/lib/components/box";
import {
  FlatTable,
  FlatTableHead,
  FlatTableRow,
  FlatTableHeader,
  FlatTableCell,
  FlatTableBody,
  Sort,
} from "carbon-react/lib/components/flat-table";
import IconButton from "carbon-react/lib/components/icon-button";
import Icon from "carbon-react/lib/components/icon";
import Pill from "carbon-react/lib/components/pill";
import Typography from "carbon-react/lib/components/typography";
import { Checkbox } from "carbon-react/lib/components/checkbox";
import Pager from "carbon-react/lib/components/pager";
import sageTheme from "carbon-react/lib/style/themes/sage";
import i18n from "./i18n";
import I18n from "i18n-js";

const App = ({ employees, locale = "en" }) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(25);
  const [selectedRow, setSelectedRow] = useState(null);
  const [sortType, setSortType] = useState("ascending");
  const [sortValue, setSortValue] = useState("name");
  const [checkedRows, setCheckedRows] = useState(() => {
    const initialCheckedRows = {};
    employees.forEach((employee) => {
      initialCheckedRows[employee.id] = true;
    });
    return initialCheckedRows;
  });

  useEffect(() => {
    i18n.locale = locale;
  }, [locale]);
  const handlePagination = (newPage, newPageSize) => {
    setCurrentPage(newPage);
    setPageSize(newPageSize);
  };

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

  const handleRowDoubleClick = (employeeId) => {
    alert(`Row with ID ${employeeId} is selected`);
  };

  const handleCheckboxChange = (employeeId) => (event) => {
    console.log("event", event);
    setCheckedRows((prevState) => ({
      ...prevState,
      [employeeId]: event.target.checked,
    }));
  };

  const handleDeselectAll = () => {
    const newCheckedRows = {};
    employees.forEach((employee) => {
      newCheckedRows[employee.id] = false;
    });
    setCheckedRows(newCheckedRows);
  };

  const getCheckedRowsCount = () => {
    return Object.values(checkedRows).filter((value) => value).length;
  };

  const handleSortClick = (column) => {
    setSortType((prevType) =>
      prevType === "ascending" ? "descending" : "ascending"
    );
    setSortValue(column);
  };

  const sortData = (data, sortByValue, type) => {
    return [...data].sort((a, b) => {
      if (typeof a[sortByValue] === "string") {
        return type === "ascending"
          ? a[sortByValue].localeCompare(b[sortByValue])
          : b[sortByValue].localeCompare(a[sortByValue]);
      } else if (typeof a[sortByValue] === "number") {
        return type === "ascending"
          ? a[sortByValue] - b[sortByValue]
          : b[sortByValue] - a[sortByValue];
      }
      return 0;
    });
  };

  const sortedEmployees = sortData(employees, sortValue, sortType);
  const paginatedEmployees = sortedEmployees.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );

  const handleInvite = () => {
    alert("onInvite event fired");
  };

  const handleAddMessage = () => {
    alert("onAddMessage event fired");
  };

  const handleAddFinishDate = () => {
    alert("onAddFinishDate event fired");
  };

  const handleUpdateBank = () => {
    alert("onUpdateBank event fired");
  };

  const handleChangePaymentMethod = () => {
    alert("onChangePaymentMethod event fired");
  };

  const handleExitBulkActions = () => {
    alert("onExitBulkActions event fired");
  };

  return (
    <CarbonProvider
      theme={ sageTheme }
      validationRedesignOptIn
    >
      <Box padding="20px" bg="#F2F5F6">
        <Box mb="275px">
          <Typography
            variant="h1-large"
            mt="16px"
            ml="8px"
            aria-label={ I18n.t("employee_updates.employees") }
          >
            { I18n.t("employee_updates.employees") }
          </Typography>
          <Typography
            variant="p"
            ml="8px"
            aria-label={ I18n.t("employee_updates.createAndManage") }
          >
            { I18n.t("employee_updates.createAndManage") }
          </Typography>
          <Box bg="white" padding="8px" mt="24px" mb="24px">
            <Box display="flex">
              <IconButton
                aria-label={ I18n.t("employee_updates.selected", {
                  count: getCheckedRowsCount(),
                }) }
              >
                <Box
                  display="flex"
                  flexDirection="row"
                  mr="16px"
                  mt="8px"
                  mb="8px"
                >
                  <Typography
                    variant="ol"
                    color="black"
                    ml="8px"
                  >
                    { I18n.t("employee_updates.selected", {
                      count: getCheckedRowsCount(),
                    }) }
                  </Typography>
                </Box>
              </IconButton>
              <IconButton
                onClick={ handleDeselectAll }
                aria-label={ I18n.t("employee_updates.deselect employees") }
              >
                <Box
                  display="flex"
                  flexDirection="row"
                  mr="16px"
                  ml="8px"
                  mt="8px"
                  mb="8px"
                >
                  <Typography
                    variant="ol"
                    color="green"
                    ml="8px"
                  >
                    { I18n.t("employee_updates.deselectEmployees", {
                      count: getCheckedRowsCount(),
                    }) }
                  </Typography>
                </Box>
              </IconButton>
              <IconButton
                onClick={ handleInvite }
                aria-label={ I18n.t("employee_updates.inviteToOnlinePayslips") }
              >
                <Box
                  display="flex"
                  flexDirection="row"
                  mr="16px"
                  ml="8px"
                  mt="8px"
                  mb="8px"
                >
                  <Icon type="email" color="green" />
                  <Typography
                    variant="ol"
                    color="green"
                    ml="8px"
                  >
                    { I18n.t("employee_updates.inviteToOnlinePayslips") }
                  </Typography>
                </Box>
              </IconButton>
              <IconButton
                onClick={ handleAddMessage }
                aria-label={ I18n.t("employee_updates.addOrRemovePayslipMessage") }
              >
                <Box
                  display="flex"
                  flexDirection="row"
                  mr="16px"
                  ml="8px"
                  mt="8px"
                  mb="8px"
                >
                  <Icon type="chat_notes" color="green" />
                  <Typography
                    variant="ol"
                    color="green"
                    ml="8px"
                  >
                    { I18n.t("employee_updates.addOrRemovePayslipMessage") }
                  </Typography>
                </Box>
              </IconButton>
              <IconButton
                onClick={ handleAddFinishDate }
                aria-label={ I18n.t("employee_updates.addFinishDate") }
              >
                <Box
                  display="flex"
                  flexDirection="row"
                  mr="16px"
                  ml="8px"
                  mt="8px"
                  mb="8px"
                >
                  <Icon type="calendar_pay_date" color="green" />
                  <Typography
                    variant="ol"
                    color="green"
                    ml="8px"
                  >
                    { I18n.t("employee_updates.addFinishDate") }
                  </Typography>
                </Box>
              </IconButton>
              <IconButton
                onClick={ handleUpdateBank }
                aria-label={ I18n.t("employee_updates.addOrUpdateBankAccount") }
              >
                <Box
                  display="flex"
                  flexDirection="row"
                  mr="16px"
                  ml="8px"
                  mt="8px"
                  mb="8px"
                >
                  <Icon type="bank" color="green" />
                  <Typography
                    variant="ol"
                    color="green"
                    ml="8px"
                  >
                    { I18n.t("employee_updates.addOrUpdateBankAccount") }
                  </Typography>
                </Box>
              </IconButton>
              <IconButton
                onClick={ handleChangePaymentMethod }
                aria-label={ I18n.t("employee_updates.changePaymentMethod") }
              >
                <Box
                  display="flex"
                  flexDirection="row"
                  mr="16px"
                  ml="8px"
                  mt="8px"
                  mb="8px"
                >
                  <Icon type="money_bag" color="green" />
                  <Typography
                    variant="ol"
                    color="green"
                    ml="8px"
                  >
                    { I18n.t("employee_updates.changePaymentMethod") }
                  </Typography>
                </Box>
              </IconButton>
              <IconButton
                onClick={ handleExitBulkActions }
                aria-label={ I18n.t("employee_updates.exitBulkActions") }
              >
                <Box
                  display="flex"
                  flexDirection="row"
                  mr="16px"
                  ml="8px"
                  mt="8px"
                  mb="8px"
                >
                  <Icon type="close" color="green" />
                  <Typography
                    variant="ol"
                    color="green"
                    ml="8px"
                  >
                    { I18n.t("employee_updates.exitBulkActions") }
                  </Typography>
                </Box>
              </IconButton>
            </Box>
          </Box>
          <FlatTable
            footer={
              <Pager
                totalRecords={ employees.length }
                currentPage={ currentPage }
                pageSize={ pageSize }
                onPagination={ (next, size) => handlePagination(next, size) }
                showPageSizeSelection
                pageSizeSelectionOptions={[
                  { id: "25", name: 25 },
                  { id: "50", name: 50 },
                ]}
              />
            }
          >
            <FlatTableHead>
              <FlatTableRow>
                <FlatTableHeader>
                  <Box
                    alignItems="center"
                    display="flex"
                    justifyContent="space-between"
                  >
                    { I18n.t("employee_updates.select") }
                  </Box>
                </FlatTableHeader>
                {[
                  "name",
                  "surname",
                  "payCycle",
                  "paymentMethod",
                  "payDocumentPreference",
                  "payslipMessage",
                  "status",
                ].map((column) => (
                  <FlatTableHeader key={ column } align="left">
                    <Box
                      alignItems="center"
                      display="flex"
                      justifyContent="space-between"
                      width="100%"
                    >
                      <Box>
                        { I18n.t(`employee_updates.${column}`) }
                      </Box>
                      <Sort
                        accessibleName={ `Sort ${column} in ${sortType} order` }
                        onClick={ () => handleSortClick(column) }
                        sortType={ sortValue === column ? sortType : "none" }
                      />
                  </Box>
                  </FlatTableHeader>
                ))}
              </FlatTableRow>
            </FlatTableHead>
            <FlatTableBody>
              {
                paginatedEmployees.map((employee, index) => (
                  <FlatTableRow
                    key={ employee.id }
                    selected={ selectedRow === employee.id }
                    onClick={ () => handleRowClick(employee.id) }
                    onDoubleClick={ () => handleRowDoubleClick(employee.id) }
                    bgColor={ index%2==1? "#F2F5F6" : undefined }
                  >
                    <FlatTableCell>
                      <Checkbox
                        checked={ !!checkedRows[employee.id] }
                        onChange={ handleCheckboxChange(employee.id) }
                        label=""
                      />
                    </FlatTableCell>
                    <FlatTableCell>{ employee.name }</FlatTableCell>
                    <FlatTableCell>{ employee.surname }</FlatTableCell>
                    <FlatTableCell>{ employee.payCycle }</FlatTableCell>
                    <FlatTableCell>{ employee.paymentMethod }</FlatTableCell>
                    <FlatTableCell>
                      { employee.payDocumentPreference }
                    </FlatTableCell>
                    <FlatTableCell>{ employee.payslipMessage }</FlatTableCell>
                    <FlatTableCell>
                      { !employee.bankAccountDetails && (
                        <Pill
                          pillRole="status"
                          colorVariant="negative"
                          aria-label={ I18n.t("employee_updates.missingBankAccountDetails") }
                        >
                          { I18n.t("employee_updates.missingBankAccountDetails") }
                        </Pill>
                      ) }
                    </FlatTableCell>
                  </FlatTableRow>
                ))
              }
            </FlatTableBody>
          </FlatTable>
        </Box>
      </Box>
    </CarbonProvider>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  employees: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      name: PropTypes.string.isRequired,
      surname: PropTypes.string.isRequired,
      payCycle: PropTypes.string.isRequired,
      paymentMethod: PropTypes.string.isRequired,
      payDocumentPreference: PropTypes.string.isRequired,
      payslipMessage: PropTypes.string.isRequired,
      status: PropTypes.string,
    })
  ).isRequired,
};

export default App;

import I18n from 'i18n-js';

I18n.translations = {
  en: {
    employee_updates: {
      employees: "Employees",
      createAndManage: "Create and manage your employee records.",
      selected: "%{count} selected",
      deselectEmployees: "Deselect %{count} employees",
      inviteToOnlinePayslips: "Invite to Online Payslips",
      addOrRemovePayslipMessage: "Add or remove Payslip Message",
      addFinishDate: "Add finish date",
      addOrUpdateBankAccount: "Add or update bank account",
      changePaymentMethod: "Change Payment Method",
      exitBulkActions: "Exit Bulk Actions",
      select: 'Select',
      name: 'Name',
      surname: 'Surname',
      payCycle: 'Pay Cycle',
      paymentMethod: 'Payment Method',
      payDocumentPreference: 'Pay Document Preference',
      payslipMessage: 'Payslip Message',
      status: 'Status',
      missingBankAccountDetails: 'Missing bank account details',
    }
  }
};

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 employees = [
  {
    id: '550e8400-e29b-41d4-a716-446655440000',
    name: 'Jamie',
    surname: 'Briggs',
    payCycle: 'Monthly',
    paymentMethod: 'Salary payments',
    payDocumentPreference: 'Online',
    payslipMessage: 'Yes',
    status: ''
  },
  {
    id: '6f1e8e0e-8c8b-4d3b-9b3e-2d9f8e8e8e8e',
    name: 'Katherine',
    surname: 'Harper',
    payCycle: 'Monthly',
    paymentMethod: 'Salary payments',
    payDocumentPreference: 'Online',
    payslipMessage: 'No',
    status: ''
  },
  {
    id: '123e4567-e89b-12d3-a456-426614174000',
    name: 'David',
    surname: 'Lawson',
    payCycle: 'Monthly',
    paymentMethod: 'Salary payments',
    payDocumentPreference: 'Online',
    payslipMessage: 'No',
    status: ''
  },
  {
    id: '9b2d7a6e-4f3b-9f8e-8e8e-8e8e8e8e8e8e',
    name: 'Cameron',
    surname: 'Spencer',
    payCycle: 'Monthly',
    paymentMethod: 'Salary payments',
    payDocumentPreference: 'Online',
    payslipMessage: 'No',
    status: ''
  },
  {
    id: '3f2e1d4c-5b6a-7c8d-9e0f-1a2b3c4d5e6f',
    name: 'Hope',
    surname: 'Owen',
    payCycle: 'Monthly',
    paymentMethod: 'Salary payments',
    payDocumentPreference: 'Online',
    payslipMessage: 'No',
    status: ''
  },
  {
    id: '7e8f9a0b-1c2d-3e4f-5a6b-7c8d9e0f1a2b',
    name: 'Hana',
    surname: 'Murphy',
    payCycle: 'Monthly',
    paymentMethod: 'Salary payments',
    payDocumentPreference: 'Online',
    payslipMessage: 'No',
    status: ''
  },
  {
    id: '8e8e8e8e-8e8e-8e8e-8e8e-8e8e8e8e8e8e',
    name: 'Shannon',
    surname: 'Davies',
    payCycle: 'Monthly',
    paymentMethod: 'Salary payments',
    payDocumentPreference: 'Online',
    payslipMessage: 'No',
    status: ''
  },
  {
    id: '4d3b9b3e-2d9f-8e8e-8e8e-8e8e8e8e8e8e',
    name: 'Charlie',
    surname: 'Nicholson',
    payCycle: 'Monthly',
    paymentMethod: 'Salary payments',
    payDocumentPreference: 'Online',
    payslipMessage: 'Yes',
    status: ''
  },
];

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


.thePeoplesPension {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.name {
    flex: 1;
    position: relative;
    text-transform: capitalize;
}
.nameWrapper {
    align-self: stretch;
    background-color: #335c6d;
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
    padding: 10px;
    box-sizing: border-box;
    color: #fff;
}
.itemCell {
    align-self: stretch;
    background-color: #fff;
    border-bottom: 1px solid #b6c8d9;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
    padding: 10px;
}
.itemCell1 {
    align-self: stretch;
    background-color: #f2f5f6;
    border-bottom: 1px solid #b6c8d9;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
    padding: 10px;
}
.column {
    flex: 1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.workerCategory {
    flex: 1;
    position: relative;
}
.itemCell3 {
    align-self: stretch;
    background-color: #fff;
    border-bottom: 1px solid #b6c8d9;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
}
.itemCell4 {
    align-self: stretch;
    background-color: #f2f5f6;
    border-bottom: 1px solid #b6c8d9;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
}
.erContributions {
    flex: 1;
    position: relative;
    line-height: 130%;
    font-weight: 500;
}
.table {
    width: 1373px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #b6c8d9;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 14px;
}
.thePeoplesPensionMonth2Parent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}
.textHere {
    position: relative;
    letter-spacing: 0.5px;
    line-height: 16px;
    font-weight: 500;
}
.button {
    border-radius: 20px;
    border: 1px solid #007e45;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px 24px;
}
.or {
    width: 16px;
    position: relative;
    text-transform: capitalize;
    font-family: Inter;
    color: #000;
    text-align: left;
    display: inline-block;
    flex-shrink: 0;
}
.button1 {
    width: 141px;
    border-radius: 20px;
    background-color: #007e45;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px 24px;
    box-sizing: border-box;
    color: #fff;
}
.buttonParent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
    font-size: 14px;
    color: #007e45;
    font-family: Roboto;
}
.frameParent {
    width: 100%;
    position: relative;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #bdd9e7;
    box-sizing: border-box;
    height: 357px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 20px 30px;
    gap: 20px;
    text-align: left;
    font-size: 16px;
    color: #000;
    font-family: 'Sage UI';
}

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

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

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

              							Name

Patrick Scott

Macie Bernstein

Joanna Huff

              							Worker Category

Eligible

Eligible

Eligible

              							Pensionable Earnings

3000.00

3000.00

3000.00

              							Ee Contributions

105.00

105.00

105.00

              							AVC Contributions

0.00

0.00

0.00

Er Contributions

175.01

175.01

175.01

              							Enrolment Date

06/05/2024

10/04/2024

04/04/2024

Manage Pension File

or

Submit online

);
};

export default Frame;

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

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

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

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

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

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

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

  return (
    <CarbonProvider validationRedesignOptIn>
      <Box padding="20px">
        <div style={{ border: '1px solid #bdd9e7', padding: '20px', borderRadius: '8px', backgroundColor: '#fff' }}>
          <Box padding="10px">
            <Typography variant="strong" mb="8px" aria-label={ i18n.t('thePeoplesPension') }>
              { i18n.t('thePeoplesPension') }
            </Typography>
            <FlatTable aria-label="Pension Table" mt="10px">
              <FlatTableHead>
                <FlatTableRow>
                  <FlatTableHeader>{ i18n.t('name') }</FlatTableHeader>
                  <FlatTableHeader>{ i18n.t('workerCategory') }</FlatTableHeader>
                  <FlatTableHeader>{ i18n.t('pensionableEarnings') }</FlatTableHeader>
                  <FlatTableHeader>{ i18n.t('eeContributions') }</FlatTableHeader>
                  <FlatTableHeader>{ i18n.t('avcContributions') }</FlatTableHeader>
                  <FlatTableHeader>{ i18n.t('erContributions') }</FlatTableHeader>
                  <FlatTableHeader>{ i18n.t('enrolmentDate') }</FlatTableHeader>
                </FlatTableRow>
              </FlatTableHead>
              <FlatTableBody>
                { data.map((row, index) => (
                  <FlatTableRow
                    key={index}
                    onClick={() => handleRowClick(index)}
                    selected={selectedRow === index}
                  >
                    <FlatTableCell>{ row.name }</FlatTableCell>
                    <FlatTableCell>{ row.workerCategory }</FlatTableCell>
                    <FlatTableCell>{ row.pensionableEarnings }</FlatTableCell>
                    <FlatTableCell>{ row.eeContributions }</FlatTableCell>
                    <FlatTableCell>{ row.avcContributions }</FlatTableCell>
                    <FlatTableCell>{ row.erContributions }</FlatTableCell>
                    <FlatTableCell>{ row.enrolmentDate }</FlatTableCell>
                  </FlatTableRow>
                ))}
              </FlatTableBody>
            </FlatTable>
            <Box display="flex" justifyContent="flex-end" mt="20px" gap="20px">
              <Button buttonType="secondary" aria-label={ i18n.t('managePensionFile') } onClick={ handleManagePensionFileClick }>
                { i18n.t('managePensionFile') }
              </Button>
              <Typography variant="p" aria-label={ i18n.t('or') } mt="10px">
                { i18n.t('or') }
              </Typography>
              <Button buttonType="primary" aria-label={i18n.t('submitOnline')} onClick={ handleSubmitOnlineClick }>
                { i18n.t('submitOnline') }
              </Button>
            </Box>
          </Box>
        </div>
      </Box>
    </CarbonProvider>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  data: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      workerCategory: PropTypes.string.isRequired,
      pensionableEarnings: PropTypes.string.isRequired,
      eeContributions: PropTypes.string.isRequired,
      avcContributions: PropTypes.string.isRequired,
      erContributions: PropTypes.string.isRequired,
      enrolmentDate: PropTypes.string.isRequired,
    })
  ).isRequired,
};

export default App;

import I18n from 'i18n-js';

I18n.translations = {
  en: {
    thePeoplesPension: 'The People’s Pension - Month 2 (Pay Reference Period 06 May 2023 to 05 Jun 2023)',
    name: 'Name',
    workerCategory: 'Worker Category',
    pensionableEarnings: 'Pensionable Earnings',
    eeContributions: 'Ee Contributions',
    avcContributions: 'AVC Contributions',
    erContributions: 'Er Contributions',
    enrolmentDate: 'Enrolment Date',
    managePensionFile: 'Manage Pension File',
    or: 'Or',
    submitOnline: 'Submit online',
  },
};

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

export default I18n;

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

import App from "./app";

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

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


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

.autoEnrolment {
    width: 138px;
    position: relative;
    display: inline-block;
}
.asAUk {
    margin-block-start: 0;
    margin-block-end: 10px;
}
.theDateYou {
    margin: 0;
}
.youveReachedYourContainer {
    width: 552px;
    position: relative;
    font-size: 13px;
    line-height: 21px;
    font-weight: 500;
    display: inline-block;
    height: 48px;
    flex-shrink: 0;
}
.pensions1 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}
.dutiesStartDate1 {
    width: 120px;
    position: relative;
    line-height: 21px;
    font-weight: 500;
    display: inline-block;
    flex-shrink: 0;
}
.basevalidationbar {
    align-self: stretch;
    width: 2px;
}
.inputtext1 {
    position: relative;
    line-height: 150%;
}
.inputtext {
    flex: 1;
    height: 21px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.px {
    align-self: stretch;
    width: 8px;
}
.calendarIcon {
    width: 16px;
    position: relative;
    height: 16px;
}
.icon {
    width: 32px;
    background-color: rgba(0, 0, 0, 0);
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0px 8px 0px 0px;
    box-sizing: border-box;
}
.containermain {
    flex: 1;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 0px 8px;
}
.containerfocus {
    align-self: stretch;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.inputboxbase {
    align-self: stretch;
    width: 146px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    color: rgba(0, 0, 0, 0.9);
}
.label {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.majorButton {
    border-radius: 32px;
    border: 2px solid #007e45;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 16px;
    min-height: 32px;
    color: #007e45;
}
.dutiesStartDate {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
    font-size: 14px;
    color: #000;
}
.pensionsChild {
    align-self: stretch;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    height: 1px;
    flex-shrink: 0;
}
.findOutMore {
    align-self: stretch;
    position: relative;
    font-size: 13px;
    text-decoration: underline;
    line-height: 21px;
    color: #007e45;
}
.pensions {
    width: 100%;
    position: relative;
    background-color: #fff;
    border: 1px solid #ccd6db;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 30px;
    gap: 16px;
    text-align: left;
    font-size: 16px;
    color: #3c424f;
    font-family: 'Sage UI';
}

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

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

        				Pensions

As a UK employer, you need to enrol your staff into a workplace pension.

The date you employ your first member of staff is known as your Duties Start Date.

Duties start date

10/09/2020

Set Duties Start Date

      			Find out more about automatic enrolment (opens in a new tab)

);
};

export default Pensions;

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 Button from 'carbon-react/lib/components/button';
import DateInput from 'carbon-react/lib/components/date';
import Link from 'carbon-react/lib/components/link';
import Typography from 'carbon-react/lib/components/typography';
import Pod from 'carbon-react/lib/components/pod';
import './i18n';
import I18n from 'i18n-js';

const App = ({ locale = 'en', data }) => {
  I18n.locale = locale;
  const [state, setState] = useState(data.dutiesStartDate);
  const setValue = (ev) => {
    setState(ev.target.value.formattedValue);
  };

  const setDutiesClick = () => {
    alert('Set Duties Start Date button clicked');
  };

  return (
    <CarbonProvider
      theme={ sageTheme }
      validationRedesignOptIn
    >
      <Box
        p='20px'
        ml='400px'
        mr='600px'
      >
        <Pod size="small">
          <Box
            padding="30px"
            border="1px solid #ccd6db"
            backgroundColor="#fff"
            display="flex"
            flexDirection="column"
            gap="16px"
          >
            <Box
              display="flex"
              flexDirection="column"
              gap="16px"
            >
              <Typography variant="h3">
                {I18n.t('title')}
              </Typography>
              <Box mb='-10px'>
                <Typography variant='h5' mb='10px'>
                  {I18n.t('description1')}
                </Typography>
                <Typography variant='h5' mb='10px'>
                  {I18n.t('description2')}
                </Typography>
              </Box>
            </Box>
            <Box
              display="flex"
              alignItems="center"
              gap="13px"
            >
              <DateInput
                label={I18n.t('dutiesStartDate')}
                labelInline
                labelWidth={50}
                value={String(state)}
                onChange={setValue}
                aria-label={ I18n.t('setDutiesStartDateLabel') }/>
              <Button
                buttonType="secondary"
                onClick={ setDutiesClick }
                aria-label={ I18n.t('dateField') }
                data-role='set-duties-start-date-input'>
                {I18n.t('setDutiesStartDate')}
              </Button>
            </Box>
            <div
              style={{
                border: '1px solid #e0e0e0',
                borderRadius: "borderRadius000"
              }}
            />
            <Link href="#" target="_blank">
              {I18n.t('findOutMore')}
            </Link>
          </Box>
        </Pod>
      </Box>
    </CarbonProvider>
  );
};

App.propTypes = {
  data: PropTypes.shape({
    dutiesStartDate: PropTypes.string.isRequired,
  }).isRequired,
};

export default App;

import I18n from 'i18n-js';

I18n.translations = {
  en: {
    title: 'Pensions',
    description1: 'As a UK employer, you need to enrol your staff into a workplace pension.',
    description2: 'The date you employ your first member of staff is known as your Duties Start Date.',
    dutiesStartDate: 'Duties start date',
    setDutiesStartDate: 'Set Duties Start Date',
    setDutiesStartDateLabel: 'Set Duties Start Date Label',
    dateField: 'Date Input Label',
    findOutMore: 'Find out more about automatic enrolment (opens in a new tab)',
  },
};

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

import App from "./app";

const dummyData = {
  dutiesStartDate: '10/09/2020',
};

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


.dialogframe {
	width: 100%;
	position: relative;
	background-color: #fff;
	border: 1px solid #1883d7;
	box-sizing: border-box;
	height: 752px;
}

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

const DialogFrame:FunctionComponent = () => {
  	return (
    		<div className={styles.dialogframe} />);
};

export default DialogFrame;

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 Typography from 'carbon-react/lib/components/typography';
import Form from "carbon-react/lib/components/form";
import Button from "carbon-react/lib/components/button";
import Box from "carbon-react/lib/components/box";
import LoaderBar from "carbon-react/lib/components/loader-bar";
import sageTheme from "carbon-react/lib/style/themes/sage";
import "./i18n";
import I18n from "i18n-js";

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

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

  const handlePublishPayslips = () => {
    setIsLoading(true);
    setIsCancelDisabled(true);
    setTimeout(() => {
      setIsLoading(false);
      setIsCancelDisabled(false);
      alert("Payslips published successfully!");
    }, 5000);
  };

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

  return (
    <CarbonProvider theme={ sageTheme }>
      <Dialog
        open={ isOpen }
        size="extra-large"
        title={ I18n.t("uploadPayslipsTitle") }
        subtitle={ I18n.t("uploadPayslipsDescription") }
      >
        <Form
          stickyFooter
          footerPadding={ { pt: 2 } }
          leftSideButtons={
            <Button
              onClick={ handleCancelButtonClick }
              buttonType="primary"
              mr="730px"
              disabled={ isCancelDisabled }
            >
              { I18n.t("cancel") }
            </Button>
          }
          rightSideButtons={
            <Box display="flex">
              <Button onClick={ handlePublishPayslips } buttonType="primary">
                { I18n.t("publishPayslips") }
              </Button>
            </Box>
          }
        >
          <Box
            p="230px"
            mx="100px"
            flexDirection="column"
            justifyContent="center"
            alignItems="center"
          >
            { isLoading ? (
              <Box>
                <Typography variant="span">{ I18n.t("publishingPayslips") }</Typography>
                <LoaderBar size="large" />
              </Box>
            ) : (
              <Box ml="70px">{I18n.t("uploadPayslipsLoader")}</Box>
            )}
          </Box>
        </Form>
      </Dialog>
    </CarbonProvider>
  );
};

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

export default App;

import I18n from 'i18n-js';

I18n.translations = {
  en: {
    uploadPayslipsTitle: "Upload Payslips for current pay period",
    uploadPayslipsDescription: "If you’re processing your employees’ pay for the current pay period, you can upload their payslips now.",
    cancel: "Cancel",
    publishPayslips: "Publish Payslips",
    uploadPayslipsLoader: "Please upload the payslips.",
    publishingPayslips: "Publishing payslips. Please wait...",
  },
};

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

export default I18n;

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

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


.stepFlow {
    align-self: stretch;
    flex: 1;
}
.asterisk {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.indicatesARequired {
    position: relative;
    line-height: 150%;
    color: rgba(0, 0, 0, 0.65);
}
.requiredValue {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}
.titleHint {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.dot {
    width: 10px;
    position: relative;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.9);
    height: 10px;
}
.circle {
    width: 20px;
    border-radius: 50px;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 2px;
}
.clientcreationclientplacement {
    flex: 1;
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.newFolderOn {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.circle1 {
    width: 20px;
    border-radius: 50px;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 20px;
}
.radioButtonList {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
}
.radioButtonVertical {
    width: 276px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.whereWouldYouLikeToPlace {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: rgba(0, 0, 0, 0.9);
}
.placeYourClient {
    align-self: stretch;
    background-color: rgba(255, 255, 255, 0.01);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}
.form {
    width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 40px;
    box-sizing: border-box;
}
.rightSpacer {
    align-self: stretch;
    flex: 0.9847;
}
.stepFlowParent {
    align-self: stretch;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
}
.pageLayout {
    align-self: stretch;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.addEntityStepFlowMaster1 {
    position: absolute;
    width: 100%;
    top: 141px;
    right: 0%;
    left: 0%;
    background-color: #fff;
    height: 687px;
    overflow-y: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px 0px 32px;
    box-sizing: border-box;
}
.div {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    box-shadow: 0px -4px 12px rgba(0, 20, 30, 0.05);
    background-color: #fff;
}
.shadow {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: #fff;
    height: 72px;
    z-index: 0;
}
.previous {
    flex: 1;
    height: 40px;
    z-index: 1;
}
.cancelButton {
    border-radius: 32px;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    z-index: 2;
}
.nextButton {
    border-radius: 32px;
    background-color: #007e45;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    cursor: pointer;
    z-index: 3;
    color: #fff;
}
.sfaFooterHorizontaldefault {
    position: absolute;
    width: 100%;
    right: 0%;
    bottom: 0px;
    left: 0%;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 16px 32px;
    box-sizing: border-box;
    gap: 16px;
    color: #007e45;
}
.mainGoal {
    align-self: stretch;
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.title {
    align-self: stretch;
    position: relative;
    font-size: 24px;
    line-height: 125%;
    color: rgba(0, 0, 0, 0.9);
}
.header1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.closeIcon {
    width: 20px;
    position: relative;
    height: 20px;
}
.icon {
    width: 32px;
    border-radius: 4px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.wrapper {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    z-index: 0;
}
.label {
    align-self: stretch;
    position: relative;
    line-height: 150%;
}
.sequenceLineIcon {
    align-self: stretch;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.step1 {
    flex: 1;
    height: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.progressIndicators {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}
.progressTracker {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    max-width: 750px;
    z-index: 1;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.9);
}
.dividerOnLight {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    right: 0px;
    bottom: 0px;
    left: 0px;
    max-width: 100%;
    overflow: hidden;
    height: 1px;
    flex-shrink: 0;
    z-index: 2;
}
.header {
    flex: 1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px 24px 20px;
    position: relative;
    gap: 12px;
}
.stepFlow1 {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.addEntityHeaders {
    position: absolute;
    width: 100%;
    top: 0px;
    right: 0%;
    left: 0%;
    border-bottom: 1px solid #d9e0e4;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    color: rgba(0, 0, 0, 0.55);
}
.addEntityDialogMaster {
    width: 100%;
    position: relative;
    background-color: #fff;
    height: 900px;
    overflow-y: auto;
    text-align: left;
    font-size: 14px;
    color: #cb374a;
    font-family: 'Sage UI';
}

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

const AddEntityDialogMASTER:FunctionComponent = () => {

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

  	return (

{`* `}

indicates a required value.

In a new folder on my client list

In an existing folder on my client list

Cancel

Next

Add client

                								Place your client

Step 1 of 6

);
};

export default AddEntityDialogMASTER;

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

import React, { useCallback, useState } from 'react';
import CarbonProvider from 'carbon-react/lib/components/carbon-provider';
import Dialog from 'carbon-react/lib/components/dialog';
import Form from 'carbon-react/lib/components/form';
import { RadioButton, RadioButtonGroup } from 'carbon-react/lib/components/radio-button';
import Button from 'carbon-react/lib/components/button';
import Typography from 'carbon-react/lib/components/typography';
import { StepFlow } from 'carbon-react/lib/components/step-flow';
import Box from 'carbon-react/lib/components/box';
import { i18n } from './i18n';

const App = ({locale = 'en' }) => {
  const [isOpen, setIsOpen] = useState(true);

  const onNextButtonContainerClick = useCallback(() => {
    alert('Next button clicked');
  }, []);

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

  const t = i18n[locale];

  return (
    <CarbonProvider validationRedesignOptIn>
      <Dialog
        open={isOpen}
        onCancel={onCancelButtonClick}
        size="large"
      >
        <Form stickyFooter
          leftSideButtons={<Button onClick={onCancelButtonClick}>{t.cancel}</Button>}
          saveButton={<Button onClick={onNextButtonContainerClick} buttonType="primary" type="submit">{t.next}</Button>}>
          <Box width="60%" marginTop="0px">
            <StepFlow
              category={t.addClient}
              title={t.placeYourClient}
              currentStep={1}
              totalSteps={6}
              showProgressIndicator
              showCloseIcon={false}
              titleVariant="h2"
            />
          </Box>
          <div style={{ borderTop: '1px solid #d9d9d9', margin: '20px 0' }}>
            <Box display="flex" justifyContent="center" alignItems="center" height="15vh">
              <Box>
                <Typography variant="p">
                  <Typography color='red' variant="b">*</Typography> {t.requiredValue}
                </Typography>
                <RadioButtonGroup
                  name="radio-group"
                  onChange={() => console.log("change")}
                >
                  <RadioButton id="radio-1" label={t.newFolder} value="new_folder" />
                  <RadioButton id="radio-2" label={t.existingFolder} value="existing_folder" />
                </RadioButtonGroup>
              </Box>
            </Box>
          </div>
          <Box height="270px" bg="white" />
        </Form>
      </Dialog>
    </CarbonProvider>
  );
};

export default App;

export const i18n = {
  en: {
    addClient: 'Add client',
    placeYourClient: 'Place your client',
    requiredValue: 'indicates a required value.',
    newFolder: 'In a new folder on my client list',
    existingFolder: 'In an existing folder on my client list',
    next: 'Next',
    cancel: 'Cancel'
  }
};

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 />
  </CarbonProvider>,
  document.getElementById("app")
);