QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-16 04:40:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: wip invoice customize

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-09-08 21:01:54 +02:00
parent c5c0342c7b
commit 9247745ab0
9 changed files with 76 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/CreditCardIcon.tsx Normal file
View File

@@ -0,0 +1,32 @@
import { SVGProps } from 'react';
interface CreditCardIconProps extends SVGProps<SVGSVGElement> {
}
export function CreditCardIcon(props: CreditCardIconProps) {
return (
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
viewBox="0 0 16 16"
enable-background="new 0 0 16 16"
{...props}
>
<g id="credit_card_2_">
<g>
<path
d="M14.99,2.95h-14c-0.55,0-1,0.45-1,1v1h16v-1C15.99,3.4,15.54,2.95,14.99,2.95z M-0.01,12.95c0,0.55,0.45,1,1,1h14
c0.55,0,1-0.45,1-1v-6h-16C-0.01,6.95-0.01,12.95-0.01,12.95z M5.49,10.95h5c0.28,0,0.5,0.22,0.5,0.5s-0.22,0.5-0.5,0.5h-5
c-0.28,0-0.5-0.22-0.5-0.5S5.22,10.95,5.49,10.95z M2.49,10.95h1c0.28,0,0.5,0.22,0.5,0.5s-0.22,0.5-0.5,0.5h-1
c-0.28,0-0.5-0.22-0.5-0.5S2.22,10.95,2.49,10.95z"
/>
</g>
</g>
</svg>
);
}

4
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeFields.module.scss
View File

@@ -1,10 +1,10 @@
.root {
flex: 1;
background: #fff;
}
.mainFields{
flex: 1;
width: 400px;
height: 100vh;
}
.fieldGroup {

4
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeFields.tsx
View File

@@ -3,7 +3,6 @@ import * as R from 'ramda';
import { Box, Group, Stack } from '@/components';
import { InvoiceCustomizeHeader } from './InvoiceCustomizeHeader';
import { InvoiceCustomizeTabs } from './InvoiceCustomizeTabs';
import styles from './InvoiceCustomizeFields.module.scss';
import { InvoiceCustomizeGeneralField } from './InvoiceCustomizeGeneralFields';
import { useInvoiceCustomizeTabsController } from './InvoiceCustomizeTabsController';
import { Button, Intent } from '@blueprintjs/core';
@@ -11,6 +10,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
import { useFormikContext } from 'formik';
import { InvoiceCustomizeContentFields } from './InvoiceCutomizeContentFields';
import styles from './InvoiceCustomizeFields.module.scss';
export function InvoiceCustomizeFields() {
return (
@@ -27,7 +27,7 @@ export function InvoiceCustomizeFieldsMain() {
<Stack spacing={0} className={styles.mainFields}>
<InvoiceCustomizeHeader label={'Customize'} />
<Stack spacing={0} style={{ flex: '1 1 auto' }}>
<Stack spacing={0} style={{ flex: '1 1 auto', overflow: 'auto' }}>
{currentTabId === 'general' && <InvoiceCustomizeGeneralField />}
{currentTabId === 'content' && <InvoiceCustomizeContentFields />}

28
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx
View File

@@ -1,8 +1,9 @@
// @ts-nocheck
import { FFormGroup, FSwitch, Stack } from '@/components';
import { Box, FFormGroup, FSwitch, Group, Stack } from '@/components';
import { FColorInput } from './FColorField';
import styles from './InvoiceCustomizeFields.module.scss';
import { Classes } from '@blueprintjs/core';
import { Classes, Text } from '@blueprintjs/core';
import { CreditCardIcon } from './CreditCardIcon';
export function InvoiceCustomizeGeneralField() {
return (
@@ -49,6 +50,29 @@ export function InvoiceCustomizeGeneralField() {
/>
</FFormGroup>
</Stack>
<InvoiceCustomizePaymentManage />
</Stack>
);
}
function InvoiceCustomizePaymentManage() {
return (
<Group
style={{
backgroundColor: '#FBFBFB',
border: '1px solid #E1E1E1',
padding: 10,
borderRadius: 5,
}}
position={'apart'}
>
<Group spacing={10}>
<CreditCardIcon fill={'#7D8897'} height={16} width={16} />
<Text>Accept payment methods</Text>
</Group>
<a href={'#'}>Manage</a>
</Group>
);
}

2
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePreview.tsx
View File

@@ -13,7 +13,7 @@ function InvoiceCustomizePreviewRoot({ closeDrawer }) {
closeDrawer(name);
};
return (
<Stack spacing={0} style={{ borderLeft: '1px solid #D9D9D9', height: '100vh' }}>
<Stack spacing={0} style={{ borderLeft: '1px solid #D9D9D9', height: '100vh', flex: '1 1' }}>
<InvoiceCustomizeHeader
label={'Preview'}
closeButton

9
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePreviewContent.tsx
View File

@@ -3,7 +3,14 @@ import { PaperTemplate } from './PaperTemplate';
export function InvoiceCustomizePreviewContent() {
return (
<Box style={{ padding: 24, backgroundColor: '#F5F5F5', overflow: 'auto' }}>
<Box
style={{
padding: '28px 24px 40px',
backgroundColor: '#F5F5F5',
overflow: 'auto',
flex: '1'
}}
>
<PaperTemplate />
</Box>
);

2
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.module.scss
View File

@@ -2,7 +2,7 @@
.root {
flex: 1;
min-width: 165px;
max-width: 185px;
max-width: 165px;
}
.content{

2
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx
View File

@@ -1,11 +1,11 @@
import { Box, Stack } from '@/components';
import { Tab, Tabs } from '@blueprintjs/core';
import { InvoiceCustomizeHeader } from './InvoiceCustomizeHeader';
import styles from './InvoiceCustomizeTabs.module.scss';
import {
InvoiceCustomizeTabsEnum,
useInvoiceCustomizeTabsController,
} from './InvoiceCustomizeTabsController';
import styles from './InvoiceCustomizeTabs.module.scss';
export function InvoiceCustomizeTabs() {
const { setCurrentTabId } = useInvoiceCustomizeTabsController();

3
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.module.scss
View File

@@ -6,6 +6,9 @@
box-shadow: inset 0 4px 0px 0 #002762, 0 10px 15px rgba(0, 0, 0, 0.05);
padding: 22px 30px;
position: relative;
margin: 0 auto;
width: 794px;
height: 1123px;
}
.bigTitle{