[Feature] Allow processing fee field to be manually edited

components/admin/requests/payment-information/Card.tsx

@@ -100,6 +100,7 @@ const Card: FC<Props> = props => {
             paymentInformation={{
               paymentMethod,
               donationAmount,
+              processingFee,
               shippingAddressSameAsHomeAddress,
               shippingFullName,
               shippingAddressLine1,
@@ -135,7 +136,7 @@ const Card: FC<Props> = props => {
         <SimpleGrid columns={2} spacingX="70px" spacingY="12px">
           <Box>
             <Text as="p" textStyle="body-regular" textAlign="left">
-              Permit Fee (fixed)
+              Permit Fee
             </Text>
           </Box>
           <Box>

components/admin/requests/payment-information/Form.tsx

@@ -1,19 +1,5 @@
 import { PaymentInformationFormData } from '@tools/admin/requests/payment-information';
-import {
-  FormControl,
-  FormLabel,
-  Input,
-  Text,
-  Stack,
-  FormHelperText,
-  Radio,
-  Box,
-  InputGroup,
-  InputLeftElement,
-  Grid,
-  GridItem,
-  Divider,
-} from '@chakra-ui/react'; // Chakra UI
+import { Text, Stack, FormHelperText, Radio, Box, Grid, GridItem, Divider } from '@chakra-ui/react'; // Chakra UI
 import { PaymentType } from '@lib/graphql/types';
 import TextField from '@components/form/TextField';
 import RadioGroupField from '@components/form/RadioGroupField';
@@ -52,20 +38,7 @@ export default function PaymentDetailsForm({ paymentInformation }: PaymentDetail
           </GridItem>
 
           <GridItem>
-            <FormControl isRequired isDisabled>
-              <FormLabel>
-                {'Permit fee '}
-                <Box as="span" textStyle="body-regular">
-                  {'(fixed cost)'}
-                </Box>
-              </FormLabel>
-              <InputGroup>
-                <InputLeftElement pointerEvents="none" color="texticon.filler" fontSize="1.2em">
-                  {'$'}
-                </InputLeftElement>
-                <Input placeholder="26" />
-              </InputGroup>
-            </FormControl>
+            <TextField name="paymentInformation.processingFee" label="Permit fee" monetaryInput />
           </GridItem>
 
           <GridItem colSpan={1}>

lib/applications/resolvers.ts

@@ -336,6 +336,7 @@ export const createNewApplication: Resolver<
 
   const paymentInformation = {
     paymentMethod: input.paymentMethod,
+    processingFee: input.processingFee,
     donationAmount,
     shippingAddressSameAsHomeAddress: input.shippingAddressSameAsHomeAddress,
     shippingFullName: input.shippingFullName,
@@ -382,7 +383,6 @@ export const createNewApplication: Resolver<
     application = await prisma.application.create({
       data: {
         type: 'NEW',
-        processingFee: process.env.PROCESSING_FEE,
         donationAmount: donationAmount || 0,
         // Connect to applicant if applicant exists in DB
         ...(applicantId && {
@@ -557,8 +557,11 @@ export const createRenewalApplication: Resolver<
     otherRequiresWiderParkingSpaceReason,
   };
 
+  const { processingFee } = input;
+
   const paymentInformation = {
     paymentMethod,
+    processingFee,
     donationAmount,
     shippingAddressSameAsHomeAddress,
     shippingFullName,
@@ -606,7 +609,6 @@ export const createRenewalApplication: Resolver<
     createdRenewalApplication = await prisma.application.create({
       data: {
         type: 'RENEWAL',
-        processingFee: process.env.PROCESSING_FEE,
         donationAmount: donationAmount || 0,
         phone: stripPhoneNumber(phone),
         ...data,
@@ -965,8 +967,12 @@ export const createReplacementApplication: Resolver<
     city,
     postalCode,
   };
+
+  const { processingFee } = input;
+
   const paymentInformation = {
     paymentMethod,
+    processingFee,
     donationAmount,
     shippingAddressSameAsHomeAddress,
     shippingFullName,
@@ -1034,7 +1040,6 @@ export const createReplacementApplication: Resolver<
     application = await prisma.application.create({
       data: {
         type: 'REPLACEMENT',
-        processingFee: process.env.PROCESSING_FEE,
         donationAmount: donationAmount || 0,
         phone: stripPhoneNumber(phone),
         postalCode: stripPostalCode(postalCode),

lib/applications/schema.ts

@@ -386,8 +386,9 @@ export default gql`
     requiresWiderParkingSpaceReason: RequiresWiderParkingSpaceReason
     otherRequiresWiderParkingSpaceReason: String
 
-    # Payment information (omit processing fee)
+    # Payment information
     paymentMethod: PaymentType!
+    processingFee: String! # Input monetary value as string
     donationAmount: String # Input monetary value as string
     # Shipping information
     shippingAddressSameAsHomeAddress: Boolean!
@@ -454,6 +455,7 @@ export default gql`
 
     # Payment information
     paymentMethod: PaymentType!
+    processingFee: String # Input monetary value as string
     donationAmount: String # Input monetary value as string
     # Shipping information
     shippingAddressSameAsHomeAddress: Boolean!
@@ -555,9 +557,9 @@ export default gql`
     stolenPoliceOfficerName: String
     eventDescription: String
 
-    # Payment information (omit processing fee)
     paymentMethod: PaymentType!
     # Input monetary value as string
+    processingFee: String!
     donationAmount: String
 
     # Shipping information
@@ -722,8 +724,9 @@ export default gql`
     # Application ID
     id: Int!
 
-    # Payment information (omit processing fee)
+    # Payment information
     paymentMethod: PaymentType!
+    processingFee: String!
     donationAmount: String
 
     # Shipping information

lib/applications/validation.ts

@@ -13,7 +13,7 @@ import {
   AccessibleConvertedVanLoadingMethod,
   RequiresWiderParkingSpaceReason,
 } from '@lib/graphql/types';
-import { phoneNumberRegex, postalCodeRegex } from '@lib/utils/validation';
+import { monetaryValueRegex, phoneNumberRegex, postalCodeRegex } from '@lib/utils/validation';
 
 /**
  * Additional Questions form validation schema
@@ -75,9 +75,12 @@ export const paymentInformationSchema = object({
     .oneOf(Object.values(PaymentType))
     .required('Please select a payment method'),
   donationAmount: string()
-    .matches(/^([0-9]+\.?[0-9]{0,2}|\.[0-9]{1,2}|)$/, 'Please enter a valid amount')
+    .matches(monetaryValueRegex, 'Please enter a valid amount')
     .nullable()
     .default(null),
+  processingFee: string()
+    .matches(monetaryValueRegex, 'Please enter a valid amount')
+    .required('Please enter a permit fee'),
   shippingAddressSameAsHomeAddress: bool().default(false),
   shippingFullName: string()
     .nullable()

lib/graphql/types.ts

@@ -321,6 +321,7 @@ export type CreateNewApplicationInput = {
   requiresWiderParkingSpaceReason: Maybe<RequiresWiderParkingSpaceReason>;
   otherRequiresWiderParkingSpaceReason: Maybe<Scalars['String']>;
   paymentMethod: PaymentType;
+  processingFee: Scalars['String'];
   donationAmount: Maybe<Scalars['String']>;
   shippingAddressSameAsHomeAddress: Scalars['Boolean'];
   shippingFullName: Maybe<Scalars['String']>;
@@ -373,6 +374,7 @@ export type CreateRenewalApplicationInput = {
   requiresWiderParkingSpaceReason: Maybe<RequiresWiderParkingSpaceReason>;
   otherRequiresWiderParkingSpaceReason: Maybe<Scalars['String']>;
   paymentMethod: PaymentType;
+  processingFee: Scalars['String'];
   donationAmount: Maybe<Scalars['String']>;
   shippingAddressSameAsHomeAddress: Scalars['Boolean'];
   shippingFullName: Maybe<Scalars['String']>;
@@ -418,6 +420,7 @@ export type CreateReplacementApplicationInput = {
   stolenPoliceOfficerName: Maybe<Scalars['String']>;
   eventDescription: Maybe<Scalars['String']>;
   paymentMethod: PaymentType;
+  processingFee: Scalars['String'];
   donationAmount: Maybe<Scalars['String']>;
   shippingAddressSameAsHomeAddress: Scalars['Boolean'];
   shippingFullName: Maybe<Scalars['String']>;
@@ -1317,6 +1320,7 @@ export type UpdateApplicationGuardianInformationResult = {
 export type UpdateApplicationPaymentInformationInput = {
   id: Scalars['Int'];
   paymentMethod: PaymentType;
+  processingFee: Scalars['String'];
   donationAmount: Maybe<Scalars['String']>;
   shippingAddressSameAsHomeAddress: Scalars['Boolean'];
   shippingFullName: Maybe<Scalars['String']>;

lib/utils/validation.ts

@@ -7,3 +7,8 @@ export const postalCodeRegex = /(^(?!.*[DFIOQU])[A-VXY][0-9][A-Z] ?[0-9][A-Z][0-
  * Regex to match phone numbers in the form '123-456-7890' and '1234567890'
  */
 export const phoneNumberRegex = /(^(\d{3}-?\d{3}-?\d{4}$))/;
+
+/**
+ * Regex to match monetary values
+ */
+export const monetaryValueRegex = /^([0-9]+\.?[0-9]{0,2}|\.[0-9]{1,2}|)$/;

tools/admin/requests/create-new.ts

@@ -194,6 +194,7 @@ export const INITIAL_ADDITIONAL_QUESTIONS: AdditionalInformationFormData = {
 // Initial data for payment details in application forms
 export const INITIAL_PAYMENT_DETAILS: PaymentInformationFormData = {
   paymentMethod: null,
+  processingFee: '26',
   donationAmount: '',
   shippingAddressSameAsHomeAddress: false,
   shippingFullName: '',

tools/admin/requests/payment-information.ts

@@ -12,6 +12,7 @@ import {
 export type PaymentInformationFormData = Pick<
   Application,
   | 'donationAmount'
+  | 'processingFee'
   | 'shippingAddressSameAsHomeAddress'
   | 'shippingFullName'
   | 'shippingAddressLine1'