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,161 +31,170 @@ export function PaymentFormComponent({
 
   return (
     <div>
-      <Form.Item
-        name="jobid"
-        label={t("bills.fields.ro_number")}
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required"),
-          },
-        ]}
-      >
-        <JobSearchSelect disabled={disabled} notExported={false} clm_no />
-      </Form.Item>
-      <Form.Item
-        shouldUpdate={(prev, cur) => cur.jobid && prev.jobid !== cur.jobid}
-      >
-        {() => {
-          return (
-            <PaymentFormTotalPayments jobid={form.getFieldValue("jobid")} />
-          );
-        }}
-      </Form.Item>
-
-      <Form.Item
-        label={t("payments.fields.amount")}
-        name="amount"
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required"),
-          },
-        ]}
-      >
-        <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>
-      <Form.Item
-        label={t("payments.fields.date")}
-        name="date"
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required"),
-          },
-        ]}
-      >
-        <DatePickerFormItem disabled={disabled} />
-      </Form.Item>
-      <Form.Item
-        label={t("payments.fields.payer")}
-        name="payer"
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required"),
-          },
-        ]}
-      >
-        <Select disabled={disabled}>
-          <Select.Option value={t("payments.labels.customer")}>
-            {t("payments.labels.customer")}
-          </Select.Option>
-          <Select.Option value={t("payments.labels.insurance")}>
-            {t("payments.labels.insurance")}
-          </Select.Option>
-        </Select>
-      </Form.Item>
-
-      <Form.Item
-        label={t("payments.fields.type")}
-        name="type"
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required"),
-          },
-        ]}
-      >
-        <Select disabled={disabled}>
-          {bodyshop.md_payment_types.map((v, idx) => (
-            <Select.Option key={idx} value={v}>
-              {v}
-            </Select.Option>
-          ))}
-        </Select>
-      </Form.Item>
-
-      <Form.Item
-        label={t("payments.labels.electronicpayment")}
-        name="useStripe"
-        valuePropName="checked"
-      >
-        <Checkbox
-          defaultChecked={!!bodyshop.stripe_acct_id}
-          disabled={!!!bodyshop.stripe_acct_id || disabled}
-        />
-      </Form.Item>
-
-      <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>
-
-      {!!!bodyshop.stripe_acct_id ? (
-        <div style={{ fontStyle: "italic" }}>{t("payments.labels.signup")}</div>
-      ) : null}
-
-      <Form.Item shouldUpdate>
-        {() => {
-          if (form.getFieldValue("useStripe"))
+      <LayoutFormRow grow>
+        <Form.Item
+          name="jobid"
+          label={t("bills.fields.ro_number")}
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <JobSearchSelect disabled={disabled} notExported={false} clm_no />
+        </Form.Item>
+        <Form.Item
+          shouldUpdate={(prev, cur) => cur.jobid && prev.jobid !== cur.jobid}
+        >
+          {() => {
             return (
-              <CardElement
-                options={{
-                  style: {
-                    base: {
-                      color: "#32325d",
-                      //fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
-                      fontSmoothing: "antialiased",
-                      //fontSize: "16px",
-                      "::placeholder": {
-                        color: "#aab7c4",
-                      },
-                    },
-                    invalid: {
-                      color: "#fa755a",
-                      iconColor: "#fa755a",
-                    },
-                  },
-                }}
-                onChange={handleStripeChange}
-              />
+              <PaymentFormTotalPayments jobid={form.getFieldValue("jobid")} />
             );
+          }}
+        </Form.Item>
+      </LayoutFormRow>
 
-          return null;
-        }}
-      </Form.Item>
-      {stripeState.error ? (
-        <Alert type="error" message={stripeState.error.message} />
-      ) : null}
+      <LayoutFormRow grow>
+        <Form.Item
+          label={t("payments.fields.amount")}
+          name="amount"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <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>
+        <Form.Item
+          label={t("payments.fields.date")}
+          name="date"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <DatePickerFormItem disabled={disabled} />
+        </Form.Item>
+      </LayoutFormRow>
+
+      <LayoutFormRow grow>
+        <Form.Item
+          label={t("payments.fields.payer")}
+          name="payer"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Select disabled={disabled}>
+            <Select.Option value={t("payments.labels.customer")}>
+              {t("payments.labels.customer")}
+            </Select.Option>
+            <Select.Option value={t("payments.labels.insurance")}>
+              {t("payments.labels.insurance")}
+            </Select.Option>
+          </Select>
+        </Form.Item>
+
+        <Form.Item
+          label={t("payments.fields.type")}
+          name="type"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Select disabled={disabled}>
+            {bodyshop.md_payment_types.map((v, idx) => (
+              <Select.Option key={idx} value={v}>
+                {v}
+              </Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+      </LayoutFormRow>
+      <LayoutFormRow grow>
+        <div>
+          <Form.Item
+            label={t("payments.labels.electronicpayment")}
+            name="useStripe"
+            valuePropName="checked"
+          >
+            <Checkbox
+              defaultChecked={!!bodyshop.stripe_acct_id}
+              disabled={!!!bodyshop.stripe_acct_id || disabled}
+            />
+          </Form.Item>
+
+          {!bodyshop.stripe_acct_id ? (
+            <div style={{ fontStyle: "italic" }}>
+              {t("payments.labels.signup")}
+            </div>
+          ) : null}
+
+          <Form.Item shouldUpdate>
+            {() => {
+              if (form.getFieldValue("useStripe"))
+                return (
+                  <CardElement
+                    options={{
+                      style: {
+                        base: {
+                          color: "#32325d",
+                          //fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
+                          fontSmoothing: "antialiased",
+                          //fontSize: "16px",
+                          "::placeholder": {
+                            color: "#aab7c4",
+                          },
+                        },
+                        invalid: {
+                          color: "#fa755a",
+                          iconColor: "#fa755a",
+                        },
+                      },
+                    }}
+                    onChange={handleStripeChange}
+                  />
+                );
+
+              return null;
+            }}
+          </Form.Item>
+          {stripeState.error ? (
+            <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>
   );
 }

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,