Merge pull request #6449 from opengovsg/release_v6.59.0

build: release v6.59.0

CHANGELOG.md

@@ -4,8 +4,32 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v6.59.0](https://github.com/opengovsg/FormSG/compare/v6.58.0...v6.59.0)
+
+- feat: placeholder landing page for payments [`#6440`](https://github.com/opengovsg/FormSG/pull/6440)
+- feat: MyInfo over sgID backend [`#6337`](https://github.com/opengovsg/FormSG/pull/6337)
+- chore(deps): bump fast-xml-parser, @aws-sdk/client-secrets-manager and @aws-sdk/client-ssm in /functions/form-payment-reconciliation [`#6434`](https://github.com/opengovsg/FormSG/pull/6434)
+- chore(deps-dev): bump @babel/preset-env from 7.20.2 to 7.22.5 [`#6446`](https://github.com/opengovsg/FormSG/pull/6446)
+- fix(deps): bump date-fns from 2.29.3 to 2.30.0 [`#6443`](https://github.com/opengovsg/FormSG/pull/6443)
+- feat: migrate banners on React to non-'React'-suffixed env vars [`#6441`](https://github.com/opengovsg/FormSG/pull/6441)
+- feat: payment banners on landing and login pages [`#6431`](https://github.com/opengovsg/FormSG/pull/6431)
+- build(deps): [Snyk] Security upgrade @aws-sdk/client-cloudwatch-logs from 3.342.0 to 3.347.1 [`#6437`](https://github.com/opengovsg/FormSG/pull/6437)
+- chore: remove unused angular deps [`#6438`](https://github.com/opengovsg/FormSG/pull/6438)
+- fix: legacy frontend routing [`#6430`](https://github.com/opengovsg/FormSG/pull/6430)
+- chore(deps): bump fast-xml-parser and @aws-sdk/credential-providers in /scripts/20230317_whitespace_issue [`#6433`](https://github.com/opengovsg/FormSG/pull/6433)
+- chore(deps-dev): bump @playwright/test from 1.29.1 to 1.34.3 [`#6391`](https://github.com/opengovsg/FormSG/pull/6391)
+- fix: use payment intent data for preview [`#6432`](https://github.com/opengovsg/FormSG/pull/6432)
+- feat: bearer token authentication for public APIs [`#6376`](https://github.com/opengovsg/FormSG/pull/6376)
+- build: merge v6.58.0 into develop [`#6429`](https://github.com/opengovsg/FormSG/pull/6429)
+- chore(deps-dev): bump @typescript-eslint/parser from 5.59.8 to 5.59.9 in /shared [`#6428`](https://github.com/opengovsg/FormSG/pull/6428)
+- fix(deps): bump libphonenumber-js from 1.10.33 to 1.10.34 in /shared [`#6427`](https://github.com/opengovsg/FormSG/pull/6427)
+- chore(deps-dev): bump @typescript-eslint/eslint-plugin from 5.59.8 to 5.59.9 in /shared [`#6426`](https://github.com/opengovsg/FormSG/pull/6426)
+- build: release v6.58.0 [`#6423`](https://github.com/opengovsg/FormSG/pull/6423)
+
 #### [v6.58.0](https://github.com/opengovsg/FormSG/compare/v6.57.0...v6.58.0)
 
+> 5 June 2023
+
 - fix: learn more link for what's new drawer [`#6422`](https://github.com/opengovsg/FormSG/pull/6422)
 - feat: GoGov link shortener [`#6369`](https://github.com/opengovsg/FormSG/pull/6369)
 - fix: add payment field to numVisibleFields [`#6414`](https://github.com/opengovsg/FormSG/pull/6414)
@@ -17,6 +41,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix(deps): bump libphonenumber-js from 1.10.31 to 1.10.33 in /shared [`#6421`](https://github.com/opengovsg/FormSG/pull/6421)
 - build: merge v6.57.0 into develop [`#6413`](https://github.com/opengovsg/FormSG/pull/6413)
 - build: release v6.57.0 [`#6412`](https://github.com/opengovsg/FormSG/pull/6412)
+- chore: bump version to v6.58.0 [`7f4460d`](https://github.com/opengovsg/FormSG/commit/7f4460d58621b2760808e4331476607a39adb1f7)
 
 #### [v6.57.0](https://github.com/opengovsg/FormSG/compare/v6.56.0...v6.57.0)
 

__tests__/e2e/helpers/createForm.ts

@@ -488,7 +488,10 @@ const addBasicField = async (
       }
     // Fall through to set "Options".
     case BasicField.Dropdown:
-      await page.getByLabel('Options').fill(field.fieldOptions.join('\n'))
+      await page
+        .getByLabel('Options')
+        .first()
+        .fill(field.fieldOptions.join('\n'))
       break
     case BasicField.Date:
       {

__tests__/setup/.test-env

@@ -90,3 +90,6 @@ CP_RP_JWKS_ENDPOINT=http://localhost:5000/api/v3/corppass/.well-known/jwks.json
 
 # Payment env vars
 SSM_ENV_SITE_NAME=test
+
+# Public API env vars
+API_KEY_VERSION=v1

docker-compose.yml

@@ -116,6 +116,8 @@ services:
       - CRON_PAYMENT_API_SECRET=secretKey
       # env vars for go integration
       - GOGOV_API_KEY
+      # Bearer token API key format
+      - API_KEY_VERSION=v1
 
   mockpass:
     build: https://github.com/opengovsg/mockpass.git#v3.1.3

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-frontend",
-  "version": "6.58.0",
+  "version": "6.59.0",
   "homepage": ".",
   "private": true,
   "dependencies": {

frontend/src/app/AppPublicHeader.tsx

@@ -1,9 +1,9 @@
 import { Link } from 'react-router-dom'
-import { Button } from '@chakra-ui/react'
 
 import { BxsHelpCircle } from '~assets/icons/BxsHelpCircle'
 import { FORM_GUIDE } from '~constants/links'
 import { LOGIN_ROUTE } from '~constants/routes'
+import Button from '~components/Button'
 import { PublicHeader } from '~templates/PublicHeader'
 
 const PUBLIC_HEADER_LINKS = [
@@ -15,20 +15,22 @@ const PUBLIC_HEADER_LINKS = [
   },
 ]
 
-export const AppPublicHeader = (): JSX.Element => {
+export const AppPublicHeader = ({ bg }: { bg?: string }): JSX.Element => {
   return (
     <PublicHeader
       publicHeaderLinks={PUBLIC_HEADER_LINKS}
       ctaElement={
         <Button
-          variant="solid"
+          variant={bg ? 'inverseOutline' : 'solid'}
+          basecolorintensity={500}
           colorScheme="primary"
           as={Link}
           to={LOGIN_ROUTE}
         >
           Log in
         </Button>
       }
+      bg={bg}
     />
   )
 }

frontend/src/app/AppRouter.tsx

@@ -10,6 +10,7 @@ import {
   ADMINFORM_USETEMPLATE_ROUTE,
   BILLING_ROUTE,
   DASHBOARD_ROUTE,
+  LANDING_PAYMENTS_ROUTE,
   LANDING_ROUTE,
   LOGIN_ROUTE,
   PAYMENT_PAGE_SUBROUTE,
@@ -45,7 +46,10 @@ const PublicFormPage = lazy(() =>
   lazyRetry(() => import('~features/public-form/PublicFormPage')),
 )
 const WorkspacePage = lazy(() => lazyRetry(() => import('~features/workspace')))
-const LandingPage = lazy(() => lazyRetry(() => import('~pages/Landing')))
+const LandingPage = lazy(() => lazyRetry(() => import('~pages/Landing/Home')))
+const LandingPaymentsPage = lazy(() =>
+  lazyRetry(() => import('~pages/Landing/Payments')),
+)
 const LoginPage = lazy(() => lazyRetry(() => import('~features/login')))
 const PrivacyPolicyPage = lazy(() =>
   lazyRetry(() => import('~pages/PrivacyPolicy')),
@@ -72,6 +76,10 @@ export const AppRouter = (): JSX.Element => {
           path={LANDING_ROUTE}
           element={<HashRouterElement element={<LandingPage />} />}
         />
+        <Route
+          path={LANDING_PAYMENTS_ROUTE}
+          element={<HashRouterElement element={<LandingPaymentsPage />} />}
+        />
         <Route
           path={DASHBOARD_ROUTE}
           element={<PrivateElement element={<WorkspacePage />} />}

frontend/src/components/Banner/Banner.tsx

@@ -21,13 +21,15 @@ export interface BannerProps {
   children: string
   useMarkdown?: boolean
   showCloseButton?: boolean
+  bannerColor?: string
 }
 
 export const Banner = ({
   variant = 'info',
   children,
   useMarkdown = false,
   showCloseButton,
+  bannerColor,
 }: BannerProps): JSX.Element => {
   const { isOpen, onToggle } = useDisclosure({
     defaultIsOpen: true,
@@ -45,7 +47,12 @@ export const Banner = ({
 
   return (
     <Collapse style={{ overflow: 'visible' }} in={isOpen} animateOpacity>
-      <Box __css={styles.banner}>
+      <Box
+        __css={{
+          ...styles.banner,
+          ...(bannerColor ? { bgColor: bannerColor } : {}),
+        }}
+      >
         <Flex sx={styles.item}>
           <Flex>
             <Icon

frontend/src/components/Button/Button.tsx

@@ -25,6 +25,10 @@ export interface ButtonProps extends ChakraButtonProps {
    * Color scheme of button.
    */
   colorScheme?: ThemeColorScheme
+  /**
+   * Base color intensity of button.
+   */
+  basecolorintensity?: 500 | 600
 }
 
 export const Button = forwardRef<ButtonProps, 'button'>(

frontend/src/components/FeatureBanner/FeatureBanner.tsx

@@ -0,0 +1,83 @@
+import {
+  Box,
+  Center,
+  Flex,
+  Text,
+  useMultiStyleConfig,
+  VStack,
+} from '@chakra-ui/react'
+
+import { BannerVariant } from '~theme/components/Banner'
+import { useIsMobile } from '~hooks/useIsMobile'
+import Button from '~components/Button'
+
+import { textStyles } from '../../theme/textStyles'
+
+export interface FeatureBannerProps {
+  variant?: BannerVariant
+  bannerColorIntensity?: 500 | 600 // Update accordingly if other banner colors are needed
+  title?: string
+  body: string
+  learnMoreLink: string
+}
+
+export const FeatureBanner = ({
+  variant = 'info',
+  bannerColorIntensity = 500,
+  title,
+  body,
+  learnMoreLink,
+}: FeatureBannerProps): JSX.Element => {
+  const isMobile = useIsMobile()
+  const styles = useMultiStyleConfig('Banner', { variant })
+
+  const LearnMoreButton = () => (
+    <Button
+      sx={{
+        ...styles.button,
+        ...(title ? textStyles['subhead-1'] : textStyles['subhead-2']),
+        minHeight: 'auto',
+      }}
+      variant="inverseOutline"
+      basecolorintensity={bannerColorIntensity}
+      as="a"
+      href={learnMoreLink}
+      target="_blank"
+    >
+      Learn more
+    </Button>
+  )
+
+  return (
+    <Box __css={styles.banner} bgColor={`primary.${bannerColorIntensity}`}>
+      <Flex
+        sx={styles.item}
+        placeContent={title ? undefined : 'center'}
+        mx={isMobile ? '0.5rem' : '2rem'}
+        my={title ? (isMobile ? '0.5rem' : '1.5rem') : undefined}
+      >
+        <VStack
+          mr={isMobile ? undefined : '1.5rem'}
+          align={title ? 'flex-start' : undefined}
+          justifyContent="center"
+          spacing="auto"
+        >
+          {title && (
+            <Text as="h5" textStyle="h5" mb="0.25rem">
+              {title}
+            </Text>
+          )}
+          <Text as="h6" textStyle="h6" pb={isMobile ? '1.25rem' : undefined}>
+            {body}
+          </Text>
+          {isMobile ? <LearnMoreButton /> : null}
+        </VStack>
+        {isMobile ? null : (
+          <Center>
+            <LearnMoreButton />
+          </Center>
+        )}
+      </Flex>
+    </Box>
+  )
+}

frontend/src/constants/links.ts

@@ -33,6 +33,8 @@ export const GUIDE_EMAIL_RELIABILITY =
 export const GUIDE_PREFILL = 'https://go.gov.sg/formsg-guide-prefills'
 export const GUIDE_STRIPE_ONBOARDING =
   'https://go.gov.sg/formsg-stripe-onboarding'
+export const GUIDE_PAYMENTS_PUBLIC = 'https://go.gov.sg/formsg-guide-payments'
+export const GUIDE_PAYMENTS_ENTRY = 'https://go.gov.sg/formsg-payment-overview'
 
 export const ACCEPTED_FILETYPES_SPREADSHEET = 'https://go.gov.sg/formsg-cwl'
 

frontend/src/constants/routes.ts

@@ -1,4 +1,5 @@
 export const LANDING_ROUTE = '/'
+export const LANDING_PAYMENTS_ROUTE = '/payments'
 export const DASHBOARD_ROUTE = '/dashboard'
 export const LOGIN_ROUTE = '/login'
 

frontend/src/features/admin-form/common/AdminFormLayout.tsx

@@ -23,14 +23,12 @@ export const AdminFormLayout = (): JSX.Element => {
   const { formId } = useParams()
   if (!formId) throw new Error('No formId provided')
 
-  // TODO (#4279): Revert back to non-react banners post-migration.
-  const { data: { siteBannerContentReact, adminBannerContentReact } = {} } =
-    useEnv()
+  const { data: { siteBannerContent, adminBannerContent } = {} } = useEnv()
 
   const bannerContent = useMemo(
     // Use || instead of ?? so that we fall through even if previous banners are empty string.
-    () => siteBannerContentReact || adminBannerContentReact,
-    [adminBannerContentReact, siteBannerContentReact],
+    () => siteBannerContent || adminBannerContent,
+    [adminBannerContent, siteBannerContent],
   )
 
   const bannerProps = useMemo(