From ad64b71ccb9edfb8524c9d971fe999027a43fc03 Mon Sep 17 00:00:00 2001
From: Ken <ken@open.gov.sg>
Date: Mon, 10 Jul 2023 20:21:32 +0800
Subject: [PATCH] feat: add placeholder preview for payment preview when in
 build and create mode

---
 .../BuilderAndDesignContent/PaymentView.tsx                | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/PaymentView.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/PaymentView.tsx
index 04f5e8d87e..b4e7f1904e 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/PaymentView.tsx
+++ b/frontend/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>