Merge pull request #560 from bigcapitalhq/fix-onboarding-on-small-screens

fix: Onboarding layout on small screens

packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx

@@ -3,15 +3,14 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
-import { pick } from 'lodash';
+import { omit } from 'lodash';
-
 import { AppToaster } from '@/components';
 import { CreateQuickPaymentMadeFormSchema } from './QuickPaymentMade.schema';
 import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
 import QuickPaymentMadeFormContent from './QuickPaymentMadeFormContent';
 
 import withDialogActions from '@/containers/Dialog/withDialogActions';
-import { defaultPaymentMade, transformErrors } from './utils';
+import { defaultPaymentMade, transformBillToForm, transformErrors } from './utils';
 import { compose } from '@/utils';
 
 /**
@@ -21,31 +20,24 @@ function QuickPaymentMadeForm({
   // #withDialogActions
   closeDialog,
 }) {
-  
+  const { bill, dialogName, createPaymentMadeMutate } =
-  const {
+    useQuickPaymentMadeContext();
-    bill,
-    dialogName,
-    createPaymentMadeMutate,
-  } = useQuickPaymentMadeContext();
 
-  // Initial form values
+  // Initial form values.
   const initialValues = {
     ...defaultPaymentMade,
-    ...bill,
+    ...transformBillToForm(bill),
   };
-
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setFieldError }) => {
-    const entries = [values]
+    const entries = [
-      .filter((entry) => entry.id && entry.payment_amount)
+      {
-      .map((entry) => ({
+        payment_amount: values.amount,
-        bill_id: entry.id,
+        bill_id: values.bill_id,
-        ...pick(entry, ['payment_amount']),
+      },
-      }));
+    ];
-
     const form = {
-      ...values,
+      ...omit(values, ['bill_id']),
-      vendor_id: values?.vendor?.id,
       entries,
     };
 

packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.tsx

@@ -124,7 +124,7 @@ function QuickPaymentMadeFormFields({
         </Col>
       </Row>
       {/*------------ Amount Received -----------*/}
