Add Color funtionalites

src/Features/ThemeChange/ThemeChange.js

@@ -471,7 +471,11 @@ const initialState = {
   notes: false,
   SignatureImage: '',
   BillName: '',
-  SelectedHeaderColor: '#000000',
+  SelectedHeaderColour: false,
+  SelectedTableHeaderColour: false,
+  SelectedTableBodyColour: false,
+  SelectedFooterColour: false,
+  SelectedNetAmountColour: false,
   allColors: [],
   allColorsCat: [],
   LayoutOverallColorsList: [],
@@ -552,6 +556,17 @@ const initialState = {
   ScanTemplate: {},
   CustThemeData: 'Layout2',
   PrinterMappingDtls: [],
+  SelectedHeaderColor: '#ffffff',
+  SelectedHeaderFontColor: '#000000',
+  SelectedTableHeaderColor: '#ffffff',
+  SelectedTableHeaderFontColor: '#000000',
+  SelectedTableBodyColor: '#ffffff',
+  SelectedTableBodyFontColor: '#000000',
+  SelectedFooterColor: '#ffffff',
+  SelectedFooterFontColor: '#000000',
+  SelectedNetAmountColor: '#ffffff',
+  SelectedNetAmountFontColor: '#000000',
+  rowType: 'odd',
 };
 
 const ThemeSlice = createSlice({
@@ -2149,7 +2164,43 @@ const ThemeSlice = createSlice({
       state.BillName = action?.payload;
     },
       changeSelectedHeaderColor: (state, action) => {
-          state.SelectedHeaderColor = action?.payload;
+          state.SelectedHeaderColor = action?.payload?.background;
+          state.SelectedHeaderFontColor = action?.payload?.font;
+        },
+      changeSelectedTableHeaderColor: (state, action) => {
+          state.SelectedTableHeaderColor = action?.payload?.background;
+          state.SelectedTableHeaderFontColor = action?.payload?.font;
+        },
+      changeSelectedTableBodyColor: (state, action) => {
+          state.SelectedTableBodyColor = action?.payload?.background;
+          state.SelectedTableBodyFontColor = action?.payload?.font;
+        },
+      changeSelectedFooterColor: (state, action) => {
+          state.SelectedFooterColor = action?.payload?.background;
+          state.SelectedFooterFontColor = action?.payload?.font;
+        },
+      // toggles indicating whether each colour option should actually be applied in print
+      changeSelectedHeaderColour: (state, action) => {
+          state.SelectedHeaderColour = action?.payload;
+        },
+      changeSelectedTableHeaderColour: (state, action) => {
+          state.SelectedTableHeaderColour = action?.payload;
+        },
+      changeSelectedTableBodyColour: (state, action) => {
+          state.SelectedTableBodyColour = action?.payload;
+        },
+      changeSelectedFooterColour: (state, action) => {
+          state.SelectedFooterColour = action?.payload;
+        },
+      changeSelectedNetAmountColour: (state, action) => {
+          state.SelectedNetAmountColour = action?.payload;
+        },
+      changeRowType: (state, action) => {
+          state.rowType = action?.payload;
+        },
+        changeSelectedNetAmountColor: (state, action) => {
+          state.SelectedNetAmountColor = action?.payload?.background;
+          state.SelectedNetAmountFontColor = action?.payload?.font;
         },
     changeCurrentColor: (state, action) => {
       const { color } = action?.payload;
@@ -2687,6 +2738,16 @@ export const {
   changeActiveTheme,
   changeScanTemplate,
   changeSelectedHeaderColor,
+  changeSelectedTableHeaderColor,
+  changeSelectedTableBodyColor,
+  changeSelectedFooterColor,
+  changeSelectedHeaderColour,
+  changeSelectedTableHeaderColour,
+  changeSelectedTableBodyColour,
+  changeSelectedFooterColour,
+  changeSelectedNetAmountColour,
+  changeRowType,
+  changeSelectedNetAmountColor
 } = ThemeSlice.actions;
 
 export const GlobalPricingAppPricingName = (state) =>
@@ -2711,14 +2772,38 @@ export const GlobalprintSignature = (state) => state.theme?.Signature;
 export const GlobalprintCashierName = (state) => state.theme?.CashierName;
 export const GlobalprintLogo = (state) => state.theme?.Logo;
 export const GlobalprintCredit = (state) => state.theme?.Credit;
-export const GlobalprinttermsAndConditions = (state) =>
+export const GlobalprinttermsAndConditions = (state) => state.theme?.termsAndConditions;
-  state.theme?.termsAndConditions;
 export const GlobalthemeFormat = (state) => state.theme?.themeFormat;
+// selectors for colour toggles (true when the user has chosen that colour field)
+export const GlobalSelectedHeaderColour = (state) => state.theme?.SelectedHeaderColour;
+export const GlobalSelectedTableHeaderColour = (state) => state.theme?.SelectedTableHeaderColour;
+export const GlobalSelectedTableBodyColour = (state) => state.theme?.SelectedTableBodyColour;
+export const GlobalSelectedFooterColour = (state) => state.theme?.SelectedFooterColour;
+export const GlobalSelectedNetAmountColour = (state) => state.theme?.SelectedNetAmountColour;
 export const Globalnotes = (state) => state.theme?.notes;
 export const GlobalSignatureImage = (state) => state.theme?.SignatureImage;
 export const GlobalBillName = (state) => state.theme?.BillName;
 export const GlobalSelectedPrintHeaderColor = (state) =>
   state.theme?.SelectedHeaderColor;
+export const GlobalSelectedPrintHeaderFontColor = (state) =>
+  state.theme?.SelectedHeaderFontColor;
+export const GlobalSelectedTableHeaderColor = (state) =>
+  state.theme?.SelectedTableHeaderColor;
+export const GlobalSelectedTableHeaderFontColor = (state) =>
+  state.theme?.SelectedTableHeaderFontColor;
+export const GlobalSelectedTableBodyColor = (state) =>
+  state.theme?.SelectedTableBodyColor;
+export const GlobalSelectedTableBodyFontColor = (state) =>
+  state.theme?.SelectedTableBodyFontColor;
+export const GlobalSelectedFooterColor = (state) =>
+  state.theme?.SelectedFooterColor;
+export const GlobalSelectedFooterFontColor = (state) =>
+  state.theme?.SelectedFooterFontColor;
+export const GlobalSelectedNetAmountColor = (state) =>
+  state.theme?.SelectedNetAmountColor;
+export const GlobalSelectedNetAmountFontColor = (state) =>
+  state.theme?.SelectedNetAmountFontColor;
+export const GlobalRowType = (state) => state.theme?.rowType;
 
 export const changeCurrentColorValue = (state) => state.theme?.CurrentColor;
 export const changeCurrentTextValue = (state) => state.theme?.CurrentText;