Release v1.36.0 (#886)

* feat: add payment forms subscription action to PaySG integration
* chore: change email to plumber support form
* chore: bold email otp

Author: kevinkim-ogp

package-lock.json

@@ -105,5 +105,5 @@
     "tsconfig-paths": "^4.2.0",
     "type-fest": "4.10.3"
   },
-  "version": "1.35.1"
+  "version": "1.36.0"
 }

packages/backend/package.json

@@ -0,0 +1,161 @@
+import type { IRawAction } from '@plumber/types'
+
+import { ZodError } from 'zod'
+import { fromZodError } from 'zod-validation-error'
+
+import StepError, { GenericSolution } from '@/errors/step'
+
+import { requestSchema } from './schema'
+
+const action: IRawAction = {
+  name: 'Create payment form submission for subscription',
+  key: 'createPaymentFormSubmissionSubscription',
+  description:
+    'Create a new submission for a payment form, and initiate a subscription',
+  arguments: [
+    {
+      label: 'Payment Form Link',
+      description: 'This can be found on your PaySG payment services dashboard',
+      key: 'formId',
+      type: 'string' as const,
+      required: true,
+      placeholder: 'e.g. https://pay.gov.sg/forms/aBC123Def456HijK789LMn',
+    },
+    {
+      label: 'FormSG Form ID',
+      description: 'Input the variable corresponding to form ID here',
+      key: 'formsg_form_id',
+      type: 'string' as const,
+      required: true,
+      variables: true,
+    },
+    {
+      label: 'FormSG Submission ID',
+      key: 'formsg_submission_id',
+      type: 'string' as const,
+      required: true,
+      variables: true,
+    },
+    {
+      label: 'FormSG Reference Field Answer',
+      key: 'nonce',
+      type: 'string' as const,
+      required: true,
+      variables: true,
+    },
+    {
+      label: 'Payer Name',
+      key: 'payer_name',
+      type: 'string' as const,
+      required: true,
+      variables: true,
+    },
+    {
+      label: 'Payer Email',
+      key: 'payer_email',
+      type: 'string' as const,
+      required: true,
+      variables: true,
+    },
+    {
+      label: 'Payer Address',
+      key: 'payer_address',
+      type: 'string' as const,
+      required: false,
+      variables: true,
+    },
+    {
+      label: 'Payer Identifier',
+      key: 'payer_identifier',
+      type: 'string' as const,
+      required: false,
+      variables: true,
+    },
+    {
+      label: 'Amount (in cents)',
+      key: 'amount_in_cents',
+      type: 'string' as const,
+      required: true,
+      variables: true,
+    },
+    {
+      label: 'Frequency',
+      key: 'frequency',
+      type: 'dropdown',
+      options: [
+        {
+          label: 'Monthly',
+          value: 'monthly',
+        },
+      ],
+      showOptionValue: false,
+      value: 'monthly',
+      required: true,
+    },
+    {
+      label: 'Description',
+      key: 'description',
+      type: 'string' as const,
+      required: true,
+      variables: true,
+    },
+    {
+      label: 'Additional responses',
+      description: 'These will be included in reports exported from PaySG',
+      key: 'responses',
+      type: 'multirow' as const,
+      required: false,
+      subFields: [
+        {
+          placeholder: 'Question',
+          key: 'question',
+          type: 'string' as const,
+          required: true,
+          variables: true,
+        },
+        {
+          placeholder: 'Answer',
+          key: 'answer',
+          type: 'string' as const,
+          required: true,
+          variables: true,
+        },
+      ],
+    },
+  ],
+
+  async run($) {
+    const paymentServiceId = $.auth.data.paymentServiceId as string
+
+    try {
+      const { formId, ...body } = requestSchema.parse($.step.parameters)
+
+      await $.http.post(
+        `/v1/payment-services/:paymentServiceId/forms/:formId/subscription-submissions`,
+        body,
+        {
+          urlPathParams: {
+            paymentServiceId,
+            formId,
+          },
+        },
+      )
+      $.setActionItem({ raw: { success: true } })
+    } catch (error) {
+      if (error instanceof ZodError) {
+        const firstError = fromZodError(error).details[0]
+
+        throw new StepError(
+          `${firstError.message} under set up step`,
+          GenericSolution.ReconfigureInvalidField,
+          $.step.position,
+          $.app.name,
+        )
+      }
+
+      throw error
+    }
+  },
+}
+
+export default action

packages/backend/src/apps/paysg/actions/create-payment-form-submission-subscription/index.ts

