Merge pull request 'print-colors-sq' (#222) from print-colors-sq into main
Reviewed-on: Pozomind/pozo-retail-app#222
This commit is contained in:
commit
65e4d917b1
|
|
@ -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) =>
|
||||
state.theme?.termsAndConditions;
|
||||
export const GlobalprinttermsAndConditions = (state) => 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;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import React, {
|
|||
forwardRef,
|
||||
useImperativeHandle,
|
||||
} from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import {
|
||||
Form,
|
||||
Checkbox,
|
||||
|
|
@ -69,12 +69,34 @@ import {
|
|||
changeSelectedCredit,
|
||||
changeSelectedTax,
|
||||
changeSelectedHeaderColor,
|
||||
changeSelectedTableHeaderColor,
|
||||
changeSelectedTableBodyColor,
|
||||
changeSelectedFooterColor,
|
||||
changeRowType,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalRowType,
|
||||
changeSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
changeSelectedHeaderColour,
|
||||
changeSelectedTableHeaderColour,
|
||||
changeSelectedTableBodyColour,
|
||||
changeSelectedFooterColour,
|
||||
changeSelectedNetAmountColour,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import '../../../../Styles/BookingScreen/Components/SelectionComponent/SelectionComponent.scss';
|
||||
import { useAuth } from '../../../../AuthContext.jsx';
|
||||
import { InputField } from '../../../../Components/Forms/InputField.jsx';
|
||||
import ColorPicker from '../../../../Components/Forms/ColorPicker.jsx';
|
||||
import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
|
||||
import ColorsSelected from '../UtillComponents/ColorsSelected.jsx';
|
||||
|
||||
const subDirectory = import.meta.env.BASE_URL;
|
||||
|
||||
|
|
@ -92,6 +114,13 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
}
|
||||
};
|
||||
|
||||
// helper to read a color object from the newer `PrintColors` array
|
||||
const getColor = (printColors, key) => {
|
||||
if (!printColors || !Array.isArray(printColors)) return {};
|
||||
const entry = printColors.find((c) => c && c[key]);
|
||||
return entry ? entry[key] : {};
|
||||
};
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
doSomething,
|
||||
}));
|
||||
|
|
@ -138,6 +167,10 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
const [isTermscondChecking, setisTermscondChecking] = useState(false);
|
||||
const [isSignatureChecking, setisSignatureChecking] = useState(false);
|
||||
const [isheadercolour, setisheadercolour] = useState(false);
|
||||
const [isTableHeaderColour, setisTableHeaderColour] = useState(false);
|
||||
const [isTableBodyColour, setisTableBodyColour] = useState(false);
|
||||
const [isFooterColour, setisFooterColour] = useState(false);
|
||||
const [isNetAmountColour, setisNetAmountColour] = useState(false);
|
||||
const [showMore, setShowMore] = useState(false);
|
||||
const visibleConfigs = showMore ? styleData : styleData.slice(0, 4);
|
||||
const defaultImage =
|
||||
|
|
@ -150,6 +183,25 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
const [previewTitle, setPreviewTitle] = useState('');
|
||||
const [Notes, setNote] = useState('');
|
||||
const [BillName, setBillName] = useState('');
|
||||
const [openColorModal, setOpenColorModal] = useState(false);
|
||||
const [bgColor, setBgColor] = useState("#ffffff");
|
||||
const [fontColor, setFontColor] = useState("#000000");
|
||||
const [selectedHeaderFontColor, setSelectedHeaderFontColor] = useState("#ffffff");
|
||||
const [colorModalTarget, setColorModalTarget] = useState(null); // 'header' | 'tableHeader' | 'tableBody' | 'footer'
|
||||
const rowType = useSelector(GlobalRowType);
|
||||
|
||||
// derived from global store
|
||||
const headerColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
const headerFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
||||
const tableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
||||
const tableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
||||
const tableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
||||
const tableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
||||
const footerColor = useSelector(GlobalSelectedFooterColor);
|
||||
const footerFontColor = useSelector(GlobalSelectedFooterFontColor);
|
||||
const netAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
||||
const netAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
||||
|
||||
|
||||
const items = [
|
||||
{
|
||||
|
|
@ -358,6 +410,66 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
);
|
||||
setisSignatureChecking(checkedList?.includes(CheckSignature?.ConfigId));
|
||||
setisheadercolour(checkedList?.includes(headerColour?.ConfigId));
|
||||
setisTableHeaderColour(
|
||||
checkedList?.includes(
|
||||
sizeCheckList.find((item) => item.ConfigName === 'Table Header Colour')
|
||||
?.ConfigId
|
||||
)
|
||||
);
|
||||
setisTableBodyColour(
|
||||
checkedList?.includes(
|
||||
sizeCheckList.find((item) => item.ConfigName === 'Table Body Colour')
|
||||
?.ConfigId
|
||||
)
|
||||
);
|
||||
setisFooterColour(
|
||||
checkedList?.includes(
|
||||
sizeCheckList.find((item) => item.ConfigName === 'Footer Colour')
|
||||
?.ConfigId
|
||||
)
|
||||
);
|
||||
setisNetAmountColour(
|
||||
checkedList?.includes(
|
||||
sizeCheckList.find((item) => item.ConfigName === 'Net Amount Colour')
|
||||
?.ConfigId
|
||||
)
|
||||
);
|
||||
|
||||
// update global toggle states as well so print components can read them
|
||||
if (checkedList?.includes(headerColour?.ConfigId)) {
|
||||
dispatch(changeSelectedHeaderColour(true));
|
||||
} else {
|
||||
dispatch(changeSelectedHeaderColour(false));
|
||||
dispatch(changeSelectedHeaderColor({ background: '#ffffff', font: '#000000' }));
|
||||
}
|
||||
const tblHdr2 = sizeCheckList.find((item) => item.ConfigName === 'Table Header Colour')?.ConfigId;
|
||||
if (checkedList?.includes(tblHdr2)) {
|
||||
dispatch(changeSelectedTableHeaderColour(true));
|
||||
} else {
|
||||
dispatch(changeSelectedTableHeaderColour(false));
|
||||
dispatch(changeSelectedTableHeaderColor({ background: '', font: '' }));
|
||||
}
|
||||
const tblBody2 = sizeCheckList.find((item) => item.ConfigName === 'Table Body Colour')?.ConfigId;
|
||||
if (checkedList?.includes(tblBody2)) {
|
||||
dispatch(changeSelectedTableBodyColour(true));
|
||||
} else {
|
||||
dispatch(changeSelectedTableBodyColour(false));
|
||||
dispatch(changeSelectedTableBodyColor({ background: '', font: '' }));
|
||||
}
|
||||
const ftr2 = sizeCheckList.find((item) => item.ConfigName === 'Footer Colour')?.ConfigId;
|
||||
if (checkedList?.includes(ftr2)) {
|
||||
dispatch(changeSelectedFooterColour(true));
|
||||
} else {
|
||||
dispatch(changeSelectedFooterColour(false));
|
||||
dispatch(changeSelectedFooterColor({ background: '', font: '' }));
|
||||
}
|
||||
const net2 = sizeCheckList.find((item) => item.ConfigName === 'Net Amount Colour')?.ConfigId;
|
||||
if (checkedList?.includes(net2)) {
|
||||
dispatch(changeSelectedNetAmountColour(true));
|
||||
} else {
|
||||
dispatch(changeSelectedNetAmountColour(false));
|
||||
dispatch(changeSelectedNetAmountColor({ background: '', font: '' }));
|
||||
}
|
||||
};
|
||||
|
||||
const fetchInitialData = async () => {
|
||||
|
|
@ -422,7 +534,30 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
Signature: item.Signature,
|
||||
PrintType: item.PrintType,
|
||||
PrintHdrName: item.PrintHdrName,
|
||||
PrintHdrColor: item.PrintHdrColor,
|
||||
// legacy fields are filled from the array so older code still works
|
||||
PrintHdrColor:
|
||||
item.PrintHdrColor || getColor(item.PrintColors, 'headerColor')?.background,
|
||||
PrintHdrFontColor:
|
||||
item.PrintHdrFontColor || getColor(item.PrintColors, 'headerColor')?.font,
|
||||
TableHeaderColor:
|
||||
item.TableHeaderColor || getColor(item.PrintColors, 'tableHeaderColor')?.background,
|
||||
TableHeaderFontColor:
|
||||
item.TableHeaderFontColor || getColor(item.PrintColors, 'tableHeaderColor')?.font,
|
||||
TableBodyColor:
|
||||
item.TableBodyColor || getColor(item.PrintColors, 'tableBodyColor')?.background,
|
||||
TableBodyFontColor:
|
||||
item.TableBodyFontColor || getColor(item.PrintColors, 'tableBodyColor')?.font,
|
||||
footerColor:
|
||||
item.footerColor || getColor(item.PrintColors, 'footerColor')?.background,
|
||||
footerFontColor:
|
||||
item.footerFontColor || getColor(item.PrintColors, 'footerColor')?.font,
|
||||
netAmountColor:
|
||||
item.netAmountColor || getColor(item.PrintColors, 'netAmtColor')?.background,
|
||||
netAmountFontColor:
|
||||
item.netAmountFontColor || getColor(item.PrintColors, 'netAmtColor')?.font,
|
||||
rowType:
|
||||
item.rowType || getColor(item.PrintColors, 'tableBodyColor')?.rowType || 'odd',
|
||||
PrintColors: item.PrintColors,
|
||||
Notes: item?.Notes,
|
||||
PageSize: item?.PageSize?.trim() || '3inch',
|
||||
PrintTypeId: item?.PrintTypeId,
|
||||
|
|
@ -474,6 +609,7 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
OptionDetails,
|
||||
PrintTypeId,
|
||||
PrintHdrColor,
|
||||
PrintColors
|
||||
} = row;
|
||||
if (index >= 4) setShowMore(true);
|
||||
if (index <= 4) setShowMore(false);
|
||||
|
|
@ -487,7 +623,11 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
setNote(Notes);
|
||||
setBillName(PrintHdrName);
|
||||
setEdit(true);
|
||||
setSelectedColour(PrintHdrColor);
|
||||
// load existing header color, falling back to array
|
||||
setSelectedColour(
|
||||
PrintHdrColor || getColor(PrintColors, 'headerColor')?.background || '#000000'
|
||||
);
|
||||
// setSelectedHeaderFontColor(PrintHdrFontColor);
|
||||
setSelectedStyleId(StyleId);
|
||||
|
||||
if (Signature) {
|
||||
|
|
@ -538,6 +678,44 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
dispatch(changeNotes(helperFunction('Notes')));
|
||||
dispatch(changeSignatureImage(Signature));
|
||||
dispatch(changeBillName(PrintHdrName));
|
||||
// derive color objects; prefer the legacy fields but fall back to the PrintColors array
|
||||
const hdr = getColor(PrintColors, 'headerColor');
|
||||
const tblHdr = getColor(PrintColors, 'tableHeaderColor');
|
||||
const tblBody = getColor(PrintColors, 'tableBodyColor');
|
||||
const ftr = getColor(PrintColors, 'footerColor');
|
||||
const net = getColor(PrintColors, 'netAmtColor');
|
||||
|
||||
dispatch(
|
||||
changeSelectedHeaderColor({
|
||||
background: PrintHdrColor || hdr.background,
|
||||
font: hdr.font,
|
||||
})
|
||||
);
|
||||
dispatch(
|
||||
changeSelectedTableHeaderColor({
|
||||
background: tblHdr.background || row.TableHeaderColor,
|
||||
font: tblHdr.font || row.TableHeaderFontColor,
|
||||
})
|
||||
);
|
||||
dispatch(
|
||||
changeSelectedTableBodyColor({
|
||||
background: tblBody.background || row.TableBodyColor,
|
||||
font: tblBody.font || row.TableBodyFontColor,
|
||||
})
|
||||
);
|
||||
dispatch(changeRowType(tblBody.rowType || row.rowType || 'odd'));
|
||||
dispatch(
|
||||
changeSelectedFooterColor({
|
||||
background: ftr.background || row.footerColor,
|
||||
font: ftr.font || row.footerFontColor,
|
||||
})
|
||||
);
|
||||
dispatch(
|
||||
changeSelectedNetAmountColor({
|
||||
background: net.background || row.netAmountColor,
|
||||
font: net.font || row.netAmountFontColor,
|
||||
})
|
||||
);
|
||||
dispatch(
|
||||
changeSelectedprintStyle({
|
||||
ConfigId: StyleId,
|
||||
|
|
@ -613,6 +791,8 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
setSelectedStyleName(
|
||||
styleData.find((item) => item.ConfigId === e)?.ConfigName
|
||||
);
|
||||
// reset rowType when selecting a new style
|
||||
dispatch(changeRowType('odd'));
|
||||
dispatch(
|
||||
changeSelectedprintStyle({
|
||||
ConfigId: e,
|
||||
|
|
@ -733,13 +913,42 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
)
|
||||
? dispatch(changeNotes(true))
|
||||
: dispatch(changeNotes(false));
|
||||
|
||||
checkedValues?.includes(
|
||||
sizeCheckList.find((item) => item.ConfigName === 'Header Colour')
|
||||
?.ConfigId
|
||||
)
|
||||
? setisheadercolour(true)
|
||||
: setisheadercolour(false);
|
||||
const hdrId = sizeCheckList.find((item) => item.ConfigName === 'Header Colour')?.ConfigId;
|
||||
if (checkedValues?.includes(hdrId)) {
|
||||
dispatch(changeSelectedHeaderColour(true));
|
||||
} else {
|
||||
dispatch(changeSelectedHeaderColour(false));
|
||||
// reset colours when option disabled
|
||||
dispatch(changeSelectedHeaderColor({ background: '#ffffff', font: '#000000' }));
|
||||
}
|
||||
const tblHdrId = sizeCheckList.find((item) => item.ConfigName === 'Table Header Colour')?.ConfigId;
|
||||
if (checkedValues?.includes(tblHdrId)) {
|
||||
dispatch(changeSelectedTableHeaderColour(true));
|
||||
} else {
|
||||
dispatch(changeSelectedTableHeaderColour(false));
|
||||
dispatch(changeSelectedTableHeaderColor({ background: '', font: '' }));
|
||||
}
|
||||
const tblBodyId = sizeCheckList.find((item) => item.ConfigName === 'Table Body Colour')?.ConfigId;
|
||||
if (checkedValues?.includes(tblBodyId)) {
|
||||
dispatch(changeSelectedTableBodyColour(true));
|
||||
} else {
|
||||
dispatch(changeSelectedTableBodyColour(false));
|
||||
dispatch(changeSelectedTableBodyColor({ background: '', font: '' }));
|
||||
}
|
||||
const ftrId = sizeCheckList.find((item) => item.ConfigName === 'Footer Colour')?.ConfigId;
|
||||
if (checkedValues?.includes(ftrId)) {
|
||||
dispatch(changeSelectedFooterColour(true));
|
||||
} else {
|
||||
dispatch(changeSelectedFooterColour(false));
|
||||
dispatch(changeSelectedFooterColor({ background: '', font: '' }));
|
||||
}
|
||||
const netId = sizeCheckList.find((item) => item.ConfigName === 'Net Amount Colour')?.ConfigId;
|
||||
if (checkedValues?.includes(netId)) {
|
||||
dispatch(changeSelectedNetAmountColour(true));
|
||||
} else {
|
||||
dispatch(changeSelectedNetAmountColour(false));
|
||||
dispatch(changeSelectedNetAmountColor({ background: '', font: '' }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleOptions = async () => {
|
||||
|
|
@ -790,13 +999,28 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
PrintHdrName: BillName,
|
||||
PrintType: PrintType ? 'S' : 'C',
|
||||
PrintTypeId: segmentValue,
|
||||
PrintHdrColor: getConcatenatedArray().some(
|
||||
// Header color (background) and font
|
||||
PrintHdrColor: getConcatenatedArray()?.some(
|
||||
(e) => e?.ConfigName?.toLowerCase() == 'header colour'
|
||||
)
|
||||
? selectedColour
|
||||
? (headerColor || selectedColour)
|
||||
: null,
|
||||
PrintHdrFontColor: getConcatenatedArray()?.some(
|
||||
(e) => e?.ConfigName?.toLowerCase() == 'header colour'
|
||||
)
|
||||
? (headerFontColor || selectedHeaderFontColor)
|
||||
: null,
|
||||
// Table header / body / footer / net amount colors
|
||||
TableHeaderColor: tableHeaderColor || null,
|
||||
TableHeaderFontColor: tableHeaderFontColor || null,
|
||||
TableBodyColor: tableBodyColor || null,
|
||||
TableBodyFontColor: tableBodyFontColor || null,
|
||||
footerColor: footerColor || null,
|
||||
footerFontColor: footerFontColor || null,
|
||||
netAmountColor: netAmountColor || null,
|
||||
netAmountFontColor: netAmountFontColor || null,
|
||||
rowType: rowType || 'odd',
|
||||
});
|
||||
|
||||
// Validation
|
||||
if (isSignatureChecking && fileList?.length === 0)
|
||||
return message.warning('Please upload Signature');
|
||||
|
|
@ -865,7 +1089,39 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
StyleId: item.StyleId,
|
||||
SetasDefault: item.SetasDefault,
|
||||
SetasDefaultInvoice: item.SetasDefaultInvoice,
|
||||
PrintHdrColor: item.PrintHdrColor,
|
||||
PrintHdrColor: [
|
||||
{
|
||||
headerColor: {
|
||||
background: item.PrintHdrColor,
|
||||
font: item.PrintHdrFontColor,
|
||||
},
|
||||
},
|
||||
{
|
||||
tableHeaderColor: {
|
||||
background: item?.TableHeaderColor,
|
||||
font: item?.TableHeaderFontColor,
|
||||
},
|
||||
},
|
||||
{
|
||||
tableBodyColor: {
|
||||
background: item?.TableBodyColor,
|
||||
font: item?.TableBodyFontColor,
|
||||
rowType: rowType,
|
||||
},
|
||||
},
|
||||
{
|
||||
footerColor: {
|
||||
background: item?.footerColor,
|
||||
font: item?.footerFontColor,
|
||||
},
|
||||
},
|
||||
{
|
||||
netAmtColor: {
|
||||
background: item?.netAmountColor,
|
||||
font: item?.netAmountFontColor,
|
||||
},
|
||||
},
|
||||
],
|
||||
PrintTypeId: item?.PrintTypeId,
|
||||
SizeDetails: item.OptionDetails.map((item) => ({
|
||||
OptionId: item.ConfigId,
|
||||
|
|
@ -1045,6 +1301,37 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
|
||||
// }
|
||||
|
||||
const handleColorSave = (colors) => {
|
||||
// common handler called when ColorsSelected modal returns values
|
||||
console.log("Received from modal:", colors);
|
||||
switch (colorModalTarget) {
|
||||
case 'header':
|
||||
dispatch(changeSelectedHeaderColor({ background: colors.background, font: colors.font }));
|
||||
setSelectedColour(colors.background);
|
||||
setSelectedHeaderFontColor(colors.font);
|
||||
break;
|
||||
case 'tableHeader':
|
||||
dispatch(changeSelectedTableHeaderColor({ background: colors.background, font: colors.font }));
|
||||
break;
|
||||
case 'tableBody':
|
||||
dispatch(changeSelectedTableBodyColor({ background: colors.background, font: colors.font }));
|
||||
break;
|
||||
case 'footer':
|
||||
dispatch(changeSelectedFooterColor({ background: colors.background, font: colors.font }));
|
||||
break;
|
||||
case 'netAmount':
|
||||
dispatch(changeSelectedNetAmountColor({ background: colors.background, font: colors.font }));
|
||||
break;
|
||||
default:
|
||||
dispatch(changeSelectedHeaderColor({ background: colors.background, font: colors.font }));
|
||||
break;
|
||||
}
|
||||
// update local previews as well (not strictly necessary if UI reads from store)
|
||||
setBgColor(colors.background);
|
||||
setFontColor(colors.font);
|
||||
setOpenColorModal(false);
|
||||
setColorModalTarget(null);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Messages
|
||||
|
|
@ -1387,21 +1674,215 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
</div>
|
||||
)}
|
||||
{isheadercolour && (
|
||||
// {isheadercolour && SelectedStyleName == 'TaxInvoice' && (
|
||||
<div style={{ marginTop: '1rem' }}>
|
||||
<Title level={5} style={{ marginBottom: 12 }}>
|
||||
Header Color
|
||||
</Title>
|
||||
<ColorPicker
|
||||
value={selectedColour}
|
||||
onChange={(color) => {
|
||||
setSelectedColour(color);
|
||||
dispatch(changeSelectedHeaderColor(color));
|
||||
<button
|
||||
onClick={() => {
|
||||
setColorModalTarget('header');
|
||||
setOpenColorModal(true);
|
||||
}}
|
||||
className="handleAddBTN"
|
||||
>
|
||||
<PlusOutlined /> select color
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: 16,
|
||||
height: 16,
|
||||
backgroundColor: headerColor || '#ffffff',
|
||||
border: '1px solid #000',
|
||||
marginLeft: 6,
|
||||
verticalAlign: 'middle',
|
||||
}}
|
||||
placeholder="Select color"
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block', width: 16, height: 16, backgroundColor: headerFontColor,
|
||||
border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{isTableHeaderColour && (
|
||||
<div style={{ marginTop: '1rem' }}>
|
||||
<Title level={5} style={{ marginBottom: 12 }}>
|
||||
Table Header Colour
|
||||
</Title>
|
||||
<button
|
||||
onClick={() => {
|
||||
setColorModalTarget('tableHeader');
|
||||
|
||||
setOpenColorModal(true);
|
||||
}}
|
||||
className="handleAddBTN"
|
||||
>
|
||||
<PlusOutlined /> select color
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: 16,
|
||||
height: 16,
|
||||
backgroundColor: tableHeaderColor,
|
||||
border: '1px solid #000',
|
||||
marginLeft: 6,
|
||||
verticalAlign: 'middle',
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block', width: 16, height: 16, backgroundColor: tableHeaderFontColor,
|
||||
border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{isTableBodyColour && (
|
||||
<div style={{ marginTop: '1rem' }}>
|
||||
<Title level={5} style={{ marginBottom: 12 }}>
|
||||
Table Body Colour
|
||||
</Title>
|
||||
<button
|
||||
onClick={() => {
|
||||
setColorModalTarget('tableBody');
|
||||
setOpenColorModal(true);
|
||||
}}
|
||||
className="handleAddBTN"
|
||||
>
|
||||
<PlusOutlined /> select color
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: 16,
|
||||
height: 16,
|
||||
backgroundColor: tableBodyColor,
|
||||
border: '1px solid #000',
|
||||
marginLeft: 6,
|
||||
verticalAlign: 'middle',
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block', width: 16, height: 16, backgroundColor: tableBodyFontColor,
|
||||
border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
|
||||
<span style={{ margin: '0px 10px' }} className="handleAddBTN">
|
||||
<Switch
|
||||
checked={rowType === "even"}
|
||||
checkedChildren="Even"
|
||||
unCheckedChildren="Odd"
|
||||
onChange={(checked) => dispatch(changeRowType(checked ? "even" : "odd"))}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{isFooterColour && (
|
||||
<div style={{ marginTop: '1rem' }}>
|
||||
<Title level={5} style={{ marginBottom: 12 }}>
|
||||
Footer Colour
|
||||
</Title>
|
||||
<button
|
||||
onClick={() => {
|
||||
setColorModalTarget('footer');
|
||||
setOpenColorModal(true);
|
||||
}}
|
||||
className="handleAddBTN"
|
||||
>
|
||||
<PlusOutlined /> select color
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: 16,
|
||||
height: 16,
|
||||
backgroundColor: footerColor || '#ffffff',
|
||||
border: '1px solid #000',
|
||||
marginLeft: 6,
|
||||
verticalAlign: 'middle',
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block', width: 16, height: 16, backgroundColor: footerFontColor || '#000000',
|
||||
border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isNetAmountColour && (
|
||||
<div style={{ marginTop: '1rem' }}>
|
||||
<Title level={5} style={{ marginBottom: 12 }}>
|
||||
Net Amount Colour
|
||||
</Title>
|
||||
<button
|
||||
onClick={() => {
|
||||
setColorModalTarget('netAmount');
|
||||
setOpenColorModal(true);
|
||||
}}
|
||||
className="handleAddBTN"
|
||||
>
|
||||
<PlusOutlined /> select color
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: 16,
|
||||
height: 16,
|
||||
backgroundColor: netAmountColor || '#ffffff',
|
||||
border: '1px solid #000',
|
||||
marginLeft: 6,
|
||||
verticalAlign: 'middle',
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block', width: 16, height: 16, backgroundColor: netAmountFontColor || '#000000',
|
||||
border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{openColorModal && (
|
||||
<ColorsSelected
|
||||
open={openColorModal}
|
||||
onClose={() => setOpenColorModal(false)}
|
||||
onSave={handleColorSave}
|
||||
initial={{
|
||||
background:
|
||||
colorModalTarget === 'header'
|
||||
? headerColor
|
||||
: colorModalTarget === 'tableHeader'
|
||||
? tableHeaderColor
|
||||
: colorModalTarget === 'tableBody'
|
||||
? tableBodyColor
|
||||
: colorModalTarget === 'footer'
|
||||
? footerColor
|
||||
: colorModalTarget === 'netAmount'
|
||||
? netAmountColor
|
||||
: bgColor,
|
||||
font:
|
||||
colorModalTarget === 'header'
|
||||
? headerFontColor
|
||||
: colorModalTarget === 'tableHeader'
|
||||
? tableHeaderFontColor
|
||||
: colorModalTarget === 'tableBody'
|
||||
? tableBodyFontColor
|
||||
: colorModalTarget === 'footer'
|
||||
? footerFontColor
|
||||
: colorModalTarget === 'netAmount'
|
||||
? netAmountFontColor
|
||||
: fontColor,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isTermscondChecking && (
|
||||
<div style={{ marginTop: '1rem' }}>
|
||||
<Title level={5} style={{ marginBottom: 12 }}>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,130 @@
|
|||
import { Modal } from "antd";
|
||||
import { CloseOutlined, PlusOutlined } from "@ant-design/icons";
|
||||
import { SwatchesPicker } from "react-color";
|
||||
import { useEffect, useState } from "react";
|
||||
import Buttons from "../../../../Components/Forms/Buttons";
|
||||
|
||||
const ColorsSelected = ({ open, onClose, onSave, initial = {} }) => {
|
||||
const [colorType, setColorType] = useState("background");
|
||||
const [bgColor, setBgColor] = useState(initial.background || "#ffffff");
|
||||
const [fontColor, setFontColor] = useState(initial.font || "#000000" );
|
||||
|
||||
// reset when modal is opened with different initial colors
|
||||
useEffect(() => {
|
||||
if (initial.background) setBgColor(initial.background);
|
||||
if (initial.font) setFontColor(initial.font);
|
||||
}, [initial, open]);
|
||||
|
||||
const handleColorChange = (color) => {
|
||||
if (colorType === "background") {
|
||||
setBgColor(color.hex);
|
||||
} else {
|
||||
setFontColor(color.hex);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
onSave({
|
||||
background: bgColor,
|
||||
font: fontColor,
|
||||
});
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
title="Colors"
|
||||
onCancel={onClose}
|
||||
closeIcon={<CloseOutlined />}
|
||||
footer={null}
|
||||
width={400}
|
||||
>
|
||||
|
||||
|
||||
{/* ✅ Selected Color Preview */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
border: "1px solid #ccc",
|
||||
padding: "10px",
|
||||
borderRadius: "8px",
|
||||
marginBottom: "15px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
gap:'10px',
|
||||
}}
|
||||
>
|
||||
{/* Background Preview */}
|
||||
<div
|
||||
onClick={() => setColorType("background")}
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
padding: "5px",
|
||||
borderRadius: "6px",
|
||||
border:
|
||||
colorType === "background"
|
||||
? "2px solid #901D77"
|
||||
: "1px solid transparent",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: 12, fontWeight: 600 }}>
|
||||
Background
|
||||
</p>
|
||||
<div
|
||||
style={{
|
||||
|
||||
width: 40,
|
||||
height: 25,
|
||||
backgroundColor: bgColor,
|
||||
borderRadius: 5,
|
||||
border: "1px solid #000",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Font Preview */}
|
||||
<div
|
||||
onClick={() => setColorType("font")}
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
padding: "5px",
|
||||
borderRadius: "6px",
|
||||
border:
|
||||
colorType === "font"
|
||||
? "2px solid #901D77"
|
||||
: "1px solid transparent",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: 12, fontWeight: 600 }}>
|
||||
Font
|
||||
</p>
|
||||
<div
|
||||
style={{
|
||||
width: 40,
|
||||
height: 25,
|
||||
backgroundColor: fontColor,
|
||||
borderRadius: 5,
|
||||
border: "1px solid #000",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Color Picker */}
|
||||
<SwatchesPicker onChange={handleColorChange} />
|
||||
|
||||
<button className="colorBtn" onClick={handleSave}>
|
||||
SAVE
|
||||
</button>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ColorsSelected;
|
||||
|
|
@ -23,6 +23,17 @@ import {
|
|||
Globalnotes,
|
||||
GlobalthemeFormat,
|
||||
GlobalBillName,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
} from "../../../Features/ThemeChange/ThemeChange";
|
||||
import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.scss";
|
||||
import QRCode from "react-qr-code";
|
||||
|
|
@ -63,6 +74,12 @@ const PurPrintA4Standard = ({ index,
|
|||
const Amount = FieldDetails?.["Amount"];
|
||||
const HsnCode = FieldDetails?.["HsnCode"];
|
||||
const Qrcodet = FieldDetails?.["Qrcode"];
|
||||
let printColors = printDatas?.PrintColors;
|
||||
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
|
||||
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
|
||||
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
|
||||
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
|
||||
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
|
||||
const GlobalSlNo = useSelector(GlobalprintSlNo);
|
||||
const GlobalItem = useSelector(GlobalprintItem);
|
||||
const GlobalMRP = useSelector(GlobalprintMRP);
|
||||
|
|
@ -79,6 +96,17 @@ const PurPrintA4Standard = ({ index,
|
|||
const GlobalIsnotes = useSelector(Globalnotes);
|
||||
const GlobalthemeFormatr = useSelector(GlobalthemeFormat)
|
||||
const GlobalBilltext = useSelector(GlobalBillName)
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
||||
const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
||||
const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
||||
const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
||||
const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
||||
const SelectedRowType = useSelector(GlobalRowType);
|
||||
const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
|
||||
const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
|
||||
const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
||||
const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
||||
const keysLength = Object.keys(table2Data ?? {}).length;
|
||||
console.log(GlobalDiscount, Discount, "Discount");
|
||||
|
||||
|
|
@ -118,10 +146,6 @@ const PurPrintA4Standard = ({ index,
|
|||
|
||||
const formattedDate = `${day}-${monthNames[monthIndex]}-${year}`;
|
||||
|
||||
const TakeawayData = table2Data?.productDetails?.filter(
|
||||
(item) => item.BookingTypeName?.toLowerCase() === "takeaway"
|
||||
|
||||
);
|
||||
const productsData = table2Data?.[0]?.ProductDetails || [];
|
||||
const offers = table2Data?.OrderOfferDetails || [];
|
||||
|
||||
|
|
@ -209,7 +233,51 @@ const PurPrintA4Standard = ({ index,
|
|||
);
|
||||
};
|
||||
|
||||
;
|
||||
const headerStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedHeaderColor
|
||||
: headerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedHeaderFontColor
|
||||
: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableHeaderColor
|
||||
: tableHeaderColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableHeaderFontColor
|
||||
: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableBodyColor
|
||||
: tableBodyColor?.background,
|
||||
color: GlobaldummyData
|
||||
? SelectedTableBodyFontColor
|
||||
: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
|
||||
const footerColorStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableFooterColor
|
||||
: footerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableFooterFontColor
|
||||
: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedNetAmountColor
|
||||
: netAmtColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedNetAmountFontColor
|
||||
: netAmtColor?.font,
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
|
|
@ -565,18 +633,17 @@ const PurPrintA4Standard = ({ index,
|
|||
<div className={`invoice-wrapper container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`} style={{ display: "flex", flexDirection: "column", justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme ? "space-between" : "", height: FormatTheme ? PageSize == "A5" ? '170mm' : (isMobile ? "auto" : "275mm") : "", pageBreakInside: "avoid", }} key={chunkIndex}>
|
||||
|
||||
{/* <div className="invoice-wrapper"> */}
|
||||
{/* Header */}
|
||||
|
||||
|
||||
{/* <div className="header" style={{ position: "fixed", top: 0, width: "100%" }}> */}
|
||||
<div className="header" style={{ position: "relative", width: "100%" }}>
|
||||
<div className="header-section">
|
||||
<div className="header" style={{ position: "relative", width: "100%", }}>
|
||||
<div className="header-section" style={{...headerStyle}}>
|
||||
<h1 className="company-name">{companyName}</h1>
|
||||
<p>{ table2Data?.customerAddress}</p>
|
||||
<div>Phone: {table2Data?.customerMobile}</div>
|
||||
<div>Email: {companyEmail}</div>
|
||||
{(companyGSTIN) && <div style={{ fontSize: "16px", fontWeight: "600" }}>GSTIN: {companyGSTIN}</div>}
|
||||
</div>
|
||||
|
||||
{/* Invoice Title */}
|
||||
<div className="invoice-title">
|
||||
|
||||
|
|
@ -594,9 +661,6 @@ const PurPrintA4Standard = ({ index,
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{table2Data?.CustomerDetails?.length > 0 && <div className="billing-grid">
|
||||
<div className="billing-left">
|
||||
<h3 className="section-title">Details of Receiver | Billed to</h3>
|
||||
|
|
@ -631,31 +695,39 @@ const PurPrintA4Standard = ({ index,
|
|||
<thead>
|
||||
<tr className="table-header">
|
||||
{
|
||||
SLNO == true && <th className="table-header-cell" style={{ textAlign: "center", fontFamily: "sans-serif" }}>S.No</th>}
|
||||
|
||||
SLNO == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "center", fontFamily: "sans-serif" }}>S.No</th>}
|
||||
{
|
||||
Item == true && <th className="table-header-cell" style={{ fontFamily: "sans-serif" }}>Item</th>}
|
||||
|
||||
|
||||
Item == true && <th className="table-header-cell" style={{...tableHeaderStyle, fontFamily: "sans-serif" }}>Item</th>}
|
||||
{
|
||||
HsnCode == true && <th className="table-header-cell" style={{ fontFamily: "sans-serif" }}>HSN </th>}
|
||||
HsnCode == true && <th className="table-header-cell" style={{ ...tableHeaderStyle,fontFamily: "sans-serif" }}>HSN </th>}
|
||||
|
||||
{ Quantity == true && <th className="table-header-cell" style={{ textAlign: "center", fontFamily: "sans-serif" }}>Qty</th>}
|
||||
{ Quantity == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "center", fontFamily: "sans-serif" }}>Qty</th>}
|
||||
|
||||
{ MRP == true && <th className="table-header-cell" style={{ textAlign: "right", fontFamily: "sans-serif" }}>MRP</th>}
|
||||
{ MRP == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "right", fontFamily: "sans-serif" }}>MRP</th>}
|
||||
|
||||
{ Rate == true && <th className="table-header-cell" style={{ textAlign: "right", fontFamily: "sans-serif" }}>Rate</th>}
|
||||
{ Rate == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "right", fontFamily: "sans-serif" }}>Rate</th>}
|
||||
|
||||
{ Discount == true && <th className="table-header-cell" style={{ textAlign: "right", fontFamily: "sans-serif" }}>Dis</th>}
|
||||
{ Discount == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "right", fontFamily: "sans-serif" }}>Dis</th>}
|
||||
|
||||
{ Amount == true && <th className="table-header-cell" style={{ textAlign: "right", fontFamily: "sans-serif" }}>Amount</th>}
|
||||
{ Amount == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "right", fontFamily: "sans-serif" }}>Amount</th>}
|
||||
|
||||
</tr>
|
||||
|
||||
</thead>
|
||||
<tbody>
|
||||
{(dataChunk || []).map((item, idx) => (
|
||||
<tr key={idx} className="table-row">
|
||||
<tr key={idx} className="table-row"
|
||||
style={
|
||||
idx % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: idx % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO == true && (
|
||||
<td className="table-header-cell" style={{ textAlign: "center", fontFamily: "sans-serif" }}>
|
||||
{chunkIndex * chunkSize + idx + 1}
|
||||
|
|
@ -1223,7 +1295,7 @@ const PurPrintA4Standard = ({ index,
|
|||
<div id={`SQA4Standard`} className="invoice-container">
|
||||
<div className="invoice-wrapper">
|
||||
{/* Header */}
|
||||
<div className="header-section">
|
||||
<div className="header-section" style={{...headerStyle}}>
|
||||
<h1 className="company-name">{GlobaldummyData ? "Company Name" : companyName}</h1>
|
||||
<p>{companyAddress}</p>
|
||||
<div>Phone: {GlobaldummyData ? "999999XXXX" : companyPhone}</div>
|
||||
|
|
@ -1340,62 +1412,52 @@ const PurPrintA4Standard = ({ index,
|
|||
<tr className="table-header">
|
||||
{GlobaldummyData
|
||||
? GlobalSlNo && <th className="table-header-cell">S.No</th> :
|
||||
SLNO == true && <th className="table-header-cell">S.No</th>}
|
||||
SLNO == true && <th style={{...tableHeaderStyle,}} className="table-header-cell">S.No</th>}
|
||||
|
||||
{GlobaldummyData
|
||||
? GlobalItem && <th className="table-header-cell">Item</th> :
|
||||
Item == true && <th className="table-header-cell">Item</th>}
|
||||
|
||||
|
||||
Item == true && <th style={{...tableHeaderStyle,}} className="table-header-cell">Item</th>}
|
||||
{GlobaldummyData
|
||||
? GlobalHsnCode && <th className="table-header-cell">HSN </th> :
|
||||
HsnCode == true && <th className="table-header-cell">HSN </th>}
|
||||
|
||||
HsnCode == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">HSN </th>}
|
||||
{GlobaldummyData
|
||||
? GlobalQuantity && <th className="table-header-cell">Qty</th>
|
||||
: Quantity == true && <th className="table-header-cell">Qty</th>}
|
||||
: Quantity == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">Qty</th>}
|
||||
|
||||
{/* <th className="table-header-cell">UOM</th>
|
||||
<th className="table-header-cell">UOM</th> */}
|
||||
|
||||
{GlobaldummyData
|
||||
? GlobalMRP && <th className="table-header-cell">MRP</th>
|
||||
: MRP == true && <th className="table-header-cell">MRP</th>}
|
||||
: MRP == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">MRP</th>}
|
||||
|
||||
{GlobaldummyData
|
||||
? GlobalRate && <th className="table-header-cell">Rate</th>
|
||||
: Rate == true && <th className="table-header-cell">Rate</th>}
|
||||
: Rate == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">Rate</th>}
|
||||
|
||||
{GlobaldummyData
|
||||
? GlobalDiscount && <th className="table-header-cell">Dis</th>
|
||||
: Discount == true && <th className="table-header-cell">Dis</th>}
|
||||
: Discount == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">Dis</th>}
|
||||
|
||||
{GlobaldummyData
|
||||
? GlobalAmount && <th className="table-header-cell">Amount</th>
|
||||
: Amount == true && <th className="table-header-cell">Amount</th>}
|
||||
|
||||
{/* <th className="table-header-cell">Taxable</th>
|
||||
<th className="table-header-cell-center" colSpan="2">IGST</th>
|
||||
<th className="table-header-cell-last">Total</th> */}
|
||||
: Amount == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">Amount</th>}
|
||||
</tr>
|
||||
{/* <tr className="table-header">
|
||||
<th className="table-header-cell"></th>
|
||||
<th className="table-header-cell"></th>
|
||||
<th className="table-header-cell"></th>
|
||||
<th className="table-header-cell"></th>
|
||||
<th className="table-header-cell"></th>
|
||||
<th className="table-header-cell"></th>
|
||||
<th className="table-header-cell"></th>
|
||||
<th className="table-header-cell"></th>
|
||||
<th className="table-header-cell"></th>
|
||||
<th className="table-header-cell-center">Rate</th>
|
||||
<th className="table-header-cell-center">Amount</th>
|
||||
<th className="table-header-cell-last"></th>
|
||||
</tr> */}
|
||||
|
||||
</thead>
|
||||
<tbody>
|
||||
{((GlobaldummyData ? products : productsData) || []).map((item, idx) => (
|
||||
<tr key={idx} className="table-row">
|
||||
<tr key={idx} className="table-row"
|
||||
style={
|
||||
idx % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: idx % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{GlobaldummyData
|
||||
? GlobalSlNo && (
|
||||
<td className="table-header-cell" style={{ textAlign: "center" }}>
|
||||
|
|
@ -1513,6 +1575,7 @@ const PurPrintA4Standard = ({ index,
|
|||
fontSize: "10px",
|
||||
flexWrap: "wrap",
|
||||
gap: "2px",
|
||||
...netAmountStyle
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
|
@ -1537,20 +1600,13 @@ const PurPrintA4Standard = ({ index,
|
|||
{" "}
|
||||
Qty:{GlobaldummyData ? "9" : totalQuantity}
|
||||
</div>
|
||||
{/* {ExtraChargeTotal > 0 && <p style={{ margin: 0, padding: 0, fontSize: "12px" }}> Extra Charges:{ExtraChargeTotal}</p>} */}
|
||||
|
||||
|
||||
{/* {(TotalOfferAmount > 0 || table2Data?.OverallDisc > 0) && (
|
||||
<p style={{ margin: 0, padding: 0, fontSize: "10px", fontWeight: "600" }}>
|
||||
Off :{(Number(TotalOfferAmount || 0) + Number(table2Data?.OverallDisc || 0)).toFixed(2)}
|
||||
</p>
|
||||
)} */}
|
||||
<div
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
fontSize: "10px",
|
||||
fontWeight: "600",
|
||||
|
||||
}}
|
||||
>
|
||||
Amount :₹
|
||||
|
|
|
|||
|
|
@ -4,21 +4,22 @@ import QrImage from '../../../Images/qrcode.jpg';
|
|||
import Logo from '../../../Images/Logo.jpg'
|
||||
import { extractLastNumber, extractLastNumberOrderId, printDiv } from '../../../Services/Others';
|
||||
import {
|
||||
|
||||
|
||||
changeReprintDataFound,
|
||||
GloabalFieldDetails,
|
||||
GlobalprintSignature,
|
||||
GlobalprinttermsAndConditions,
|
||||
GlobalSignatureImage,
|
||||
Globalnotes,
|
||||
GlobalthemeFormat,
|
||||
GlobalBillName,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
GlobalPritdummyData,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
} from '../../../Features/ThemeChange/ThemeChange'
|
||||
import { GlobalUpiIDprint } from '../../../Features/BookingScreen/BookingData/BookingData';
|
||||
import '../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle12.scss'
|
||||
import QRCode from 'react-qr-code';
|
||||
import signature from "../../../Images/signatureimage.jpg"
|
||||
import { ApplicationPreferences } from '../../../Features/BrachLogin/BranchLogin';
|
||||
import { isMobile } from 'react-device-detect';
|
||||
|
||||
|
|
@ -28,8 +29,19 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
OrderDetailGST, OrderDetailIGST, OrderDetailVAT, table2Data, PaymentStatus, PrintGreeting, printDatas }) => {
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const GlobalUpiID = useSelector(GlobalUpiIDprint)
|
||||
// const FieldDetails = useSelector(GloabalFieldDetails);
|
||||
const GlobaldummyData = useSelector(GlobalPritdummyData);
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
||||
const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
||||
const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
||||
const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
||||
const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
||||
const SelectedRowType = useSelector(GlobalRowType);
|
||||
const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
|
||||
const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
|
||||
const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
||||
const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
||||
|
||||
const FieldDetails = printDatas?.FieldDetails?.reduce((acc, item) => {
|
||||
acc[item.ConfigName] = true;
|
||||
|
|
@ -44,13 +56,14 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
const Rate = FieldDetails?.["Rate"];
|
||||
const Amount = FieldDetails?.["Amount"];
|
||||
const HsnCode = FieldDetails?.["HsnCode"];
|
||||
|
||||
let printColors = printDatas?.PrintColors;
|
||||
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
|
||||
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
|
||||
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
|
||||
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
|
||||
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
|
||||
|
||||
const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
|
||||
const appPreferences = useSelector(ApplicationPreferences);
|
||||
|
||||
|
||||
|
||||
let TermsAndConditions = printDatas?.TermsandConditions
|
||||
let SignatureImg = printDatas?.Signature
|
||||
let Notestext = printDatas?.Notes
|
||||
|
|
@ -229,20 +242,61 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
const PrintA4 = async () => {
|
||||
await printDiv("SQPrintStyle12", style12, 'FontApply');
|
||||
};
|
||||
console.log(table2Data, 'Address1');
|
||||
|
||||
const headerStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedHeaderColor
|
||||
: headerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedHeaderFontColor
|
||||
: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableHeaderColor
|
||||
: tableHeaderColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableHeaderFontColor
|
||||
: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableBodyColor
|
||||
: tableBodyColor?.background,
|
||||
color: GlobaldummyData
|
||||
? SelectedTableBodyFontColor
|
||||
: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
|
||||
const footerColorStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableFooterColor
|
||||
: footerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableFooterFontColor
|
||||
: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedNetAmountColor
|
||||
: netAmtColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedNetAmountFontColor
|
||||
: netAmtColor?.font,
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
FormatTheme ?
|
||||
<div id="SQPrintStyle12" onClick={PrintA4} className='PrintStyle12MasterDiv' style={{ fontFamily: "'Courier New', Courier, monospace", position: "relative", width: "100%", minHeight: isMobile ? (PageSize === "A5" ? "210mm" : "297mm") : "auto" }}>
|
||||
|
||||
{paginatedChunks.map((dataChunk, chunkIndex) => (
|
||||
<div className={`container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`} style={{ display: "flex", flexDirection: "column", justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme ? "space-between" : "", height: FormatTheme ? PageSize == "A5" ? '170mm' : "257mm" : "", }} key={chunkIndex}>
|
||||
|
||||
|
||||
<div className="header" style={{ position: isMobile ? "fixed" : "", top: 0, width: "100%" }}>
|
||||
<div className="header" style={{ position: isMobile ? "fixed" : "", top: 0, width: "100%", ...headerStyle }}>
|
||||
<div className='PrintStyle12-firstDiv'>
|
||||
|
||||
<div style={{ display: "flex", flexDirection: "column" }}>
|
||||
|
|
@ -257,22 +311,15 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
return <div key={index}>{parts}</div>;
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)" }}> Mobile : +91 {table2Data?.customerMobile}</div>
|
||||
|
||||
|
||||
{
|
||||
<div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)" }}>Customer Name : {table2Data?.customerName}
|
||||
</div>
|
||||
}
|
||||
|
||||
{table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null &&
|
||||
<div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)" }}>Customer : {table2Data?.CustSuppName}
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
|
||||
{table2Data?.OrderType === "E" && <div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)", fontWeight: '600' }}>Estimate </div>}
|
||||
</div>
|
||||
<div style={{ display: "flex" }}> <img style={{ width: "60px", height: "60px" }} src={base64Image} alt='image' /></div>
|
||||
|
|
@ -292,19 +339,29 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
<table className="PrintStyle12-print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{SLNO && <th>S.No</th>}
|
||||
{Item && <th>Des</th>}
|
||||
{Quantity && <th style={{ textAlign: "right" }}>Qty</th>}
|
||||
{MRP && <th style={{ textAlign: 'right' }}>MRP</th>}
|
||||
{Rate && <th style={{ textAlign: "right" }}>Rate</th>}
|
||||
{HsnCode && <th style={{ textAlign: "right" }}>HSN</th>}
|
||||
{Discount && <th style={{ textAlign: 'right' }}>(%)</th>}
|
||||
{Amount && <th style={{ textAlign: "right" }}>Amt</th>}
|
||||
{SLNO && <th style={{ ...tableHeaderStyle }}>S.No</th>}
|
||||
{Item && <th style={{ ...tableHeaderStyle }}>Des</th>}
|
||||
{Quantity && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>Qty</th>}
|
||||
{MRP && <th style={{ ...tableHeaderStyle, textAlign: 'right' }}>MRP</th>}
|
||||
{Rate && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>Rate</th>}
|
||||
{HsnCode && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>HSN</th>}
|
||||
{Discount && <th style={{ ...tableHeaderStyle, textAlign: 'right' }}>(%)</th>}
|
||||
{Amount && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>Amt</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dataChunk?.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<tr key={index} style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO && <td>{index + 1}</td>}
|
||||
{Item && (
|
||||
<td style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
|
|
@ -383,7 +440,7 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
<hr style={{ width: '100%', borderWidth: '0.7px', borderTop: '0.5px solid rgb(0, 0, 0)' }} />
|
||||
|
||||
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between" ,...netAmountStyle}}>
|
||||
<div style={{ width: '45%', fontWeight: "600" }}>
|
||||
Amount
|
||||
</div>
|
||||
|
|
@ -391,9 +448,6 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
<div style={{ padding: '0rem 1rem', display: "flex", justifyContent: "flex-end", fontWeight: "600", width: '35%' }}>
|
||||
{Number(table2Data?.[0]?.NetAmount || 0).toFixed(2)}
|
||||
</div>
|
||||
|
||||
{console.log(table2Data?.[0]?.NetAmount, 'table2Data?.NetAmount')
|
||||
}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -562,6 +616,7 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
@ -663,7 +718,7 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
<hr style={{ width: '100%', borderWidth: '0.7px', borderTop: '0.5px solid rgb(0, 0, 0)' }} />
|
||||
|
||||
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between",...netAmountStyle }}>
|
||||
<div style={{ width: '45%', fontWeight: "600" }}>
|
||||
Amount
|
||||
</div>
|
||||
|
|
@ -820,6 +875,7 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
@ -861,14 +917,9 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
:
|
||||
</div> :
|
||||
<div id={`SQPrintStyle12`} className='PrintStyle12MasterDiv' style={{ fontFamily: "'Courier New', Courier, monospace" }}>
|
||||
<div className='PrintStyle12-firstDiv'>
|
||||
|
||||
{/* <h3>{table2Data?.BrName}</h3> */}
|
||||
<div className='PrintStyle12-firstDiv' style={{ ...headerStyle }}>
|
||||
<div style={{ display: "flex", flexDirection: "column" }}>
|
||||
<hr style={{ width: '100%', borderWidth: '0.7px', borderTop: '0.5px dashed rgb(0, 0, 0)' }} />
|
||||
|
||||
|
|
@ -886,19 +937,9 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
<div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)" }}>Customer : {table2Data?.CustSuppName}
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
{table2Data?.BookingTypeName == 'Dine In' &&
|
||||
<div>
|
||||
Waiter : {table2Data?.SalesTableLinkDetails?.[0]?.WaiterName}
|
||||
</div>}
|
||||
{table2Data?.OrderType === "E" && <div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)", fontWeight: '600' }}>Estimate </div>}
|
||||
</div>
|
||||
<div style={{ display: "flex" }}> <img style={{ width: "60px", height: "60px" }} src={base64Image} alt='image' /></div>
|
||||
</div>
|
||||
{/* <div style={{ display: "flex", justifyContent: "left", marginTop: '5px' }}>
|
||||
<p style={{ marginTop: '5px', padding: 0, fontSize: "17px", fontWeight: "600" }}>{table2Data?.PaymentTypeName} Payment : {Number(table2Data?.NetAmount).toFixed(2)}/- </p>
|
||||
</div> */}
|
||||
<div className='PrintStyle12-SecondDiv'>
|
||||
<div style={{ fontWeight: '600', fontSize: "clamp(0.9286rem, 2.5vw, 1rem)" }}>Bill No : {table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)}</div>
|
||||
<div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)", padding: '0 1rem' }}>{Date1}</div>
|
||||
|
|
@ -913,20 +954,30 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
<table className="PrintStyle12-print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{SLNO && <th>S.No</th>}
|
||||
{Item && <th>Des</th>}
|
||||
{Quantity && <th style={{ textAlign: "right" }}>Qty</th>}
|
||||
{MRP && <th style={{ textAlign: 'right' }}>MRP</th>}
|
||||
{Rate && <th style={{ textAlign: "right" }}>Rate</th>}
|
||||
{HsnCode && <th style={{ textAlign: "right" }}>HSN</th>}
|
||||
{Discount && <th style={{ textAlign: 'right' }}>(%)</th>}
|
||||
{Amount && <th style={{ textAlign: "right" }}>Amt</th>}
|
||||
{SLNO && <th style={{ ...tableHeaderStyle }}>S.No</th>}
|
||||
{Item && <th style={{ ...tableHeaderStyle }}>Des</th>}
|
||||
{Quantity && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>Qty</th>}
|
||||
{MRP && <th style={{ ...tableHeaderStyle, textAlign: 'right' }}>MRP</th>}
|
||||
{Rate && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>Rate</th>}
|
||||
{HsnCode && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>HSN</th>}
|
||||
{Discount && <th style={{ ...tableHeaderStyle, textAlign: 'right' }}>(%)</th>}
|
||||
{Amount && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>Amt</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{TakeawayData?.map((item, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<tr key={index} style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO && <td>{index + 1}</td>}
|
||||
{Item && (
|
||||
<td style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
|
|
@ -1010,7 +1061,7 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
<hr style={{ width: '100%', borderWidth: '0.7px', borderTop: '0.5px solid rgb(0, 0, 0)' }} />
|
||||
|
||||
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between",...netAmountStyle}}>
|
||||
<div style={{ width: '45%', fontWeight: "600" }}>
|
||||
Amount
|
||||
</div>
|
||||
|
|
@ -1173,6 +1224,7 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -7,7 +7,22 @@ import { printDiv } from "../../../Services/Others";
|
|||
|
||||
import '../../../Styles/BookingScreen/PrintTemplates/A4/PrintA4Style11.scss'
|
||||
import { useSelector } from 'react-redux';
|
||||
import { GloabalFieldDetails, GlobalBillName, Globalnotes, GlobalprintAmount, GlobalprintDiscount, GlobalprintHsnCode, GlobalprintItem, GlobalprintMRP, GlobalprintQrcodet, GlobalprintQuantity, GlobalprintRate, GlobalprintSignature, GlobalprintSlNo, GlobalprinttermsAndConditions, GlobalPritdummyData, GlobalSignatureImage, GlobalthemeFormat } from '../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
GloabalFieldDetails, GlobalBillName, Globalnotes,
|
||||
GlobalprintQrcodet, GlobalprintSignature, GlobalprintSlNo, GlobalprinttermsAndConditions, GlobalPritdummyData,
|
||||
GlobalSignatureImage, GlobalthemeFormat,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
} from '../../../Features/ThemeChange/ThemeChange';
|
||||
import signature from "../../../Images/signatureimage.jpg"
|
||||
import QRCode from 'react-qr-code';
|
||||
import { isMobile } from 'react-device-detect';
|
||||
|
|
@ -19,6 +34,17 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
const GlobalSignature = useSelector(GlobalprintSignature);
|
||||
const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
|
||||
// const FieldDetails = useSelector(GloabalFieldDetails);
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
||||
const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
||||
const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
||||
const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
||||
const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
||||
const SelectedRowType = useSelector(GlobalRowType);
|
||||
const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
|
||||
const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
|
||||
const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
||||
const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
||||
const FieldDetails = printDatas?.FieldDetails?.reduce((acc, item) => {
|
||||
acc[item.ConfigName] = true;
|
||||
return acc;
|
||||
|
|
@ -37,6 +63,12 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
const Qrcodet = FieldDetails?.["Qrcode"];
|
||||
const Signature = FieldDetails?.["signature"];
|
||||
const TermsnAdCondition = FieldDetails?.["terms&conditions"];
|
||||
let printColors = printDatas?.PrintColors;
|
||||
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
|
||||
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
|
||||
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
|
||||
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
|
||||
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
|
||||
const GlobalQrcodet = useSelector(GlobalprintQrcodet);
|
||||
const GlobaldummyData = useSelector(GlobalPritdummyData);
|
||||
const GlobalBilltext = useSelector(GlobalBillName)
|
||||
|
|
@ -87,7 +119,51 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
}
|
||||
const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > 6;
|
||||
const headerStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedHeaderColor
|
||||
: headerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedHeaderFontColor
|
||||
: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableHeaderColor
|
||||
: tableHeaderColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableHeaderFontColor
|
||||
: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableBodyColor
|
||||
: tableBodyColor?.background,
|
||||
color: GlobaldummyData
|
||||
? SelectedTableBodyFontColor
|
||||
: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
|
||||
const footerColorStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableFooterColor
|
||||
: footerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableFooterFontColor
|
||||
: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedNetAmountColor
|
||||
: netAmtColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedNetAmountFontColor
|
||||
: netAmtColor?.font,
|
||||
}
|
||||
return (
|
||||
<div style={{
|
||||
display: "flex",
|
||||
|
|
@ -101,7 +177,7 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
<div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height: isMobile ? (FormatTheme ? "297mm" : "auto") : '257mm' }} className="print-page" key={chunkIndex}>
|
||||
<div className="page-headerA4Style11" style={{ textAlign: "center" }}>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left', ...headerStyle }}>
|
||||
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
|
|
@ -149,18 +225,6 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
<div className="print-body">
|
||||
{TakeawayData?.length > 0 && (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
fontSize: "12px",
|
||||
fontWeight: "600",
|
||||
}}
|
||||
>
|
||||
Take Away
|
||||
</div>
|
||||
<table className="A4TableStyle11" style={{ width: '100%' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -178,21 +242,21 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
<table style={{ width: "99%", margin: "auto" }} className='A4TableA4Style11'>
|
||||
<thead>
|
||||
<tr style={{ background: '#373B44', color: '#fff', }}>
|
||||
{SLNO == true && <th style={{ width: '10%', textAlign: "center" }}>S.No</th>}
|
||||
{Item == true && <th>Item</th>}
|
||||
{SLNO == true && <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>S.No</th>}
|
||||
{Item == true && <th style={{ ...tableHeaderStyle }}>Item</th>}
|
||||
{HsnCode == true && (
|
||||
<th style={{ width: '10%', textAlign: "center" }}>HSN</th>
|
||||
<th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>HSN</th>
|
||||
)}
|
||||
{Quantity == true && (
|
||||
<th style={{ width: '10%', textAlign: "center" }}>Qty</th>
|
||||
<th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>Qty</th>
|
||||
)}
|
||||
{MRP == true && <th style={{ width: '10%', textAlign: "center" }}>MRP</th>}
|
||||
{Rate == true && <th style={{ width: '10%', textAlign: "center" }}>Rate</th>}
|
||||
{MRP == true && <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>MRP</th>}
|
||||
{Rate == true && <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>Rate</th>}
|
||||
{Discount == true && (
|
||||
<th style={{ width: '10%', textAlign: "center" }}>Dis </th>
|
||||
<th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>Dis </th>
|
||||
)}
|
||||
{Amount == true && (
|
||||
<th style={{ width: '10%', textAlign: "center", textAlign: "right" }}>
|
||||
<th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center", textAlign: "right" }}>
|
||||
Amt
|
||||
</th>
|
||||
)}
|
||||
|
|
@ -201,7 +265,18 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
|
||||
<tbody>
|
||||
{dataChunk?.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO == true && (
|
||||
<td style={{ textAlign: "center" }}>
|
||||
{chunkIndex * chunkSize + index + 1}
|
||||
|
|
@ -304,7 +379,7 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
{(TotalOfferAmount > 0 || table2Data?.OverallDisc) ? (<div>{Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div>) : ""}
|
||||
</div>
|
||||
</div>
|
||||
<div className='total-Amount' style={{ fontSize: "25px", fontWeight: "600", padding: "10px", backgroundColor: "#fdc716", textAlign: "center" }}>Amount :{Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div>
|
||||
<div className='total-Amount' style={{...netAmountStyle, fontSize: "25px", fontWeight: "600", padding: "10px", textAlign: "center" }}>Amount :{Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr className="PrintA4Style11-print-dottline" />
|
||||
|
|
@ -356,13 +431,8 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
<div className='PrintA4Style11-print-InfoDivsub' style={{ textTransform: 'capitalize' }}>{Date1}</div>
|
||||
</div>
|
||||
</>
|
||||
{GlobaldummyData ? GlobalIsnotes &&
|
||||
(<div>
|
||||
<p style={{ padding: "0rem 1rem" }}>Notes : 10 days Return policy</p>
|
||||
|
||||
<hr className="PrintA4Style11-print-dottline" />
|
||||
</div>) :
|
||||
Notestext && (<div>
|
||||
<div style={{ ...footerColorStyle }}>
|
||||
{Notestext && (<div>
|
||||
<p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p>
|
||||
|
||||
<hr className="PrintA4Style11-print-dottline" />
|
||||
|
|
@ -371,37 +441,23 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
|
||||
|
||||
<div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
|
||||
{GlobaldummyData ? GlobaltermsAndConditions &&
|
||||
(<div style={{ margin: "8px 0", padding: "8px", fontFamily: "sans-serif", width: "100%" }}>
|
||||
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
|
||||
Terms & Conditions
|
||||
</p>
|
||||
<ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
|
||||
<li>Once goods are sold, they are not exchangeable or refundable.</li>
|
||||
<li>Please check the product before leaving the counter.</li>
|
||||
</ol>
|
||||
</div>)
|
||||
:
|
||||
(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
|
||||
{(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
|
||||
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
|
||||
Terms & Conditions
|
||||
</p>
|
||||
<ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
|
||||
{TermsAndConditions?.map(item => (<li style={{ textAlign: "start" }}>{item?.TermsandConditions}</li>))}
|
||||
{/* <li>Please check the product before leaving the counter.</li> */}
|
||||
</ol>
|
||||
</div>)
|
||||
}
|
||||
|
||||
{GlobaldummyData ? GlobalSignature && (<div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", paddingBottom: "1rem" }}>
|
||||
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p>
|
||||
<img style={{ width: "70px", height: "40px" }} src={GlobalSignatureImages ? GlobalSignatureImages : signature} alt="" />
|
||||
</div>) : Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}>
|
||||
{Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}>
|
||||
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p>
|
||||
<img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" />
|
||||
</div>)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>}
|
||||
<hr className="PrintA4Style11-print-dottline" />
|
||||
</div>
|
||||
|
|
@ -447,7 +503,7 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div className='total-Amount' style={{ fontSize: "25px", fontWeight: "600", padding: "10px", backgroundColor: "#fdc716", textAlign: "center" }}>Amount :{GlobaldummyData ? "1066" : Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div>
|
||||
<div className='total-Amount' style={{ fontSize: "25px", fontWeight: "600", padding: "10px", ...netAmountStyle, textAlign: "center" }}>Amount :{GlobaldummyData ? "1066" : Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -545,13 +601,8 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
<div className='PrintA4Style11-print-InfoDivsub' style={{ textTransform: 'capitalize' }}>{Date1}</div>
|
||||
</div>
|
||||
</>
|
||||
{GlobaldummyData ? GlobalIsnotes &&
|
||||
(<div>
|
||||
<p style={{ padding: "0rem 1rem" }}>Notes : 10 days Return policy</p>
|
||||
|
||||
<hr className="PrintA4Style11-print-dottline" />
|
||||
</div>) :
|
||||
Notestext && (<div>
|
||||
<div style={{ ...footerColorStyle }}>
|
||||
{Notestext && (<div>
|
||||
<p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p>
|
||||
|
||||
<hr className="PrintA4Style11-print-dottline" />
|
||||
|
|
@ -560,38 +611,24 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
|
||||
|
||||
<div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
|
||||
{GlobaldummyData ? GlobaltermsAndConditions &&
|
||||
(<div style={{ margin: "8px 0", padding: "8px", fontFamily: "sans-serif", width: "100%" }}>
|
||||
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
|
||||
Terms & Conditions
|
||||
</p>
|
||||
<ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
|
||||
<li>Once goods are sold, they are not exchangeable or refundable.</li>
|
||||
<li>Please check the product before leaving the counter.</li>
|
||||
</ol>
|
||||
</div>)
|
||||
:
|
||||
(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
|
||||
{(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
|
||||
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
|
||||
Terms & Conditions
|
||||
</p>
|
||||
<ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
|
||||
{TermsAndConditions?.map(item => (<li style={{ textAlign: "start" }}>{item?.TermsandConditions}</li>))}
|
||||
{/* <li>Please check the product before leaving the counter.</li> */}
|
||||
</ol>
|
||||
</div>)
|
||||
}
|
||||
|
||||
{GlobaldummyData ? GlobalSignature && (<div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", paddingBottom: "1rem" }}>
|
||||
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p>
|
||||
<img style={{ width: "70px", height: "40px" }} src={GlobalSignatureImages ? GlobalSignatureImages : signature} alt="" />
|
||||
</div>) : Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}>
|
||||
{Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}>
|
||||
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p>
|
||||
<img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" />
|
||||
</div>)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div >
|
||||
))}
|
||||
|
|
@ -633,7 +670,7 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div className='total-Amount' style={{ fontSize: "25px", fontWeight: "600", padding: "10px", backgroundColor: "#fdc716", textAlign: "center" }}>Amount :{GlobaldummyData ? "1066" : Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div>
|
||||
<div className='total-Amount' style={{...netAmountStyle, fontSize: "25px", fontWeight: "600", padding: "10px",textAlign: "center" }}>Amount :{GlobaldummyData ? "1066" : Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -731,13 +768,9 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
<div className='PrintA4Style11-print-InfoDivsub' style={{ textTransform: 'capitalize' }}>{Date1}</div>
|
||||
</div>
|
||||
</>
|
||||
{GlobaldummyData ? GlobalIsnotes &&
|
||||
(<div>
|
||||
<p style={{ padding: "0rem 1rem" }}>Notes : 10 days Return policy</p>
|
||||
|
||||
<hr className="PrintA4Style11-print-dottline" />
|
||||
</div>) :
|
||||
Notestext && (<div>
|
||||
<div style={{ ...footerColorStyle }}>
|
||||
{Notestext && (<div>
|
||||
<p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p>
|
||||
|
||||
<hr className="PrintA4Style11-print-dottline" />
|
||||
|
|
@ -746,32 +779,17 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
|
||||
|
||||
<div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
|
||||
{GlobaldummyData ? GlobaltermsAndConditions &&
|
||||
(<div style={{ margin: "8px 0", padding: "8px", fontFamily: "sans-serif", width: "100%" }}>
|
||||
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
|
||||
Terms & Conditions
|
||||
</p>
|
||||
<ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
|
||||
<li>Once goods are sold, they are not exchangeable or refundable.</li>
|
||||
<li>Please check the product before leaving the counter.</li>
|
||||
</ol>
|
||||
</div>)
|
||||
:
|
||||
(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
|
||||
{(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
|
||||
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
|
||||
Terms & Conditions
|
||||
</p>
|
||||
<ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
|
||||
{TermsAndConditions?.map(item => (<li style={{ textAlign: "start" }}>{item?.TermsandConditions}</li>))}
|
||||
{/* <li>Please check the product before leaving the counter.</li> */}
|
||||
</ol>
|
||||
</div>)
|
||||
}
|
||||
|
||||
{GlobaldummyData ? GlobalSignature && (<div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", paddingBottom: "1rem" }}>
|
||||
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p>
|
||||
<img style={{ width: "70px", height: "40px" }} src={GlobalSignatureImages ? GlobalSignatureImages : signature} alt="" />
|
||||
</div>) : Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}>
|
||||
{Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}>
|
||||
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p>
|
||||
<img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" />
|
||||
</div>)}
|
||||
|
|
@ -779,6 +797,7 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,21 @@ import { printDiv } from "../../../Services/Others";
|
|||
// import HpyImg from "../../../Images/happyemoji.png"
|
||||
import '../../../Styles/BookingScreen/PrintTemplates/A4/PrintA4Style11.scss'
|
||||
import { useSelector } from 'react-redux';
|
||||
import { GloabalFieldDetails, GlobalBillName, Globalnotes, GlobalprintAmount, GlobalprintDiscount, GlobalprintHsnCode, GlobalprintItem, GlobalprintMRP, GlobalprintQrcodet, GlobalprintQuantity, GlobalprintRate, GlobalprintSignature, GlobalprintSlNo, GlobalprinttermsAndConditions, GlobalPritdummyData, GlobalSignatureImage, GlobalthemeFormat } from '../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
Globalnotes, GlobalprintRate, GlobalprintSignature, GlobalprinttermsAndConditions, GlobalSignatureImage, GlobalthemeFormat,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
GlobalPritdummyData,
|
||||
} from '../../../Features/ThemeChange/ThemeChange';
|
||||
import signature from "../../../Images/signatureimage.jpg"
|
||||
import QRCode from 'react-qr-code';
|
||||
import { isMobile } from 'react-device-detect';
|
||||
|
|
@ -27,7 +41,18 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
}, {});
|
||||
const GlobalIsnotes = useSelector(Globalnotes);
|
||||
const GlobalSignatureImages = useSelector(GlobalSignatureImage);
|
||||
console.log(FieldDetails, "FieldDetails")
|
||||
const GlobaldummyData = useSelector(GlobalPritdummyData);
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
||||
const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
||||
const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
||||
const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
||||
const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
||||
const SelectedRowType = useSelector(GlobalRowType);
|
||||
const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
|
||||
const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
|
||||
const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
||||
const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
||||
const SLNO = FieldDetails?.["Sl.No"];
|
||||
const Item = FieldDetails?.["Item"];
|
||||
const MRP = FieldDetails?.["MRP"];
|
||||
|
|
@ -40,6 +65,12 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
const Signature = FieldDetails?.["signature"];
|
||||
const TermsnAdCondition = FieldDetails?.["terms&conditions"];
|
||||
const isNotes = FieldDetails?.["Notes"];
|
||||
let printColors = printDatas?.PrintColors;
|
||||
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
|
||||
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
|
||||
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
|
||||
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
|
||||
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
|
||||
|
||||
const currentDate = new Date();
|
||||
console.log(FieldDetails, "FieldDetails")
|
||||
|
|
@ -88,7 +119,51 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
}
|
||||
const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > 6;
|
||||
const headerStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedHeaderColor
|
||||
: headerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedHeaderFontColor
|
||||
: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableHeaderColor
|
||||
: tableHeaderColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableHeaderFontColor
|
||||
: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableBodyColor
|
||||
: tableBodyColor?.background,
|
||||
color: GlobaldummyData
|
||||
? SelectedTableBodyFontColor
|
||||
: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
|
||||
const footerColorStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableFooterColor
|
||||
: footerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableFooterFontColor
|
||||
: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedNetAmountColor
|
||||
: netAmtColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedNetAmountFontColor
|
||||
: netAmtColor?.font,
|
||||
}
|
||||
return (
|
||||
|
||||
<div style={{
|
||||
|
|
@ -103,7 +178,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
<div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height: isMobile ? (FormatTheme ? "297mm" : "") : '257mm' }} className="print-page" key={chunkIndex}>
|
||||
<div className="page-headerA4Style11" style={{ textAlign: "center" }}>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left', ...headerStyle }}>
|
||||
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
|
|
@ -113,7 +188,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
borderBottom: '1px solid black'
|
||||
}}>
|
||||
{/* Logo Image */}
|
||||
{/* {base64Image && (
|
||||
{base64Image && (
|
||||
<div style={{ marginRight: '20px' }}>
|
||||
<img
|
||||
className='PrintA4Style11-BrandImage'
|
||||
|
|
@ -126,7 +201,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
}}
|
||||
/>
|
||||
</div>
|
||||
)} */}
|
||||
)}
|
||||
|
||||
{/* Store Info */}
|
||||
<div style={{
|
||||
|
|
@ -167,19 +242,6 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* <div >
|
||||
<div style={{ marginTop: '4px', fontSize: '13px', fontWeight: 600 }}>
|
||||
{table2Data?.OrderType === "E"
|
||||
? "Estimate"
|
||||
: (GlobaldummyData
|
||||
? "Cash"
|
||||
: PaymentStatusSuccess?.length === 1
|
||||
? PaymentStatusSuccess?.[0]?.PaymentTypeName
|
||||
: "") + table2Data?.OrderId && "Cash: " + extractLastNumberOrderId(table2Data?.OrderId, table2Data?.FYStatus)} {GlobaldummyData && "685"}
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -229,21 +291,21 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
<table style={{ width: "99%", margin: "auto" }} className='A4TableA4Style11'>
|
||||
<thead>
|
||||
<tr style={{ background: '#373B44', color: '#fff', }}>
|
||||
{SLNO == true && <th style={{ width: '10%', textAlign: "center" }}>S.No</th>}
|
||||
{Item == true && <th>Item</th>}
|
||||
{SLNO == true && <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>S.No</th>}
|
||||
{Item == true && <th style={{ ...tableHeaderStyle }}>Item</th>}
|
||||
{HsnCode == true && (
|
||||
<th style={{ width: '10%', textAlign: "center" }}>HSN</th>
|
||||
<th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>HSN</th>
|
||||
)}
|
||||
{Quantity == true && (
|
||||
<th style={{ width: '10%', textAlign: "center" }}>Qty</th>
|
||||
<th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>Qty</th>
|
||||
)}
|
||||
{MRP == true && <th style={{ width: '10%', textAlign: "center" }}>MRP</th>}
|
||||
{Rate == true && <th style={{ width: '10%', textAlign: "center" }}>Rate</th>}
|
||||
{MRP == true && <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>MRP</th>}
|
||||
{Rate == true && <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>Rate</th>}
|
||||
{Discount == true && (
|
||||
<th style={{ width: '10%', textAlign: "center" }}>Dis </th>
|
||||
<th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>Dis </th>
|
||||
)}
|
||||
{Amount == true && (
|
||||
<th style={{ width: '10%', textAlign: "center", textAlign: "right" }}>
|
||||
<th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center", textAlign: "right" }}>
|
||||
Amt
|
||||
</th>
|
||||
)}
|
||||
|
|
@ -252,7 +314,18 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
|
||||
<tbody>
|
||||
{dataChunk?.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO == true && (
|
||||
<td style={{ textAlign: "center" }}>
|
||||
{chunkIndex * chunkSize + index + 1}
|
||||
|
|
@ -357,7 +430,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
{/* <div className='total-Amount' style={{ fontSize: "15px", fontWeight: "600" }}>{GlobaldummyData ? "1066" : Number(table2Data?.NetAmount).toFixed(2)}</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className='total-Amount' style={{ fontSize: "25px", fontWeight: "600", padding: "10px", backgroundColor: "#fdc716", textAlign: "center" }}>Amount :{Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div>
|
||||
<div className='total-Amount' style={{ ...netAmountStyle,fontSize: "25px", fontWeight: "600", padding: "10px", textAlign: "center" }}>Amount :{Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -428,6 +501,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
<div className='PrintA4Style11-print-InfoDivsub' style={{ textTransform: 'capitalize' }}>{Date1}</div>
|
||||
</div>
|
||||
</>
|
||||
<div style={{ ...footerColorStyle }}>
|
||||
{Notestext && (
|
||||
<div>
|
||||
<p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p>
|
||||
|
|
@ -455,6 +529,8 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>}
|
||||
|
||||
<hr className="PrintA4Style11-print-dottline" />
|
||||
|
|
@ -509,7 +585,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
{/* <div className='total-Amount' style={{ fontSize: "15px", fontWeight: "600" }}>{GlobaldummyData ? "1066" : Number(table2Data?.NetAmount).toFixed(2)}</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className='total-Amount' style={{ fontSize: "25px", fontWeight: "600", padding: "10px", backgroundColor: "#fdc716", textAlign: "center" }}>Amount :{Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div>
|
||||
<div className='total-Amount' style={{ ...netAmountStyle,fontSize: "25px", fontWeight: "600", padding: "10px", textAlign: "center" }}>Amount :{Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -580,6 +656,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
<div className='PrintA4Style11-print-InfoDivsub' style={{ textTransform: 'capitalize' }}>{Date1}</div>
|
||||
</div>
|
||||
</>
|
||||
<div style={{ ...footerColorStyle }}>
|
||||
{Notestext && (
|
||||
<div>
|
||||
<p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p>
|
||||
|
|
@ -608,6 +685,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div >
|
||||
))}
|
||||
|
|
@ -648,7 +726,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
{/* <div className='total-Amount' style={{ fontSize: "15px", fontWeight: "600" }}>{GlobaldummyData ? "1066" : Number(table2Data?.NetAmount).toFixed(2)}</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className='total-Amount' style={{ fontSize: "25px", fontWeight: "600", padding: "10px", backgroundColor: "#fdc716", textAlign: "center" }}>Amount :{Number(table2Data?.NetAmount).toFixed(2)}</div>
|
||||
<div className='total-Amount' style={{...netAmountStyle, fontSize: "25px", fontWeight: "600", padding: "10px", textAlign: "center" }}>Amount :{Number(table2Data?.NetAmount).toFixed(2)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -719,6 +797,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
<div className='PrintA4Style11-print-InfoDivsub' style={{ textTransform: 'capitalize' }}>{Date1}</div>
|
||||
</div>
|
||||
</>
|
||||
<div style={{ ...footerColorStyle }}>
|
||||
{Notestext && (
|
||||
<div>
|
||||
<p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p>
|
||||
|
|
@ -747,6 +826,8 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
|
|||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,17 @@ import {
|
|||
Globalnotes,
|
||||
GlobalthemeFormat,
|
||||
GlobalBillName,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
} from "../../../Features/ThemeChange/ThemeChange";
|
||||
import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.scss";
|
||||
import { ApplicationPreferences } from "../../../Features/BrachLogin/BranchLogin";
|
||||
|
|
@ -36,7 +47,6 @@ const PurPrintStyle1 = ({
|
|||
// console.log(FieldDetailss, "FieldDetails")
|
||||
const SLNO = FieldDetails?.["Sl.No"];
|
||||
const Item = FieldDetails?.["Item"];
|
||||
console.log(Item, "Item")
|
||||
const MRP = FieldDetails?.["MRP"];
|
||||
const Discount = FieldDetails?.["Discount"];
|
||||
const Quantity = FieldDetails?.["Quantity"];
|
||||
|
|
@ -44,8 +54,17 @@ const PurPrintStyle1 = ({
|
|||
const Amount = FieldDetails?.["Amount"];
|
||||
const HsnCode = FieldDetails?.["HsnCode"];
|
||||
|
||||
|
||||
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
||||
const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
||||
const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
||||
const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
||||
const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
||||
const SelectedRowType = useSelector(GlobalRowType);
|
||||
const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
|
||||
const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
|
||||
const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
||||
const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
||||
const GlobaldummyData = useSelector(GlobalPritdummyData);
|
||||
const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
|
||||
const GlobalIsnotes = useSelector(Globalnotes);
|
||||
|
|
@ -65,9 +84,14 @@ const PurPrintStyle1 = ({
|
|||
let PageSize = printDatas?.PageSize
|
||||
const Signature = FieldDetails?.["signature"];
|
||||
const TermsnAdCondition = FieldDetails?.["terms&conditions"];
|
||||
let printColors = printDatas?.PrintColors;
|
||||
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
|
||||
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
|
||||
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
|
||||
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
|
||||
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
|
||||
|
||||
const dataSource = table2Data?.[0]?.ProductDetails;
|
||||
console.log(table2Data, "dataSource")
|
||||
if (keysLength > 0) {
|
||||
dispatch(changeReprintDataFound(true));
|
||||
}
|
||||
|
|
@ -135,7 +159,51 @@ const PurPrintStyle1 = ({
|
|||
console.log(paginatedChunks, "paginatedChunkspaginatedChunkspaginatedChunks")
|
||||
const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 10);
|
||||
console.log(PageSize == "A5" ? '210mm' : "297mm", "aggregatedPaymentsaggregatedPayments");
|
||||
const headerStyle ={
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedHeaderColor
|
||||
: headerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedHeaderFontColor
|
||||
: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle ={
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableHeaderColor
|
||||
: tableHeaderColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableHeaderFontColor
|
||||
: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle ={
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableBodyColor
|
||||
: tableBodyColor?.background,
|
||||
color: GlobaldummyData
|
||||
? SelectedTableBodyFontColor
|
||||
: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = GlobaldummyData? SelectedRowType: tableBodyColor?.rowType;
|
||||
const footerColorStyle ={
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableFooterColor
|
||||
: footerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableFooterFontColor
|
||||
: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle ={
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedNetAmountColor
|
||||
: netAmtColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedNetAmountFontColor
|
||||
: netAmtColor?.font,
|
||||
}
|
||||
return (
|
||||
|
||||
|
||||
|
|
@ -149,10 +217,9 @@ const PurPrintStyle1 = ({
|
|||
{paginatedChunks.map((dataChunk, chunkIndex) => (
|
||||
|
||||
<div className={`container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`} style={{ display: "flex", flexDirection: "column", justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme ? "" : "", height: FormatTheme ? PageSize == "A5" ? '170mm' : (isMobile ? "257mm" : "257mm") : "", }} key={chunkIndex}>
|
||||
{console.log(dataChunk, "dataChunkdataChunkdataChunk")}
|
||||
{/* <div className="header" style={{ position: GlobaldummyData ? "absolute" : "fixed", top: 0, width: "100%" }}> */}
|
||||
<div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}>
|
||||
<div className="PrintStyle1-print" >
|
||||
<div className="PrintStyle1-print" style={{...headerStyle}} >
|
||||
<div
|
||||
style={{ fontSize: "clamp(2rem, 2.5vw, 2rem)", fontWeight: "600" }}
|
||||
>
|
||||
|
|
@ -229,12 +296,6 @@ const PurPrintStyle1 = ({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* orderdetails */}
|
||||
|
||||
{/* <hr className="PrintStyle1-print-dottline" /> */}
|
||||
|
||||
{/* itemdata (loop) */}
|
||||
|
||||
</div>
|
||||
<div style={{ marginTop: GlobaldummyData ? "9rem" : "0rem" }} className="print-body">
|
||||
|
||||
|
|
@ -257,21 +318,21 @@ const PurPrintStyle1 = ({
|
|||
<table className="PrintStyle1-print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{SLNO == true && <th style={{ width: "10px" }}>S.No</th>}
|
||||
{Item == true && <th>Item</th>}
|
||||
{SLNO == true && <th style={{...tableHeaderStyle,width: "10px" }}>S.No</th>}
|
||||
{Item == true && <th style={{...tableHeaderStyle}}>Item</th>}
|
||||
{HsnCode == true && (
|
||||
<th style={{ width: "10px" }}>HSN</th>
|
||||
<th style={{...tableHeaderStyle, width: "10px" }}>HSN</th>
|
||||
)}
|
||||
{Quantity == true && (
|
||||
<th style={{ width: "10px" }}>Qty</th>
|
||||
<th style={{...tableHeaderStyle, width: "10px" }}>Qty</th>
|
||||
)}
|
||||
{MRP == true && <th style={{ width: "10px" }}>MRP</th>}
|
||||
{Rate == true && <th style={{ width: "10px" }}>Rate</th>}
|
||||
{MRP == true && <th style={{...tableHeaderStyle, width: "10px" }}>MRP</th>}
|
||||
{Rate == true && <th style={{...tableHeaderStyle, width: "10px" }}>Rate</th>}
|
||||
{Discount == true && (
|
||||
<th style={{ width: "10px" }}>Dis </th>
|
||||
<th style={{...tableHeaderStyle, width: "10px" }}>Dis </th>
|
||||
)}
|
||||
{Amount == true && (
|
||||
<th style={{ width: "10px", textAlign: "right" }}>
|
||||
<th style={{...tableHeaderStyle, width: "10px", textAlign: "right" }}>
|
||||
Amt
|
||||
</th>
|
||||
)}
|
||||
|
|
@ -282,7 +343,18 @@ const PurPrintStyle1 = ({
|
|||
|
||||
{dataChunk?.map(
|
||||
(item, index) => (
|
||||
<tr key={index}>
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO == true && (
|
||||
<td style={{ textAlign: "center" }}>
|
||||
{chunkIndex * chunkSize + index + 1}
|
||||
|
|
@ -392,11 +464,12 @@ const PurPrintStyle1 = ({
|
|||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-around",
|
||||
width: "95%",
|
||||
width: "100%",
|
||||
whiteSpace: "nowrap",
|
||||
fontSize: "10px",
|
||||
flexWrap: "wrap",
|
||||
gap: "2px"
|
||||
gap: "2px",
|
||||
...netAmountStyle
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
|
@ -607,13 +680,7 @@ const PurPrintStyle1 = ({
|
|||
marginTop: "5px",
|
||||
}}
|
||||
>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{/* <hr className="PrintStyle1-print-dottline" /> */}
|
||||
|
||||
<div className="page-footerA4Style11"
|
||||
|
|
@ -622,6 +689,7 @@ const PurPrintStyle1 = ({
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
@ -690,11 +758,12 @@ const PurPrintStyle1 = ({
|
|||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-around",
|
||||
width: "95%",
|
||||
width: "100%",
|
||||
whiteSpace: "nowrap",
|
||||
fontSize: "10px",
|
||||
flexWrap: "wrap",
|
||||
gap: "2px"
|
||||
gap: "2px",
|
||||
...netAmountStyle
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
|
@ -918,6 +987,7 @@ const PurPrintStyle1 = ({
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
@ -974,11 +1044,12 @@ const PurPrintStyle1 = ({
|
|||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-around",
|
||||
width: "95%",
|
||||
width: "100%",
|
||||
whiteSpace: "nowrap",
|
||||
fontSize: "10px",
|
||||
flexWrap: "wrap",
|
||||
gap: "2px"
|
||||
gap: "2px",
|
||||
...netAmountStyle
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
|
@ -1198,6 +1269,7 @@ const PurPrintStyle1 = ({
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
@ -1254,16 +1326,12 @@ const PurPrintStyle1 = ({
|
|||
}
|
||||
|
||||
</div > :
|
||||
|
||||
|
||||
|
||||
|
||||
<div
|
||||
className="PrintStyle1MasterDiv"
|
||||
id={`SQPrintStyle1`}
|
||||
style={{ fontFamily: "'Courier New', Courier, monospace" }}
|
||||
>
|
||||
<div className="PrintStyle1-print">
|
||||
<div className="PrintStyle1-print" style={{...headerStyle}}>
|
||||
<div
|
||||
style={{ fontSize: "clamp(2rem, 2.5vw, 2rem)", fontWeight: "600" }}
|
||||
>
|
||||
|
|
@ -1340,7 +1408,18 @@ const PurPrintStyle1 = ({
|
|||
<tbody>
|
||||
{(TakeawayData)?.map(
|
||||
(item, index) => (
|
||||
<tr key={index}>
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO == true && (
|
||||
<td style={{ textAlign: "center" }}>
|
||||
{index + 1}
|
||||
|
|
@ -1447,11 +1526,12 @@ const PurPrintStyle1 = ({
|
|||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-around",
|
||||
width: "95%",
|
||||
width: "100%",
|
||||
whiteSpace: "nowrap",
|
||||
fontSize: "10px",
|
||||
flexWrap: "wrap",
|
||||
gap: "2px"
|
||||
gap: "2px",
|
||||
...netAmountStyle
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
|
@ -1659,11 +1739,6 @@ const PurPrintStyle1 = ({
|
|||
>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<hr className="PrintStyle1-print-dottline" />
|
||||
|
||||
<div className="page-footerA4Style11"
|
||||
|
|
@ -1672,6 +1747,7 @@ const PurPrintStyle1 = ({
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,7 +4,18 @@ import { useDispatch, useSelector } from "react-redux";
|
|||
import {
|
||||
GlobalPritdummyData,
|
||||
changeReprintDataFound,
|
||||
GlobalprinttermsAndConditions
|
||||
GlobalprinttermsAndConditions,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
} from '../../../Features/ThemeChange/ThemeChange'
|
||||
import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle10.scss";
|
||||
|
||||
|
|
@ -30,11 +41,26 @@ console.log(OrderDetailGST,'OrderDetailGST');
|
|||
const Rate = FieldDetails?.["Rate"];
|
||||
const Amount = FieldDetails?.["Amount"];
|
||||
const HsnCode = FieldDetails?.["HsnCode"];
|
||||
|
||||
let printColors = printDatas?.PrintColors;
|
||||
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
|
||||
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
|
||||
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
|
||||
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
|
||||
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
|
||||
|
||||
const GlobaldummyData = useSelector(GlobalPritdummyData);
|
||||
const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
|
||||
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
||||
const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
||||
const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
||||
const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
||||
const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
||||
const SelectedRowType = useSelector(GlobalRowType);
|
||||
const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
|
||||
const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
|
||||
const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
||||
const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
||||
|
||||
let TermsAndConditions = printDatas?.TermsandConditions
|
||||
let SignatureImg = printDatas?.Signature
|
||||
|
|
@ -75,7 +101,51 @@ console.log(OrderDetailGST,'OrderDetailGST');
|
|||
}
|
||||
const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 10);
|
||||
const headerStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedHeaderColor
|
||||
: headerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedHeaderFontColor
|
||||
: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableHeaderColor
|
||||
: tableHeaderColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableHeaderFontColor
|
||||
: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableBodyColor
|
||||
: tableBodyColor?.background,
|
||||
color: GlobaldummyData
|
||||
? SelectedTableBodyFontColor
|
||||
: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
|
||||
const footerColorStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableFooterColor
|
||||
: footerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableFooterFontColor
|
||||
: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedNetAmountColor
|
||||
: netAmtColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedNetAmountFontColor
|
||||
: netAmtColor?.font,
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{FormatTheme ?
|
||||
|
|
@ -89,7 +159,7 @@ console.log(OrderDetailGST,'OrderDetailGST');
|
|||
|
||||
|
||||
<div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}>
|
||||
<div className="PrintStyle10-print">
|
||||
<div className="PrintStyle10-print" style={{ ...headerStyle }} >
|
||||
<div className="ShopName"
|
||||
style={{
|
||||
fontWeight: "600",
|
||||
|
|
@ -124,20 +194,31 @@ console.log(OrderDetailGST,'OrderDetailGST');
|
|||
<table className="PrintStyle10-print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{SLNO && <th style={{ width: '10px' }}>S.N</th>}
|
||||
{Item && <th style={{ width: '10px' }}>Item</th>}
|
||||
{Quantity && <th style={{ width: '10px', textAlign: 'right' }}>Qty</th>}
|
||||
{HsnCode && <th style={{ width: '10px', textAlign: 'right' }}>HSN</th>}
|
||||
{MRP && <th style={{ width: '10px', textAlign: 'right' }}>MRP</th>}
|
||||
{Discount && <th style={{ width: '10px', textAlign: 'right' }}>Dis </th>}
|
||||
{Rate && <th style={{ width: '10px', textAlign: 'right' }}>Rate</th>}
|
||||
{Amount && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>}
|
||||
{SLNO && <th style={{ ...tableHeaderStyle, width: '10px' }}>S.N</th>}
|
||||
{Item && <th style={{ ...tableHeaderStyle, width: '10px' }}>Item</th>}
|
||||
{Quantity && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Qty</th>}
|
||||
{HsnCode && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>HSN</th>}
|
||||
{MRP && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>MRP</th>}
|
||||
{Discount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Dis </th>}
|
||||
{Rate && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Rate</th>}
|
||||
{Amount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Amt</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dataChunk?.map((item, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO && <td style={{ width: '10px', textAlign: 'center' }} >{chunkIndex * chunkSize + index + 1}</td>}
|
||||
{Item && <td style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div>{item?.ProdName}</div>
|
||||
|
|
@ -179,9 +260,9 @@ console.log(OrderDetailGST,'OrderDetailGST');
|
|||
display: "flex",
|
||||
flexDirection: "column",
|
||||
rowGap: "0.1rem",
|
||||
fontSize: "clamp(0.7rem, 2.5vw, 1rem)"
|
||||
|
||||
, fontWeight: '600'
|
||||
fontSize: "clamp(0.7rem, 2.5vw, 1rem)",
|
||||
fontWeight: '600',
|
||||
...netAmountStyle
|
||||
}}
|
||||
>
|
||||
<div className="PrintStyle10-items" >
|
||||
|
|
@ -359,6 +440,7 @@ console.log(OrderDetailGST,'OrderDetailGST');
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
@ -428,9 +510,9 @@ console.log(OrderDetailGST,'OrderDetailGST');
|
|||
display: "flex",
|
||||
flexDirection: "column",
|
||||
rowGap: "0.1rem",
|
||||
fontSize: "clamp(0.7rem, 2.5vw, 1rem)"
|
||||
|
||||
, fontWeight: '600'
|
||||
fontSize: "clamp(0.7rem, 2.5vw, 1rem)",
|
||||
fontWeight: '600',
|
||||
...netAmountStyle
|
||||
}}
|
||||
>
|
||||
<div className="PrintStyle10-items" >
|
||||
|
|
@ -607,6 +689,7 @@ console.log(OrderDetailGST,'OrderDetailGST');
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
@ -651,7 +734,7 @@ console.log(OrderDetailGST,'OrderDetailGST');
|
|||
id={`SQPrintStyle10`}
|
||||
style={{ fontFamily: "'Courier New', Courier, monospace" }}
|
||||
>
|
||||
<div className="PrintStyle10-print">
|
||||
<div className="PrintStyle10-print" style={{ ...headerStyle }}>
|
||||
<div className="ShopName"
|
||||
style={{
|
||||
fontWeight: "600",
|
||||
|
|
@ -673,8 +756,6 @@ console.log(OrderDetailGST,'OrderDetailGST');
|
|||
|
||||
{<div style={{ textTransform: 'uppercase' }}>{BillName}</div>}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div style={{ fontSize: '9.27px', fontWeight: '600', textAlign: 'right' }}> {Date1} </div>
|
||||
<hr class="straightline" />
|
||||
|
|
@ -685,20 +766,31 @@ console.log(OrderDetailGST,'OrderDetailGST');
|
|||
<table className="PrintStyle10-print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{SLNO && <th style={{ width: '10px' }}>S.N</th>}
|
||||
{Item && <th style={{ width: '10px' }}>Item</th>}
|
||||
{Quantity && <th style={{ width: '10px', textAlign: 'right' }}>Qty</th>}
|
||||
{HsnCode && <th style={{ width: '10px', textAlign: 'right' }}>HSN</th>}
|
||||
{MRP && <th style={{ width: '10px', textAlign: 'right' }}>MRP</th>}
|
||||
{Discount && <th style={{ width: '10px', textAlign: 'right' }}>Dis </th>}
|
||||
{Rate && <th style={{ width: '10px', textAlign: 'right' }}>Rate</th>}
|
||||
{Amount && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>}
|
||||
{SLNO && <th style={{ ...tableHeaderStyle, width: '10px' }}>S.N</th>}
|
||||
{Item && <th style={{ ...tableHeaderStyle, width: '10px' }}>Item</th>}
|
||||
{Quantity && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Qty</th>}
|
||||
{HsnCode && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>HSN</th>}
|
||||
{MRP && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>MRP</th>}
|
||||
{Discount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Dis </th>}
|
||||
{Rate && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Rate</th>}
|
||||
{Amount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Amt</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(TakeawayData)?.map((item, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO && <td style={{ width: '10px', textAlign: 'center' }} >{index + 1}</td>}
|
||||
{Item && <td style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div>{item?.ProdName}</div>
|
||||
|
|
@ -739,9 +831,9 @@ console.log(OrderDetailGST,'OrderDetailGST');
|
|||
display: "flex",
|
||||
flexDirection: "column",
|
||||
rowGap: "0.1rem",
|
||||
fontSize: "clamp(0.7rem, 2.5vw, 1rem)"
|
||||
|
||||
, fontWeight: '600'
|
||||
fontSize: "clamp(0.7rem, 2.5vw, 1rem)",
|
||||
fontWeight: '600',
|
||||
...netAmountStyle
|
||||
}}
|
||||
>
|
||||
<div className="PrintStyle10-items" >
|
||||
|
|
@ -918,6 +1010,7 @@ console.log(OrderDetailGST,'OrderDetailGST');
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,7 +4,18 @@ import { useDispatch, useSelector } from "react-redux";
|
|||
import {
|
||||
GlobalPritdummyData,
|
||||
changeReprintDataFound,
|
||||
GlobalprinttermsAndConditions
|
||||
GlobalprinttermsAndConditions,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
} from '../../../Features/ThemeChange/ThemeChange';
|
||||
import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle11.scss";
|
||||
import { extractLastNumber } from "../../../Services/Others";
|
||||
|
|
@ -29,11 +40,26 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
const Rate = FieldDetails?.["Rate"];
|
||||
const Amount = FieldDetails?.["Amount"];
|
||||
const HsnCode = FieldDetails?.["HsnCode"];
|
||||
|
||||
let printColors = printDatas?.PrintColors;
|
||||
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
|
||||
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
|
||||
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
|
||||
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
|
||||
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
|
||||
|
||||
const GlobaldummyData = useSelector(GlobalPritdummyData);
|
||||
const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
|
||||
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
||||
const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
||||
const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
||||
const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
||||
const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
||||
const SelectedRowType = useSelector(GlobalRowType);
|
||||
const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
|
||||
const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
|
||||
const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
||||
const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
||||
|
||||
let TermsAndConditions = printDatas?.TermsandConditions
|
||||
let SignatureImg = printDatas?.Signature
|
||||
|
|
@ -70,7 +96,51 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
}
|
||||
const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 10);
|
||||
const headerStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedHeaderColor
|
||||
: headerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedHeaderFontColor
|
||||
: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableHeaderColor
|
||||
: tableHeaderColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableHeaderFontColor
|
||||
: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableBodyColor
|
||||
: tableBodyColor?.background,
|
||||
color: GlobaldummyData
|
||||
? SelectedTableBodyFontColor
|
||||
: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
|
||||
const footerColorStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableFooterColor
|
||||
: footerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableFooterFontColor
|
||||
: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedNetAmountColor
|
||||
: netAmtColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedNetAmountFontColor
|
||||
: netAmtColor?.font,
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{FormatTheme ?
|
||||
|
|
@ -83,7 +153,8 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
|
||||
{/* <div className="header" style={{ position: "fixed", top: 0, width: "100%" }}> */}
|
||||
<div className="header" style={{ position: isMobile ? "fixed" : "", top: 0, width: "100%" }}>
|
||||
<div className="PrintStyle11-print">
|
||||
<div style={{ ...headerStyle }}>
|
||||
<div className="PrintStyle11-print" style={{ ...headerStyle }}>
|
||||
{base64Image ? <img className='PrintStyle11-BrandImage' src={base64Image} alt='image' style={{ width: '40px', height: '40px', }} /> : null}
|
||||
<div>
|
||||
<div style={{
|
||||
|
|
@ -104,6 +175,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
</div>
|
||||
<div style={{ fontSize: "11px", fontWeight: '600' }}> MOBILE NO :{table2Data?.[0]?.BrMobile}</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr style={{ margin: '0.1rem 0rem' }} />
|
||||
<div style={{ margin: '0rem 0.5rem', display: 'flex', justifyContent: 'center', fontWeight: '600', textTransform: 'capitalize' }} className='PrintStyle11-print-BillNO' >{BillName} </div>
|
||||
<div style={{ margin: '0rem 0.5rem', fontSize: '14px', fontWeight: '600', }} className='PrintA4Style11-print-BillNO' >Bill No : {table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)}</div>
|
||||
|
|
@ -118,20 +190,31 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
<table className="PrintStyle11-print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{SLNO && <th style={{ width: '10px' }}>S.N</th>}
|
||||
{Item && <th style={{ width: '10px' }}>Item</th>}
|
||||
{Quantity && <th style={{ width: '10px', textAlign: 'right' }}>Qty</th>}
|
||||
{ HsnCode && <th style={{ width: '10px', textAlign: 'right' }}>HSN</th>}
|
||||
{ MRP && <th style={{ width: '10px', textAlign: 'right' }}>MRP</th>}
|
||||
{ Discount && <th style={{ width: '10px', textAlign: 'right' }}>Dis </th>}
|
||||
{ Rate && <th style={{ width: '10px', textAlign: 'right' }}>Rate</th>}
|
||||
{ Amount && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>}
|
||||
{SLNO && <th style={{ ...tableHeaderStyle, width: '10px' }}>S.N</th>}
|
||||
{Item && <th style={{ ...tableHeaderStyle, width: '10px' }}>Item</th>}
|
||||
{Quantity && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Qty</th>}
|
||||
{HsnCode && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>HSN</th>}
|
||||
{MRP && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>MRP</th>}
|
||||
{Discount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Dis </th>}
|
||||
{Rate && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Rate</th>}
|
||||
{Amount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Amt</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dataChunk?.map((item, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO && <td>{chunkIndex * chunkSize + index + 1}</td>}
|
||||
{Item && <td style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div>{item?.ProdName}</div>
|
||||
|
|
@ -165,7 +248,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
<>
|
||||
<hr className="PrintStyle11-print-dottline" />
|
||||
<div className='PrintStyle11-print-ThirdDiv'>
|
||||
<div>
|
||||
<div style={{ ...netAmountStyle}}>
|
||||
<div className='PrintStyle11-print-ThirdDivSub'>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', }}>
|
||||
<div style={{ fontSize: "15px", fontWeight: '600' }}>Qty</div>
|
||||
|
|
@ -344,6 +427,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
@ -406,7 +490,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
<>
|
||||
<hr className="PrintStyle11-print-dottline" />
|
||||
<div className='PrintStyle11-print-ThirdDiv'>
|
||||
<div>
|
||||
<div style={{ ...netAmountStyle}}>
|
||||
<div className='PrintStyle11-print-ThirdDivSub'>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', }}>
|
||||
<div style={{ fontSize: "15px", fontWeight: '600' }}>Qty</div>
|
||||
|
|
@ -598,6 +682,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{GlobaldummyData ? GlobalIsnotes &&
|
||||
|
|
@ -658,7 +743,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
:
|
||||
<div className="PrintStyle11MasterDiv" id={`SQPrintStyle11`} style={{ fontFamily: "'Courier New', Courier, monospace" }}
|
||||
>
|
||||
<div className="PrintStyle11-print">
|
||||
<div className="PrintStyle11-print" style={{ ...headerStyle }}>
|
||||
{base64Image ? <img className='PrintStyle11-BrandImage' src={base64Image} alt='image' style={{ width: '40px', height: '40px', }} /> : null}
|
||||
<div>
|
||||
<div style={{
|
||||
|
|
@ -674,7 +759,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
</div>
|
||||
</div>
|
||||
<hr style={{ margin: '0.1rem 0rem' }} />
|
||||
<div className='PrintStyle11-print-SecondDiv' >
|
||||
<div className='PrintStyle11-print-SecondDiv' style={{ ...headerStyle }} >
|
||||
<div style={{ fontSize: "12px", fontWeight: '600' }}>
|
||||
{GlobaldummyData ?
|
||||
'BranchAddress, Town- 635XXX City - State' :
|
||||
|
|
@ -693,20 +778,31 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
<table className="PrintStyle11-print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{SLNO && <th style={{ width: '10px' }}>S.N</th>}
|
||||
{Item && <th style={{ width: '10px' }}>Item</th>}
|
||||
{Quantity && <th style={{ width: '10px', textAlign: 'right' }}>Qty</th>}
|
||||
{ HsnCode && <th style={{ width: '10px', textAlign: 'right' }}>HSN</th>}
|
||||
{ MRP && <th style={{ width: '10px', textAlign: 'right' }}>MRP</th>}
|
||||
{ Discount && <th style={{ width: '10px', textAlign: 'right' }}>Dis </th>}
|
||||
{ Rate && <th style={{ width: '10px', textAlign: 'right' }}>Rate</th>}
|
||||
{ Amount && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>}
|
||||
{SLNO && <th style={{ ...tableHeaderStyle, width: '10px' }}>S.N</th>}
|
||||
{Item && <th style={{ ...tableHeaderStyle, width: '10px' }}>Item</th>}
|
||||
{Quantity && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Qty</th>}
|
||||
{HsnCode && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>HSN</th>}
|
||||
{MRP && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>MRP</th>}
|
||||
{Discount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Dis </th>}
|
||||
{Rate && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Rate</th>}
|
||||
{Amount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Amt</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(TakeawayData)?.map((item, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO && <td>{index + 1}</td>}
|
||||
{Item && <td style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div>{item?.ProdName}</div>
|
||||
|
|
@ -736,7 +832,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
|
||||
<hr className="PrintStyle11-print-dottline" />
|
||||
<div className='PrintStyle11-print-ThirdDiv'>
|
||||
<div>
|
||||
<div style={{ ...netAmountStyle}}>
|
||||
<div className='PrintStyle11-print-ThirdDivSub'>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', }}>
|
||||
<div style={{ fontSize: "15px", fontWeight: '600' }}>Qty</div>
|
||||
|
|
@ -916,6 +1012,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
import React from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
|
||||
import {
|
||||
|
||||
GlobalPritdummyData,
|
||||
|
|
@ -9,6 +7,17 @@ import {
|
|||
GlobalprinttermsAndConditions,
|
||||
Globalnotes,
|
||||
GlobalthemeFormat,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
} from "../../../Features/ThemeChange/ThemeChange";
|
||||
import { extractLastNumber } from "../../../Services/Others";
|
||||
import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle2.scss";
|
||||
|
|
@ -32,9 +41,17 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie
|
|||
const HsnCode = FieldDetails?.["HsnCode"];
|
||||
const GlobaldummyData = useSelector(GlobalPritdummyData);
|
||||
const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
|
||||
|
||||
|
||||
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
||||
const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
||||
const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
||||
const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
||||
const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
||||
const SelectedRowType = useSelector(GlobalRowType);
|
||||
const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
|
||||
const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
|
||||
const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
||||
const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
||||
|
||||
let TermsAndConditions = printDatas?.TermsandConditions
|
||||
let SignatureImg = printDatas?.Signature
|
||||
|
|
@ -44,9 +61,12 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie
|
|||
let PageSize = printDatas?.PageSize
|
||||
const Signature = FieldDetails?.["signature"];
|
||||
const TermsnAdCondition = FieldDetails?.["terms&conditions"];
|
||||
|
||||
|
||||
|
||||
let printColors = printDatas?.PrintColors;
|
||||
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
|
||||
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
|
||||
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
|
||||
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
|
||||
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
|
||||
const keysLength = Object.keys(table2Data ?? {}).length;
|
||||
const dataSource = table2Data?.[0]?.ProductDetails;
|
||||
if (keysLength > 0) {
|
||||
|
|
@ -88,7 +108,51 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie
|
|||
}
|
||||
const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 13);
|
||||
console.log(FormatTheme, "paginatedChunks")
|
||||
const headerStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedHeaderColor
|
||||
: headerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedHeaderFontColor
|
||||
: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableHeaderColor
|
||||
: tableHeaderColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableHeaderFontColor
|
||||
: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableBodyColor
|
||||
: tableBodyColor?.background,
|
||||
color: GlobaldummyData
|
||||
? SelectedTableBodyFontColor
|
||||
: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
|
||||
const footerColorStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableFooterColor
|
||||
: footerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableFooterFontColor
|
||||
: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedNetAmountColor
|
||||
: netAmtColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedNetAmountFontColor
|
||||
: netAmtColor?.font,
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{FormatTheme ?
|
||||
|
|
@ -101,7 +165,7 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie
|
|||
<div className={`container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`} style={{ display: "flex", flexDirection: "column", justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme ? "space-between" : "", height: FormatTheme ? PageSize == "A5" ? '170mm' : "257mm" : "", }} key={chunkIndex}>
|
||||
|
||||
{/* <div className="header" style={{ position: "fixed", top: 0, width: "100%" }}> */}
|
||||
<div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}>
|
||||
<div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%", ...headerStyle }}>
|
||||
<div className='PrintStyle2-fistDiv' >
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'row' }}>
|
||||
|
|
@ -146,20 +210,31 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie
|
|||
<table className="PrintStyle2-print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{SLNO && <th style={{ width: '8px' }}>S.No</th>}
|
||||
{Item && <th >Item</th>}
|
||||
{HsnCode && <th style={{ width: '8px', textAlign: 'right' }}>HSN</th>}
|
||||
{Quantity && <th style={{ width: '8px', textAlign: 'right' }}>Qty</th>}
|
||||
{MRP && <th style={{ width: '8px', textAlign: 'right' }}>MRP</th>}
|
||||
{Amount && <th style={{ width: '8px', textAlign: 'right' }}>Amt</th>}
|
||||
{Discount && <th style={{ width: '8px', textAlign: 'right' }}>Dis </th>}
|
||||
{Rate && <th style={{ width: '8px', textAlign: 'right' }}>Rate</th>}
|
||||
{SLNO && <th style={{ width: '8px', ...tableHeaderStyle }}>S.No</th>}
|
||||
{Item && <th style={{ ...tableHeaderStyle }} >Item</th>}
|
||||
{HsnCode && <th style={{ width: '8px', textAlign: 'right', ...tableHeaderStyle }}>HSN</th>}
|
||||
{Quantity && <th style={{ width: '8px', textAlign: 'right', ...tableHeaderStyle }}>Qty</th>}
|
||||
{MRP && <th style={{ width: '8px', textAlign: 'right', ...tableHeaderStyle }}>MRP</th>}
|
||||
{Amount && <th style={{ width: '8px', textAlign: 'right', ...tableHeaderStyle }}>Amt</th>}
|
||||
{Discount && <th style={{ width: '8px', textAlign: 'right', ...tableHeaderStyle }}>Dis </th>}
|
||||
{Rate && <th style={{ width: '8px', textAlign: 'right', ...tableHeaderStyle }}>Rate</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dataChunk?.map((item, index) => {
|
||||
return (
|
||||
<tr key={index} >
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
} >
|
||||
{SLNO && <td className="Re-print-body-Rate">{chunkIndex * chunkSize + index + 1}</td>}
|
||||
{Item &&
|
||||
<td className="Re-print-body-Product" style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
|
|
@ -196,7 +271,7 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie
|
|||
|
||||
{((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme &&
|
||||
<>
|
||||
<div className='PrintStyle2-ThirdDivMaster'>
|
||||
<div className='PrintStyle2-ThirdDivMaster' style={{...netAmountStyle}}>
|
||||
<div className='PrintStyle2-ThirdP'>
|
||||
<div>
|
||||
<div style={{ textAlign: 'left', fontWeight: '600' }}>Qty</div>
|
||||
|
|
@ -362,16 +437,13 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie
|
|||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div className="page-footerA4Style11"
|
||||
style={{
|
||||
marginTop: "auto",
|
||||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
@ -442,7 +514,7 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie
|
|||
}}
|
||||
>
|
||||
<>
|
||||
<div className='PrintStyle2-ThirdDivMaster'>
|
||||
<div className='PrintStyle2-ThirdDivMaster' style={{...netAmountStyle}}>
|
||||
<div className='PrintStyle2-ThirdP'>
|
||||
<div>
|
||||
<div style={{ textAlign: 'left', fontWeight: '600' }}>Qty</div>
|
||||
|
|
@ -622,6 +694,7 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
@ -687,7 +760,7 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie
|
|||
|
||||
<div className='PrintStyle2-fistDiv' >
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'row' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'row', ...headerStyle }}>
|
||||
{(base64Image && PrintLogo?.SettingValue === "Y") ? <img className='PrintStyle2-BrandImage' src={GlobaldummyData ? Logo : base64Image} alt='image' /> : null}
|
||||
</div>
|
||||
|
||||
|
|
@ -729,20 +802,31 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie
|
|||
<table className="PrintStyle2-print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{SLNO && <th style={{ width: '8px' }}>S.No</th>}
|
||||
{Item && <th >Item</th>}
|
||||
{HsnCode && <th style={{ width: '8px', textAlign: 'right' }}>HSN</th>}
|
||||
{Quantity && <th style={{ width: '8px', textAlign: 'right' }}>Qty</th>}
|
||||
{MRP && <th style={{ width: '8px', textAlign: 'right' }}>MRP</th>}
|
||||
{Amount && <th style={{ width: '8px', textAlign: 'right' }}>Amt</th>}
|
||||
{Discount && <th style={{ width: '8px', textAlign: 'right' }}>Dis </th>}
|
||||
{Rate && <th style={{ width: '8px', textAlign: 'right' }}>Rate</th>}
|
||||
{SLNO && <th style={{ ...tableHeaderStyle, width: '8px' }}>S.No</th>}
|
||||
{Item && <th style={{ ...tableHeaderStyle }}>Item</th>}
|
||||
{HsnCode && <th style={{ ...tableHeaderStyle, width: '8px', textAlign: 'right' }}>HSN</th>}
|
||||
{Quantity && <th style={{ ...tableHeaderStyle, width: '8px', textAlign: 'right' }}>Qty</th>}
|
||||
{MRP && <th style={{ ...tableHeaderStyle, width: '8px', textAlign: 'right' }}>MRP</th>}
|
||||
{Amount && <th style={{ ...tableHeaderStyle, width: '8px', textAlign: 'right' }}>Amt</th>}
|
||||
{Discount && <th style={{ ...tableHeaderStyle, width: '8px', textAlign: 'right' }}>Dis </th>}
|
||||
{Rate && <th style={{ ...tableHeaderStyle, width: '8px', textAlign: 'right' }}>Rate</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(TakeawayData)?.map((item, index) => {
|
||||
return (
|
||||
<tr key={index} >
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO && <td className="Re-print-body-Rate">{index + 1}</td>}
|
||||
{Item &&
|
||||
<td className="Re-print-body-Product" style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
|
|
@ -776,7 +860,7 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie
|
|||
</div>
|
||||
|
||||
|
||||
<div className='PrintStyle2-ThirdDivMaster'>
|
||||
<div className='PrintStyle2-ThirdDivMaster' style={{...netAmountStyle}}>
|
||||
<div className='PrintStyle2-ThirdP'>
|
||||
<div>
|
||||
<div style={{ textAlign: 'left', fontWeight: '600' }}>Qty</div>
|
||||
|
|
@ -928,6 +1012,7 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -8,6 +8,17 @@ import {
|
|||
Globalnotes,
|
||||
GlobalthemeFormat,
|
||||
GlobalBillName,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
} from "../../../Features/ThemeChange/ThemeChange";
|
||||
import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle3.scss"
|
||||
import { extractLastNumber } from "../../../Services/Others";
|
||||
|
|
@ -37,6 +48,17 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ
|
|||
|
||||
const GlobaldummyData = useSelector(GlobalPritdummyData);
|
||||
const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
||||
const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
||||
const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
||||
const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
||||
const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
||||
const SelectedRowType = useSelector(GlobalRowType);
|
||||
const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
|
||||
const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
|
||||
const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
||||
const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
||||
|
||||
|
||||
let TermsAndConditions = printDatas?.TermsandConditions
|
||||
|
|
@ -47,7 +69,12 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ
|
|||
let PageSize = printDatas?.PageSize
|
||||
const Signature = FieldDetails?.["signature"];
|
||||
const TermsnAdCondition = FieldDetails?.["terms&conditions"];
|
||||
|
||||
let printColors = printDatas?.PrintColors;
|
||||
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
|
||||
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
|
||||
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
|
||||
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
|
||||
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
|
||||
|
||||
const keysLength = Object.keys(table2Data ?? {}).length;
|
||||
if (keysLength > 0) {
|
||||
|
|
@ -60,28 +87,10 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ
|
|||
const year = currentDate.getFullYear().toString().slice(-2);
|
||||
|
||||
const formattedDate = `${day}-${monthNames[monthIndex]}-${year}`;
|
||||
|
||||
const TakeawayData = table2Data?.[0]?.ProductDetails
|
||||
console.log(TakeawayData, "TakeawayData", table2Data)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let TotalOfferAmount = 0;
|
||||
|
||||
// Calculate SalesWiseOffers total amount
|
||||
|
||||
|
||||
|
||||
|
||||
const chunkSize = PageSize == "A5" ? 11 : 16;
|
||||
|
||||
let dataSource = table2Data?.[0]?.ProductDetails;
|
||||
|
||||
console.log(table2Data,"FieldDetailsFieldDetails")
|
||||
|
||||
|
||||
// Paginate the data
|
||||
const paginatedChunks = [];
|
||||
for (let i = 0; i < dataSource?.length; i += chunkSize) {
|
||||
|
|
@ -89,9 +98,52 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ
|
|||
}
|
||||
const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 10);
|
||||
{console.log(TakeawayData,"TakeawayDataTakeawayData")}
|
||||
|
||||
const headerStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedHeaderColor
|
||||
: headerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedHeaderFontColor
|
||||
: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableHeaderColor
|
||||
: tableHeaderColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableHeaderFontColor
|
||||
: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableBodyColor
|
||||
: tableBodyColor?.background,
|
||||
color: GlobaldummyData
|
||||
? SelectedTableBodyFontColor
|
||||
: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
|
||||
const footerColorStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableFooterColor
|
||||
: footerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableFooterFontColor
|
||||
: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedNetAmountColor
|
||||
: netAmtColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedNetAmountFontColor
|
||||
: netAmtColor?.font,
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{FormatTheme ?
|
||||
|
|
@ -101,7 +153,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ
|
|||
|
||||
{/* <div className="header" style={{ position: "fixed", top: 0, width: "100%" }}> */}
|
||||
<div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}>
|
||||
<div className="PrintStyle3-print" >
|
||||
<div className="PrintStyle3-print" style={{ ...headerStyle }} >
|
||||
<div style={{ fontSize: '30px', fontweight: '900' }}>
|
||||
{table2Data?.[0]?.BrName}
|
||||
|
||||
|
|
@ -134,7 +186,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ
|
|||
<div className="PrintStyle3-print-tableMaster">
|
||||
{(TakeawayData?.length > 0) &&
|
||||
<div style={{ width: '95%' }} className="PrintStyle3-print-table">
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', fontweight: '600', gap: '0.2rem' }}>
|
||||
<div style={{ ...tableHeaderStyle, display: 'flex', justifyContent: 'space-between', width: '100%', fontweight: '600', gap: '0.2rem' }}>
|
||||
{SLNO && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>S.No</div>}
|
||||
{Item && <div style={{ width: '300%', textAlign: 'left', fontWeight: 600 }}>ITEM</div>}
|
||||
{HsnCode && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>HSN</div>}
|
||||
|
|
@ -146,32 +198,90 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ
|
|||
</div>
|
||||
|
||||
<div style={{ marginTop: '5px' }}>
|
||||
{dataChunk?.map((item, index) => (
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', gap: '0.2rem' }}>
|
||||
{ SLNO && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>{chunkIndex * chunkSize + index + 1}</div>}
|
||||
{ Item &&
|
||||
<div style={{ display: 'flex', flexDirection: 'column', width: '300%', textAlign: 'left', fontWeight: 600 }}>
|
||||
{dataChunk?.map((item, index) => {
|
||||
const isMatch =
|
||||
(index % 2 === 0 && rowtypeStyle === "even") ||
|
||||
(index % 2 === 1 && rowtypeStyle === "odd");
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
gap: "0.2rem",
|
||||
...(isMatch ? tableBodyStyle : {}),
|
||||
}}
|
||||
>
|
||||
{SLNO && (
|
||||
<div style={{ width: "100%", textAlign: "center", fontWeight: 600 }}>
|
||||
{chunkIndex * chunkSize + index + 1}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{Item && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
width: "300%",
|
||||
textAlign: "left",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
<div>{item?.ProdName}</div>
|
||||
<div>({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"})
|
||||
{item?.BrandName !== null ? item?.BrandName : ""}
|
||||
{item?.ProductIdentifierDtls?.length > 0 ? (item?.ProductIdentifierDtls?.filter((items) => !(items.SerialNumber == "" || items.SerialNumber == null))
|
||||
?.map(a => { return (<div>{a.SerialNumber}</div>) })) : ""} {item?.ProductIdentifierDtls?.length > 0 ? item?.ProductIdentifierDtls.filter((item1) => item1.IMEI1 !== "" || item1.IMEI2 !== "")
|
||||
?.map(item2 => {
|
||||
const imei1 = item2.IMEI1 || "";
|
||||
const imei2 = item2.IMEI2 || "";
|
||||
return (<div>{[imei1, imei2].filter(Boolean).join(",")}</div>);
|
||||
}
|
||||
) : ""}
|
||||
<div>
|
||||
({item?.Size ? item?.Size : "1"}{" "}
|
||||
{item?.SinglePc === "Y"
|
||||
? "PCS"
|
||||
: item?.Type !== "C"
|
||||
? item?.UomName
|
||||
: "COMBO"})
|
||||
{item?.BrandName ?? ""}
|
||||
</div>
|
||||
</div>}
|
||||
{ HsnCode && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.HSN}</div>}
|
||||
{ MRP && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</div>}
|
||||
{ Quantity && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.Qty}</div>}
|
||||
{ Rate && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.Price}</div>}
|
||||
{ Discount && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</div>}
|
||||
{ Amount && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }} > {item?.NetAmt?.toFixed(2)}</div>}
|
||||
</div>
|
||||
))}
|
||||
)}
|
||||
|
||||
{HsnCode && (
|
||||
<div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}>
|
||||
{item?.HSN}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{MRP && (
|
||||
<div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}>
|
||||
{item?.SinglePc === "Y" ? item?.Price : item?.MRP}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{Quantity && (
|
||||
<div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}>
|
||||
{item?.Qty}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{Rate && (
|
||||
<div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}>
|
||||
{item?.Price}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{Discount && (
|
||||
<div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}>
|
||||
{item?.Type !== "C"
|
||||
? item?.OfferAmt || 0
|
||||
: item?.OfferValue || 0}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{Amount && (
|
||||
<div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}>
|
||||
{item?.NetAmt?.toFixed(2)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -185,7 +295,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ
|
|||
{((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme &&
|
||||
|
||||
<>
|
||||
<div className="PrintStyle3-print-ttlovrl">
|
||||
<div className="PrintStyle3-print-ttlovrl" style={{...netAmountStyle}}>
|
||||
<div>
|
||||
<div style={{ fontWeight: '600' }}> Items : </div>
|
||||
<div style={{ fontWeight: '600' }}> Qty : </div>
|
||||
|
|
@ -319,24 +429,15 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ
|
|||
|
||||
</div>
|
||||
<hr className="PrintStyle3-print-dottline" />
|
||||
|
||||
|
||||
<div className="PrintStyle3-print-stradrs" style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', width: "100%" }}>
|
||||
|
||||
{table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null && !GlobaldummyData &&
|
||||
<div style={{ fontSize: "14px", fontWeight: 600 }}>Customer : {table2Data?.CustSuppName}
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
{/* <br/> */}
|
||||
|
||||
<hr className="PrintStyle3-print-dottline" />
|
||||
|
||||
<div className="page-footerA4Style11"
|
||||
|
|
@ -345,6 +446,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
@ -405,7 +507,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ
|
|||
}}
|
||||
>
|
||||
<>
|
||||
<div className="PrintStyle3-print-ttlovrl">
|
||||
<div className="PrintStyle3-print-ttlovrl" style={{...netAmountStyle}}>
|
||||
<div>
|
||||
<div style={{ fontWeight: '600' }}> Items : </div>
|
||||
<div style={{ fontWeight: '600' }}> Qty : </div>
|
||||
|
|
@ -571,6 +673,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
@ -614,7 +717,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ
|
|||
:
|
||||
<div className="PrintStyle3MasterDiv" id={`SQPrintStyle3`} style={{ fontFamily: "'Courier New', Courier, monospace" }}>
|
||||
|
||||
<div className="PrintStyle3-print" >
|
||||
<div className="PrintStyle3-print" style={{ ...headerStyle }}>
|
||||
<div style={{ fontSize: '30px', fontweight: '900' }}>{table2Data?.[0]?.BrName}</div>
|
||||
<div style={{ fontweight: '600' }}> {
|
||||
(table2Data?.[0]?.AddressDetails?.[0]?.Address1 || '') + (table2Data?.[0]?.AddressDetails?.[0]?.City ? (table2Data?.[0]?.AddressDetails?.[0]?.Address1 && table2Data?.[0]?.AddressDetails?.[0]?.City ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.City : '') + (table2Data?.[0]?.AddressDetails?.[0]?.Zip ? (table2Data?.[0]?.AddressDetails?.[0]?.City && table2Data?.[0]?.AddressDetails?.[0]?.Zip ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.Zip : '')}
|
||||
|
|
@ -640,7 +743,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ
|
|||
<div className="PrintStyle3-print-tableMaster">
|
||||
{(TakeawayData?.length > 0) &&
|
||||
<div style={{ width: '95%' }} className="PrintStyle3-print-table">
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', fontweight: '600', gap: '0.2rem' }}>
|
||||
<div style={{ ...tableHeaderStyle, display: 'flex', justifyContent: 'space-between', width: '100%', fontweight: '600', gap: '0.2rem' }}>
|
||||
{SLNO && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>S.No</div>}
|
||||
{Item && <div style={{ width: '300%', textAlign: 'left', fontWeight: 600 }}>ITEM</div>}
|
||||
{HsnCode && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>HSN</div>}
|
||||
|
|
@ -652,32 +755,90 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ
|
|||
</div>
|
||||
|
||||
<div style={{ marginTop: '5px' }}>
|
||||
{( TakeawayData)?.map((item, index) => (
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', gap: '0.2rem' }}>
|
||||
{ SLNO && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>{index + 1}</div>}
|
||||
{ Item &&
|
||||
<div style={{ display: 'flex', flexDirection: 'column', width: '300%', textAlign: 'left', fontWeight: 600 }}>
|
||||
{dataChunk?.map((item, index) => {
|
||||
const isMatch =
|
||||
(index % 2 === 0 && rowtypeStyle === "even") ||
|
||||
(index % 2 === 1 && rowtypeStyle === "odd");
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
gap: "0.2rem",
|
||||
...(isMatch ? tableBodyStyle : {}),
|
||||
}}
|
||||
>
|
||||
{SLNO && (
|
||||
<div style={{ width: "100%", textAlign: "center", fontWeight: 600 }}>
|
||||
{chunkIndex * chunkSize + index + 1}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{Item && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
width: "300%",
|
||||
textAlign: "left",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
<div>{item?.ProdName}</div>
|
||||
<div>({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"})
|
||||
{item?.BrandName !== null ? item?.BrandName : ""}
|
||||
{item?.ProductIdentifierDtls?.length > 0 ? (item?.ProductIdentifierDtls?.filter((items) => !(items.SerialNumber == "" || items.SerialNumber == null))
|
||||
?.map(a => { return (<div>{a.SerialNumber}</div>) })) : ""} {item?.ProductIdentifierDtls?.length > 0 ? item?.ProductIdentifierDtls.filter((item1) => item1.IMEI1 !== "" || item1.IMEI2 !== "")
|
||||
?.map(item2 => {
|
||||
const imei1 = item2.IMEI1 || "";
|
||||
const imei2 = item2.IMEI2 || "";
|
||||
return (<div>{[imei1, imei2].filter(Boolean).join(",")}</div>);
|
||||
}
|
||||
) : ""}
|
||||
<div>
|
||||
({item?.Size ? item?.Size : "1"}{" "}
|
||||
{item?.SinglePc === "Y"
|
||||
? "PCS"
|
||||
: item?.Type !== "C"
|
||||
? item?.UomName
|
||||
: "COMBO"})
|
||||
{item?.BrandName ?? ""}
|
||||
</div>
|
||||
</div>}
|
||||
{ HsnCode && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.HSN}</div>}
|
||||
{ MRP && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</div>}
|
||||
{ Quantity && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.Qty}</div>}
|
||||
{ Rate && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.Price}</div>}
|
||||
{ Discount && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</div>}
|
||||
{ Amount && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }} > {item?.NetAmt?.toFixed(2)}</div>}
|
||||
</div>
|
||||
))}
|
||||
)}
|
||||
|
||||
{HsnCode && (
|
||||
<div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}>
|
||||
{item?.HSN}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{MRP && (
|
||||
<div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}>
|
||||
{item?.SinglePc === "Y" ? item?.Price : item?.MRP}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{Quantity && (
|
||||
<div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}>
|
||||
{item?.Qty}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{Rate && (
|
||||
<div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}>
|
||||
{item?.Price}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{Discount && (
|
||||
<div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}>
|
||||
{item?.Type !== "C"
|
||||
? item?.OfferAmt || 0
|
||||
: item?.OfferValue || 0}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{Amount && (
|
||||
<div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}>
|
||||
{item?.NetAmt?.toFixed(2)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -686,7 +847,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ
|
|||
|
||||
|
||||
{/* <br/> */}
|
||||
<div className="PrintStyle3-print-ttlovrl">
|
||||
<div className="PrintStyle3-print-ttlovrl" style={{...netAmountStyle}}>
|
||||
<div>
|
||||
<div style={{ fontWeight: '600' }}> Items : </div>
|
||||
<div style={{ fontWeight: '600' }}> Qty : </div>
|
||||
|
|
@ -848,6 +1009,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,6 +4,17 @@ import {
|
|||
GlobalPritdummyData,
|
||||
changeReprintDataFound,
|
||||
GlobalprinttermsAndConditions,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
} from "../../../Features/ThemeChange/ThemeChange";
|
||||
import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle3.scss"
|
||||
import { extractLastNumber } from "../../../Services/Others";
|
||||
|
|
@ -28,11 +39,20 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
|
|||
const Rate = FieldDetails?.["Rate"];
|
||||
const Amount = FieldDetails?.["Amount"];
|
||||
const HsnCode = FieldDetails?.["HsnCode"];
|
||||
|
||||
|
||||
const GlobaldummyData = useSelector(GlobalPritdummyData);
|
||||
const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
|
||||
|
||||
//
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
||||
const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
||||
const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
||||
const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
||||
const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
||||
const SelectedRowType = useSelector(GlobalRowType);
|
||||
const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
|
||||
const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
|
||||
const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
||||
const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
||||
|
||||
let TermsAndConditions = printDatas?.TermsandConditions
|
||||
let SignatureImg = printDatas?.Signature
|
||||
|
|
@ -42,7 +62,13 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
|
|||
let PageSize = printDatas?.PageSize
|
||||
const Signature = FieldDetails?.["signature"];
|
||||
const TermsnAdCondition = FieldDetails?.["terms&conditions"];
|
||||
|
||||
//
|
||||
let printColors = printDatas?.PrintColors;
|
||||
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
|
||||
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
|
||||
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
|
||||
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
|
||||
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
|
||||
|
||||
const keysLength = Object.keys(table2Data ?? {}).length;
|
||||
|
||||
|
|
@ -58,19 +84,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
|
|||
const formattedDate = `${day}-${monthNames[monthIndex]}-${year}`;
|
||||
|
||||
const TakeawayData = table2Data?.[0]?.ProductDetails
|
||||
console.log(TakeawayData, "TakeawayData")
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let TotalOfferAmount = 0;
|
||||
|
||||
// Calculate SalesWiseOffers total amount
|
||||
|
||||
|
||||
|
||||
|
||||
const chunkSize = PageSize == "A5" ? 11 : 16;
|
||||
|
||||
let dataSource = table2Data?.[0]?.ProductDetails;
|
||||
|
|
@ -85,6 +99,52 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
|
|||
}
|
||||
const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 10);
|
||||
//
|
||||
const headerStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedHeaderColor
|
||||
: headerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedHeaderFontColor
|
||||
: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableHeaderColor
|
||||
: tableHeaderColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableHeaderFontColor
|
||||
: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableBodyColor
|
||||
: tableBodyColor?.background,
|
||||
color: GlobaldummyData
|
||||
? SelectedTableBodyFontColor
|
||||
: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
|
||||
const footerColorStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableFooterColor
|
||||
: footerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableFooterFontColor
|
||||
: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedNetAmountColor
|
||||
: netAmtColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedNetAmountFontColor
|
||||
: netAmtColor?.font,
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{FormatTheme ?
|
||||
|
|
@ -95,7 +155,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
|
|||
|
||||
{/* <div className="header" style={{ position: "fixed", top: 0, width: "100%" }}> */}
|
||||
<div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}>
|
||||
<div className='PrintStyle4-fistDiv' style={{ flexDirection: 'column' }}>
|
||||
<div className='PrintStyle4-fistDiv' style={{ flexDirection: 'column',...headerStyle, }}>
|
||||
<div style={{ fontSize: '20px', fontWeight: '600', width: '100%', textAlign: 'center' }}>{table2Data?.[0]?.BrName}</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', fontWeight: 600 }}>
|
||||
{
|
||||
|
|
@ -129,20 +189,31 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
|
|||
<table className="PrintStyle4-print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{SLNO && <th style={{ width: '10px' }}>S.No</th>}
|
||||
{Item && <th>Item</th>}
|
||||
{Quantity && <th style={{ width: '30px', textAlign: 'right' }}>Qty</th>}
|
||||
{HsnCode && <th style={{ width: '30px', textAlign: 'right' }}>HSN</th>}
|
||||
{MRP && <th style={{ width: '30px', textAlign: 'right' }}>MRP</th>}
|
||||
{Discount && <th style={{ width: '30px', textAlign: 'right' }}>Dis </th>}
|
||||
{Rate && <th style={{ width: '40px', textAlign: 'right' }}>Rate</th>}
|
||||
{Amount && <th style={{ width: '30px', textAlign: 'right' }}>Amt</th>}
|
||||
{SLNO && <th style={{ width: '10px',...tableHeaderStyle }}>S.No</th>}
|
||||
{Item && <th style={{...tableHeaderStyle}}>Item</th>}
|
||||
{Quantity && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>Qty</th>}
|
||||
{HsnCode && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>HSN</th>}
|
||||
{MRP && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>MRP</th>}
|
||||
{Discount && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>Dis </th>}
|
||||
{Rate && <th style={{ width: '40px', textAlign: 'right',...tableHeaderStyle }}>Rate</th>}
|
||||
{Amount && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>Amt</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dataChunk?.map((item, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO && <td>{chunkIndex * chunkSize + index + 1}</td>}
|
||||
{Item && <td style={{ display: 'flex', flexDirection: 'column', marginLeft: "30px" }}>
|
||||
<div>{item?.ProdName}</div>
|
||||
|
|
@ -196,7 +267,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
|
|||
<>
|
||||
|
||||
|
||||
<div className='PrintStyle4-ThirdDivMaster'>
|
||||
<div className='PrintStyle4-ThirdDivMaster' style={{...netAmountStyle}}>
|
||||
<div className='PrintStyle4-ThirdP'>
|
||||
<div>
|
||||
<div style={{ fontWeight: '600' }}>Items </div>
|
||||
|
|
@ -365,6 +436,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
@ -425,7 +497,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
|
|||
<>
|
||||
|
||||
|
||||
<div className='PrintStyle4-ThirdDivMaster'>
|
||||
<div className='PrintStyle4-ThirdDivMaster' style={{...netAmountStyle}}>
|
||||
<div className='PrintStyle4-ThirdP'>
|
||||
<div>
|
||||
<div style={{ fontWeight: '600' }}>Items </div>
|
||||
|
|
@ -592,6 +664,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
@ -657,20 +730,31 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
|
|||
<table className="PrintStyle4-print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{SLNO && <th style={{ width: '10px' }}>S.No</th>}
|
||||
{Item && <th>Item</th>}
|
||||
{Quantity && <th style={{ width: '30px', textAlign: 'right' }}>Qty</th>}
|
||||
{HsnCode && <th style={{ width: '30px', textAlign: 'right' }}>HSN</th>}
|
||||
{MRP && <th style={{ width: '30px', textAlign: 'right' }}>MRP</th>}
|
||||
{Discount && <th style={{ width: '30px', textAlign: 'right' }}>Dis </th>}
|
||||
{Rate && <th style={{ width: '40px', textAlign: 'right' }}>Rate</th>}
|
||||
{Amount && <th style={{ width: '30px', textAlign: 'right' }}>Amt</th>}
|
||||
{SLNO && <th style={{ width: '10px',...tableHeaderStyle }}>S.No</th>}
|
||||
{Item && <th style={{...tableHeaderStyle}}>Item</th>}
|
||||
{Quantity && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>Qty</th>}
|
||||
{HsnCode && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>HSN</th>}
|
||||
{MRP && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>MRP</th>}
|
||||
{Discount && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>Dis </th>}
|
||||
{Rate && <th style={{ width: '40px', textAlign: 'right',...tableHeaderStyle }}>Rate</th>}
|
||||
{Amount && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>Amt</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(GlobaldummyData ? products : TakeawayData)?.map((item, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO && <td>{index + 1}</td>}
|
||||
{Item && <td style={{ display: 'flex', flexDirection: 'column', marginLeft: "30px" }}>
|
||||
<div>{item?.ProdName}</div>
|
||||
|
|
@ -716,7 +800,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
|
|||
}
|
||||
|
||||
|
||||
<div className='PrintStyle4-ThirdDivMaster'>
|
||||
<div className='PrintStyle4-ThirdDivMaster' style={{...netAmountStyle}}>
|
||||
<div className='PrintStyle4-ThirdP'>
|
||||
<div>
|
||||
<div style={{ fontWeight: '600' }}>Items </div>
|
||||
|
|
@ -883,6 +967,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,6 +4,17 @@ import {
|
|||
GlobalPritdummyData,
|
||||
changeReprintDataFound,
|
||||
GlobalprinttermsAndConditions,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
} from '../../../Features/ThemeChange/ThemeChange'
|
||||
import '../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle5.scss'
|
||||
import { extractLastNumber } from "../../../Services/Others";
|
||||
|
|
@ -33,6 +44,17 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C
|
|||
|
||||
const GlobaldummyData = useSelector(GlobalPritdummyData);
|
||||
const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
||||
const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
||||
const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
||||
const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
||||
const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
||||
const SelectedRowType = useSelector(GlobalRowType);
|
||||
const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
|
||||
const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
|
||||
const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
||||
const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
||||
|
||||
|
||||
let TermsAndConditions = printDatas?.TermsandConditions
|
||||
|
|
@ -61,10 +83,12 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C
|
|||
const TakeawayData = table2Data?.[0]?.ProductDetails
|
||||
console.log(TakeawayData, "TakeawayData", table2Data)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let printColors = printDatas?.PrintColors;
|
||||
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
|
||||
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
|
||||
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
|
||||
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
|
||||
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
|
||||
let TotalOfferAmount = 0;
|
||||
|
||||
// Calculate SalesWiseOffers total amount
|
||||
|
|
@ -82,7 +106,51 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C
|
|||
}
|
||||
const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 2 : 10);
|
||||
const headerStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedHeaderColor
|
||||
: headerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedHeaderFontColor
|
||||
: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableHeaderColor
|
||||
: tableHeaderColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableHeaderFontColor
|
||||
: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableBodyColor
|
||||
: tableBodyColor?.background,
|
||||
color: GlobaldummyData
|
||||
? SelectedTableBodyFontColor
|
||||
: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
|
||||
const footerColorStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableFooterColor
|
||||
: footerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableFooterFontColor
|
||||
: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedNetAmountColor
|
||||
: netAmtColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedNetAmountFontColor
|
||||
: netAmtColor?.font,
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{FormatTheme ?
|
||||
|
|
@ -92,7 +160,7 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C
|
|||
|
||||
{/* <div className="header" style={{ position: "fixed", top: 0, width: "100%" }}> */}
|
||||
<div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}>
|
||||
<div className="PrintStyle5-Head">
|
||||
<div className="PrintStyle5-Head" style={{...headerStyle}}>
|
||||
<div>
|
||||
<div style={{ fontSize: 'clamp(2rem, 2.5vw, 2rem)', fontWeight: '600' }}>{table2Data?.[0]?.BrName}</div>
|
||||
|
||||
|
|
@ -104,9 +172,8 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C
|
|||
</div>
|
||||
<div style={{ fontSize: "14px", fontWeight: '600' }}> Mobile :{GlobaldummyData ? '1234567890' : table2Data?.[0]?.BrMobile} </div>
|
||||
{<div style={{ textTransform: 'uppercase' }}>{BillName} </div>}
|
||||
|
||||
<hr />
|
||||
</div>
|
||||
<hr />
|
||||
|
||||
|
||||
<div style={{ display: "flex", justifyContent: "space-between", fontSize: "14px", fontWeight: '600' }}>
|
||||
|
|
@ -121,7 +188,7 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C
|
|||
<div style={{ marginTop: GlobaldummyData ? "9rem" : "0rem" }} className="print-body">
|
||||
{(TakeawayData?.length > 0 || GlobaldummyData) &&
|
||||
<>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", fontWeight: '600', fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', width: '100%', gap: '0.5rem' }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", fontWeight: '600', fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', width: '100%', gap: '0.5rem', ...tableHeaderStyle }}>
|
||||
{GlobaldummyData ? GlobalSlNo && <div style={{ width: '100%', textAlign: 'center' }}>S.No</div> : SLNO && <div style={{ width: '100%', textAlign: 'center' }}>S.No</div>}
|
||||
{GlobaldummyData ? (GlobalItem || GlobalQuantity) &&
|
||||
<div style={{ width: '300%', textAlign: 'center' }} > {GlobaldummyData ? GlobalItem && 'ITEM /DES /' : 'ITEM /DES /'} {GlobaldummyData ? GlobalQuantity && 'QTY' : 'QTY'} </div> :
|
||||
|
|
@ -136,7 +203,8 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C
|
|||
<hr className="hrline" />
|
||||
|
||||
{dataChunk?.map((item, index) => (
|
||||
<div key={index} className="PrintStyle5-print-prddtls" style={{ display: "flex", justifyContent: "space-between", fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', fontWeight: '600', width: '100%', gap: '0.5rem' }}>
|
||||
<div key={index} className="PrintStyle5-print-prddtls" style={{ ...(rowtypeStyle === (index % 2 === 0 ? "even" : "odd")? tableBodyStyle
|
||||
: {}),display: "flex", justifyContent: "space-between", fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', fontWeight: '600', width: '100%', gap: '0.5rem' }}>
|
||||
{SLNO && <div style={{ width: '100%', textAlign: 'center' }}>{chunkIndex * chunkSize + index + 1}</div>}
|
||||
{
|
||||
GlobaldummyData ? (GlobalItem || GlobalQuantity) &&
|
||||
|
|
@ -331,7 +399,7 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C
|
|||
|
||||
<hr className="hrline" />
|
||||
|
||||
<div className="align-style" style={{ fontWeight: '600', fontSize: '19px' }}> <div>Amount </div> <div> : </div> <div>{GlobaldummyData ? '1,066' : Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div> </div>
|
||||
<div className="align-style" style={{...netAmountStyle, fontWeight: '600', fontSize: '19px' }}> <div>Amount </div> <div> : </div> <div>{GlobaldummyData ? '1,066' : Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div> </div>
|
||||
|
||||
<hr className="hrline" />
|
||||
{/*
|
||||
|
|
@ -379,6 +447,7 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{GlobaldummyData ? GlobalIsnotes &&
|
||||
|
|
@ -590,7 +659,7 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C
|
|||
|
||||
<hr className="hrline" />
|
||||
|
||||
<div className="align-style" style={{ fontWeight: '600', fontSize: '19px' }}> <div>Amount </div> <div> : </div> <div>{GlobaldummyData ? '1,066' : Number(table2Data?.NetAmount).toFixed(2)}</div> </div>
|
||||
<div className="align-style" style={{...netAmountStyle, fontWeight: '600', fontSize: '19px' }}> <div>Amount </div> <div> : </div> <div>{GlobaldummyData ? '1,066' : Number(table2Data?.NetAmount).toFixed(2)}</div> </div>
|
||||
|
||||
<hr className="hrline" />
|
||||
|
||||
|
|
@ -634,6 +703,7 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
@ -681,7 +751,7 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C
|
|||
:
|
||||
<div className="PrintStyle5-MasterDiv" id={`SQPrintStyle5`} style={{ fontFamily: "'Courier New', Courier, monospace" }} >
|
||||
|
||||
<div className="PrintStyle5-Head">
|
||||
<div className="PrintStyle5-Head" style={{...headerStyle}}>
|
||||
<div>
|
||||
<div style={{ fontSize: 'clamp(2rem, 2.5vw, 2rem)', fontWeight: '600' }}>{table2Data?.[0]?.BrName}</div>
|
||||
|
||||
|
|
@ -692,15 +762,9 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C
|
|||
</div>
|
||||
<div style={{ fontSize: "14px", fontWeight: '600' }}> Mobile :{GlobaldummyData ? '1234567890' : table2Data?.[0]?.BrMobile} </div>
|
||||
{<div style={{ textTransform: 'uppercase' }}>{BillName}</div>}
|
||||
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<hr />
|
||||
<div className="PrintStyle5-print-table">
|
||||
|
||||
|
||||
<div style={{ display: "flex", justifyContent: "space-between", fontSize: "14px", fontWeight: '600' }}>
|
||||
{" "}
|
||||
<div> {GlobaldummyData ? formattedDate : Date1} </div>{" "}
|
||||
|
|
@ -710,7 +774,7 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C
|
|||
<hr />
|
||||
{(TakeawayData?.length > 0) &&
|
||||
<>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", fontWeight: '600', fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', width: '100%', gap: '0.5rem' }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", fontWeight: '600', fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', width: '100%', gap: '0.5rem', ...tableHeaderStyle }}>
|
||||
{
|
||||
SLNO && <div style={{ width: '100%', textAlign: 'center' }}>S.No</div>}
|
||||
{
|
||||
|
|
@ -727,7 +791,8 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C
|
|||
<hr className="hrline" />
|
||||
|
||||
{(TakeawayData)?.map((item, index) => (
|
||||
<div key={index} className="PrintStyle5-print-prddtls" style={{ display: "flex", justifyContent: "space-between", fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', fontWeight: '600', width: '100%', gap: '0.5rem' }}>
|
||||
<div key={index} className="PrintStyle5-print-prddtls" style={{ ...(rowtypeStyle === (index % 2 === 0 ? "even" : "odd")? tableBodyStyle
|
||||
: {}), display: "flex", justifyContent: "space-between", fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', fontWeight: '600', width: '100%', gap: '0.5rem' }}>
|
||||
{SLNO && <div style={{ width: '100%', textAlign: 'center' }}>{index + 1}</div>}
|
||||
{
|
||||
|
||||
|
|
@ -907,7 +972,7 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C
|
|||
|
||||
<hr className="hrline" />
|
||||
|
||||
<div className="align-style" style={{ fontWeight: '600', fontSize: '19px' }}> <div>Amount </div> <div> : </div> <div>{GlobaldummyData ? '1,066' : Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div> </div>
|
||||
<div className="align-style" style={{...netAmountStyle, fontWeight: '600', fontSize: '19px' }}> <div>Amount </div> <div> : </div> <div>{GlobaldummyData ? '1,066' : Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div> </div>
|
||||
|
||||
<hr className="hrline" />
|
||||
{/*
|
||||
|
|
@ -964,6 +1029,7 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -5,6 +5,17 @@ import {
|
|||
GlobalPritdummyData,
|
||||
changeReprintDataFound,
|
||||
GlobalprinttermsAndConditions,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
} from "../../../Features/ThemeChange/ThemeChange";
|
||||
import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle6.scss";
|
||||
import { extractLastNumber } from "../../../Services/Others";
|
||||
|
|
@ -44,10 +55,20 @@ const PurPrintstyle6 = ({
|
|||
const Rate = FieldDetails?.["Rate"];
|
||||
const Amount = FieldDetails?.["Amount"];
|
||||
const HsnCode = FieldDetails?.["HsnCode"];
|
||||
|
||||
|
||||
const GlobaldummyData = useSelector(GlobalPritdummyData);
|
||||
const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
||||
const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
||||
const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
||||
const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
||||
const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
||||
const SelectedRowType = useSelector(GlobalRowType);
|
||||
const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
|
||||
const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
|
||||
const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
||||
const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
||||
|
||||
|
||||
|
||||
let TermsAndConditions = printDatas?.TermsandConditions
|
||||
|
|
@ -58,6 +79,12 @@ const PurPrintstyle6 = ({
|
|||
let PageSize = printDatas?.PageSize
|
||||
const Signature = FieldDetails?.["signature"];
|
||||
const TermsnAdCondition = FieldDetails?.["terms&conditions"];
|
||||
let printColors = printDatas?.PrintColors;
|
||||
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
|
||||
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
|
||||
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
|
||||
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
|
||||
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
|
||||
|
||||
|
||||
const keysLength = Object.keys(table2Data ?? {}).length;
|
||||
|
|
@ -90,19 +117,60 @@ const PurPrintstyle6 = ({
|
|||
}
|
||||
const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 13);
|
||||
const headerStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedHeaderColor
|
||||
: headerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedHeaderFontColor
|
||||
: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableHeaderColor
|
||||
: tableHeaderColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableHeaderFontColor
|
||||
: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableBodyColor
|
||||
: tableBodyColor?.background,
|
||||
color: GlobaldummyData
|
||||
? SelectedTableBodyFontColor
|
||||
: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
|
||||
const footerColorStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableFooterColor
|
||||
: footerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableFooterFontColor
|
||||
: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedNetAmountColor
|
||||
: netAmtColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedNetAmountFontColor
|
||||
: netAmtColor?.font,
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{FormatTheme ?
|
||||
<div id={`SQPrintStyle6`} className="PrintStyle6MasterDiv" style={{ fontFamily: "'Courier New', Courier, monospace", position: "relative", width: "100%", minHeight: isMobile ? (PageSize === "A5" ? "210mm" : "297mm") : "auto" }}>
|
||||
|
||||
{paginatedChunks.map((dataChunk, chunkIndex) => (
|
||||
<div className={`container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`} style={{ display: "flex", flexDirection: "column", justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme ? "space-between" : "", height: FormatTheme ? PageSize == "A5" ? '170mm' : "257mm" : "", }} key={chunkIndex}>
|
||||
|
||||
|
||||
{/* <div className="header" style={{ position: "fixed", top: 0, width: "100%" }}> */}
|
||||
<div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}>
|
||||
<div className="PrintStyle6-firstDiv">
|
||||
<div className="PrintStyle6-firstDiv" style={{...headerStyle}}>
|
||||
<div className="P6HdBrnchName" style={{ fontSize: 'clamp(1.2rem, 2.5vw, 1.8rem)', fontWeight: '600' }}>
|
||||
{GlobaldummyData ? "XYZ Shop" : table2Data?.[0]?.BrName}
|
||||
</div>
|
||||
|
|
@ -140,31 +208,31 @@ const PurPrintstyle6 = ({
|
|||
<table className="PrintStyle6-print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{SLNO && <th style={{ width: "10px", }}>S.No</th>}
|
||||
{SLNO && <th style={{ width: "10px", ...tableHeaderStyle }}>S.No</th>}
|
||||
{(
|
||||
<th style={{ width: "10px", }}>
|
||||
<th style={{ width: "10px", ...tableHeaderStyle }}>
|
||||
{Item && "ITEM /DES/"}{" "}
|
||||
{Quantity && "QTY"}
|
||||
</th>
|
||||
)}
|
||||
{HsnCode && (
|
||||
<th style={{ width: "10px", textAlign: "right", }}>HSN</th>
|
||||
<th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>HSN</th>
|
||||
)}
|
||||
{MRP && (
|
||||
<th style={{ width: "10px", textAlign: "right", }}>MRP</th>
|
||||
<th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>MRP</th>
|
||||
)}
|
||||
{Discount && (
|
||||
<th style={{ width: "10px", textAlign: "right", }}>
|
||||
<th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>
|
||||
Dis{" "}
|
||||
</th>
|
||||
)}
|
||||
{Rate && (
|
||||
<th style={{ width: "10px", textAlign: "right", }}>
|
||||
<th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>
|
||||
Rate
|
||||
</th>
|
||||
)}
|
||||
{Amount && (
|
||||
<th style={{ width: "10px", textAlign: "right", }}>
|
||||
<th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>
|
||||
Amt
|
||||
</th>
|
||||
)}
|
||||
|
|
@ -174,7 +242,17 @@ const PurPrintstyle6 = ({
|
|||
{dataChunk?.map(
|
||||
(item, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<tr key={index} style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO && <td>{chunkIndex * chunkSize + index + 1}</td>}
|
||||
{(
|
||||
<td
|
||||
|
|
@ -381,7 +459,7 @@ const PurPrintstyle6 = ({
|
|||
</div>
|
||||
|
||||
|
||||
<div className="PrintStyle6-secondDiv">
|
||||
<div className="PrintStyle6-secondDiv" style={{...netAmountStyle}}>
|
||||
<div style={{ textAlign: "left", fontSize: "clamp(1rem, 2.5vw, 1.2rem)", fontWeight: '600' }}>
|
||||
Amount
|
||||
</div>
|
||||
|
|
@ -449,6 +527,7 @@ const PurPrintstyle6 = ({
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{GlobaldummyData ? GlobalIsnotes &&
|
||||
|
|
@ -533,7 +612,7 @@ const PurPrintstyle6 = ({
|
|||
|
||||
<hr className="PrintStyle6-HrLine" />
|
||||
|
||||
<div className="align-style6" style={{ display: "flex", alignItems: "center", justifyContent: "space-evenly", margin: "0rem 1.5rem", fontSize: "clamp(0.65rem, 2.5vw, 1rem)", fontWeight: '600' }}>
|
||||
<div className="align-style6" style={{ ...netAmountStyle, display: "flex", alignItems: "center", justifyContent: "space-evenly", margin: "0rem 1.5rem", fontSize: "clamp(0.65rem, 2.5vw, 1rem)", fontWeight: '600' }}>
|
||||
<div>
|
||||
<div>Items :{GlobaldummyData ? "8" : totalQuantityFilter?.length} </div>
|
||||
</div>
|
||||
|
|
@ -671,7 +750,7 @@ const PurPrintstyle6 = ({
|
|||
|
||||
|
||||
|
||||
<div className="PrintStyle6-secondDiv">
|
||||
<div className="PrintStyle6-secondDiv"style={{...netAmountStyle}}>
|
||||
<div style={{ textAlign: "left", fontSize: "clamp(1rem, 2.5vw, 1.2rem)", fontWeight: '600'}}>
|
||||
Amount
|
||||
</div>
|
||||
|
|
@ -727,6 +806,7 @@ const PurPrintstyle6 = ({
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
@ -769,7 +849,7 @@ const PurPrintstyle6 = ({
|
|||
</div>
|
||||
:
|
||||
<div id={`SQPrintStyle6`} className="PrintStyle6MasterDiv" style={{ fontFamily: "'Courier New', Courier, monospace" }}>
|
||||
<div className="PrintStyle6-firstDiv">
|
||||
<div className="PrintStyle6-firstDiv" style={{...headerStyle}}>
|
||||
<div className="P6HdBrnchName" style={{ fontSize: 'clamp(1.2rem, 2.5vw, 1.8rem)', fontWeight: '600' }}>
|
||||
{table2Data?.[0]?.BrName}
|
||||
</div>
|
||||
|
|
@ -782,8 +862,6 @@ const PurPrintstyle6 = ({
|
|||
<div style={{ fontSize: "clamp(0.65rem, 2.5vw, 1rem)", }}>
|
||||
Mobile : {table2Data?.[0]?.BrMobile}
|
||||
</div>
|
||||
|
||||
|
||||
{<div style={{ textTransform: 'uppercase', fontSize: "clamp(0.75rem, 2.5vw, 1rem)", fontWeight: '600' }}>{BillName}</div>}
|
||||
</div>
|
||||
|
||||
|
|
@ -805,31 +883,31 @@ const PurPrintstyle6 = ({
|
|||
<table className="PrintStyle6-print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{SLNO && <th style={{ width: "10px", }}>S.No</th>}
|
||||
{SLNO && <th style={{ width: "10px", ...tableHeaderStyle }}>S.No</th>}
|
||||
{(
|
||||
<th style={{ width: "10px", }}>
|
||||
<th style={{ width: "10px", ...tableHeaderStyle }}>
|
||||
{Item && "ITEM /DES/"}{" "}
|
||||
{Quantity && "QTY"}
|
||||
</th>
|
||||
)}
|
||||
{HsnCode && (
|
||||
<th style={{ width: "10px", textAlign: "right", }}>HSN</th>
|
||||
<th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>HSN</th>
|
||||
)}
|
||||
{MRP && (
|
||||
<th style={{ width: "10px", textAlign: "right", }}>MRP</th>
|
||||
<th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>MRP</th>
|
||||
)}
|
||||
{Discount && (
|
||||
<th style={{ width: "10px", textAlign: "right", }}>
|
||||
<th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>
|
||||
Dis{" "}
|
||||
</th>
|
||||
)}
|
||||
{Rate && (
|
||||
<th style={{ width: "10px", textAlign: "right", }}>
|
||||
<th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>
|
||||
Rate
|
||||
</th>
|
||||
)}
|
||||
{Amount && (
|
||||
<th style={{ width: "10px", textAlign: "right", }}>
|
||||
<th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>
|
||||
Amt
|
||||
</th>
|
||||
)}
|
||||
|
|
@ -839,7 +917,18 @@ const PurPrintstyle6 = ({
|
|||
{(TakeawayData)?.map(
|
||||
(item, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO && <td>{index + 1}</td>}
|
||||
{(
|
||||
<td
|
||||
|
|
@ -906,7 +995,7 @@ const PurPrintstyle6 = ({
|
|||
}
|
||||
|
||||
|
||||
<div className="align-style6" style={{ display: "flex", alignItems: "center", justifyContent: "space-evenly", margin: "0rem 1.5rem", fontSize: "clamp(0.65rem, 2.5vw, 1rem)", fontWeight: '600' }}>
|
||||
<div className="align-style6" style={{ ...netAmountStyle, display: "flex", alignItems: "center", justifyContent: "space-evenly", margin: "0rem 1.5rem", fontSize: "clamp(0.65rem, 2.5vw, 1rem)", fontWeight: '600' }}>
|
||||
<div>
|
||||
<div>Items :{GlobaldummyData ? "8" : totalQuantityFilter?.length} </div>
|
||||
</div>
|
||||
|
|
@ -1045,7 +1134,7 @@ const PurPrintstyle6 = ({
|
|||
{/* <div className="align-style"> <div>Qty : </div> <div>{GlobaldummyData ? '9' : totalQuantity}</div> </div> */}
|
||||
|
||||
|
||||
<div className="PrintStyle6-secondDiv">
|
||||
<div className="PrintStyle6-secondDiv" style={{...netAmountStyle}}>
|
||||
<div style={{ textAlign: "left", fontSize: "clamp(1rem, 2.5vw, 1.2rem)", fontWeight: '600'}}>
|
||||
Amount
|
||||
</div>
|
||||
|
|
@ -1097,6 +1186,7 @@ const PurPrintstyle6 = ({
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,7 +4,18 @@ import { useDispatch, useSelector } from "react-redux";
|
|||
import {
|
||||
GlobalPritdummyData,
|
||||
changeReprintDataFound,
|
||||
GlobalprinttermsAndConditions
|
||||
GlobalprinttermsAndConditions,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
} from '../../../Features/ThemeChange/ThemeChange';
|
||||
import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle7.scss"
|
||||
import { extractLastNumber } from "../../../Services/Others";
|
||||
|
|
@ -29,10 +40,25 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
const Rate = FieldDetails?.["Rate"];
|
||||
const Amount = FieldDetails?.["Amount"];
|
||||
const HsnCode = FieldDetails?.["HsnCode"];
|
||||
|
||||
|
||||
let printColors = printDatas?.PrintColors;
|
||||
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
|
||||
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
|
||||
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
|
||||
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
|
||||
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
|
||||
const GlobaldummyData = useSelector(GlobalPritdummyData);
|
||||
const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
||||
const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
||||
const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
||||
const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
||||
const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
||||
const SelectedRowType = useSelector(GlobalRowType);
|
||||
const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
|
||||
const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
|
||||
const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
||||
const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
||||
|
||||
|
||||
let TermsAndConditions = printDatas?.TermsandConditions
|
||||
|
|
@ -43,32 +69,14 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
let PageSize = printDatas?.PageSize
|
||||
const Signature = FieldDetails?.["signature"];
|
||||
const TermsnAdCondition = FieldDetails?.["terms&conditions"];
|
||||
|
||||
|
||||
const keysLength = Object.keys(table2Data ?? {}).length;
|
||||
if (keysLength > 0) {
|
||||
dispatch(changeReprintDataFound(true));
|
||||
}
|
||||
|
||||
|
||||
const TakeawayData = table2Data?.[0]?.ProductDetails
|
||||
console.log(TakeawayData, "TakeawayData", table2Data)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let TotalOfferAmount = 0;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const chunkSize = PageSize == "A5" ? 8 : 11;
|
||||
let dataSource = table2Data?.[0]?.ProductDetails;
|
||||
|
||||
|
||||
|
||||
// Paginate the data
|
||||
const paginatedChunks = [];
|
||||
for (let i = 0; i < dataSource?.length; i += chunkSize) {
|
||||
|
|
@ -76,8 +84,51 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
}
|
||||
const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 10);
|
||||
{ console.log(TakeawayData, "TakeawayDataTakeawayData") }
|
||||
const headerStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedHeaderColor
|
||||
: headerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedHeaderFontColor
|
||||
: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableHeaderColor
|
||||
: tableHeaderColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableHeaderFontColor
|
||||
: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableBodyColor
|
||||
: tableBodyColor?.background,
|
||||
color: GlobaldummyData
|
||||
? SelectedTableBodyFontColor
|
||||
: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
|
||||
const footerColorStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableFooterColor
|
||||
: footerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableFooterFontColor
|
||||
: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedNetAmountColor
|
||||
: netAmtColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedNetAmountFontColor
|
||||
: netAmtColor?.font,
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -89,7 +140,7 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
|
||||
<div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}>
|
||||
<hr class="star-line" />
|
||||
<div className="PrintStyle7-print">
|
||||
<div className="PrintStyle7-print" style={{...headerStyle}}>
|
||||
<div style={{ fontSize: '16px', fontWeight: '600' }}> {table2Data?.[0]?.BrName}</div>
|
||||
<div style={{ fontSize: '10px', fontWeight: '600' }} >{GlobaldummyData ?
|
||||
'BranchAddress, Town- 635XXX City - State' :
|
||||
|
|
@ -123,19 +174,30 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
<table className="PrintStyle7-print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{ SLNO == true && <th style={{ width: '10px', }}>S</th>}
|
||||
{ Item == true && <th>Item</th>}
|
||||
{ HsnCode == true && <th style={{ width: '10px', }}>HSN</th>}
|
||||
{ Quantity == true && <th style={{ width: '10px', }}>Qty</th>}
|
||||
{GlobaldummyData ? GlobalMRP && <th style={{ width: '10px' }}>MRP</th> : MRP == true && <th style={{ width: '10px' }}>MRP</th>}
|
||||
{GlobaldummyData ? GlobalRate && <th style={{ width: '10px' }}>Rate</th> : Rate == true && <th style={{ width: '10px' }}>Rate</th>}
|
||||
{ Discount == true && <th style={{ width: '10px' }}>Dis </th>}
|
||||
{ Amount == true && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>}
|
||||
{SLNO == true && <th style={{ width: '10px', ...tableHeaderStyle }}>S.No</th>}
|
||||
{Item == true && <th style={{ ...tableHeaderStyle }}>Item</th>}
|
||||
{HsnCode == true && <th style={{ width: '10px', ...tableHeaderStyle }}>HSN</th>}
|
||||
{Quantity == true && <th style={{ width: '10px', ...tableHeaderStyle }}>Qty</th>}
|
||||
{GlobaldummyData ? GlobalMRP && <th style={{ width: '10px', ...tableHeaderStyle }}>MRP</th> : MRP == true && <th style={{...tableHeaderStyle, width: '10px' }}>MRP</th>}
|
||||
{GlobaldummyData ? GlobalRate && <th style={{ width: '10px', ...tableHeaderStyle }}>Rate</th> : Rate == true && <th style={{...tableHeaderStyle, width: '10px' }}>Rate</th>}
|
||||
{Discount == true && <th style={{ width: '10px', ...tableHeaderStyle }}>Dis </th>}
|
||||
{Amount == true && <th style={{ width: '10px', textAlign: 'right', ...tableHeaderStyle }}>Amt</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dataChunk?.map((item, index) => (
|
||||
<tr key={index} >
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO == true && <td style={{ textAlign: 'center' }}>{chunkIndex * chunkSize + index + 1}</td>}
|
||||
{Item == true && <td style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div>{item?.ProdName}</div>
|
||||
|
|
@ -161,7 +223,7 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
{((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme &&
|
||||
<>
|
||||
<div className='PrintStyle7-SecondDiv3'>
|
||||
<div className='PrintStyle7-SecondDivMaster'>
|
||||
<div className='PrintStyle7-SecondDivMaster' style={{ ...netAmountStyle }}>
|
||||
<div style={{ fontWeight: "600" }}>Items : {totalQuantityFilter?.length}</div>
|
||||
<div style={{ fontWeight: "600" }}>Qty : {totalQuantity}</div>
|
||||
{(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ fontWeight: "600" }}>Off : {Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div>}
|
||||
|
|
@ -315,6 +377,7 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
@ -376,7 +439,7 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
>
|
||||
<>
|
||||
<div className='PrintStyle7-SecondDiv3'>
|
||||
<div className='PrintStyle7-SecondDivMaster'>
|
||||
<div className='PrintStyle7-SecondDivMaster' style={{ ...netAmountStyle }}>
|
||||
<div style={{ fontWeight: "600" }}>Items : {totalQuantityFilter?.length}</div>
|
||||
<div style={{ fontWeight: "600" }}>Qty : {totalQuantity}</div>
|
||||
{(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ fontWeight: "600" }}>Off : {Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div>}
|
||||
|
|
@ -519,23 +582,15 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
<div style={{ marginLeft: '13px', padding: 0, fontSize: "8px", fontWeight: "600" }}>Customer : {table2Data?.CustSuppName}</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div className="page-footerA4Style11"
|
||||
style={{
|
||||
marginTop: "auto",
|
||||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
|
||||
|
||||
|
||||
<div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
|
||||
{
|
||||
(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
|
||||
|
|
@ -556,20 +611,15 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
:
|
||||
<div className="PrintStyle7MasterDiv" id={`SQPrintStyle7`} style={{ fontFamily: "'Courier New', Courier, monospace" }}>
|
||||
<hr class="star-line" />
|
||||
<div className="PrintStyle7-print">
|
||||
<div className="PrintStyle7-print" style={{...headerStyle}}>
|
||||
<div style={{ fontSize: '16px', fontWeight: '600' }}> {table2Data?.[0]?.BrName}</div>
|
||||
<div style={{ fontSize: '10px', fontWeight: '600' }} >{
|
||||
(table2Data?.[0]?.AddressDetails?.[0]?.Address1 || '') + (table2Data?.[0]?.AddressDetails?.[0]?.City ? (table2Data?.[0]?.AddressDetails?.[0]?.Address1 && table2Data?.[0]?.AddressDetails?.[0]?.City ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.City : '') + (table2Data?.[0]?.AddressDetails?.[0]?.Zip ? (table2Data?.[0]?.AddressDetails?.[0]?.City && table2Data?.[0]?.AddressDetails?.[0]?.Zip ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.Zip : '')}
|
||||
|
|
@ -604,19 +654,30 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
<table className="PrintStyle7-print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{ SLNO == true && <th style={{ width: '10px', }}>S</th>}
|
||||
{ Item == true && <th>Item</th>}
|
||||
{ HsnCode == true && <th style={{ width: '10px', }}>HSN</th>}
|
||||
{ Quantity == true && <th style={{ width: '10px', }}>Qty</th>}
|
||||
{ MRP == true && <th style={{ width: '10px' }}>MRP</th>}
|
||||
{ Rate == true && <th style={{ width: '10px' }}>Rate</th>}
|
||||
{ Discount == true && <th style={{ width: '10px' }}>Dis </th>}
|
||||
{ Amount == true && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>}
|
||||
{SLNO == true && <th style={{ width: '10px', ...tableHeaderStyle }}>S.No</th>}
|
||||
{Item == true && <th style={{ ...tableHeaderStyle }}>Item</th>}
|
||||
{HsnCode == true && <th style={{ width: '10px', ...tableHeaderStyle }}>HSN</th>}
|
||||
{Quantity == true && <th style={{ width: '10px', ...tableHeaderStyle }}>Qty</th>}
|
||||
{MRP == true && <th style={{ width: '10px', ...tableHeaderStyle }}>MRP</th>}
|
||||
{Rate == true && <th style={{ width: '10px', ...tableHeaderStyle }}>Rate</th>}
|
||||
{Discount == true && <th style={{ width: '10px', ...tableHeaderStyle }}>Dis </th>}
|
||||
{Amount == true && <th style={{ width: '10px', textAlign: 'right', ...tableHeaderStyle }}>Amt</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(GlobaldummyData ? products : TakeawayData)?.map((item, index) => (
|
||||
<tr key={index} >
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO == true && <td style={{ textAlign: 'center' }}>{index + 1}</td>}
|
||||
{Item == true && <td style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div>{item?.ProdName}</div>
|
||||
|
|
@ -638,7 +699,7 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
</div>
|
||||
|
||||
<div className='PrintStyle7-SecondDiv3'>
|
||||
<div className='PrintStyle7-SecondDivMaster'>
|
||||
<div className='PrintStyle7-SecondDivMaster' style={{ ...netAmountStyle }}>
|
||||
<div style={{ fontWeight: "600" }}>Items : {totalQuantityFilter?.length}</div>
|
||||
<div style={{ fontWeight: "600" }}>Qty : {totalQuantity}</div>
|
||||
{(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ fontWeight: "600" }}>Off : {Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div>}
|
||||
|
|
@ -791,6 +852,7 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,7 +4,19 @@ import { useDispatch, useSelector } from "react-redux";
|
|||
import {
|
||||
GlobalPritdummyData,
|
||||
changeReprintDataFound,
|
||||
GlobalprinttermsAndConditions
|
||||
GlobalprinttermsAndConditions,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
|
||||
} from '../../../Features/ThemeChange/ThemeChange';
|
||||
import '../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle8.scss';
|
||||
import { extractLastNumber } from "../../../Services/Others";
|
||||
|
|
@ -27,11 +39,26 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B
|
|||
const Rate = FieldDetails?.["Rate"];
|
||||
const Amount = FieldDetails?.["Amount"];
|
||||
const HsnCode = FieldDetails?.["HsnCode"];
|
||||
|
||||
let printColors = printDatas?.PrintColors;
|
||||
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
|
||||
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
|
||||
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
|
||||
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
|
||||
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
|
||||
|
||||
const GlobaldummyData = useSelector(GlobalPritdummyData);
|
||||
const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
|
||||
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
||||
const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
||||
const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
||||
const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
||||
const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
||||
const SelectedRowType = useSelector(GlobalRowType);
|
||||
const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
|
||||
const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
|
||||
const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
||||
const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
||||
|
||||
let TermsAndConditions = printDatas?.TermsandConditions
|
||||
let SignatureImg = printDatas?.Signature
|
||||
|
|
@ -74,7 +101,51 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B
|
|||
}
|
||||
const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 13);
|
||||
const headerStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedHeaderColor
|
||||
: headerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedHeaderFontColor
|
||||
: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableHeaderColor
|
||||
: tableHeaderColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableHeaderFontColor
|
||||
: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableBodyColor
|
||||
: tableBodyColor?.background,
|
||||
color: GlobaldummyData
|
||||
? SelectedTableBodyFontColor
|
||||
: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
|
||||
const footerColorStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableFooterColor
|
||||
: footerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableFooterFontColor
|
||||
: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedNetAmountColor
|
||||
: netAmtColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedNetAmountFontColor
|
||||
: netAmtColor?.font,
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -86,7 +157,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B
|
|||
|
||||
{/* <div className="header" style={{ position: "fixed", top: 0, width: "100%" }}> */}
|
||||
<div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}>
|
||||
<div className='PrintStyle8-fistDiv' style={{}} >
|
||||
<div className='PrintStyle8-fistDiv' style={{ ...headerStyle }} >
|
||||
{/* <h3>{table2Data?.[0]?.BrName}</h3> */}
|
||||
<div style={{ fontSize: "clamp(1.25rem, 2.5vw, 1.75rem)", fontWeight: '600', }} >{table2Data?.[0]?.BrName}</div>
|
||||
<div className='PrintStyle8-BrAddress' style={{ fontSize: "clamp(0.63rem, 2.5vw, 1.2rem)" }}>
|
||||
|
|
@ -98,9 +169,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B
|
|||
Mobile : +91 {GlobaldummyData ? '986XXXXXXX' : table2Data?.[0]?.BrMobile}</div>
|
||||
</div>
|
||||
|
||||
{<div className='PrintStyle4-FourthSpan' style={{ textTransform: 'uppercase', fontWeight: '600' }}>
|
||||
{BillName}</div>}
|
||||
|
||||
{<div className='PrintStyle4-FourthSpan' style={{ textTransform: 'uppercase', fontWeight: '600' }}>{BillName}</div>}
|
||||
<div className='PrintStyle8-SecondDiv'>
|
||||
<div style={{ fontWeight: '600' }}>Bill No :{table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)}</div>
|
||||
<div style={{ fontSize: "clamp(0.63rem, 2.5vw, 1.2rem)" }}>{Date1}</div>
|
||||
|
|
@ -116,21 +185,32 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B
|
|||
<table className="PrintStyle8-print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{SLNO && <th style={{ width: "10px", textAlign: "center" }}>S.No</th>}
|
||||
{Item && <th>Des</th>}
|
||||
{HsnCode && <th style={{ width: "10px", textAlign: "right" }}>HSN</th>}
|
||||
{MRP && <th style={{ width: "10px", textAlign: "right" }}>MRP</th>}
|
||||
{Rate && <th style={{ width: "10px", textAlign: "right" }}>Rt</th>}
|
||||
{SLNO && <th style={{ width: "10px", textAlign: "center", ...tableHeaderStyle }}>S.No</th>}
|
||||
{Item && <th style={{ ...tableHeaderStyle }}>Des</th>}
|
||||
{HsnCode && <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>HSN</th>}
|
||||
{MRP && <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>MRP</th>}
|
||||
{Rate && <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>Rt</th>}
|
||||
{
|
||||
Discount && <th style={{ width: "10px", textAlign: "right" }}>(%)</th>}
|
||||
{Quantity && <th style={{ width: "10px", textAlign: "right" }}>Qty</th>}
|
||||
{Amount && <th style={{ width: "10px", textAlign: "right" }}>Amt</th>}
|
||||
Discount && <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>(%)</th>}
|
||||
{Quantity && <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>Qty</th>}
|
||||
{Amount && <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>Amt</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dataChunk?.map((item, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO && <td style={{ textAlign: 'center' }}>{chunkIndex * chunkSize + index + 1}</td>}
|
||||
{Item && <td style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div>{item?.ProdName}</div>
|
||||
|
|
@ -157,7 +237,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B
|
|||
|
||||
<>
|
||||
<hr className="PrintStyle8-print-dottline" />
|
||||
<div style={{ fontSize: "12px" }}>
|
||||
<div style={{ fontSize: "12px",...netAmountStyle }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<div style={{ width: '40%' }}>Items </div>
|
||||
<div> : </div>
|
||||
|
|
@ -335,8 +415,8 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
}}
|
||||
>
|
||||
...footerColorStyle
|
||||
}} >
|
||||
{
|
||||
Notestext && (<div>
|
||||
<p style={{ padding: "0rem 1rem" }}>{Notestext}</p>
|
||||
|
|
@ -344,8 +424,6 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B
|
|||
<hr className="PrintA4Style11-print-dottline" />
|
||||
</div>)
|
||||
}
|
||||
|
||||
|
||||
<div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
|
||||
{
|
||||
(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
|
||||
|
|
@ -366,9 +444,6 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B
|
|||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
|
|
@ -395,7 +470,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B
|
|||
>
|
||||
<>
|
||||
<hr className="PrintStyle8-print-dottline" />
|
||||
<div style={{ fontSize: "12px" }}>
|
||||
<div style={{ fontSize: "12px",...netAmountStyle }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<div style={{ width: '40%' }}>Items </div>
|
||||
<div> : </div>
|
||||
|
|
@ -576,6 +651,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
@ -618,7 +694,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B
|
|||
</div>
|
||||
:
|
||||
<div id={`SQPrintStyle8`} className='PrintStyle8MasterDiv' style={{ fontFamily: "'Courier New', Courier, monospace" }}>
|
||||
<div className='PrintStyle8-fistDiv' style={{}} >
|
||||
<div className='PrintStyle8-fistDiv' style={{ headerStyle }} >
|
||||
{/* <h3>{table2Data?.[0]?.BrName}</h3> */}
|
||||
<div style={{ fontSize: "clamp(1.25rem, 2.5vw, 1.75rem)", fontWeight: '600', }} >{GlobaldummyData ? 'XYZ Shop' : table2Data?.[0]?.BrName}</div>
|
||||
<div className='PrintStyle8-BrAddress' style={{ fontSize: "clamp(0.63rem, 2.5vw, 1.2rem)" }}>
|
||||
|
|
@ -648,20 +724,31 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B
|
|||
<table className="PrintStyle8-print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{SLNO && <th style={{ width: "10px", textAlign: "center" }}>S.No</th>}
|
||||
{Item && <th>Des</th>}
|
||||
{HsnCode && <th style={{ width: "10px", textAlign: "right" }}>HSN</th>}
|
||||
{MRP && <th style={{ width: "10px", textAlign: "right" }}>MRP</th>}
|
||||
{Rate && <th style={{ width: "10px", textAlign: "right" }}>Rt</th>}
|
||||
{Discount && <th style={{ width: "10px", textAlign: "right" }}>(%)</th>}
|
||||
{Quantity && <th style={{ width: "10px", textAlign: "right" }}>Qty</th>}
|
||||
{Amount && <th style={{ width: "10px", textAlign: "right" }}>Amt</th>}
|
||||
{SLNO && <th style={{ ...tableHeaderStyle, width: "10px", textAlign: "center" }}>S.No</th>}
|
||||
{Item && <th style={{ ...tableHeaderStyle }}>Des</th>}
|
||||
{HsnCode && <th style={{ ...tableHeaderStyle, width: "10px", textAlign: "right" }}>HSN</th>}
|
||||
{MRP && <th style={{ ...tableHeaderStyle, width: "10px", textAlign: "right" }}>MRP</th>}
|
||||
{Rate && <th style={{ ...tableHeaderStyle, width: "10px", textAlign: "right" }}>Rt</th>}
|
||||
{Discount && <th style={{ ...tableHeaderStyle, width: "10px", textAlign: "right" }}>(%)</th>}
|
||||
{Quantity && <th style={{ ...tableHeaderStyle, width: "10px", textAlign: "right" }}>Qty</th>}
|
||||
{Amount && <th style={{ ...tableHeaderStyle, width: "10px", textAlign: "right" }}>Amt</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(TakeawayData)?.map((item, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO && <td style={{ textAlign: 'center' }}>{index + 1}</td>}
|
||||
{Item && <td style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div>{item?.ProdName}</div>
|
||||
|
|
@ -683,7 +770,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B
|
|||
}
|
||||
|
||||
<hr className="PrintStyle8-print-dottline" />
|
||||
<div style={{ fontSize: "12px" }}>
|
||||
<div style={{ fontSize: "12px",...netAmountStyle }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<div style={{ width: '40%' }}>Items </div>
|
||||
<div> : </div>
|
||||
|
|
@ -864,6 +951,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,7 +4,18 @@ import { useDispatch, useSelector } from "react-redux";
|
|||
import {
|
||||
GlobalPritdummyData,
|
||||
changeReprintDataFound,
|
||||
GlobalprinttermsAndConditions
|
||||
GlobalprinttermsAndConditions,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
} from '../../../Features/ThemeChange/ThemeChange';
|
||||
import '../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle9.scss';
|
||||
import { extractLastNumber } from "../../../Services/Others";
|
||||
|
|
@ -28,11 +39,26 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
const Rate = FieldDetails?.["Rate"];
|
||||
const Amount = FieldDetails?.["Amount"];
|
||||
const HsnCode = FieldDetails?.["HsnCode"];
|
||||
|
||||
let printColors = printDatas?.PrintColors;
|
||||
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
|
||||
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
|
||||
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
|
||||
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
|
||||
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
|
||||
|
||||
const GlobaldummyData = useSelector(GlobalPritdummyData);
|
||||
const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
|
||||
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
||||
const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
||||
const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
||||
const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
||||
const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
||||
const SelectedRowType = useSelector(GlobalRowType);
|
||||
const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
|
||||
const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
|
||||
const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
||||
const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
||||
|
||||
let TermsAndConditions = printDatas?.TermsandConditions
|
||||
let SignatureImg = printDatas?.Signature
|
||||
|
|
@ -71,7 +97,51 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
}
|
||||
const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 10);
|
||||
const headerStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedHeaderColor
|
||||
: headerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedHeaderFontColor
|
||||
: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableHeaderColor
|
||||
: tableHeaderColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableHeaderFontColor
|
||||
: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableBodyColor
|
||||
: tableBodyColor?.background,
|
||||
color: GlobaldummyData
|
||||
? SelectedTableBodyFontColor
|
||||
: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
|
||||
const footerColorStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableFooterColor
|
||||
: footerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableFooterFontColor
|
||||
: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedNetAmountColor
|
||||
: netAmtColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedNetAmountFontColor
|
||||
: netAmtColor?.font,
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{FormatTheme ?
|
||||
|
|
@ -81,7 +151,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
|
||||
|
||||
<div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}>
|
||||
<div className="PrintStyle9-print" >
|
||||
<div className="PrintStyle9-print" style={{ ...headerStyle }}>
|
||||
<div style={{ fontSize: 'clamp(1.5rem, 2.5vw, 2rem)', fontWeight: '600' }} className="PrintStyle9-Branch">{table2Data?.[0]?.BrName}</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', fontWeight: '400', fontSize: '11px' }}>
|
||||
|
|
@ -98,12 +168,11 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
{table2Data?.BrGSTIN &&<div>GST NO :{table2Data?.BrGSTIN}, CIN :u00045hhsgbubufsdug</div>}
|
||||
<div > PH : +91 {table2Data?.[0]?.BrMobile}</div>
|
||||
</div>} */}
|
||||
</div>
|
||||
<div >
|
||||
<div style={{ fontSize: '14px', fontWeight: '600' }} > BILL NO :{table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)}</div>
|
||||
<div style={{ fontSize: '12px', fontWeight: '400' }}> {Date1} </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='straight-line9'></div>
|
||||
|
||||
</div>
|
||||
|
|
@ -114,20 +183,31 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
<table className="PrintStyle9-print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{ SLNO && <th style={{ width: '10px' }}>S.No</th>}
|
||||
{ Item && <th style={{ width: '10px' }}>Item</th>}
|
||||
{ Quantity && <th style={{ width: '10px', textAlign: 'right' }}>Qty</th>}
|
||||
{ HsnCode && <th style={{ width: '10px', textAlign: 'right' }}>HSN</th>}
|
||||
{ MRP && <th style={{ width: '10px', textAlign: 'right' }}>MRP</th>}
|
||||
{ Discount && <th style={{ width: '10px', textAlign: 'right' }}>Dis </th>}
|
||||
{ Rate && <th style={{ width: '10px', textAlign: 'right' }}>Rate</th>}
|
||||
{ Amount && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>}
|
||||
{SLNO && <th style={{ ...tableHeaderStyle, width: '10px' }}>S.No</th>}
|
||||
{Item && <th style={{ ...tableHeaderStyle, width: '10px' }}>Item</th>}
|
||||
{Quantity && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Qty</th>}
|
||||
{HsnCode && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>HSN</th>}
|
||||
{MRP && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>MRP</th>}
|
||||
{Discount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Dis </th>}
|
||||
{Rate && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Rate</th>}
|
||||
{Amount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Amt</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dataChunk?.map((item, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO && <td>{chunkIndex * chunkSize + index + 1}</td>}
|
||||
{Item && <td style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div>{item?.ProdName}</div>
|
||||
|
|
@ -159,7 +239,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
{((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme &&
|
||||
<>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column',...netAmountStyle }}>
|
||||
|
||||
|
||||
{(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) &&
|
||||
|
|
@ -359,6 +439,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{Notestext && (<div>
|
||||
|
|
@ -422,7 +503,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
>
|
||||
<>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column',...netAmountStyle }}>
|
||||
|
||||
|
||||
{(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) &&
|
||||
|
|
@ -617,6 +698,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
@ -659,7 +741,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
:
|
||||
<div className="PrintStyle9MasterDiv" id={`SQPrintStyle9`} style={{ fontFamily: "'Courier New', Courier, monospace" }}>
|
||||
|
||||
<div className="PrintStyle9-print" >
|
||||
<div className="PrintStyle9-print" style={{ ...headerStyle }} >
|
||||
<div style={{ fontSize: 'clamp(1.5rem, 2.5vw, 2rem)', fontWeight: '600' }} className="PrintStyle9-Branch">{GlobaldummyData ? 'XYZ Shop' : table2Data?.[0]?.BrName}</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', fontWeight: '400', fontSize: '11px' }}>
|
||||
|
|
@ -676,12 +758,12 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
{table2Data?.BrGSTIN &&<div>GST NO :{table2Data?.BrGSTIN}, CIN :u00045hhsgbubufsdug</div>}
|
||||
<div > PH : +91 {table2Data?.[0]?.BrMobile}</div>
|
||||
</div>} */}
|
||||
|
||||
</div>
|
||||
<div >
|
||||
<div style={{ fontSize: '14px', fontWeight: '600' }} > BILL NO :{table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)}</div>
|
||||
<div style={{ fontSize: '12px', fontWeight: '400' }}> {Date1} </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='straight-line9'></div>
|
||||
|
||||
|
||||
|
|
@ -692,20 +774,31 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
<table className="PrintStyle9-print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{ SLNO && <th style={{ width: '10px' }}>S.No</th>}
|
||||
{ Item && <th style={{ width: '10px' }}>Item</th>}
|
||||
{ Quantity && <th style={{ width: '10px', textAlign: 'right' }}>Qty</th>}
|
||||
{ HsnCode && <th style={{ width: '10px', textAlign: 'right' }}>HSN</th>}
|
||||
{ MRP && <th style={{ width: '10px', textAlign: 'right' }}>MRP</th>}
|
||||
{ Discount && <th style={{ width: '10px', textAlign: 'right' }}>Dis </th>}
|
||||
{ Rate && <th style={{ width: '10px', textAlign: 'right' }}>Rate</th>}
|
||||
{ Amount && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>}
|
||||
{SLNO && <th style={{ ...tableHeaderStyle, width: '10px' }}>S.No</th>}
|
||||
{Item && <th style={{ ...tableHeaderStyle, width: '10px' }}>Item</th>}
|
||||
{Quantity && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Qty</th>}
|
||||
{HsnCode && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>HSN</th>}
|
||||
{MRP && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>MRP</th>}
|
||||
{Discount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Dis </th>}
|
||||
{Rate && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Rate</th>}
|
||||
{Amount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Amt</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(TakeawayData)?.map((item, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<tr key={index}
|
||||
style={
|
||||
index % 2 !== 1 && rowtypeStyle === "even"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? {
|
||||
...tableBodyStyle
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{SLNO && <td>{index + 1}</td>}
|
||||
{Item && <td style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div>{item?.ProdName}</div>
|
||||
|
|
@ -733,7 +826,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
</>
|
||||
}
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column',...netAmountStyle }}>
|
||||
|
||||
|
||||
{(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) &&
|
||||
|
|
@ -936,6 +1029,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
|
|||
pageBreakBefore: "avoid",
|
||||
pageBreakInside: "avoid",
|
||||
minHeight: "auto",
|
||||
...footerColorStyle
|
||||
}}
|
||||
>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,6 +1,19 @@
|
|||
|
||||
import { useSelector } from 'react-redux';
|
||||
import { GlobalPritdummyData } from '../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
GlobalPritdummyData,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
} from '../../../Features/ThemeChange/ThemeChange';
|
||||
import { isMobile } from 'react-device-detect';
|
||||
import { extractLastNumberOrderId } from '../../../Services/Others';
|
||||
import moment from 'moment';
|
||||
|
|
@ -18,6 +31,17 @@ const PurPrintstyleInvoice = ({
|
|||
}) => {
|
||||
|
||||
const GlobaldummyData = useSelector(GlobalPritdummyData);
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
||||
const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
||||
const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
||||
const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
||||
const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
||||
const SelectedRowType = useSelector(GlobalRowType);
|
||||
const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
|
||||
const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
|
||||
const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
||||
const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
||||
let BillName = printDatas?.PrintHdrName
|
||||
// Function to convert number to words
|
||||
const numberToWords = (num) => {
|
||||
|
|
@ -92,9 +116,12 @@ const PurPrintstyleInvoice = ({
|
|||
|
||||
let PageSize = printDatas?.PageSize
|
||||
|
||||
const TakeawayData = table2Data?.ProductDetails
|
||||
|
||||
const DineInData = table2Data?.ProductDetails
|
||||
let printColors = printDatas?.PrintColors;
|
||||
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
|
||||
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
|
||||
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
|
||||
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
|
||||
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
|
||||
|
||||
const cgstTotal = OrderDetailGST && OrderDetailGST.length > 0
|
||||
? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0), 0))?.toFixed(2)
|
||||
|
|
@ -158,7 +185,51 @@ const PurPrintstyleInvoice = ({
|
|||
if (shouldFooterBeOnNewPage && paginatedChunks.length > 0) {
|
||||
paginatedChunks.push([]); // Empty chunk for footer-only page
|
||||
}
|
||||
const headerStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedHeaderColor
|
||||
: headerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedHeaderFontColor
|
||||
: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableHeaderColor
|
||||
: tableHeaderColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableHeaderFontColor
|
||||
: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableBodyColor
|
||||
: tableBodyColor?.background,
|
||||
color: GlobaldummyData
|
||||
? SelectedTableBodyFontColor
|
||||
: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
|
||||
const footerColorStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableFooterColor
|
||||
: footerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableFooterFontColor
|
||||
: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedNetAmountColor
|
||||
: netAmtColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedNetAmountFontColor
|
||||
: netAmtColor?.font,
|
||||
}
|
||||
|
||||
return (
|
||||
<div id={`TaxInvoice`} style={{
|
||||
|
|
@ -207,7 +278,7 @@ const PurPrintstyleInvoice = ({
|
|||
<>
|
||||
<div style={{ textAlign: 'center', marginBottom: '10px', display: "flex", justifyContent: "space-between", alignItems: "center", }}>
|
||||
<div></div>
|
||||
<h2 style={{ margin: '0', fontSize: '20px', fontWeight: '700' }}>{table2Data?.OrderType === "E" ? "Estimate" : (BillName ? BillName : "Tax Invoice")}</h2>
|
||||
<h2 style={{ margin: '0', fontSize: '20px', fontWeight: '700', }}>{table2Data?.OrderType === "E" ? "Estimate" : (BillName ? BillName : "Tax Invoice")}</h2>
|
||||
<div>
|
||||
<div style={{ fontSize: '10px', marginTop: '2px' }}>(ORIGINAL FOR RECIPIENT)</div>
|
||||
</div>
|
||||
|
|
@ -232,7 +303,7 @@ const PurPrintstyleInvoice = ({
|
|||
textAlign: 'left'
|
||||
}}>
|
||||
|
||||
<div style={{ fontWeight: '700', fontSize: '15px', }}>
|
||||
<div style={{ fontWeight: '700', fontSize: '15px', ...headerStyle }}>
|
||||
{invoiceData.companyName}
|
||||
</div>
|
||||
<div style={{ fontWeight: '700', fontSize: '12px', }}>{invoiceData.companyspecname}</div>
|
||||
|
|
@ -374,6 +445,7 @@ const PurPrintstyleInvoice = ({
|
|||
// borderRight: '1px solid #000',
|
||||
borderBottom: '1px solid #000',
|
||||
borderTop: '1px solid #000',
|
||||
...tableHeaderStyle
|
||||
}}>
|
||||
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>SL.No</div>
|
||||
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Description of Goods</div>
|
||||
|
|
@ -392,6 +464,9 @@ const PurPrintstyleInvoice = ({
|
|||
display: 'grid',
|
||||
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
||||
// borderRight: '1px solid #000',
|
||||
...(rowtypeStyle === (index % 2 === 0 ? "even" : "odd")
|
||||
? tableBodyStyle
|
||||
: {}),
|
||||
|
||||
}}>
|
||||
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700' }}>{chunkIndex * chunkSize + index + 1}</div>
|
||||
|
|
@ -555,7 +630,7 @@ const PurPrintstyleInvoice = ({
|
|||
</div>
|
||||
<div style={{ borderRight: '1px solid #000' }}></div>
|
||||
<div style={{ borderRight: '1px solid #000' }}></div>
|
||||
<div style={{ padding: '8px 6px', textAlign: 'right', }}>
|
||||
<div style={{ padding: '8px 6px', textAlign: 'right',...netAmountStyle }}>
|
||||
₹ {Number(invoiceData.grandTotal).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue