feat(webapp): send mail notififcation of sale transactions

2026-02-16 12:50:38 +00:00 · 2023-12-28 17:53:51 +02:00
parent a676e09537
commit dc762567b5
15 changed files with 987 additions and 208 deletions
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialog.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialog.tsx
@@ -19,7 +19,7 @@ function EstimateMailDialog({
  return (
    <Dialog
      name={dialogName}
-      title={'Estiomate Mail'}
+      title={'Estimate Mail'}
      isOpen={isOpen}
      canEscapeJeyClose={true}
      autoFocus={true}
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogContent.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogContent.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { EstimateMailDialogBoot } from './EstimateMailDialogBoot';
 import { EstimateMailDialogForm } from './EstimateMailDialogForm';

--- a/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogForm.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogForm.tsx
@@ -4,30 +4,31 @@ import * as R from 'ramda';
 import { castArray } from 'lodash';
 import { useEstimateMailDialogBoot } from './EstimateMailDialogBoot';
 import { transformToForm } from '@/utils';
-import { SendMailNotificationForm } from '@/containers/SendMailNotification';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { DialogsName } from '@/constants/dialogs';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { useSendSaleEstimateMail } from '@/hooks/query';
+import { EstimateMailDialogFormContent } from './EstimateMailDialogFormContent';

 const initialFormValues = {
  from: [],
  to: [],
  subject: '',
-  message: '',
+  body: '',
+  attachEstimate: true,
 };

 interface EstimateMailFormValues {
  from: string[];
  to: string[];
  subject: string;
-  message: string;
+  body: string;
  attachEstimate: boolean;
 }

-function EstimateMailDialogFormRoot(
+function EstimateMailDialogFormRoot({
  // #withDialogClose
  closeDialog,
-) {
+}) {
  const { mutateAsync: sendEstimateMail } = useSendSaleEstimateMail();
  const { mailOptions, saleEstimateId } = useEstimateMailDialogBoot();

@@ -55,7 +56,7 @@ function EstimateMailDialogFormRoot(

  return (
    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      <SendMailNotificationForm onClose={handleClose} />
+      <EstimateMailDialogFormContent onClose={handleClose} />
    </Formik>
  );
 }
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogFormContent.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogFormContent.tsx
@@ -0,0 +1,62 @@
+// @ts-nocheck
+import { Form, useFormikContext } from 'formik';
+import { Button, Classes, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+import { FFormGroup, FSwitch } from '@/components';
+import { MailNotificationForm } from '@/containers/SendMailNotification';
+import { saveInvoke } from '@/utils';
+
+interface EstimateMailDialogFormContentProps {
+  onClose?: () => void;
+}
+
+export function EstimateMailDialogFormContent({
+  onClose,
+}: EstimateMailDialogFormContentProps) {
+  const { isSubmitting } = useFormikContext();
+
+  const handleClose = () => {
+    saveInvoke(onClose);
+  };
+
+  return (
+    <Form>
+      <div className={Classes.DIALOG_BODY}>
+        <MailNotificationForm fromAddresses={[]} toAddresses={[]} />
+
+        <AttachFormGroup name={'attachEstimate'} inline>
+          <FSwitch name={'attachEstimate'} label={'Attach Estimate'} />
+        </AttachFormGroup>
+      </div>
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button
+            disabled={isSubmitting}
+            onClick={handleClose}
+            style={{ minWidth: '65px' }}
+          >
+            Close
+          </Button>
+
+          <Button
+            intent={Intent.PRIMARY}
+            loading={isSubmitting}
+            style={{ minWidth: '75px' }}
+            type="submit"
+          >
+            Send
+          </Button>
+        </div>
+      </div>
+    </Form>
+  );
+}
+
+const AttachFormGroup = styled(FFormGroup)`
+  background: #f8f9fb;
+  margin-top: 0.6rem;
+  padding: 4px 14px;
+  border-radius: 5px;
+  border: 1px solid #dcdcdd;
+`;
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogForm.schema.ts
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogForm.schema.ts
@@ -0,0 +1,9 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+
+export const InvoiceMailFormSchema = Yup.object().shape({
+  from: Yup.array().required().min(1).max(5).label('From address'),
+  to: Yup.array().required().min(1).max(5).label('To address'),
+  subject: Yup.string().required().label('Mail subject'),
+  body: Yup.string().required().label('Mail body'),
+});
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogForm.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogForm.tsx
@@ -2,25 +2,27 @@
 import { Formik } from 'formik';
 import { castArray } from 'lodash';
 import * as R from 'ramda';
-import { SendMailNotificationForm } from '@/containers/SendMailNotification';
 import { useInvoiceMailDialogBoot } from './InvoiceMailDialogBoot';
 import { transformToForm } from '@/utils';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { DialogsName } from '@/constants/dialogs';
 import { useSendSaleInvoiceMail } from '@/hooks/query';
+import { InvoiceMailDialogFormContent } from './InvoiceMailDialogFormContent';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { InvoiceMailFormSchema } from './InvoiceMailDialogForm.schema';

 const initialFormValues = {
  from: [],
  to: [],
  subject: '',
-  message: '',
+  body: '',
+  attachInvoice: true,
 };

 interface InvoiceMailFormValues {
  from: string[];
  to: string[];
  subject: string;
-  message: string;
+  body: string;
  attachInvoice: boolean;
 }

@@ -54,8 +56,12 @@ function InvoiceMailDialogFormRoot({
  };

  return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      <SendMailNotificationForm onClose={handleClose} />
+    <Formik
+      initialValues={initialValues}
+      validationSchema={InvoiceMailFormSchema}
+      onSubmit={handleSubmit}
+    >
+      <InvoiceMailDialogFormContent onClose={handleClose} />
    </Formik>
  );
 }
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogFormContent.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogFormContent.tsx
@@ -0,0 +1,62 @@
+// @ts-nocheck
+import { Form, useFormikContext } from 'formik';
+import { Button, Classes, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+import { FFormGroup, FSwitch } from '@/components';
+import { MailNotificationForm } from '@/containers/SendMailNotification';
+import { saveInvoke } from '@/utils';
+
+interface SendMailNotificationFormProps {
+  onClose?: () => void;
+}
+
+export function InvoiceMailDialogFormContent({
+  onClose,
+}: SendMailNotificationFormProps) {
+  const { isSubmitting } = useFormikContext();
+
+  const handleClose = () => {
+    saveInvoke(onClose);
+  };
+
+  return (
+    <Form>
+      <div className={Classes.DIALOG_BODY}>
+        <MailNotificationForm fromAddresses={[]} toAddresses={[]} />
+
+        <AttachFormGroup name={'attachInvoice'} inline>
+          <FSwitch name={'attachInvoice'} label={'Attach Invoice'} />
+        </AttachFormGroup>
+      </div>
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button
+            disabled={isSubmitting}
+            onClick={handleClose}
+            style={{ minWidth: '65px' }}
+          >
+            Close
+          </Button>
+
+          <Button
+            intent={Intent.PRIMARY}
+            loading={isSubmitting}
+            style={{ minWidth: '75px' }}
+            type="submit"
+          >
+            Send
+          </Button>
+        </div>
+      </div>
+    </Form>
+  );
+}
+
+const AttachFormGroup = styled(FFormGroup)`
+  background: #f8f9fb;
+  margin-top: 0.6rem;
+  padding: 4px 14px;
+  border-radius: 5px;
+  border: 1px solid #dcdcdd;
+`;
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogForm.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogForm.tsx
@@ -2,25 +2,27 @@
 import { Formik, FormikBag } from 'formik';
 import { castArray } from 'lodash';
 import * as R from 'ramda';
-import { SendMailNotificationForm } from '@/containers/SendMailNotification';
 import { usePaymentMailDialogBoot } from './PaymentMailDialogBoot';
-import { transformToForm } from '@/utils';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { DialogsName } from '@/constants/dialogs';
 import { useSendPaymentReceiveMail } from '@/hooks/query';
+import { PaymentMailDialogFormContent } from './PaymentMailDialogFormContent';
+import { transformToForm } from '@/utils';

 const initialFormValues = {
  from: [],
  to: [],
  subject: '',
-  message: '',
+  body: '',
+  attachPayment: true,
 };

 interface PaymentMailFormValue {
  from: string[];
  to: string[];
  subject: string;
-  message: string;
+  body: string;
+  attachPayment: boolean;
 }

 export function PaymentMailDialogFormRoot({
@@ -57,7 +59,7 @@ export function PaymentMailDialogFormRoot({

  return (
    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      <SendMailNotificationForm onClose={handleClose} />
+      <PaymentMailDialogFormContent onClose={handleClose} />
    </Formik>
  );
 }
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogFormContent.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogFormContent.tsx
@@ -0,0 +1,62 @@
+// @ts-nocheck
+import { Form, useFormikContext } from 'formik';
+import { Button, Classes, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+import { FFormGroup, FSwitch } from '@/components';
+import { MailNotificationForm } from '@/containers/SendMailNotification';
+import { saveInvoke } from '@/utils';
+
+interface PaymentMailDialogFormContentProps {
+  onClose?: () => void;
+}
+
+export function PaymentMailDialogFormContent({
+  onClose,
+}: PaymentMailDialogFormContentProps) {
+  const { isSubmitting } = useFormikContext();
+
+  const handleClose = () => {
+    saveInvoke(onClose);
+  };
+
+  return (
+    <Form>
+      <div className={Classes.DIALOG_BODY}>
+        <MailNotificationForm fromAddresses={[]} toAddresses={[]} />
+
+        <AttachFormGroup name={'attachPayment'} inline>
+          <FSwitch name={'attachPayment'} label={'Attach Payment'} />
+        </AttachFormGroup>
+      </div>
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button
+            disabled={isSubmitting}
+            onClick={handleClose}
+            style={{ minWidth: '65px' }}
+          >
+            Close
+          </Button>
+
+          <Button
+            intent={Intent.PRIMARY}
+            loading={isSubmitting}
+            style={{ minWidth: '75px' }}
+            type="submit"
+          >
+            Send
+          </Button>
+        </div>
+      </div>
+    </Form>
+  );
+}
+
+const AttachFormGroup = styled(FFormGroup)`
+  background: #f8f9fb;
+  margin-top: 0.6rem;
+  padding: 4px 14px;
+  border-radius: 5px;
+  border: 1px solid #dcdcdd;
+`;
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogForm.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogForm.tsx
@@ -2,24 +2,26 @@
 import { Formik, FormikBag } from 'formik';
 import { castArray } from 'lodash';
 import * as R from 'ramda';
-import { SendMailNotificationForm } from '@/containers/SendMailNotification';
 import { useReceiptMailDialogBoot } from './ReceiptMailDialogBoot';
 import { transformToForm } from '@/utils';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { DialogsName } from '@/constants/dialogs';
 import { useSendSaleReceiptMail } from '@/hooks/query';
+import { ReceiptMailDialogFormContent } from './ReceiptMailDialogFormContent';

 const initialFormValues = {
  from: [],
  to: [],
  subject: '',
-  message: '',
+  body: '',
+  attachReceipt: true,
 };
 interface ReceiptMailFormValues {
  from: string[];
  to: string[];
  subject: string;
-  message: string;
+  body: string;
+  attachReceipt: boolean;
 }

 function ReceiptMailDialogFormRoot({ closeDialog }) {
@@ -52,7 +54,7 @@ function ReceiptMailDialogFormRoot({ closeDialog }) {

  return (
    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      <SendMailNotificationForm onClose={handleClose} />
+      <ReceiptMailDialogFormContent onClose={handleClose} />
    </Formik>
  );
 }
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogFormContent.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogFormContent.tsx
@@ -0,0 +1,62 @@
+// @ts-nocheck
+import { Form, useFormikContext } from 'formik';
+import { Button, Classes, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+import { FFormGroup, FSwitch } from '@/components';
+import { MailNotificationForm } from '@/containers/SendMailNotification';
+import { saveInvoke } from '@/utils';
+
+interface SendMailNotificationFormProps {
+  onClose?: () => void;
+}
+
+export function ReceiptMailDialogFormContent({
+  onClose,
+}: SendMailNotificationFormProps) {
+  const { isSubmitting } = useFormikContext();
+
+  const handleClose = () => {
+    saveInvoke(onClose);
+  };
+
+  return (
+    <Form>
+      <div className={Classes.DIALOG_BODY}>
+        <MailNotificationForm fromAddresses={[]} toAddresses={[]} />
+
+        <AttachFormGroup name={'attachReceipt:'} inline>
+          <FSwitch name={'attachReceipt:'} label={'Attach Receipt'} />
+        </AttachFormGroup>
+      </div>
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button
+            disabled={isSubmitting}
+            onClick={handleClose}
+            style={{ minWidth: '65px' }}
+          >
+            Close
+          </Button>
+
+          <Button
+            intent={Intent.PRIMARY}
+            loading={isSubmitting}
+            style={{ minWidth: '75px' }}
+            type="submit"
+          >
+            Send
+          </Button>
+        </div>
+      </div>
+    </Form>
+  );
+}
+
+const AttachFormGroup = styled(FFormGroup)`
+  background: #f8f9fb;
+  margin-top: 0.6rem;
+  padding: 4px 14px;
+  border-radius: 5px;
+  border: 1px solid #dcdcdd;
+`;
--- a/packages/webapp/src/containers/SendMailNotification/MailNotificationForm.tsx
+++ b/packages/webapp/src/containers/SendMailNotification/MailNotificationForm.tsx
@@ -0,0 +1,134 @@
+// @ts-nocheck
+import {
+  Box,
+  FFormGroup,
+  FInputGroup,
+  FMultiSelect,
+  FRichEditor,
+  Hint,
+} from '@/components';
+import styled from 'styled-components';
+import { Position } from '@blueprintjs/core';
+import { SelectOptionProps } from '@blueprintjs-formik/select';
+
+interface MailNotificationFormProps {
+  fromAddresses: SelectOptionProps[];
+  toAddresses: SelectOptionProps[];
+}
+
+export function MailNotificationForm({
+  fromAddresses,
+  toAddresses,
+}: MailNotificationFormProps) {
+  return (
+    <Box>
+      <HeaderBox>
+        <FFormGroup
+          label={'From'}
+          labelInfo={
+            <Hint
+              content={'asdasd asdasd asdsad'}
+              position={Position.BOTTOM_LEFT}
+            />
+          }
+          name={'from'}
+          inline={true}
+          fastField={true}
+        >
+          <FMultiSelect
+            items={fromAddresses}
+            name={'from'}
+            placeholder=""
+            popoverProps={{ minimal: true, fill: true }}
+            tagInputProps={{
+              tagProps: { round: true, minimal: true, large: true },
+            }}
+            fill={true}
+          />
+        </FFormGroup>
+
+        <FFormGroup label={'To'} name={'to'} inline={true} fastField={true}>
+          <FMultiSelect
+            items={toAddresses}
+            name={'to'}
+            placeholder=""
+            popoverProps={{ minimal: true, fill: true }}
+            tagInputProps={{
+              tagProps: { round: true, minimal: true, large: true },
+            }}
+            fill={true}
+          />
+        </FFormGroup>
+
+        <FFormGroup
+          label={'Subject'}
+          name={'subject'}
+          inline={true}
+          fastField={true}
+        >
+          <FInputGroup name={'subject'} fill={true} />
+        </FFormGroup>
+      </HeaderBox>
+
+      <MailMessageEditor name={'body'} />
+    </Box>
+  );
+}
+
+const MailMessageEditor = styled(FRichEditor)`
+  padding: 15px;
+  border: 1px solid #dedfe9;
+  border-top: 0;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+`;
+
+const HeaderBox = styled('div')`
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
+  border: 1px solid #dddfe9;
+  border-bottom: 2px solid #eaeaef;
+  padding: 6px 15px;
+
+  .bp4-form-group {
+    margin: 0;
+    padding-top: 8px;
+    padding-bottom: 8px;
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid #dddfe9;
+    }
+    &:first-of-type {
+      padding-top: 0;
+    }
+    &:last-of-type {
+      padding-bottom: 0;
+    }
+  }
+
+  .bp4-form-content {
+    flex: 1 0;
+  }
+
+  .bp4-label {
+    min-width: 65px;
+    color: #738091;
+  }
+
+  .bp4-input {
+    border-color: transparent;
+    padding: 0;
+
+    &:focus,
+    &.bp4-active {
+      box-shadow: 0 0 0 0;
+    }
+  }
+
+  .bp4-input-ghost {
+    margin-top: 5px;
+  }
+  .bp4-tag-input-values {
+    margin: 0;
+  }
+`;
--- a/packages/webapp/src/containers/SendMailNotification/SendMailNotificationForm.tsx
+++ b/packages/webapp/src/containers/SendMailNotification/SendMailNotificationForm.tsx
@@ -1,184 +0,0 @@
-// @ts-nocheck
-import { Form, useFormikContext } from 'formik';
-import {
-  FFormGroup,
-  FInputGroup,
-  FMultiSelect,
-  FRichEditor,
-  FSwitch,
-  Hint,
-} from '@/components';
-import styled from 'styled-components';
-import { Button, Classes, Intent, Position } from '@blueprintjs/core';
-import { saveInvoke } from '@/utils';
-
-interface SendMailNotificationFormProps {
-  onClose?: () => void;
-}
-
-export function SendMailNotificationForm({
-  onClose,
-}: SendMailNotificationFormProps) {
-  const { isSubmitting } = useFormikContext();
-
-  const handleClose = () => {
-    saveInvoke(onClose);
-  };
-
-  return (
-    <Form>
-      <div className={Classes.DIALOG_BODY}>
-        <HeaderBox>
-          <FFormGroup
-            label={'From'}
-            labelInfo={
-              <Hint
-                content={'asdasd asdasd asdsad'}
-                position={Position.BOTTOM_LEFT}
-              />
-            }
-            name={'from'}
-            inline={true}
-            fastField={true}
-          >
-            <FMultiSelect
-              items={[
-                {
-                  text: 'a.bouhuolia@gmail.com',
-                  value: 'a.bouhuolia@gmail.com',
-                },
-              ]}
-              name={'from'}
-              placeholder=""
-              popoverProps={{ minimal: true, fill: true }}
-              tagInputProps={{
-                tagProps: { round: true, minimal: true, large: true },
-              }}
-              fill={true}
-            />
-          </FFormGroup>
-
-          <FFormGroup label={'To'} name={'to'} inline={true} fastField={true}>
-            <FMultiSelect
-              items={[
-                {
-                  text: 'a.bouhuolia@gmail.com',
-                  value: 'a.bouhuolia@gmail.com',
-                },
-              ]}
-              name={'to'}
-              placeholder=""
-              popoverProps={{ minimal: true, fill: true }}
-              tagInputProps={{
-                tagProps: { round: true, minimal: true, large: true },
-              }}
-              fill={true}
-            />
-          </FFormGroup>
-
-          <FFormGroup
-            label={'Subject'}
-            name={'subject'}
-            inline={true}
-            fastField={true}
-          >
-            <FInputGroup name={'subject'} fill={true} />
-          </FFormGroup>
-        </HeaderBox>
-
-        <MailMessageEditor name={'message'} />
-
-        <AttachFormGroup name={'attach_invoice'} inline>
-          <FSwitch name={'attach_invoice'} label={'Attach Invoice'} />
-        </AttachFormGroup>
-      </div>
-
-      <div className={Classes.DIALOG_FOOTER}>
-        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-          <Button
-            disabled={isSubmitting}
-            onClick={handleClose}
-            style={{ minWidth: '65px' }}
-          >
-            Close
-          </Button>
-
-          <Button
-            intent={Intent.PRIMARY}
-            loading={isSubmitting}
-            style={{ minWidth: '75px' }}
-            type="submit"
-          >
-            Send
-          </Button>
-        </div>
-      </div>
-    </Form>
-  );
-}
-
-const AttachFormGroup = styled(FFormGroup)`
-  background: #f8f9fb;
-  margin-top: 0.6rem;
-  padding: 4px 14px;
-  border-radius: 5px;
-  border: 1px solid #dcdcdd;
-`;
-
-const MailMessageEditor = styled(FRichEditor)`
-  padding: 15px;
-  border: 1px solid #dedfe9;
-  border-top: 0;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-`;
-
-const HeaderBox = styled('div')`
-  border-top-right-radius: 5px;
-  border-top-left-radius: 5px;
-  border: 1px solid #dddfe9;
-  border-bottom: 2px solid #eaeaef;
-  padding: 6px 15px;
-
-  .bp4-form-group {
-    margin: 0;
-    padding-top: 8px;
-    padding-bottom: 8px;
-
-    &:not(:last-of-type) {
-      border-bottom: 1px solid #dddfe9;
-    }
-    &:first-of-type {
-      padding-top: 0;
-    }
-    &:last-of-type {
-      padding-bottom: 0;
-    }
-  }
-
-  .bp4-form-content {
-    flex: 1 0;
-  }
-
-  .bp4-label {
-    min-width: 65px;
-    color: #738091;
-  }
-
-  .bp4-input {
-    border-color: transparent;
-    padding: 0;
-
-    &:focus,
-    &.bp4-active {
-      box-shadow: 0 0 0 0;
-    }
-  }
-
-  .bp4-input-ghost {
-    margin-top: 5px;
-  }
-  .bp4-tag-input-values {
-    margin: 0;
-  }
-`;