IO-912 Reformat payment modal

client/src/components/payment-form/payment-form.component.jsx

@@ -9,6 +9,7 @@ import Alert from "../alert/alert.component";
 import DatePickerFormItem from "../form-date-picker/form-date-picker.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import JobSearchSelect from "../job-search-select/job-search-select.component";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import PaymentFormTotalPayments from "./payment-form.totalpayments.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -30,6 +31,7 @@ export function PaymentFormComponent({
 
   return (
     <div>
+      <LayoutFormRow grow>
         <Form.Item
           name="jobid"
           label={t("bills.fields.ro_number")}
@@ -51,7 +53,9 @@ export function PaymentFormComponent({
             );
           }}
         </Form.Item>
+      </LayoutFormRow>
 
+      <LayoutFormRow grow>
         <Form.Item
           label={t("payments.fields.amount")}
           name="amount"
@@ -64,14 +68,12 @@ export function PaymentFormComponent({
         >
           <CurrencyInput disabled={disabled} />
         </Form.Item>
-
         <Form.Item
           label={t("payments.fields.transactionid")}
           name="transactionid"
         >
           <Input disabled={disabled} />
         </Form.Item>
-
         <Form.Item label={t("payments.fields.memo")} name="memo">
           <Input disabled={disabled} />
         </Form.Item>
@@ -87,6 +89,9 @@ export function PaymentFormComponent({
         >
           <DatePickerFormItem disabled={disabled} />
         </Form.Item>
+      </LayoutFormRow>
+
+      <LayoutFormRow grow>
         <Form.Item
           label={t("payments.fields.payer")}
           name="payer"
@@ -125,7 +130,9 @@ export function PaymentFormComponent({
             ))}
           </Select>
         </Form.Item>
-
+      </LayoutFormRow>
+      <LayoutFormRow grow>
+        <div>
           <Form.Item
             label={t("payments.labels.electronicpayment")}
             name="useStripe"
@@ -137,20 +144,10 @@ export function PaymentFormComponent({
             />
           </Form.Item>
 
-      <Form.Item
+          {!bodyshop.stripe_acct_id ? (
-        label={t("general.labels.sendby")}
+            <div style={{ fontStyle: "italic" }}>
-        name="sendby"
+              {t("payments.labels.signup")}
-        initialValue="none"
+            </div>
-      >
-        <Radio.Group disabled={disabled}>
-          <Radio value="none">{t("general.labels.none")}</Radio>
-          <Radio value="email">{t("general.labels.email")}</Radio>
-          <Radio value="print">{t("general.labels.print")}</Radio>
-        </Radio.Group>
-      </Form.Item>
-
-      {!!!bodyshop.stripe_acct_id ? (
-        <div style={{ fontStyle: "italic" }}>{t("payments.labels.signup")}</div>
           ) : null}
 
           <Form.Item shouldUpdate>
@@ -186,6 +183,19 @@ export function PaymentFormComponent({
             <Alert type="error" message={stripeState.error.message} />
           ) : null}
         </div>
+        <Form.Item
+          label={t("general.labels.sendby")}
+          name="sendby"
+          initialValue="none"
+        >
+          <Radio.Group disabled={disabled}>
+            <Radio value="none">{t("general.labels.none")}</Radio>
+            <Radio value="email">{t("general.labels.email")}</Radio>
+            <Radio value="print">{t("general.labels.print")}</Radio>
+          </Radio.Group>
+        </Form.Item>
+      </LayoutFormRow>
+    </div>
   );
 }
 export default connect(mapStateToProps, null)(PaymentFormComponent);

client/src/components/payment-form/payment-form.totalpayments.component.jsx

@@ -18,7 +18,7 @@ export default function PaymentFormTotalPayments({ jobid }) {
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
 
-  if (!data) return <div>Select a job</div>;
+  if (!data) return <></>;
   const totalPayments = data.jobs_by_pk.payments.reduce((acc, val) => {
     return acc.add(Dinero({ amount: (val.amount || 0) * 100 }));
   }, Dinero());

client/src/components/payment-modal/payment-modal.container.jsx

@@ -191,6 +191,7 @@ function BillEnterModalContainer({
       visible={visible}
       okText={t("general.actions.save")}
       onOk={() => form.submit()}
+      width="50%"
       onCancel={handleCancel}
       okButtonProps={{
         loading: loading,