feat: add placeholder preview for payment preview when in build and c…

…reate mode
opengovsg · Jul 10, 2023 · ad64b71 · ad64b71
1 parent 6c58e4c
commit ad64b71
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/...src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/PaymentView.tsx b/...src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/PaymentView.tsx
@@ -92,6 +92,11 @@ export const PaymentView = () => {
   if (!paymentDetails.enabled && paymentState !== PaymentState.EditingPayment)
     return null
 
+  const paymentDetailsWithPlaceholderPreview: typeof paymentDetails = {
+    ...paymentDetails,
+    name: paymentDetails.name || 'Product/service name',
+    description: paymentDetails.description || 'Description',
+  }
   return (
     <Box w="100%" maxW="57rem" alignSelf="center" ref={paymentRef}>
       <FormProvider {...formMethods}>
@@ -110,7 +115,7 @@ export const PaymentView = () => {
             <Box p={{ base: '0.75rem', md: '1.5rem' }}>
               <PaymentPreview
                 colorTheme={form?.startPage.colorTheme}
-                paymentDetails={paymentDetails}
+                paymentDetails={paymentDetailsWithPlaceholderPreview}
                 isBuilder
               />
             </Box>