ORV2-2577: FE: Staff Accept Cash, Cheque, PoS and GA Payment Methods (#…

…1521)

Co-authored-by: GlenAOT <[email protected]>

frontend/src/features/permits/pages/Application/components/pay/ChoosePaymentMethod.scss

@@ -3,4 +3,8 @@
     padding-bottom: 1.5rem;
     font-size: 1.5rem;
   }
+
+  & &__options {
+    gap: 1.5rem;
+  }
 }

frontend/src/features/permits/pages/Application/components/pay/ChoosePaymentMethod.tsx

@@ -1,41 +1,49 @@
 import { Controller, useFormContext } from "react-hook-form";
-import {
-  Box,
-  RadioGroup,
-  Typography,
-} from "@mui/material";
-
-import "./ChoosePaymentMethod.scss";
+import { Box, RadioGroup, Typography } from "@mui/material";
 import { PaymentOption } from "./PaymentOption";
 import { PaymentMethodTypeCode } from "../../../../../../common/types/paymentMethods";
+import {
+  DEFAULT_EMPTY_CARD_TYPE,
+  DEFAULT_EMPTY_PAYMENT_TYPE,
+} from "./types/PaymentMethodData";
+import "./ChoosePaymentMethod.scss";
 
 export const ChoosePaymentMethod = ({
   availablePaymentMethods,
 }: {
   availablePaymentMethods: PaymentMethodTypeCode[];
 }) => {
-  const {
-    control,
-    watch,
-    setValue,
-    clearErrors,
-  } = useFormContext();
+  const { control, watch, setValue, clearErrors } = useFormContext();
+  const currPaymentMethod = watch("paymentMethod");
 
-  const handlePaymentMethodChange = (selectedPaymentMethod: string) => {
-    setValue("paymentMethod", selectedPaymentMethod as PaymentMethodTypeCode);
-    setValue("cardType", "");
-    setValue("transactionId", "");
-    clearErrors(["cardType", "transactionId"]);
+  const handlePaymentMethodChange = (
+    selectedPaymentMethod: PaymentMethodTypeCode,
+  ) => {
+    /**
+     * Ensure that the user does not select the same payment method consecutively,
+     * which would cause the inner form fields (payment type, transaction id etc)
+     * to reset when attempting to interact with them
+     */
+    if (currPaymentMethod !== selectedPaymentMethod) {
+      setValue("paymentMethod", selectedPaymentMethod as PaymentMethodTypeCode);
+      setValue("additionalPaymentData.cardType", DEFAULT_EMPTY_CARD_TYPE);
+      setValue("additionalPaymentData.icepayTransactionId", "");
+      setValue("additionalPaymentData.paymentType", DEFAULT_EMPTY_PAYMENT_TYPE);
+      setValue("additionalPaymentData.ppcTransactionId", "");
+      setValue("additionalPaymentData.serviceBCOfficeId", "");
+      clearErrors([
+        "additionalPaymentData.cardType",
+        "additionalPaymentData.icepayTransactionId",
+        "additionalPaymentData.paymentType",
+        "additionalPaymentData.ppcTransactionId",
+        "additionalPaymentData.serviceBCOfficeId",
+      ]);
+    }
   };
 
-  const currPaymentMethod = watch("paymentMethod");
-
   return (
     <Box className="choose-payment-method">
-      <Typography
-        className="choose-payment-method__title"
-        variant="h3"
-      >
+      <Typography className="choose-payment-method__title" variant="h3">
         Choose a Payment Method
       </Typography>
 
@@ -47,13 +55,16 @@ export const ChoosePaymentMethod = ({
             className="choose-payment-method__options"
             defaultValue={value}
             value={value}
-            onChange={(e) => handlePaymentMethodChange(e.target.value)}
+            onChange={(e) =>
+              handlePaymentMethodChange(e.target.value as PaymentMethodTypeCode)
+            }
           >
-            {availablePaymentMethods.map(paymentMethod => (
+            {availablePaymentMethods.map((paymentMethod) => (
               <PaymentOption
                 key={paymentMethod}
                 paymentMethod={paymentMethod}
                 isSelected={paymentMethod === currPaymentMethod}
+                handlePaymentMethodChange={handlePaymentMethodChange}
               />
             ))}
           </RadioGroup>

frontend/src/features/permits/pages/Application/components/pay/PaymentOption.tsx

@@ -4,22 +4,48 @@ import {
   PAYMENT_METHOD_TYPE_CODE,
   PaymentMethodTypeCode,
 } from "../../../../../../common/types/paymentMethods";
+import { InPersonPPCPaymentOption } from "./paymentOptions/InPersonPPCPaymentOption";
+import { GAPaymentOption } from "./paymentOptions/GAPaymentOption";
 
 export const PaymentOption = ({
   paymentMethod,
   isSelected,
+  handlePaymentMethodChange,
 }: {
   paymentMethod: PaymentMethodTypeCode;
   isSelected: boolean;
+  handlePaymentMethodChange: (
+    selectedPaymentMethod: PaymentMethodTypeCode,
+  ) => void;
 }) => {
   switch (paymentMethod) {
     case PAYMENT_METHOD_TYPE_CODE.ICEPAY:
       return (
-        <IcepayPaymentOption isSelected={isSelected} />
+        <IcepayPaymentOption
+          isSelected={isSelected}
+          handlePaymentMethodChange={handlePaymentMethodChange}
+        />
       );
     case PAYMENT_METHOD_TYPE_CODE.WEB:
       return (
-        <PayBCPaymentOption isSelected={isSelected} />
+        <PayBCPaymentOption
+          isSelected={isSelected}
+          handlePaymentMethodChange={handlePaymentMethodChange}
+        />
+      );
+    case PAYMENT_METHOD_TYPE_CODE.POS:
+      return (
+        <InPersonPPCPaymentOption
+          isSelected={isSelected}
+          handlePaymentMethodChange={handlePaymentMethodChange}
+        />
+      );
+    case PAYMENT_METHOD_TYPE_CODE.GA:
+      return (
+        <GAPaymentOption
+          isSelected={isSelected}
+          handlePaymentMethodChange={handlePaymentMethodChange}
+        />
       );
     default:
       return null;

frontend/src/features/permits/pages/Application/components/pay/PermitPayFeeSummary.scss

@@ -5,7 +5,6 @@
   border-radius: 0.25rem;
 
   & &__pay {
-    max-width: 33rem;
     display: flex;
     flex-direction: column;
 

frontend/src/features/permits/pages/Application/components/pay/PermitPayFeeSummary.tsx

@@ -10,10 +10,12 @@ export const PermitPayFeeSummary = ({
   permitType,
   selectedItemsCount,
   onPay,
+  transactionPending,
 }: {
   calculatedFee: number;
   permitType?: PermitType;
   selectedItemsCount: number;
+  transactionPending: boolean;
   onPay: () => void;
 }) => {
   const [showTooltip, setShowTooltip] = useState<boolean>(false);
@@ -55,6 +57,7 @@ export const PermitPayFeeSummary = ({
             className="permit-pay-fee-summary__btn"
             variant="contained"
             onClick={handlePayNow}
+            disabled={transactionPending}
           >
             Pay Now
           </Button>

frontend/src/features/permits/pages/Application/components/pay/paymentOptions/GAPaymentOption.scss

@@ -0,0 +1,22 @@
+@use "./PaymentOptionStyles";
+@import "../../../../../../../themes/orbcStyles";
+
+@include PaymentOptionStyles.payment-option-style(".payment-option");
+
+.payment-option {
+  .label-text {
+    font-size: 1.25rem;
+    font-weight: bold;
+    letter-spacing: -0.4px;
+  }
+
+  &--service-bc {
+    .payment-details {
+      display: block;
+
+      &__info {
+        width: 100%;
+      }
+    }
+  }
+}

frontend/src/features/permits/pages/Application/components/pay/paymentOptions/GAPaymentOption.tsx

@@ -0,0 +1,111 @@
+import {
+  FormControl,
+  FormControlLabel,
+  FormHelperText,
+  FormLabel,
+  OutlinedInput,
+  Radio,
+} from "@mui/material";
+import {
+  PAYMENT_METHOD_TYPE_CODE,
+  PaymentMethodTypeCode,
+} from "../../../../../../../common/types/paymentMethods";
+import { PaymentMethodData } from "../types/PaymentMethodData";
+import { Controller, useFormContext } from "react-hook-form";
+import { Nullable } from "../../../../../../../common/types/common";
+import { requiredMessage } from "../../../../../../../common/helpers/validationMessages";
+import { getErrorMessage } from "../../../../../../../common/components/form/CustomFormComponents";
+import "./GAPaymentOption.scss";
+
+const paymentMethod = PAYMENT_METHOD_TYPE_CODE.GA;
+
+const serviceBCOfficeIDRules = {
+  validate: {
+    requiredWhenSelected: (
+      value: Nullable<string>,
+      formValues: PaymentMethodData,
+    ) => {
+      return (
+        formValues.paymentMethod !== paymentMethod ||
+        (value != null && value.trim() !== "") ||
+        requiredMessage()
+      );
+    },
+  },
+};
+
+export const GAPaymentOption = ({
+  isSelected,
+  handlePaymentMethodChange,
+}: {
+  isSelected: boolean;
+  handlePaymentMethodChange: (
+    selectedPaymentMethod: PaymentMethodTypeCode,
+  ) => void;
+}) => {
+  const {
+    control,
+    register,
+    formState: { errors },
+  } = useFormContext<PaymentMethodData>();
+
+  return (
+    <div
+      role="radio"
+      onClick={() => handlePaymentMethodChange(paymentMethod)}
+      onKeyDown={() => true}
+      className={
+        isSelected ? "payment-option payment-option--active" : "payment-option"
+      }
+    >
+      <FormControlLabel
+        className="label"
+        componentsProps={{
+          typography: {
+            className: "label__container",
+          },
+        }}
+        label={
+          <div className="label__text">
+            In-person at a Service BC Office (GA)
+          </div>
+        }
+        value={paymentMethod}
+        control={<Radio key="pay-by-ga" />}
+      />
+      <div className="payment-details">
+        <Controller
+          name="additionalPaymentData.serviceBCOfficeId"
+          control={control}
+          rules={serviceBCOfficeIDRules}
+          render={({ field: { value }, fieldState: { invalid } }) => (
+            <FormControl className="payment-details__info" error={invalid}>
+              <FormLabel className="payment-details__label">
+                Service BC Office ID Number
+              </FormLabel>
+              <OutlinedInput
+                className={`payment-details__input payment-details__input ${
+                  invalid ? "payment-details__input--err" : ""
+                }`}
+                defaultValue={value}
+                {...register(
+                  "additionalPaymentData.serviceBCOfficeId",
+                  serviceBCOfficeIDRules,
+                )}
+                onChange={() => handlePaymentMethodChange(paymentMethod)}
+              />
+              {invalid ? (
+                <FormHelperText className="payment-details__err" error>
+                  {getErrorMessage(
+                    errors,
+                    "additionalPaymentData.serviceBCOfficeId",
+                  )}
+                </FormHelperText>
+              ) : null}
+            </FormControl>
+          )}
+        />
+      </div>
+    </div>
+  );
+};

frontend/src/features/permits/pages/Application/components/pay/paymentOptions/IcepayPaymentOption.scss

@@ -2,50 +2,3 @@
 @import "../../../../../../../themes/orbcStyles";
 
 @include PaymentOptionStyles.payment-option-style(".payment-option");
-
-.payment-option {
-  .payment-details {
-    display: flex;
-    flex-direction: row;
-
-    &__info {
-      &--card {
-        margin-right: 0.5rem;
-        width: 50%;
-      }
-
-      &--transaction {
-        margin-left: 0.5rem;
-        width: 50%;
-      }
-    }
-
-    &__label {
-      font-weight: 600;
-      margin-bottom: 0.5rem;
-    }
-
-    &__input {
-      background-color: $white;
-      font-size: 0.9rem;
-
-      .MuiOutlinedInput-notchedOutline {
-        top: -6px;
-      }
-
-      &--card {
-        background-color: $white;
-      }
-
-      &--err {
-        .MuiOutlinedInput-notchedOutline {
-          border: 2px solid $bc-red;
-        }
-      }
-    }
-
-    &__err {
-      color: $bc-red;
-    }
-  }
-}