feat: pdf template customize

packages/webapp/src/containers/BrandingTemplates/BrandTemplates.module.scss

@@ -0,0 +1,15 @@
+
+
+.table  {
+  :global {
+    .table .tbody .tr .td{
+      padding-top: 14px;
+      padding-bottom: 14px;
+    }
+
+    .table .thead .th{
+      text-transform: uppercase;
+      font-size: 13px;
+    }
+  }
+}

packages/webapp/src/containers/BrandingTemplates/BrandingTemplateBoot.tsx

@@ -0,0 +1,50 @@
+import React, { createContext, useContext } from 'react';
+import {
+  GetPdfTemplateResponse,
+  useGetPdfTemplate,
+} from '@/hooks/query/pdf-templates';
+import { Spinner } from '@blueprintjs/core';
+
+interface PdfTemplateContextValue {
+  templateId: number | string;
+  pdfTemplate: GetPdfTemplateResponse | undefined;
+  isPdfTemplateLoading: boolean;
+}
+
+interface BrandingTemplateProps {
+  templateId: number;
+  children: React.ReactNode;
+}
+
+const PdfTemplateContext = createContext<PdfTemplateContextValue>(
+  {} as PdfTemplateContextValue,
+);
+
+export const BrandingTemplateBoot = ({
+  templateId,
+  children,
+}: BrandingTemplateProps) => {
+  const { data: pdfTemplate, isLoading: isPdfTemplateLoading } =
+    useGetPdfTemplate(templateId, {
+      enabled: !!templateId,
+    });
+
+  const value = {
+    templateId,
+    pdfTemplate,
+    isPdfTemplateLoading,
+  };
+
+  if (isPdfTemplateLoading) {
+    return <Spinner size={20} />
+  }
+  return (
+    <PdfTemplateContext.Provider value={value}>
+      {children}
+    </PdfTemplateContext.Provider>
+  );
+};
+
+export const useBrandingTemplateBoot = () => {
+  return useContext<PdfTemplateContextValue>(PdfTemplateContext);
+};

packages/webapp/src/containers/BrandingTemplates/BrandingTemplateForm.tsx

@@ -0,0 +1,87 @@
+import * as Yup from 'yup';
+import {
+  ElementCustomize,
+  ElementCustomizeProps,
+} from '../ElementCustomize/ElementCustomize';
+import {
+  transformToEditRequest,
+  transformToNewRequest,
+  useBrandingTemplateFormInitialValues,
+} from './_utils';
+import { AppToaster } from '@/components';
+import { Intent } from '@blueprintjs/core';
+import {
+  useCreatePdfTemplate,
+  useEditPdfTemplate,
+} from '@/hooks/query/pdf-templates';
+import { FormikHelpers } from 'formik';
+import { BrandingTemplateValues } from './types';
+
+interface BrandingTemplateFormProps<T> extends ElementCustomizeProps<T> {
+  resource: string;
+  templateId?: number;
+  onSuccess?: () => void;
+  onError?: () => void;
+  defaultValues?: T;
+}
+
+export function BrandingTemplateForm<T extends BrandingTemplateValues>({
+  templateId,
+  onSuccess,
+  onError,
+  defaultValues,
+  resource,
+  ...props
+}: BrandingTemplateFormProps<T>) {
+  const { mutateAsync: createPdfTemplate } = useCreatePdfTemplate();
+  const { mutateAsync: editPdfTemplate } = useEditPdfTemplate();
+
+  const initialValues = useBrandingTemplateFormInitialValues<T>(defaultValues);
+
+  const handleFormSubmit = (values: T, { setSubmitting }: FormikHelpers<T>) => {
+    const handleSuccess = (message: string) => {
+      AppToaster.show({ intent: Intent.SUCCESS, message });
+      setSubmitting(false);
+      onSuccess && onSuccess();
+    };
+    const handleError = (message: string) => {
+      AppToaster.show({ intent: Intent.DANGER, message });
+      setSubmitting(false);
+      onError && onError();
+    };
+    if (templateId) {
+      const reqValues = transformToEditRequest(values);
+      setSubmitting(true);
+
+      // Edit existing template
+      editPdfTemplate({ templateId, values: reqValues })
+        .then(() => handleSuccess('PDF template updated successfully!'))
+        .catch(() =>
+          handleError('An error occurred while updating the PDF template.'),
+        );
+    } else {
+      const reqValues = transformToNewRequest(values, resource);
+      setSubmitting(true);
+
+      // Create new template
+      createPdfTemplate(reqValues)
+        .then(() => handleSuccess('PDF template created successfully!'))
+        .catch(() =>
+          handleError('An error occurred while creating the PDF template.'),
+        );
+    }
+  };
+
+  return (
+    <ElementCustomize<T>
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={handleFormSubmit}
+      {...props}
+    />
+  );
+}
+
+export const validationSchema = Yup.object().shape({
+  templateName: Yup.string().required('Template Name is required'),
+});

packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesActionsBar.tsx

@@ -0,0 +1,35 @@
+// @ts-nocheck
+import React from 'react';
+import { Button, NavbarGroup, Intent } from '@blueprintjs/core';
+import { DashboardActionsBar, Icon } from '@/components';
+import { DRAWERS } from '@/constants/drawers';
+
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { compose } from '@/utils';
+
+/**
+ * Account drawer action bar.
+ */
+function BrandingTemplateActionsBarRoot({ openDrawer }) {
+  // Handle new child button click.
+  const handleCreateBtnClick = () => {
+    openDrawer(DRAWERS.INVOICE_CUSTOMIZE);
+  };
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          intent={Intent.PRIMARY}
+          icon={<Icon icon="plus" />}
+          onClick={handleCreateBtnClick}
+          minimal
+        >
+          Create Invoice Branding
+        </Button>
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+export const BrandingTemplateActionsBar = compose(withDrawerActions)(
+  BrandingTemplateActionsBarRoot,
+);

packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesBoot.tsx

@@ -0,0 +1,36 @@
+import React, { createContext } from 'react';
+import { useGetPdfTemplates } from '@/hooks/query/pdf-templates';
+import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
+
+interface BrandingTemplatesBootValues {
+  pdfTemplates: any;
+  isPdfTemplatesLoading: boolean;
+}
+
+const BrandingTemplatesBootContext = createContext<BrandingTemplatesBootValues>(
+  {} as BrandingTemplatesBootValues,
+);
+
+interface BrandingTemplatesBootProps {
+  children: React.ReactNode;
+}
+
+function BrandingTemplatesBoot({ ...props }: BrandingTemplatesBootProps) {
+  const { payload } = useDrawerContext();
+  const resource = payload?.resource || null;
+
+  const { data: pdfTemplates, isLoading: isPdfTemplatesLoading } =
+    useGetPdfTemplates({ resource });
+
+  const provider = {
+    pdfTemplates,
+    isPdfTemplatesLoading,
+  } as BrandingTemplatesBootValues;
+
+  return <BrandingTemplatesBootContext.Provider value={provider} {...props} />;
+}
+
+const useBrandingTemplatesBoot = () =>
+  React.useContext<BrandingTemplatesBootValues>(BrandingTemplatesBootContext);
+
+export { BrandingTemplatesBoot, useBrandingTemplatesBoot };

packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesContent.tsx

@@ -0,0 +1,46 @@
+// @ts-nocheck
+import * as R from 'ramda';
+import { Button, Classes, Intent } from '@blueprintjs/core';
+import { BrandingTemplatesBoot } from './BrandingTemplatesBoot';
+import { Box, Card, DrawerHeaderContent, Group } from '@/components';
+import { DRAWERS } from '@/constants/drawers';
+import { BrandingTemplatesTable } from './BrandingTemplatesTable';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { BrandingTemplateActionsBar } from './BrandingTemplatesActionsBar';
+
+export default function BrandingTemplateContent() {
+  return (
+    <Box>
+      <DrawerHeaderContent
+        name={DRAWERS.BRANDING_TEMPLATES}
+        title={'Branding Templates'}
+      />
+      <Box className={Classes.DRAWER_BODY}>
+        <BrandingTemplatesBoot>
+          <BrandingTemplateActionsBar />
+
+          <Card style={{ padding: 0 }}>
+            <BrandingTemplatesTable />
+          </Card>
+        </BrandingTemplatesBoot>
+      </Box>
+    </Box>
+  );
+}
+
+const BrandingTemplateHeader = R.compose(withDrawerActions)(
+  ({ openDrawer }) => {
+    const handleCreateBtnClick = () => {
+      openDrawer(DRAWERS.INVOICE_CUSTOMIZE);
+    };
+    return (
+      <Group>
+        <Button intent={Intent.PRIMARY} onClick={handleCreateBtnClick}>
+          Create Invoice Branding
+        </Button>
+      </Group>
+    );
+  },
+);
+
+BrandingTemplateHeader.displayName = 'BrandingTemplateHeader';

packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesDrawer.tsx

@@ -0,0 +1,38 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+import { Drawer, DrawerSuspense } from '@/components';
+import withDrawers from '@/containers/Drawer/withDrawers';
+
+const BrandingTemplatesContent = React.lazy(
+  () => import('./BrandingTemplatesContent'),
+);
+
+/**
+ * Invoice customize drawer.
+ * @returns {React.ReactNode}
+ */
+function BrandingTemplatesDrawerRoot({
+  name,
+  // #withDrawer
+  isOpen,
+  payload,
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      payload={payload}
+      size={'600px'}
+      style={{ borderLeftColor: '#cbcbcb' }}
+    >
+      <DrawerSuspense>
+        <BrandingTemplatesContent />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export const BrandingTemplatesDrawer = R.compose(withDrawers())(
+  BrandingTemplatesDrawerRoot,
+);

packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesTable.tsx

@@ -0,0 +1,86 @@
+// @ts-nocheck
+import * as R from 'ramda';
+import { Classes, Tag } from '@blueprintjs/core';
+import clsx from 'classnames';
+import { DataTable, Group, TableSkeletonRows } from '@/components';
+import { useBrandingTemplatesBoot } from './BrandingTemplatesBoot';
+import { ActionsMenu } from './_components';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';
+import styles from './BrandTemplates.module.scss';
+
+interface BrandingTemplatesTableProps {}
+
+function BrandingTemplateTableRoot({
+  openAlert,
+  openDrawer,
+}: BrandingTemplatesTableProps) {
+  // Table columns.
+  const columns = useBrandingTemplatesColumns();
+  const { isPdfTemplatesLoading, pdfTemplates } = useBrandingTemplatesBoot();
+
+  const handleEditTemplate = (template) => {
+    openDrawer(DRAWERS.INVOICE_CUSTOMIZE, {
+      templateId: template.id,
+      resource: template.resource,
+    });
+  };
+
+  const handleDeleteTemplate = (template) => {
+    openAlert('branding-template-delete', { templateId: template.id });
+  };
+
+  const handleCellClick = (cell, event) => {
+    const templateId = cell.row.original.id;
+    const resource = cell.row.original.resource;
+
+    openDrawer(DRAWERS.INVOICE_CUSTOMIZE, { templateId, resource });
+  };
+
+  return (
+    <DataTable
+      columns={columns}
+      data={pdfTemplates || []}
+      loading={isPdfTemplatesLoading}
+      progressBarLoading={isPdfTemplatesLoading}
+      TableLoadingRenderer={TableSkeletonRows}
+      ContextMenu={ActionsMenu}
+      noInitialFetch={true}
+      payload={{
+        onDeleteTemplate: handleDeleteTemplate,
+        onEditTemplate: handleEditTemplate,
+      }}
+      rowContextMenu={ActionsMenu}
+      onCellClick={handleCellClick}
+      className={styles.table}
+    />
+  );
+}
+
+export const BrandingTemplatesTable = R.compose(
+  withAlertActions,
+  withDrawerActions,
+)(BrandingTemplateTableRoot);
+
+const useBrandingTemplatesColumns = () => {
+  return [
+    {
+      Header: 'Template Name',
+      accessor: (row) => (
+        <Group spacing={10}>
+          {row.template_name} {row.default && <Tag round>Default</Tag>}
+        </Group>
+      ),
+      width: 65,
+      clickable: true,
+    },
+    {
+      Header: 'Created At',
+      accessor: 'created_at_formatted',
+      width: 35,
+      className: clsx(Classes.TEXT_MUTED),
+      clickable: true,
+    },
+  ];
+};

packages/webapp/src/containers/BrandingTemplates/_components.tsx

@@ -0,0 +1,26 @@
+// @ts-nocheck
+import { safeCallback } from '@/utils';
+import { Intent, Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
+
+/**
+ * Templates table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onDeleteTemplate, onEditTemplate },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        text={'Edit Template'}
+        onClick={safeCallback(onEditTemplate, original)}
+      />
+      <MenuDivider />
+      <MenuItem
+        text={'Delete Template'}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDeleteTemplate, original)}
+      />
+    </Menu>
+  );
+}

packages/webapp/src/containers/BrandingTemplates/_utils.ts

@@ -0,0 +1,52 @@
+import { omit } from 'lodash';
+import {
+  CreatePdfTemplateValues,
+  EditPdfTemplateValues,
+} from '@/hooks/query/pdf-templates';
+import { useBrandingTemplateBoot } from './BrandingTemplateBoot';
+import { transformToForm } from '@/utils';
+import { BrandingTemplateValues } from './types';
+import { useFormikContext } from 'formik';
+
+export const transformToEditRequest = <T extends BrandingTemplateValues>(
+  values: T,
+): EditPdfTemplateValues => {
+  return {
+    templateName: values.templateName,
+    attributes: omit(values, ['templateName']),
+  };
+};
+
+export const transformToNewRequest = <T extends BrandingTemplateValues>(
+  values: T,
+  resource: string
+): CreatePdfTemplateValues => {
+  return {
+    resource,
+    templateName: values.templateName,
+    attributes: omit(values, ['templateName']),
+  };
+};
+
+export const useIsTemplateNamedFilled = () => {
+  const { values } = useFormikContext<BrandingTemplateValues>();
+
+  return values.templateName && values.templateName?.length >= 4;
+};
+
+export const useBrandingTemplateFormInitialValues = <
+  T extends BrandingTemplateValues,
+>(
+  initialValues = {},
+) => {
+  const { pdfTemplate } = useBrandingTemplateBoot();
+
+  const defaultPdfTemplate = {
+    templateName: pdfTemplate?.templateName,
+    ...pdfTemplate?.attributes,
+  };
+  return {
+    ...initialValues,
+    ...(transformToForm(defaultPdfTemplate, initialValues) as T),
+  };
+};

packages/webapp/src/containers/BrandingTemplates/alerts/BrandingTemplatesAlerts.ts

@@ -0,0 +1,10 @@
+// @ts-nocheck
+import React from 'react';
+
+const DeleteBrandingTemplateAlert = React.lazy(
+  () => import('./DeleteBrandingTemplateAlert'),
+);
+
+export const BrandingTemplatesAlerts = [
+  { name: 'branding-template-delete', component: DeleteBrandingTemplateAlert },
+];

packages/webapp/src/containers/BrandingTemplates/alerts/DeleteBrandingTemplateAlert.tsx

@@ -0,0 +1,72 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster } from '@/components';
+import { Alert, Intent } from '@blueprintjs/core';
+import { useDeletePdfTemplate} from '@/hooks/query/pdf-templates';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Delete branding template alert.
+ */
+function DeleteBrandingTemplateAlert({
+  // #ownProps
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { templateId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: deleteBrandingTemplateMutate } = useDeletePdfTemplate();
+
+  const handleConfirmDelete = () => {
+    deleteBrandingTemplateMutate({ templateId })
+      .then(() => {
+        AppToaster.show({
+          message: 'The branding template has been deleted successfully.',
+          intent: Intent.SUCCESS,
+        });
+        closeAlert(name);
+      })
+      .catch((error) => {
+        AppToaster.show({
+          message: 'Something went wrong.',
+          intent: Intent.DANGER,
+        });
+        closeAlert(name);
+      });
+  };
+
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  return (
+    <Alert
+      cancelButtonText={intl.get('cancel')}
+      confirmButtonText={intl.get('delete')}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirmDelete}
+    >
+      <p>
+        Are you sure want to delete branding template?
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(DeleteBrandingTemplateAlert);
+
+

packages/webapp/src/containers/BrandingTemplates/types.ts

@@ -0,0 +1,5 @@
+
+
+export interface BrandingTemplateValues {
+  templateName: string;
+}