-      <FastField name={'payment_amount'}>
+      <FastField name={'amount'}>
         {({
           form: { values, setFieldValue },
           field: { value },
@@ -135,7 +135,7 @@ function QuickPaymentMadeFormFields({
             labelInfo={<FieldRequiredHint />}
             className={classNames('form-group--payment_amount', CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="payment_amount" />}
+            helperText={<ErrorMessage name="amount" />}
           >
             <ControlGroup>
               <InputPrependText text={values.currency_code} />
@@ -144,7 +144,7 @@ function QuickPaymentMadeFormFields({
                 value={value}
                 minimal={true}
                 onChange={(amount) => {
-                  setFieldValue('payment_amount', amount);
+                  setFieldValue('amount', amount);
                 }}
                 intent={inputIntent({ error, touched })}
                 inputRef={(ref) => (paymentMadeFieldRef.current = ref)}

packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useMemo } from 'react';
 import { DialogContent } from '@/components';
 import {
   useBill,
@@ -11,7 +11,6 @@ import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import { pick } from 'lodash';
 
-
 const QuickPaymentMadeContext = React.createContext();
 
 /**
@@ -40,13 +39,14 @@ function QuickPaymentMadeFormProvider({ query, billId, dialogName, ...props }) {
     isSuccess: isBranchesSuccess,
   } = useBranches(query, { enabled: isBranchFeatureCan });
 
+  const paymentBill = useMemo(
+    () => pick(bill, ['id', 'due_amount', 'vendor_id', 'currency_code']),
+    [bill],
+  );
+
   // State provider.
   const provider = {
-    bill: {
+    bill: paymentBill,
-      ...pick(bill, ['id', 'due_amount', 'vendor', 'currency_code']),
-      vendor_id: bill?.vendor?.display_name,
-      payment_amount: bill?.due_amount,
-    },
     accounts,
     branches,
     dialogName,

packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx

@@ -2,24 +2,25 @@
 import React from 'react';
 import moment from 'moment';
 import intl from 'react-intl-universal';
-import { first } from 'lodash';
+import { first, pick } from 'lodash';
+import { useFormikContext } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { AppToaster } from '@/components';
-import { useFormikContext } from 'formik';
 import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
 import { PAYMENT_MADE_ERRORS } from '@/containers/Purchases/PaymentMades/constants';
 
 // Default initial values of payment made.
 export const defaultPaymentMade = {
+  bill_id: '',
   vendor_id: '',
   payment_account_id: '',
   payment_date: moment(new Date()).format('YYYY-MM-DD'),
   reference: '',
   payment_number: '',
+  amount: '',
   // statement: '',
   exchange_rate: 1,
   branch_id: '',
-  entries: [{ bill_id: '', payment_amount: '' }],
 };
 
 export const transformErrors = (errors, { setFieldError }) => {
@@ -58,3 +59,11 @@ export const useSetPrimaryBranchToForm = () => {
     }
   }, [isBranchesSuccess, setFieldValue, branches]);
 };
+
+export const transformBillToForm = (bill) => {
+  return {
+    ...pick(bill, ['vendor_id', 'currency_code']),
+    amount: bill.due_amount,
+    bill_id: bill.id,
+  };
+}

packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
-import { pick, defaultTo, omit } from 'lodash';
+import { defaultTo, omit } from 'lodash';
 
 import { AppToaster } from '@/components';
 import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
@@ -12,7 +12,11 @@ import QuickPaymentReceiveFormContent from './QuickPaymentReceiveFormContent';
 
 import withSettings from '@/containers/Settings/withSettings';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
-import { defaultInitialValues, transformErrors } from './utils';
+import {
+  defaultInitialValues,
+  transformErrors,
+  transformInvoiceToForm,
+} from './utils';
 import { compose, transactionNumber } from '@/utils';
 
 /**
@@ -26,14 +30,10 @@ function QuickPaymentReceiveForm({
   paymentReceiveAutoIncrement,
   paymentReceiveNumberPrefix,
   paymentReceiveNextNumber,
-  preferredDepositAccount
+  preferredDepositAccount,
 }) {
-  
+  const { dialogName, invoice, createPaymentReceiveMutate } =
-  const {
+    useQuickPaymentReceiveContext();
-    dialogName,
-    invoice,
-    createPaymentReceiveMutate,
-  } = useQuickPaymentReceiveContext();
 
   // Payment receive number.
   const nextPaymentNumber = transactionNumber(
@@ -48,24 +48,22 @@ function QuickPaymentReceiveForm({
       payment_receive_no: nextPaymentNumber,
     }),
     deposit_account_id: defaultTo(preferredDepositAccount, ''),
-    ...invoice,
+    ...transformInvoiceToForm(invoice),
   };
 
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setFieldError }) => {
-    const entries = [values]
+    const entries = [
-      .filter((entry) => entry.id && entry.payment_amount)
+      {
-      .map((entry) => ({
+        invoice_id: values.invoice_id,
-        invoice_id: entry.id,
+        payment_amount: values.amount,
-        ...pick(entry, ['payment_amount']),
+      },
-      }));
+    ];
-
     const form = {
-      ...omit(values, ['payment_receive_no']),
+      ...omit(values, ['payment_receive_no', 'invoice_id']),
       ...(!paymentReceiveAutoIncrement && {
         payment_receive_no: values.payment_receive_no,
       }),
-      customer_id: values.customer.id,
       entries,
     };
 

packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.tsx

@@ -128,7 +128,7 @@ function QuickPaymentReceiveFormFields({
         </Col>
       </Row>
       {/*------------ Amount Received -----------*/}
-      <FastField name={'payment_amount'}>
+      <FastField name={'amount'}>
         {({
           form: { values, setFieldValue },
           field: { value },
@@ -139,7 +139,7 @@ function QuickPaymentReceiveFormFields({
             labelInfo={<FieldRequiredHint />}
             className={classNames('form-group--payment_amount', CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="payment_amount" />}
+            helperText={<ErrorMessage name="amount" />}
           >
             <ControlGroup>
               <InputPrependText text={values.currency_code} />
@@ -148,7 +148,7 @@ function QuickPaymentReceiveFormFields({
                 value={value}
                 minimal={true}
                 onChange={(amount) => {
-                  setFieldValue('payment_amount', amount);
+                  setFieldValue('amount', amount);
                 }}
                 intent={inputIntent({ error, touched })}
                 inputRef={(ref) => (paymentReceiveFieldRef.current = ref)}

packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormProvider.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useContext, createContext } from 'react';
+import React, { useContext, createContext, useMemo } from 'react';
 import { pick } from 'lodash';
 import { DialogContent } from '@/components';
 import { Features } from '@/constants';
@@ -47,15 +47,16 @@ function QuickPaymentReceiveFormProvider({
     isSuccess: isBranchesSuccess,
   } = useBranches(query, { enabled: isBranchFeatureCan });
 
+  const invoicePayment = useMemo(
+    () => pick(invoice, ['id', 'due_amount', 'customer_id', 'currency_code']),
+    [invoice],
+  );
+
   // State provider.
   const provider = {
     accounts,
     branches,
-    invoice: {
+    invoice: invoicePayment,
-      ...pick(invoice, ['id', 'due_amount', 'customer', 'currency_code']),
-      customer_id: invoice?.customer?.display_name,
-      payment_amount: invoice.due_amount,
-    },
     isAccountsLoading,
     isSettingsLoading,
     isBranchesSuccess,

packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import moment from 'moment';
 import intl from 'react-intl-universal';
-import { first } from 'lodash';
+import { first, pick } from 'lodash';
 import { Intent } from '@blueprintjs/core';
 import { AppToaster } from '@/components';
 
@@ -10,15 +10,16 @@ import { useFormikContext } from 'formik';
 import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
 
 export const defaultInitialValues = {
+  invoice_id: '',
   customer_id: '',
   deposit_account_id: '',
   payment_receive_no: '',
   payment_date: moment(new Date()).format('YYYY-MM-DD'),
   reference_no: '',
+  amount: '',
   // statement: '',
   exchange_rate: 1,
   branch_id: '',
-  entries: [{ invoice_id: '', payment_amount: '' }],
 };
 
 export const transformErrors = (errors, { setFieldError }) => {
@@ -44,7 +45,9 @@ export const transformErrors = (errors, { setFieldError }) => {
   }
   if (getError('PAYMENT_ACCOUNT_CURRENCY_INVALID')) {
     AppToaster.show({
-      message: intl.get('payment_Receive.error.payment_account_currency_invalid'),
+      message: intl.get(
+        'payment_Receive.error.payment_account_currency_invalid',
+      ),
       intent: Intent.DANGER,
     });
   }
@@ -64,3 +67,11 @@ export const useSetPrimaryBranchToForm = () => {
     }
   }, [isBranchesSuccess, setFieldValue, branches]);
 };
+
+export const transformInvoiceToForm = (invoice) => {
+  return {
+    ...pick(invoice, ['customer_id', 'currency_code']),
+    amount: invoice.due_amount,
+    invoice_id: invoice.id,
+  };
+};

packages/webapp/src/containers/Setup/SetupSubscription/SetupSubscription.module.scss

@@ -2,6 +2,7 @@
 .root{
   margin: 0 auto;
   padding: 0 40px;
+  padding-right: 20px;
 }
 
 .periodSwitch {

packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlans.tsx

@@ -6,7 +6,7 @@ export function SubscriptionPlans() {
   const subscriptionPlans = useSubscriptionPlans();
 
   return (
-    <Group spacing={14} noWrap align="stretch">
+    <Group spacing={10} noWrap align="stretch">
       {subscriptionPlans.map((plan, index) => (
         <SubscriptionPlan
           key={index}

packages/webapp/src/style/App.scss

@@ -39,7 +39,7 @@
 @import "section";
 
 .App {
-  min-width: 960px;
+  min-width: 1100px;
 }
 
 // =======

packages/webapp/src/style/pages/Setup/SetupPage.scss

@@ -1,36 +1,25 @@
 @import "../../_base.scss";
 
 .setup-page {
+  display: grid;
+  grid-template-columns: 40% 60%;
   max-width: 1600px;
+  min-height: 100vh;
+
+  @media only screen and (max-width: 1500px) {
+    grid-template-columns: 35% 65%;
+  }
+  @media only screen and (max-width: 1200px) {
+    grid-template-columns: 26% 74%;
+  }
 
   &__right-section {
-    display: flex;
-    flex-direction: row;
     width: 100%;
-
+    overflow: auto;
-    &:before {
-      content: '';
-      display: block;
-      width: 100%;
-      height: 1px;
-      max-width: 600px;
-      min-width: 600px;
-
-      @media only screen and (max-width: 1500px) {
-        min-width: 500px;
-        max-width: 500px;
-      }
-
-      @media only screen and (max-width: 1024px) {
-        min-width: 400px;
-        max-width: 400px;
-      }
-    }
 
     h1 {
       font-size: 22px;
     }
-
     h1,
     h3 {
       font-weight: 500;
@@ -44,22 +33,9 @@
   }
 
   &__left-section {
-    position: fixed;
     background-color: #2f3d6f;
-    overflow: auto;
     z-index: 1;
-    height: 100%;
     width: 100%;
-    left: 0;
-    top: 0;
-    width: 600px;
-
-    @media only screen and (max-width: 1500px) {
-      width: 500px;
-    }
-    @media only screen and (max-width: 1024px) {
-      width: 400px;
-    }
 
     .content {
       display: flex;
@@ -76,6 +52,11 @@
         padding-left: 10px;
       }
 
+      &__header{
+        position: sticky;
+        top: 0;
+      }
+
       &__title {
         font-size: 50px;
         font-weight: 100;
@@ -84,8 +65,8 @@
         margin-top: 14px;
         color: rgba(255, 255, 255, 0.75);
 
-        @media only screen and (max-width: 1024px) {
+        @media only screen and (max-width: 1200px) {
-          font-size: 45px;
+          font-size: 36px;
         }
       }
 
@@ -111,16 +92,20 @@
 
       &__footer {
         margin-top: auto;
+        position: sticky;
+        bottom: 20px;
       }
 
       &__links {
         text-align: left;
         opacity: 0.65;
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        flex-wrap: wrap;
 
         >div {
           font-size: 13px;
-          margin-right: 15px;
-          display: inline;
 
           a {
             color: #fff;