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

.focusBorder {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    height: 100%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: none;
    z-index: 0;
}
.inputtext {
    flex: 1;
    position: relative;
    line-height: 150%;
}
.paragraph {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 1;
}
.cpHighlight {
    width: 4px;
    position: absolute;
    margin: 0 !important;
    height: 100%;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background: linear-gradient(180deg, #13a038, #0092db 51%, #8f49fe);
    overflow: hidden;
    z-index: 1;
}
.mandatoryLabel {
    align-self: stretch;
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.labelSet {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.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: 0px 8px;
    gap: 4px;
}
.inputContainer1 {
    align-self: stretch;
    border-radius: 4px;
    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;
}
.dropdownSelectStandard {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.label {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.majorButton {
    border-radius: 32px;
    background-color: #006738;
    border: 2px solid #007e45;
    box-sizing: border-box;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 16px;
    gap: 8px;
    min-height: 32px;
    z-index: 0;
}
.container {
    border-radius: 50px;
    background-color: #bb4f00;
    border: 2px solid #fff;
    box-sizing: border-box;
    height: 24px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 4px;
    min-width: 24px;
    max-width: 36px;
}
.badge {
    margin: 0 !important;
    position: absolute;
    top: -12px;
    right: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    text-align: center;
    font-size: 12px;
}
.examplebadgeOnFilterButton {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    position: relative;
    color: #fff;
}
.dropdownSelectStandardParent {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 16px;
}
.flexibleTileTaskListInner {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0px 16px;
    z-index: 1;
}
.icon {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.buttonAi {
    border-radius: 16px;
    border: 2px solid #13a038;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    gap: 8px;
    min-height: 32px;
}
.buttonAiWrapper {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0px 16px;
    z-index: 0;
}
.flexibleTileTaskList {
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid #ccd6db;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 16px 0px;
    gap: 16px;
    z-index: 0;
}
.copilotControls {
    width: 678px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    z-index: 2;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.9);
}
.paragraph1 {
    width: 456px;
    height: 48px;
    display: none;
    z-index: 3;
}
.paragraph2 {
    width: 456px;
    height: 48px;
    display: none;
    z-index: 4;
}
.paragraph3 {
    width: 456px;
    height: 48px;
    display: none;
    z-index: 5;
}
.paragraph4 {
    width: 456px;
    height: 48px;
    display: none;
    z-index: 6;
}
.paragraph5 {
    width: 456px;
    height: 48px;
    display: none;
    z-index: 7;
}
.linkPreview {
    width: 458px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    box-sizing: border-box;
    height: 138px;
    display: none;
    z-index: 8;
}
.linkPreview1 {
    width: 458px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    box-sizing: border-box;
    height: 138px;
    display: none;
    min-height: 120px;
    z-index: 9;
}
.linkPreview2 {
    width: 458px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    box-sizing: border-box;
    height: 138px;
    display: none;
    min-height: 120px;
    z-index: 10;
}
.inputContainer {
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #777;
    box-sizing: border-box;
    width: 712px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px;
    gap: 16px;
    font-size: 16px;
}
.ghostContainer {
    width: 0px;
    position: relative;
    height: 0px;
}
.paddingTop {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 16px 0px 0px;
}
.paddingLeft {
    height: 0px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 0px 0px 24px;
    box-sizing: border-box;
}
.checkbox {
    width: 20px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 20px;
}
.labelSet4 {
    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;
}
.checkbox3 {
    width: 20px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.checkboxList {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
}
.checkboxGroupVertical {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.outerBorder {
    position: absolute;
    height: calc(100% + 12px);
    width: calc(100% + 12px);
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
    border-radius: 4px;
    border: 6px solid #000;
    box-sizing: border-box;
}
.innerBorder {
    position: absolute;
    height: calc(100% + 6px);
    width: calc(100% + 6px);
    top: -3px;
    right: -3px;
    bottom: -3px;
    left: -3px;
    border-radius: 4px;
    border: 3px solid #ffbc19;
    box-sizing: border-box;
}
.focusBorder1 {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    height: 100%;
    top: 100%;
    right: 0%;
    bottom: -100%;
    left: 0%;
    border-radius: 4px;
    z-index: 0;
}
.checkbox12 {
    width: 20px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
}
.swappableLayout {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
}
.paddingRight {
    height: 0px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 24px 0px 0px;
    box-sizing: border-box;
}
.horizontalPaddingLayout {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.paddingBottom {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 0px 0px 16px;
}
.verticalPaddingLayout {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.bar {
    width: 6px;
    flex: 1;
    position: relative;
    border-radius: 999px;
    background-color: #777;
}
.space {
    width: 6px;
    position: relative;
    height: 88px;
}
.fill {
    align-self: stretch;
    width: 8px;
    background-color: #f3f3f3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 1px;
    box-sizing: border-box;
}
.scrollbarStandard {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 2px;
}
.layoutSwappableInstance {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
}
.popoverMenu {
    align-self: stretch;
    flex: 1;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 2px 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.popoverWrapper {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.buttonPopoverCustom {
    position: absolute;
    top: -235px;
    left: 0px;
    width: 360px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.component4 {
    position: absolute;
    top: 148px;
    left: 318px;
    box-shadow: 0px 5px 5px rgba(0, 20, 30, 0.2), 0px 10px 10px rgba(0, 20, 30, 0.1);
    width: 360px;
    height: 363px;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.9);
}
.countWrapper {
    position: absolute;
    top: 422px;
    left: 0px;
    width: 480px;
    height: 29px;
    display: none;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 8px 0px 0px;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.55);
}
.wrapper {
    width: 100%;
    position: relative;
    height: 592px;
    text-align: left;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.95);
    font-family: 'Sage UI';
}

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

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

{`Try changing the length and tone. `}

Tone

Formal

Length

Medium

Language

English (UK)

Select placeholders

2

Generate new draft

Fieldset 1

Invoice number

Customer balance

Customer business name

Customer contact name

Customer credit limit

{`<placeholder name>`}

{`<placeholder name>`}

{`<placeholder name>`}

Fieldset 2

{`<placeholder name>`}

{`<placeholder name>`}

{`<placeholder name>`}

{`<placeholder name>`}

{`<placeholder name>`}

{`<placeholder name>`}

{`<placeholder name>`}

{`<placeholder name>`}

200 characters left

);
};

export default Wrapper;

import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import i18n from 'i18n-js';
import './i18n.js';

import Box from 'carbon-react/lib/components/box';
import Button from 'carbon-react/lib/components/button';
import Image from 'carbon-react/lib/components/image';
import { Select, Option } from 'carbon-react/lib/components/select';
import Typography from 'carbon-react/lib/components/typography';
import PopoverContainer from 'carbon-react/lib/components/popover-container';
import Badge from 'carbon-react/lib/components/badge';
import Pod from 'carbon-react/lib/components/pod';
import { Checkbox, CheckboxGroup } from 'carbon-react/lib/components/checkbox';

const App = ({
  locale = 'en',
  toneOptions,
  lengthOptions,
  languageOptions,
  placeholderGroups
}) => {
  i18n.locale = locale;

  const [selectedTone, setSelectedTone] = useState(toneOptions[0].value);
  const [selectedLength, setSelectedLength] = useState(lengthOptions[0].value);
  const [selectedLanguage, setSelectedLanguage] = useState(languageOptions[0].value);

  const handleToneChange = useCallback((event) => {
    setSelectedTone(event.target.value);
  }, []);

  const handleLengthChange = useCallback((event) => {
    setSelectedLength(event.target.value);
  }, []);

  const handleLanguageChange = useCallback((event) => {
    setSelectedLanguage(event.target.value);
  }, []);

  const handleGenerateNewDraftClick = () => {
    alert(i18n.t("generateNewDraftClicked"));
  };

  const [selectedPlaceholders, setSelectedPlaceholders] = useState(() => {
    const initialSelected = {};
    placeholderGroups.forEach(group => {
      group.placeholders.forEach(placeholder => {
        if (placeholder.selected) {
          initialSelected[placeholder.id] = true;
        }
      });
    });
    return initialSelected;
  });

  const selectedCount = Object.keys(selectedPlaceholders).length;

  const handleCheckboxChange = (placeholderId, event) => {
    const checked = event.target.checked;
    setSelectedPlaceholders(prevSelected => {
      const newSelected = { ...prevSelected };
      if (checked) {
        newSelected[placeholderId] = true;
      } else {
        delete newSelected[placeholderId];
      }
      return newSelected;
    });
  };

  return (
    <Box width="980px" m="16px">
      <Box m="16px">
        <Typography variant='p'>{ i18n.t("lengthAndTone") }</Typography>
        <Pod
          border="1px solid #668494"
          borderRadius="8px"
          overflow="hidden"
          position="relative"
        >
          <Box
            position="absolute"
            height="100%"
            top="0"
            left="0"
            width="4px"
            background="linear-gradient(180deg, #13a038, #0092db 51%, #8f49fe)"
          />
          <Box padding="16px" paddingBottom="10px">
            <Box display="flex" flexDirection="row" gap="16px" alignItems="flex-end">
              <Box width="220px">
                <Select
                  label={ i18n.t('tone') }
                  value={ selectedTone }
                  onChange={ handleToneChange }
                  aria-label={ i18n.t('tone') }
                >
                  {
                    toneOptions.map((option) => (
                    <Option key={option.value} text={option.text} value={option.value} />
                  ))}
                </Select>
              </Box>
              <Box width="220px">
                <Select
                  label={ i18n.t('length') }
                  value={ selectedLength }
                  onChange={ handleLengthChange }
                  aria-label={ i18n.t('length') }
                >
                  {
                    lengthOptions.map((option) => (
                    <Option key={option.value} text={option.text} value={option.value} />
                  ))}
                </Select>
              </Box>
              <Box width="220px">
                <Select
                  label={ i18n.t('language') }
                  value={ selectedLanguage }
                  onChange={ handleLanguageChange }
                  aria-label={ i18n.t('language') }
                >
                  {
                    languageOptions.map((option) => (
                    <Option key={option.value} text={option.text} value={option.value} />
                  ))}
                </Select>
              </Box>
              <Box width="220px" display="flex" flexDirection="column" justifyContent="flex-end">
                <PopoverContainer
                  position="bottom"
                  alignment="end"
                  renderCloseComponent={ () => null }
                  renderOpenComponent={({
                    isOpen,
                    "data-element": dataElement,
                    onClick,
                    ref,
                    "aria-label": ariaLabel,
                    id,
                    "aria-expanded": ariaExpanded,
                    "aria-haspopup": ariaHasPopup
                  }) => (
                    <Badge counter={ selectedCount } color="--colorsSemanticNegative500">
                      <Button
                        buttonType="primary"
                        iconType={ isOpen ? "chevron_up" : "chevron_down" }
                        iconPosition="after"
                        data-element={ dataElement }
                        aria-label={ ariaLabel }
                        aria-haspopup={ ariaHasPopup }
                        aria-expanded={ ariaExpanded }
                        ref={ ref }
                        id={ id }
                        onClick={ onClick }
                        fullWidth
                      >
                        { i18n.t('selectPlaceholders') }
                      </Button>
                    </Badge>
                  )}
                >
                  <Box
                    maxHeight="275px"
                    overflow="auto"
                    p="8px"
                  >
                    {placeholderGroups.map((group, index) => (
                      <Box key={ index } mb="16px">
                        <Typography variant="p" mb="8px" fontWeight="bold">
                          {group.title}
                        </Typography>
                        <CheckboxGroup name={`group-${index}`}>
                          {group.placeholders.map((placeholder) => (
                            <Checkbox
                              id={`placeholder-${placeholder.id}`}
                              name={`placeholder-${placeholder.id}`}
                              label={ placeholder.label }
                              checked={ !!selectedPlaceholders[placeholder.id] }
                              onChange={ (event) => handleCheckboxChange(placeholder.id, event) }
                            />
                          ))}
                        </CheckboxGroup>
                      </Box>
                    ))}
                  </Box>
                </PopoverContainer>
              </Box>
            </Box>
            <Box mt="16px">
              <Button
                buttonType="gradient-grey"
                onClick={ handleGenerateNewDraftClick }
                iconPosition="before"
                borderColor="#13a038"
                aria-label={ i18n.t('generateNewDraft') }
                size="small"
              >
                <Image
                  alt=""
                  decorative
                  src="https://assets.sbc.sage.com/sbc.core.static.ui/1.32.0/static/product-icons/sbc_ai_star.svg"
                  width="20px"
                  height="20px"
                  marginRight="8px"
                />
                { i18n.t('generateNewDraft') }
              </Button>
            </Box>
          </Box>
        </Pod>
      </Box>
    </Box>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  toneOptions: PropTypes.arrayOf(
    PropTypes.shape({
      value: PropTypes.string.isRequired,
      text: PropTypes.string.isRequired,
    })
  ).isRequired,
  lengthOptions: PropTypes.arrayOf(
    PropTypes.shape({
      value: PropTypes.string.isRequired,
      text: PropTypes.string.isRequired,
    })
  ).isRequired,
  languageOptions: PropTypes.arrayOf(
    PropTypes.shape({
      value: PropTypes.string.isRequired,
      text: PropTypes.string.isRequired,
    })
  ).isRequired,
  placeholderGroups: PropTypes.arrayOf(
    PropTypes.shape({
      title: PropTypes.string.isRequired,
      placeholders: PropTypes.arrayOf(
        PropTypes.shape({
          id: PropTypes.number.isRequired,
          label: PropTypes.string.isRequired,
          selected: PropTypes.bool,
        })
      ).isRequired,
    })
  ).isRequired,
};

export default App;

import i18n from 'i18n-js';

i18n.translations = {
  en: {
    tone: 'Tone',
    length: 'Length',
    language: 'Language',
    selectPlaceholders: 'Select placeholders',
    generateNewDraft: 'Generate new draft',
    keepDraftClicked: 'Keep this draft button clicked',
    generateNewDraftClicked: 'Generate new draft button clicked',
    formal: 'Formal',
    medium: 'Medium',
    englishUK: 'English (UK)',
    lengthAndTone: 'Try changing the length and tone.'
  },
};

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 toneOptions = [
  { value: 'formal', text: 'Formal' },
  { value: 'informal', text: 'Informal' },
];

const lengthOptions = [
  { value: 'short', text: 'Short' },
  { value: 'medium', text: 'Medium' },
  { value: 'long', text: 'Long' },
];

const languageOptions = [
  { value: 'en-uk', text: 'English (UK)' },
  { value: 'fr-ca', text: 'French (Canada)' },
];

const placeholderGroups = [
  {
    title: 'Fieldset 1',
    placeholders: [
      { id: 1, label: 'Invoice number' },
      { id: 2, label: 'Customer balance' },
      { id: 3, label: 'Customer business name' },
      { id: 4, label: 'Customer contact name' },
      { id: 5, label: 'Customer credit limit' },
      { id: 6, label: '<placeholder name>' },
      { id: 7, label: '<placeholder name>' },    ]
  },
  {
    title: 'Fieldset 2',
    placeholders: [
      { id: 8, label: '<placeholder name>', selected: true },
      { id: 9, label: '<placeholder name>', selected: true },
      { id: 10, label: '<placeholder name>' },
      { id: 11, label: '<placeholder name>' },
      { id: 12, label: '<placeholder name>' },
      { id: 13, label: '<placeholder name>' },
      { id: 14, label: '<placeholder name>' },
      { id: 15, label: '<placeholder name>' },
      { id: 16, label: '<placeholder name>' }
    ]
  }
];

const container = document.getElementById("app");
const root = createRoot(container);

root.render(
  <CarbonProvider focusRedesignOptOut theme={ sageTheme }>
    <GlobalStyle />
    <App
      toneOptions={ toneOptions }
      lengthOptions={ lengthOptions }
      languageOptions={ languageOptions }
      placeholderGroups={ placeholderGroups }
    />
  </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;
}
.clientcreationcompliancedetai {
  	align-self: stretch;
  	position: relative;
  	line-height: 150%;
  	font-weight: 500;
}
.frameChild {
  	position: absolute;
  	top: 1px;
  	left: 1px;
  	border-radius: 4px 0px 0px 4px;
  	background-color: #fff;
  	border: 1px solid #668494;
  	box-sizing: border-box;
  	width: 58px;
  	height: 42px;
}
.frameItem {
  	position: absolute;
  	top: 1px;
  	left: 58px;
  	border-radius: 0px 4px 4px 0px;
  	background-color: #fff;
  	border: 1px solid #668494;
  	box-sizing: border-box;
  	width: 58px;
  	height: 42px;
}
.dataNo {
  	position: absolute;
  	top: 12px;
  	left: 12px;
  	line-height: 150%;
  	display: inline-block;
  	width: 36px;
}
.dataNo1 {
  	position: absolute;
  	top: 12px;
  	left: 69px;
  	line-height: 150%;
  	display: inline-block;
  	width: 36px;
}
.rectangleParent {
  	width: 117px;
  	position: relative;
  	height: 44px;
  	color: rgba(0, 0, 0, 0.3);
}
.clientcreationcompliancedetaiParent {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: flex-start;
  	gap: 8px;
}
.financialYearEnd {
  	width: 368px;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: flex-start;
}
.circle {
  	width: 20px;
  	border-radius: 50px;
  	background-color: #fff;
  	border: 1px solid #668494;
  	box-sizing: border-box;
  	height: 20px;
  	cursor: pointer;
}
.clientcreationcompliancedetai2 {
  	flex: 1;
  	position: relative;
  	line-height: 150%;
  	font-weight: 500;
}
.noOff {
  	align-self: stretch;
  	display: flex;
  	flex-direction: row;
  	align-items: flex-start;
  	justify-content: flex-start;
  	gap: 8px;
}
.dot {
  	width: 10px;
  	position: relative;
  	border-radius: 50%;
  	background-color: rgba(0, 0, 0, 0.9);
  	height: 10px;
}
.circle1 {
  	width: 20px;
  	border-radius: 50px;
  	background-color: #fff;
  	border: 1px solid #668494;
  	box-sizing: border-box;
  	height: 20px;
  	display: flex;
  	flex-direction: row;
  	align-items: center;
  	justify-content: center;
  	padding: 2px;
}
.radioButtonList {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: flex-start;
  	gap: 12px;
}
.radioButtonVertical {
  	width: 280px;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: flex-start;
  	gap: 8px;
}
.vatRegisteredRadios {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: flex-start;
}
.clientcreationcompliancedetai4 {
  	position: relative;
  	line-height: 150%;
  	font-weight: 500;
  	white-space: pre-wrap;
}
.dataNo2 {
  	flex: 1;
  	position: relative;
  	line-height: 150%;
  	display: inline-block;
  	height: 21px;
}
.calendarIcon {
  	width: 20px;
  	position: relative;
  	height: 20px;
}
.inputFieldContainer {
  	flex: 1;
  	overflow: hidden;
  	display: flex;
  	flex-direction: row;
  	align-items: center;
  	justify-content: flex-start;
  	padding: 0px 12px;
  	gap: 12px;
}
.inputContainer {
  	width: 134px;
  	border-radius: 4px;
  	background-color: #fff;
  	border: 1px solid #668494;
  	box-sizing: border-box;
  	height: 40px;
  	display: flex;
  	flex-direction: row;
  	align-items: center;
  	justify-content: flex-start;
  	color: rgba(0, 0, 0, 0.3);
}
.datePicker {
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: flex-start;
  	gap: 8px;
}
.inputtext {
  	flex: 1;
  	position: relative;
  	line-height: 150%;
  	font-weight: 500;
  	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;
}
.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;
}
.vatRegistrationNumber {
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: flex-start;
}
.clientcreationregistrationnum2 {
  	align-self: stretch;
  	position: relative;
  	line-height: 150%;
  	color: rgba(0, 0, 0, 0.55);
}
.inputTextContainer1 {
  	flex: 1;
  	height: 21px;
  	overflow: hidden;
}
.utr {
  	width: 368px;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: flex-start;
  	gap: 8px;
}
.compliance {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: flex-start;
  	gap: 16px;
}
.complianceDetails {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: flex-start;
  	padding: 0px 0px 32px;
}
.form {
  	width: 440px;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: flex-start;
  	padding: 0px 0px 40px;
  	box-sizing: border-box;
}
.rightSpacer {
  	align-self: stretch;
  	flex: 0.9847;
}
.stepFlowParent {
  	align-self: stretch;
  	flex: 1;
  	display: flex;
  	flex-direction: row;
  	align-items: flex-start;
  	justify-content: flex-start;
  	gap: 24px;
  	color: rgba(0, 0, 0, 0.9);
}
.pageLayout {
  	align-self: stretch;
  	flex: 1;
  	overflow-y: auto;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: flex-start;
}
.addEntityStepFlowMaster1 {
  	position: absolute;
  	width: 100%;
  	top: 141px;
  	right: 0%;
  	left: 0%;
  	background-color: #fff;
  	height: 687px;
  	overflow-y: auto;
  	display: flex;
  	flex-direction: row;
  	align-items: flex-start;
  	justify-content: flex-start;
  	padding: 16px 0px 32px;
  	box-sizing: border-box;
}
.div {
  	position: absolute;
  	height: 100%;
  	width: 100%;
  	top: 0%;
  	right: 0%;
  	bottom: 0%;
  	left: 0%;
  	box-shadow: 0px -4px 12px rgba(0, 20, 30, 0.05);
  	background-color: #fff;
}
.shadow {
  	width: 100%;
  	position: absolute;
  	margin: 0 !important;
  	right: 0px;
  	bottom: 0px;
  	left: 0px;
  	background-color: #fff;
  	height: 72px;
  	z-index: 0;
}
.majorButton1 {
  	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;
}
.previous {
  	flex: 1;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: flex-start;
  	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;
}
.saveapplyButton {
  	border-radius: 32px;
  	background-color: #007e45;
  	border: 2px solid rgba(0, 0, 0, 0);
  	box-sizing: border-box;
  	height: 40px;
  	display: flex;
  	flex-direction: row;
  	align-items: center;
  	justify-content: center;
  	padding: 8px 24px;
  	z-index: 3;
  	color: #fff;
}
.sfaFooterHorizontaldefault {
  	position: absolute;
  	width: 100%;
  	right: 0%;
  	bottom: 0px;
  	left: 0%;
  	background-color: #fff;
  	display: flex;
  	flex-direction: row;
  	align-items: flex-end;
  	justify-content: flex-end;
  	padding: 16px 32px;
  	box-sizing: border-box;
  	gap: 16px;
}
.title {
  	align-self: stretch;
  	position: relative;
  	font-size: 24px;
  	line-height: 125%;
  	color: rgba(0, 0, 0, 0.9);
}
.header1 {
  	flex: 1;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: flex-start;
}
.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;
}
.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 onCircleClick = useCallback(() => {
    		// Add your code here
  	}, []);

  	return (

Previous

{`Financial year end `}

dd

mm

VAT registered?

No

Yes

{`Date of VAT registration  `}

dd/mm/yyyy

VAT registration number

GB

Unique Taxpayer Reference

Unique Taxpayer’s References are 10 digits.

PAYE reference number

Also known as employer reference number.

Previous

Cancel

Save

Add client

                                      																			Compliance details

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, useEffect } from "react";
import PropTypes from "prop-types";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import Dialog from "carbon-react/lib/components/dialog";
import Form from "carbon-react/lib/components/form";
import { StepFlow } from "carbon-react/lib/components/step-flow";
import Box from "carbon-react/lib/components/box";
import Typography from "carbon-react/lib/components/typography";
import Button from "carbon-react/lib/components/button";
import InlineInputs from "carbon-react/lib/components/inline-inputs";
import { RadioButton, RadioButtonGroup } from "carbon-react/lib/components/radio-button";
import DateInput from "carbon-react/lib/components/date";
import Textbox from "carbon-react/lib/components/textbox";
import sageTheme from "carbon-react/lib/style/themes/sage";
import "./i18n";
import I18n from "i18n-js";

const App = ({ locale = "en", initialDateFormat = "dd/mm/yyyy" }) => {
  const [ isOpen, setIsOpen ] = useState(true);
  const [ dateFormat, setDateFormat ] = useState(initialDateFormat);
  const [ vatRegistered, setVatRegistered ] = useState("yes");

  const handleDateChange = (ev) => {
    setDateFormat(ev.target.value.formattedValue);
  };

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

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

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

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

  const handleRadioChange = (value) => {
    setVatRegistered(value);
  };

  return (
    <CarbonProvider validationRedesignOptIn theme={ sageTheme }>
      <Dialog open={ isOpen } onCancel={ onCancelButtonClick } size="large">
        <Form
          stickyFooter
          footerPadding={ { pt: 0 } }
          rightSideButtons={
            <Box display="flex">
              <Box mr="600px">
                <Button onClick={ onPreviousButtonClick } buttonType="secondary">
                  { I18n.t("previous") }
                </Button>
              </Box>
              <Button onClick={ onCancelButtonClick } buttonType="tertiary" mr="10px">
                { I18n.t("cancel") }
              </Button>
              <Button onClick={ onSaveButtonClick } buttonType="primary" type="submit">
                { I18n.t("save") }
              </Button>
            </Box>
          }
        >
          <Box width="60%" marginTop="0px">
            <StepFlow
              category={ I18n.t("addClient") }
              title={ I18n.t("clientAddress") }
              currentStep={ 5 }
              totalSteps={ 6 }
              showProgressIndicator
              showCloseIcon={ false }
              titleVariant="h2"
            />
          </Box>

          <div style={ { borderTop: "1px solid #d9d9d9", margin: "20px 0" } }>
            <Box
              display="flex"
              flexDirection="column"
              mx="300px"
              mt="2"
            >
              <Box>
                <Button
                  key="previous"
                  buttonType="secondary"
                  mb={ 1 }
                  onClick={ onPreviousButtonClick }
                >
                  { I18n.t("previous") }
                </Button>
              </Box>
              <Typography variant="b" mb="1">
                { I18n.t("financialYearEnd") }
              </Typography>
              <InlineInputs labelId="inline-inputs" inputWidth="40" aria-label={ I18n.t("financialYearEnd") }>
                <Textbox aria-labelledby="inline-inputs-dd" placeholder="dd" />
                <Textbox aria-labelledby="inline-inputs-mm" placeholder="mm" />
              </InlineInputs>

              <RadioButtonGroup
                name="vat-registered-group"
                legend={ I18n.t("vatRegistered") }
                value={ vatRegistered }
                onChange={ (e) => handleRadioChange(e.target.value) }
              >
                <RadioButton id="vat-registered-no" label={ I18n.t("no") } value="no" />
                <RadioButton id="vat-registered-yes" label={ I18n.t("yes") } value="yes" />
              </RadioButtonGroup>

              <DateInput
                label={ I18n.t("dateOfVatRegistration") }
                value={ String(dateFormat) }
                onChange={ handleDateChange }
                aria-label={ I18n.t("dateOfVatRegistration") }
              />

              <Textbox label={ I18n.t("vatRegistrationNumber") } placeholder="GB" />
              <Textbox label={ I18n.t("uniqueTaxpayerReference") } inputHint={ I18n.t("utrDescription") } />
              <Textbox label={ I18n.t("payeReferenceNumber") } inputHint={ I18n.t("payeDescription") } />
            </Box>
          </div>
        </Form>
      </Dialog>
    </CarbonProvider>
  );
};

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

export default App;

import I18n from "i18n-js";

I18n.translations = {
  en: {
    addClient: "Add client",
    clientAddress: "Compliance details",
    financialYearEnd: "Financial year end",
    vatRegistered: "VAT registered?",
    yes: "Yes",
    no: "No",
    dateOfVatRegistration: "Date of VAT registration",
    vatRegistrationNumber: "VAT registration number",
    uniqueTaxpayerReference: "Unique Taxpayer Reference",
    utrDescription: "Unique Taxpayer's References are 10 digits.",
    payeReferenceNumber: "PAYE reference number",
    payeDescription: "Also known as employer reference number.",
    previous: "Previous",
    cancel: "Cancel",
    save: "Save",
  },
};

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


.createNewPolicy {
    position: relative;
    line-height: 125%;
    font-weight: 500;
}
.usOrganizationsWith {
    position: relative;
    font-size: 14px;
    line-height: 150%;
    color: rgba(0, 0, 0, 0.9);
}
.frameParent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.link2 {
    position: relative;
    text-decoration: underline;
    line-height: 21px;
}
.link1 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.link {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 14px;
    color: #00815d;
}
.title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    font-size: 24px;
}
.selectFiltersTo {
    position: relative;
    font-size: 22px;
    line-height: 125%;
    font-weight: 500;
}
.dateFrom {
    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;
}
.inputDateText {
    flex: 1;
    position: relative;
    line-height: 150%;
    display: inline-block;
    height: 21px;
}
.calendarIcon {
    width: 20px;
    position: relative;
    height: 20px;
}
.inputFieldContainer {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 12px;
    gap: 12px;
}
.inputContainer {
    align-self: stretch;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.datePicker1 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.datePicker {
    width: 280px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.frameChild {
    width: 100px;
    position: relative;
    height: 100px;
}
.datePickerParent {
    align-self: stretch;
    height: 69px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    color: rgba(0, 0, 0, 0.9);
}
.dividerIcon {
    align-self: stretch;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    height: 1px;
    flex-shrink: 0;
}
.trigger {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 2px;
    gap: 4px;
}
.moreFilters {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 16px;
    color: #007e45;
}
.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;
}
.majorButtonWrapper {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    color: #fff;
}
.report {
    align-self: stretch;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #b3c2c9;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px;
    gap: 16px;
}
.checkboxSingle {
    width: 1045px;
    height: 189px;
    display: none;
}
.checkboxSingle1 {
    width: 270px;
    height: 21px;
    display: none;
}
.buttonbase {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.menuTrigger {
    border-radius: 32px;
    border: 2px solid #007e45;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 9px 24px 10px;
}
.mainButton {
    border-radius: 32px 0px 0px 32px;
    border: 2px solid #007e45;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 9px 24px 10px;
    min-height: 40px;
}
.menuTriggerButton {
    position: absolute;
    height: 100%;
    top: 40px;
    bottom: -40px;
    left: 0px;
    border-radius: 0px 32px 32px 0px;
    border: 2px solid #007e45;
    box-sizing: border-box;
    width: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.menuTrigger1 {
    width: 40px;
    position: relative;
    background-color: rgba(0, 0, 0, 0);
    height: 40px;
    margin-left: -2px;
}
.triggerBase {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.splitButtonMajor {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
}
.multiActionButtonMajorParent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 14px;
    color: #007e45;
}
.bennysDinerParent {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0px;
}
.inlineMessage {
    width: 1023px;
    height: 82px;
    display: none;
}
.majorButton1 {
    border-radius: 32px;
    border: 2px solid #007e45;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 32px;
    gap: 8px;
    min-height: 40px;
}
.bennysDinerGroup {
    width: 1023px;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0px;
    font-size: 18px;
}
.weCouldNot {
    margin: 0;
}
.noResultsParent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    text-align: center;
    font-size: 20px;
    color: #000;
}
.instanceParent {
    width: 1181px;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 48px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.9);
}
.label5 {
    position: relative;
    line-height: 21px;
    display: none;
}
.uploadingPleaseWait {
    position: relative;
    line-height: 33.5px;
    display: none;
}
.dot1 {
    position: absolute;
    top: 3.19px;
    left: 3.19px;
    border-radius: 79.76px;
    background-color: #007e45;
    width: 12.8px;
    height: 12.8px;
    opacity: 0.6;
}
.dot2 {
    position: absolute;
    top: 1.6px;
    left: 23.93px;
    border-radius: 79.76px;
    background-color: #007e45;
    width: 16px;
    height: 16px;
    opacity: 0.8;
}
.dot3 {
    position: absolute;
    top: 0px;
    left: 44.67px;
    border-radius: 79.76px;
    background-color: #007e45;
    width: 19.1px;
    height: 19.1px;
}
.loaderDots {
    width: 67px;
    position: relative;
    height: 19.1px;
}
.icon {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    left: 0%;
    line-height: 25.52px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}
.buttonActionsDelete {
    width: 25.5px;
    position: relative;
    height: 25.5px;
}
.label6 {
    position: relative;
    font-size: 22.33px;
    line-height: 31.9px;
    font-weight: 500;
    font-family: 'Sage UI';
}
.button {
    border-radius: 6.38px;
    background-color: rgba(102, 133, 146, 0);
    height: 51px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 16px 12.8px;
    box-sizing: border-box;
    gap: 12.8px;
}
.button1 {
    width: 228.1px;
    border-radius: 6.38px;
    background-color: rgba(102, 133, 146, 0);
    height: 51px;
    display: none;
}
.buttonParent {
    display: none;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12.8px;
}
.loaderDotsParent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 76.6px;
    text-align: center;
    font-size: 25.52px;
    color: #007e45;
    font-family: 'Font Awesome 5 Pro';
}
.uploadingPleaseWaitParent {
    height: 19px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12.8px;
    font-size: 22.33px;
}
.loading {
    align-self: stretch;
    position: relative;
    line-height: 150%;
    color: rgba(0, 0, 0, 0.65);
    text-align: center;
}
.labelParent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 0px;
    gap: 8px;
    color: rgba(0, 0, 0, 0.9);
}
.titleParent {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 48px;
    text-align: left;
    font-size: 14px;
    color: #000;
    font-family: 'Sage UI';
}

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

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

EEA2 equity report

View company equity information or download data to complete EEA2 reports.

Learn more about equity reporting (opens in a new tab).

Select filters to generate a report

Date from

01/01/2024

Date to

30/12/2024

More filters

Run report

Results

Sort by employee name: A to Z

Download report

Results

Sort: A to Z

Generate report

No results

We could not create a report that matches your criteria.

Use different filter options to try again.

Uploading... please wait

Uploading... please wait



Delete

Loading

);
};

export default Frame;

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

import React, { useState,  useRef, useEffect } 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 from 'carbon-react/lib/components/typography';
import Pod from "carbon-react/lib/components/pod";
import Link from "carbon-react/lib/components/link";
import Button from "carbon-react/lib/components/button";
import { Accordion } from "carbon-react/lib/components/accordion";
import DateRange from "carbon-react/lib/components/date-range";
import Loader from "carbon-react/lib/components/loader";
import Message from "carbon-react/lib/components/message";
import './i18n';
import I18n from 'i18n-js';

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

  const [startDate, setStartDate] = useState(data.startDate);
  const [endDate, setEndDate] = useState(data.endDate);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');
  const [isMessageOpen, setIsMessageOpen] = useState(false);
  const messageRef = useRef(null);

  useEffect(() => {
    if (isMessageOpen) {
      messageRef.current?.focus();
    }
  }, [isMessageOpen]);

  const mimicLoading = () => {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
    }, 5000);
  };

  const handleReportButtonClick = () => {
    mimicLoading();
  };

  const handleDateRangeChange = (ev) => {
    const newValue = [ev.target.value[0].formattedValue, ev.target.value[1].formattedValue];
    setStartDate(newValue[0]);
    setEndDate(newValue[1]);

    const parseDate = (dateString) => {
      const [day, month, year] = dateString.split('/').map(Number);
      return new Date(year, month - 1, day);
    };

    var date1 = parseDate(newValue[0]);
    var date2 = parseDate(newValue[1]);

    if ((date1) > (date2)) {
      setError(I18n.t('dateError'));
      setIsMessageOpen(true);
    }
    else {
      setError('');
      setIsMessageOpen(false);
    }
  };

  return (
    <CarbonProvider validationRedesignOptIn theme={ sageTheme }>
      <Box p="30px" width={ 1000 } ml={ 500 }>
        <Box>
          <Typography variant="h1">
            { I18n.t('eea2Title') }
          </Typography>
          <Typography mb={ 1 }>
            { I18n.t('eea2Description') }
          </Typography>
          <Link
            href="#"
            target="_blank"
            rel="noreferrer noopener"
            aria-label={ I18n.t('learnMoreAria') }
          >
            { I18n.t('learnMore') }
          </Link>
          <Pod title={ I18n.t('selectFilters') } mt={ 3 }>
            <DateRange
              startLabel={ I18n.t('dateFrom') }
              endLabel={ I18n.t('dateTo') }
              value={ [startDate, endDate] }
              onChange={ handleDateRangeChange }
              label={ I18n.t('dateRange') }
              aria-label={ I18n.t('dateRangeAria') }
              mb={ 2 }
            />
            {isMessageOpen && (
              <Message
                open={isMessageOpen}
                onDismiss={() => setIsMessageOpen(false)}
                variant="error"
                mb={1}
                ref={messageRef}
              >
                {error}
              </Message>
            )}
            <div
              style={{
                border: '1px solid #e0e0e0',
                borderRadius: "8px"
              }}
            />
            <Accordion
              title={ I18n.t('moreFilters') }
              variant="subtle"
              mt={ 1 }
              mb={ 1 }
            >
              <Box>
                <Typography mb="-10px">
                  { I18n.t('additionalFilters') }
                </Typography>
              </Box>
            </Accordion>
            <div
              style={{
                border: '1px solid #e0e0e0',
                borderRadius: "8px"
              }}
            />
            <Box
              flex = "1"
              justifyContent = "flex-end"
              display = "flex"
              mt={ 2 }
            >
              <Button onClick={ handleReportButtonClick } buttonType='primary'>
                {I18n.t('runReport')}
              </Button>
            </Box>
          </Pod>
          <Box mb={ 40 }/>
          <div aria-live="polite">
            {isLoading ? <Loader aria-label={ I18n.t('loadingAria') } /> : ""}
          </div>
        </Box>
      </Box>
    </CarbonProvider>
  );
};

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