@@ -0,0 +1,38 @@
+import emailValidator from 'email-validator'
+import { z } from 'zod'
+
+import { requestSchema as createPaymentFormSubmissionRequestSchema } from '../create-payment-form-submission/schema'
+
+export const requestSchema = createPaymentFormSubmissionRequestSchema.extend({
+  description: z
+    .string({ invalid_type_error: 'Empty description' })
+    .trim()
+    .min(1, { message: 'Specify a description' })
+    .max(500, { message: 'Description cannot be more than 500 characters' }),
+  frequency: z.literal('monthly'),
+  payer_email: z
+    .string({ invalid_type_error: 'Empty payer email' })
+    .trim()
+    .max(255, { message: 'Payer email cannot be more than 255 characters' })
+    .transform((value, context) => {
+      if (!emailValidator.validate(value)) {
+        context.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Invalid payer email',
+        })
+        return z.NEVER
+      }
+
+      return value
+    }),
+  payer_address: z
+    .string()
+    .trim()
+    .transform((value) => value || undefined)
+    .optional(),
+  payer_identifier: z
+    .string()
+    .trim()
+    .transform((value) => value || undefined)
+    .optional(),
+})

packages/backend/src/apps/paysg/actions/create-payment-form-submission-subscription/schema.ts

@@ -8,10 +8,10 @@ import StepError, { GenericSolution } from '@/errors/step'
 import { requestSchema } from './schema'
 
 const action: IRawAction = {
-  name: 'Create payment form submission',
+  name: 'Create payment form submission for one-time payment',
   key: 'createPaymentFormSubmission',
   description:
-    'Create a new submission for a payment form, and initiate a payment request',
+    'Create a new submission for a payment form, and initiate a one-time payment',
   arguments: [
     {
       label: 'Payment Form Link',

packages/backend/src/apps/paysg/actions/create-payment-form-submission/index.ts

@@ -1,5 +1,6 @@
 import createPayment from './create-payment'
 import createPaymentFormSubmission from './create-payment-form-submission'
+import createPaymentFormSubmissionSubscription from './create-payment-form-submission-subscription'
 import getPayment from './get-payment'
 import sendEmail from './send-email'
 
@@ -8,4 +9,5 @@ export default [
   getPayment,
   sendEmail,
   createPaymentFormSubmission,
+  createPaymentFormSubmissionSubscription,
 ]

packages/backend/src/apps/paysg/actions/index.ts

@@ -49,7 +49,7 @@ const requestOtp: MutationResolvers['requestOtp'] = async (_parent, params) => {
     // Send otp
     await sendEmail({
       subject: 'Your OTP for Plumber',
-      body: `Your OTP is ${otp}. It's valid for ${
+      body: `Your OTP is <b>${otp}</b>. It's valid for ${
         OTP_VALIDITY_IN_MS / 1000 / 60
       } minutes.`,
       recipient: email,

packages/backend/src/graphql/mutations/request-otp.ts

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.35.1",
+  "version": "1.36.0",
   "scripts": {
     "dev": "wait-on tcp:3000 && vite --host --force",
     "build": "tsc && vite build --mode=${VITE_MODE:-prod}",

packages/frontend/package.json

@@ -5,6 +5,7 @@ import { Box, Collapse, Text } from '@chakra-ui/react'
 import { Button, Infobox } from '@opengovsg/design-system-react'
 
 import JSONViewer from '@/components/JSONViewer'
+import { SUPPORT_FORM_LINK } from '@/config/urls'
 
 interface GenericErrorResultProps {
   errorDetails: IJSONObject
@@ -29,16 +30,20 @@ export default function GenericErrorResult(props: GenericErrorResultProps) {
           {`Check if you have configured ${
             isTestRun ? 'the steps above' : 'this step'
           } correctly and retest. If
-          this error still persists, contact us at [email protected]. `}
-          <Button
-            onClick={toggleDropdown}
-            variant="link"
-            size="sm"
-            sx={{ textDecoration: 'underline' }}
-          >
-            View error details below.
-          </Button>
+          this error still persists, contact us at `}
+          <Text as="a" href={SUPPORT_FORM_LINK} target="_blank">
+            {SUPPORT_FORM_LINK}
+          </Text>
+          .
         </Text>
+        <Button
+          onClick={toggleDropdown}
+          variant="link"
+          size="sm"
+          sx={{ textDecoration: 'underline' }}
+        >
+          View error details below.
+        </Button>
 
         <Box>
           <Collapse in={isOpen}>

packages/frontend/src/components/ErrorResult/GenericErrorResult.tsx

@@ -12,6 +12,7 @@ import {
 } from '@opengovsg/design-system-react'
 
 import JSONViewer from '@/components/JSONViewer'
+import { SUPPORT_FORM_LINK } from '@/config/urls'
 import { RETRY_PARTIAL_STEP } from '@/graphql/mutations/retry-partial-step'
 import { GET_EXECUTION_STEPS } from '@/graphql/queries/get-execution-steps'
 
@@ -21,8 +22,7 @@ interface SpecificErrorResultProps {
   executionStepId?: string
 }
 
-const contactPlumberMessage =
-  'If this error still persists, contact us at [email protected].'
+const contactPlumberMessage = `If this error still persists, contact us at [${SUPPORT_FORM_LINK}](${SUPPORT_FORM_LINK}).`
 
 export default function SpecificErrorResult(props: SpecificErrorResultProps) {
   const { errorDetails, isTestRun, executionStepId } = props