export default App;

import I18n from 'i18n-js';

I18n.translations = {
  en: {
    eea2Title: 'EEA2 equity report',
    eea2Description: 'View company equity information or download data to complete EEA2 reports.',
    learnMore: 'Learn more about equity reporting (opens in a new tab).',
    learnMoreAria: 'Learn more Label',
    selectFilters: 'Select filters to generate a report',
    dateFrom: 'Date from',
    dateTo: 'Date to',
    dateRange: 'Date Range',
    dateRangeAria: 'Date Range Label',
    runReport: 'Run report',
    moreFilters: 'More filters',
    additionalFilters: 'Dummy Filter',
    loadingAria: 'Loading Label',
    dateError: 'End date must be after start date'
  }
};

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 = {
  startDate: "01/01/2024",
  endDate: "30/12/2024",
};

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


.mandatoryLabel {
    align-self: stretch;
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.labelSet {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.inputtext {
    flex: 1;
    position: relative;
    line-height: 150%;
}
.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: 0px 8px;
    gap: 4px;
}
.inputContainer {
    align-self: stretch;
    border-radius: 4px;
    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;
}
.dropdownSelectStandard {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.examplebadgeOnFilterButton {
    width: 173px;
    height: 32px;
    display: none;
}
.label {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.buttonTypical {
    border-radius: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    box-sizing: border-box;
    gap: 4px;
    min-height: 32px;
}
.buttonTypicalWrapper {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: rgba(0, 0, 0, 0.67);
}
.dropdownSelectStandardParent {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 16px;
}
.flexibleTileTaskListInner {
    position: absolute;
    top: 16px;
    left: 0px;
    width: 678px;
    height: 61px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0px 16px;
    box-sizing: border-box;
}
.actionOptional {
    position: relative;
    line-height: 125%;
    font-weight: 500;
}
.trigger {
    position: absolute;
    top: calc(50% - 104.5px);
    left: calc(50% - 408px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 2px;
    gap: 4px;
}
.keyline {
    position: absolute;
    height: 122.14%;
    width: 0.25%;
    top: -0.71%;
    right: 98.65%;
    bottom: -21.43%;
    left: 1.1%;
    border-right: 2px solid #ccd6db;
    box-sizing: border-box;
}
.content {
    position: absolute;
    width: 94.85%;
    top: 5.71%;
    left: 3.19%;
    line-height: 150%;
    color: rgba(0, 0, 0, 0.9);
    display: inline-block;
}
.labelWrapper {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 8px 0px 6px;
}
.contentWrapper1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.pillOnLight {
    position: absolute;
    top: 37px;
    left: 26px;
    border-radius: 8px;
    background-color: #ccd6db;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    width: 88px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 0px 2px;
}
.pillOnLight1 {
    position: absolute;
    top: 37px;
    left: 124px;
    border-radius: 8px;
    background-color: #ccd6db;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    width: 168px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 0px 2px;
}
.content1 {
    position: absolute;
    width: 94.85%;
    top: 60.71%;
    left: 3.19%;
    line-height: 150%;
    color: rgba(0, 0, 0, 0.9);
    display: inline-block;
}
.pillOnLight2 {
    position: absolute;
    top: 114px;
    left: 26px;
    border-radius: 8px;
    background-color: #ccd6db;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    width: 88px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 0px 2px;
}
.pillOnLight3 {
    position: absolute;
    top: 113px;
    left: 124px;
    border-radius: 8px;
    background-color: #ccd6db;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    width: 88px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 0px 2px;
}
.pillOnLight4 {
    position: absolute;
    top: 112px;
    left: 222px;
    border-radius: 8px;
    background-color: #ccd6db;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    width: 88px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 0px 2px;
}
.pillOnLight5 {
    position: absolute;
    top: 112px;
    left: 320px;
    border-radius: 8px;
    background-color: #ccd6db;
    border: 2px solid #007e45;
    box-sizing: border-box;
    width: 150px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 0px 2px;
}
.pillOnLight6 {
    position: absolute;
    top: 112px;
    left: 480px;
    border-radius: 8px;
    background-color: #ccd6db;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    width: 88px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 0px 2px;
}
.contentWrapper {
    position: absolute;
    top: 40px;
    left: 0px;
    width: 816px;
    height: 140px;
    font-size: 14px;
    color: #00324c;
}
.accordionSubtle {
    position: absolute;
    top: 15px;
    left: 0px;
    width: 816px;
    height: 209px;
}
.container {
    border-radius: 50px;
    background-color: #bb4f00;
    border: 2px solid #fff;
    box-sizing: border-box;
    height: 24px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 4px;
    min-width: 24px;
    max-width: 36px;
}
.badge {
    position: absolute;
    top: 0px;
    right: 622px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    color: #fff;
}
.accordionSubtleParent {
    position: absolute;
    top: 101px;
    left: 16px;
    width: 816px;
    height: 224px;
    font-size: 16px;
    color: #007e45;
}
.textEditorTogglesSpare {
    width: 32px;
    border-radius: 8px;
    height: 32px;
}
.buttonAi {
    border-radius: 16px;
    border: 1px solid #000;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    min-height: 32px;
}
.buttonAi1 {
    border-radius: 16px;
    border: 2px solid #13a038;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    gap: 8px;
    min-height: 32px;
}
.majorButtons {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 16px;
}
.footerm {
    position: absolute;
    top: 337px;
    left: 0px;
    border-radius: 0px 0px 4px 4px;
    background-color: #fafbfb;
    border: 1px solid #99adb7;
    box-sizing: border-box;
    width: 898px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 12px;
    gap: 8px;
}
.flexibleTileTaskList {
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 8px;
    border: 1px solid #668494;
    box-sizing: border-box;
    width: 894px;
    height: 393px;
    overflow: hidden;
}
.standardHighlight {
    position: absolute;
    height: calc(100% - 46px);
    top: 0px;
    bottom: 46px;
    left: 0px;
    background-color: #99adb7;
    width: 4px;
    display: none;
}
.dueSoonHighlight {
    position: absolute;
    height: calc(100% - 46px);
    top: 0px;
    bottom: 46px;
    left: 0px;
    background-color: #ef6700;
    width: 4px;
    display: none;
}
.overdueHighlight {
    position: absolute;
    height: calc(100% - 46px);
    top: 0px;
    bottom: 46px;
    left: 0px;
    background-color: #a22c3b;
    width: 4px;
    display: none;
}
.cpHighlight {
    position: absolute;
    height: 100%;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background: linear-gradient(180deg, #13a038, #0092db 51%, #8f49fe);
    width: 4px;
    overflow: hidden;
}
.copilotControls {
    width: 100%;
    position: relative;
    border-radius: 8px;
    height: 393px;
    overflow: hidden;
    flex-shrink: 0;
    text-align: left;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.9);
    font-family: 'Sage UI';
}

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

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

Tone

Formal

Length

Medium

Language

English (UK)

Select placeholders

Employee details

{`[employee] `}

{`[employee_first_name] `}

Blablabla

{`[Blablabla] `}

{`[Blablabla] `}

{`[Blablabla] `}

{`[Blablablablablabla] `}

{`[Blablabla] `}

1

Keep this draft

Generate new draft

);
};

export default CopilotControls;

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

import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import i18n from 'i18n-js';
import './i18n.js';

import Box from 'carbon-react/lib/components/box';
import Button from 'carbon-react/lib/components/button';
import Image from 'carbon-react/lib/components/image';
import { Select, Option } from 'carbon-react/lib/components/select';
import Typography from 'carbon-react/lib/components/typography';
import { Accordion } from 'carbon-react/lib/components/accordion';
import Badge from 'carbon-react/lib/components/badge';
import Pod from 'carbon-react/lib/components/pod';

const App = ({
  locale = 'en',
  toneOptions,
  lengthOptions,
  languageOptions,
  placeholderGroups
}) => {
  i18n.locale = locale;

  const [selectedTone, setSelectedTone] = useState(toneOptions[0].value);
  const [selectedLength, setSelectedLength] = useState(lengthOptions[0].value);
  const [selectedLanguage, setSelectedLanguage] = useState(languageOptions[0].value);
  const [isAccordionExpanded, setIsAccordionExpanded] = useState(true);

  const [placeholderGroupsState, setPlaceholderGroupsState] = useState(
    placeholderGroups.map(group => ({
      ...group,
      placeholders: group.placeholders.map(p => ({
        ...p,
        highlight: p.highlight || false
      }))
    }))
  );

  const handleToneChange = useCallback((event) => {
    setSelectedTone(event.target.value);
  }, []);

  const handleLengthChange = useCallback((event) => {
    setSelectedLength(event.target.value);
  }, []);

  const handleLanguageChange = useCallback((event) => {
    setSelectedLanguage(event.target.value);
  }, []);

  const handleGenerateNewDraftClick = () => {
    alert("Generate new draft button clicked");
  };

  const handleKeepThisDraftClick = () => {
    alert("Keep this draft button clicked");
  };

  const toggleAccordion = () => {
    setIsAccordionExpanded(!isAccordionExpanded);
  };

const handlePillClick = useCallback((groupIndex, placeholderId, event) => {
  console.log(`Pill clicked: ${groupIndex}, ${placeholderId}`);

  if (event) {
    event.preventDefault();
    event.stopPropagation();
    if (event.nativeEvent) {
      event.nativeEvent.stopImmediatePropagation();
    }
  }

  setPlaceholderGroupsState(prevState => {
    const newState = prevState.map(group => ({
      ...group,
      placeholders: group.placeholders.map(placeholder => ({ ...placeholder }))
    }));

    const placeholderIndex = newState[groupIndex].placeholders.findIndex(
      p => p.id === placeholderId
    );

    if (placeholderIndex !== -1) {
      const currentHighlight = newState[groupIndex].placeholders[placeholderIndex].highlight;
      newState[groupIndex].placeholders[placeholderIndex].highlight = !currentHighlight;

      console.log(`Pill ${placeholderId} highlight set to: ${!currentHighlight}`);
    }

    return newState;
  });
}, []);

  const handleAccordionHeaderClick = () => {
    toggleAccordion();
  };

  const highlightedCount = placeholderGroupsState.reduce((total, group) => {
    return total + group.placeholders.filter(p => p.highlight).length;
  }, 0);

  return (
    <Box width="980px" p="20px">
      <Pod
        border="1px solid #668494"
        borderRadius="8px"
        overflow="hidden"
        position="relative"
        footer={
          <Box
            display="flex"
            justifyContent="flex-end"
            alignItems="center"
            width="100%"
            gap="16px"
          >
            <Button
              buttonType="secondary"
              aria-label={ i18n.t('keepThisDraft') }
              size="small"
              onClick={ handleKeepThisDraftClick }
            >
              { i18n.t('keepThisDraft') }
            </Button>
            <Button
              buttonType="gradient-grey"
              onClick={ handleGenerateNewDraftClick }
              iconPosition="before"
              aria-label={ i18n.t('generateNewDraft') }
              size="small"
            >
              <Image
                alt=""
                decorative
                src="https://assets.sbc.sage.com/sbc.core.static.ui/1.32.0/static/product-icons/sbc_ai_star.svg"
                width="20px"
                height="20px"
                marginRight="8px"
              />
              { i18n.t('generateNewDraft') }
            </Button>
          </Box>
        }
      >
        <Box
          position="absolute"
          height="100%"
          top="0"
          left="0"
          width="4px"
          background="linear-gradient(180deg, #13a038, #0092db 51%, #8f49fe)"
        />
        <Box padding="16px" paddingBottom="10px">
          <Box display="flex" mb="40px" flexDirection="row" gap="16px" alignItems="flex-end">
            <Box width="220px">
              <Select
                label={ i18n.t('tone') }
                value={ selectedTone }
                onChange={ handleToneChange }
                aria-label={ i18n.t('tone') }
              >
                {toneOptions.map((option) => (
                  <Option key={ option.value } text={ option.text } value={ option.value } />
                ))}
              </Select>
            </Box>
            <Box width="220px">
              <Select
                label={ i18n.t('length') }
                value={ selectedLength }
                onChange={ handleLengthChange }
                aria-label={ i18n.t('length') }
              >
                {lengthOptions.map((option) => (
                  <Option key={ option.value } text={ option.text } value={ option.value } />
                ))}
              </Select>
            </Box>
            <Box width="220px">
              <Select
                label={ i18n.t('language') }
                value={ selectedLanguage }
                onChange={ handleLanguageChange }
                aria-label={ i18n.t('language') }
              >
                {languageOptions.map((option) => (
                  <Option key={ option.value } text={ option.text } value={ option.value } />
                ))}
              </Select>
            </Box>
          </Box>

          <Box marginTop="24px" position="relative">
            <Accordion
              title={i18n.t('selectPlaceholders')}
              expanded={isAccordionExpanded}
              titleColor="positive"
              variant="subtle"
              onChange={handleAccordionHeaderClick}
            >
              {placeholderGroupsState.map((group, groupIndex) => (
                <Box key={groupIndex} mb="16px">
                  <Typography variant="p" mb="8px">
                    {group.title}
                  </Typography>
                  <Box
                    display="flex"
                    flexDirection="row"
                    flexWrap="wrap"
                    gap="8px"
                  >
                    {group.placeholders.map((placeholder) => (
                      <div
                        key={placeholder.id}
                        style={{
                          padding: "0px",
                          borderRadius: "10px",
                          border: placeholder.highlight ? "2px solid #007e45" : "2px solid transparent",
                          cursor: "pointer"
                        }}
                        onClick={(e) => handlePillClick(groupIndex, placeholder.id, e)}
                      >
                        <Box
                          backgroundColor="#ccd6db"
                          borderRadius="borderRadius100"
                          pl="8px"
                          pr="8px"
                          display="inline-block"
                          height="25px"
                        >
                          <Typography variant="strong">
                            {placeholder.label}
                          </Typography>
                        </Box>
                      </div>
                    ))}
                  </Box>
                </Box>
              ))}
            </Accordion>
            <Box position="absolute" top="-15px" right="715px" pointerEvents="none">
              <Badge counter={highlightedCount} color="--colorsSemanticNegative500" />
            </Box>
          </Box>
        </Box>
      </Pod>
    </Box>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  toneOptions: PropTypes.arrayOf(
    PropTypes.shape({
      value: PropTypes.string.isRequired,
      text: PropTypes.string.isRequired,
    })
  ).isRequired,
  lengthOptions: PropTypes.arrayOf(
    PropTypes.shape({
      value: PropTypes.string.isRequired,
      text: PropTypes.string.isRequired,
    })
  ).isRequired,
  languageOptions: PropTypes.arrayOf(
    PropTypes.shape({
      value: PropTypes.string.isRequired,
      text: PropTypes.string.isRequired,
    })
  ).isRequired,
  placeholderGroups: PropTypes.arrayOf(
    PropTypes.shape({
      title: PropTypes.string.isRequired,
      placeholders: PropTypes.arrayOf(
        PropTypes.shape({
          id: PropTypes.number.isRequired,
          label: PropTypes.string.isRequired,
          highlight: PropTypes.bool,
        })
      ).isRequired,
    })
  ).isRequired,
};

export default App;

import i18n from 'i18n-js';

i18n.translations = {
  en: {
    tone: 'Tone',
    length: 'Length',
    language: 'Language',
    selectPlaceholders: 'Select placeholders',
    employeeDetails: 'Employee Details',
    keepThisDraft: 'Keep this draft',
    generateNewDraft: 'Generate new draft',
    formal: 'Formal',
    medium: 'Medium',
    englishUK: 'English (UK)'
  },
};

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 toneOptions = [
  { value: 'formal', text: 'Formal' },
  { value: 'informal', text: 'Informal' },
];

const lengthOptions = [
  { value: 'short', text: 'Short' },
  { value: 'medium', text: 'Medium' },
  { value: 'long', text: 'Long' },
];

const languageOptions = [
  { value: 'en-uk', text: 'English (UK)' },
  { value: 'fr-ca', text: 'French (Canada)' },
];

const placeholderGroups = [
  {
    title: 'Employee Details',
    placeholders: [
      { id: 1, label: '[employee]' },
      { id: 2, label: '[employee_first_name]' }
    ]
  },
  {
    title: 'Blablabla',
    placeholders: [
      { id: 3, label: '[Blablabla]' },
      { id: 4, label: '[Blablabla]' },
      { id: 5, label: '[Blablabla]' },
      { id: 6, label: '[Blablablablablabla]', highlight: true },
      { id: 7, label: '[Blablabla]' }
    ]
  }
];

const container = document.getElementById("app");
const root = createRoot(container);

root.render(
  <CarbonProvider focusRedesignOptOut theme={ sageTheme }>
    <GlobalStyle />
    <App
      toneOptions={ toneOptions }
      lengthOptions={ lengthOptions }
      languageOptions={ languageOptions }
      placeholderGroups={ placeholderGroups }
    />
  </CarbonProvider>
);


.alertIcon {
    width: 20px;
    position: relative;
    height: 20px;
}
.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%;
}
.workplacePensionStatus {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    padding-left: 19px;
}
.contentWrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.assetsscloseOnLight {
    width: 32px;
    border-radius: 4px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.contentArea {
    width: 386px;
    border-radius: 0px 8px 8px 0px;
    background-color: #fff;
    border: 1px solid #cb374a;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px 16px 16px 24px;
    gap: 24px;
}
.messageContextual {
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.workplacePension {
    align-self: stretch;
    position: relative;
    font-size: 18px;
    line-height: 150%;
    font-weight: 500;
}
.excludeFromAuto {
    width: 124px;
    position: relative;
    line-height: 150%;
    font-weight: 500;
    display: inline-block;
    flex-shrink: 0;
}
.bg {
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 4px;
    background-color: #f9f9f9;
    border: 1px solid #bfbfbf;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
}
.checkbox {
    width: 24px;
    position: relative;
    height: 24px;
}
.excludeFromAutoEnrolmentParent {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 70px;
}
.whenShouldI {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.caretRightParent {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 190px;
    font-size: 12px;
    color: #1e965f;
}
.frameParent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
}
.inputtext {
    flex: 1;
    position: relative;
    line-height: 150%;
    display: inline-block;
    height: 21px;
}
.inputTextContainer {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 12px;
    gap: 4px;
}
.inputContainer {
    align-self: stretch;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.wrapper {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.dropdownSelectStandard {
    width: 280px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: rgba(0, 0, 0, 0.9);
}
.statusParent {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 73px;
}
.frameGroup {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}
.workplacePensionParent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
}
.frameWrapper {
    width: 1285px;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #99adb6;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px 27px;
    color: #000;
}
.messageContextualParent {
    width: 100%;
    position: relative;
    background-color: #f2f5f6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px 260px;
    box-sizing: border-box;
    gap: 20px;
    text-align: left;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.9);
    font-family: 'Sage UI';
}

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

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

            						Please provide the following information to complete this employee’s record:

Workplace pension status

Workplace Pension

Exclude from Auto Enrolment

When should I exclude an employee?

Status

Please select

Status definitions

);
              							};

              							export default Frame;

@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 Box from "carbon-react/lib/components/box";
import Message from "carbon-react/lib/components/message";
import { Checkbox } from "carbon-react/lib/components/checkbox";
import { Select, Option } from "carbon-react/lib/components/select";
import Pod from "carbon-react/lib/components/pod";
import Typography, {
  List,
  ListItem,
} from "carbon-react/lib/components/typography";
import {
  Accordion,
} from "carbon-react/lib/components/accordion";
import I18n from "i18n-js";
import "./i18n";

const App = ({ locale = "en", pensionStatusOptions, onStatusChange }) => {
  const [isMessageOpen, setIsMessageOpen] = useState(true);
  I18n.locale = locale;

  return (
    <Box width="70%" padding="20px">
      <Box width="40%">
        <Message
          open={ isMessageOpen }
          onDismiss={() => {
            alert("Close alert clicked");
          }}
          variant="error"
          title={ I18n.t("message") }
          data-role="error-message"
        >
          <Typography variant = "b">
            { I18n.t("message1") }
          </Typography>
          <List variant="ol" pt="6px">
            <ListItem>{ I18n.t("content") }</ListItem>
          </List>
        </Message>
      </Box>
      <Pod title={ I18n.t("title") } marginTop="20px">
        <Box display={ "flex" } flexDirection="row" gap="60px">
          <Box>
            <Box mb="50px">
              <Typography variant="b" pb="40px">
                { I18n.t("checkboxTitle") }
              </Typography>
              <Typography variant="ol"/>
              <Typography variant="b" pb="40px">
                { I18n.t("checkboxTitle1") }
              </Typography>
            </Box>
            <Typography variant="b" mt="20px">
              { I18n.t("status") }
            </Typography>
          </Box>
          <Box>
            <Box display="flex" alignItems="center" mb="10px" pt="12px">
              <Checkbox
                label=""
                name="exclude-auto-enrolment"
                data-role={ I18n.t("checkboxAriaLabel") }
                size="large"
                reverse

              />
            </Box>
            <Accordion
              size="small"
              title={ I18n.t("exclusionText") }
              variant="subtle"
              borders="none"
            >
              <Box>{ I18n.t("child1") }</Box>
              <Box>{ I18n.t("child2") }</Box>
            </Accordion>
            <Box mt="10px" mb="10px">
              <Select
                name="status"
                id="status-select"
                label=""
                labelInline
                onChange={ onStatusChange }
                data-role={ I18n.t("statusAriaLabel") }
                size="small"
                labelWidth={1}
              >
                {pensionStatusOptions.map((option) => (
                  <Option
                    key={ option.value }
                    text={ option.text }
                    value={ option.value }
                    data-role={`status-option-${ option.value }`}
                  />
                ))}
              </Select>
            </Box>
            <Accordion
              size="small"
              title={ I18n.t("statusDefinitions") }
              variant="subtle"
              borders="none"
            >
              <Box>{ I18n.t("child3") }</Box>
              <Box>{ I18n.t("child4") }</Box>
            </Accordion>
          </Box>
        </Box>
      </Pod>
    </Box>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  message: PropTypes.shape({
    title: PropTypes.string.isRequired,
    content: PropTypes.string.isRequired,
  }).isRequired,
  pensionStatusOptions: PropTypes.arrayOf(
    PropTypes.shape({
      text: PropTypes.string.isRequired,
      value: PropTypes.string.isRequired,
    })
  ).isRequired,
  onStatusChange: PropTypes.func.isRequired,
};

App.defaultProps = {
  locale: "en",
};

export default App;

import I18n from 'i18n-js';

I18n.translations = {
  en: {
    message: "Please provide the following information",
    message1: "to complete this employee’s record:",
    content: "Workplace pension status",
    title: "Workplace Pension",
    checkboxTitle: "Exclude from Auto",
    checkboxTitle1: "Enrolment",
    status: "Status",
    exclusionText: "When should I exclude an employee?",
    statusDefinitions: "Status definitions",
    child1: "Child 1",
    child2: "Child 2",
    child3: "Child 3",
    child4: "Child 4",
    checkboxAriaLabel: "exclude-checkbox",
    statusAriaLabel: "status-select"
  },
};

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 pensionStatusOptions = [
  { text: "Active", value: "active" },
  { text: "Inactive", value: "inactive" },
];

const handleStatusChange = (event) => {
  console.log("Selected status:", event.target.value);
};

const container = document.getElementById("app");
const root = createRoot(container);

root.render(
  <CarbonProvider theme={ sageTheme }>
    <GlobalStyle />
    <App
      pensionStatusOptions={pensionStatusOptions}
      onStatusChange={handleStatusChange}
    />
  </CarbonProvider>
);