Merge pull request #11985 from overleaf/ii-empty-trial-price-section

[web] Checkout page react migration hide empty trial price section

GitOrigin-RevId: a023a48b205e67778827b6a99fbe948c929549f5

services/web/frontend/js/features/subscription/components/new/payment-preview/payment-preview-panel.tsx

@@ -2,17 +2,12 @@ import { useTranslation } from 'react-i18next'
 import Collaborators from './collaborators'
 import FeaturesList from './features-list'
 import PriceSummary from './price-summary'
-import TrialPrice from './trial-price'
-import NoDiscountPrice from './no-discount-price'
-import PriceForFirstXPeriod from './price-for-first-x-period'
+import TrialCouponSummary from './trial-coupon-summary'
 import { usePaymentContext } from '../../../context/payment-context'
 
 function PaymentPreviewPanel() {
   const { t } = useTranslation()
   const { plan, planName } = usePaymentContext()
-  const trialPrice = <TrialPrice />
-  const priceForFirstXPeriod = <PriceForFirstXPeriod />
-  const noDiscountPrice = <NoDiscountPrice />
 
   return (
     <div className="price-feature-description">
@@ -24,16 +19,7 @@ function PaymentPreviewPanel() {
         </>
       )}
       <PriceSummary />
-      {(trialPrice || priceForFirstXPeriod || noDiscountPrice) && (
-        <>
-          <hr className="thin" />
-          <div className="trial-coupon-summary">
-            {trialPrice}
-            {priceForFirstXPeriod}
-            {noDiscountPrice}
-          </div>
-        </>
-      )}
+      <TrialCouponSummary />
       <hr className="thin" />
       <p className="price-cancel-anytime text-center">{t('cancel_anytime')}</p>
     </div>

services/web/frontend/js/features/subscription/components/new/payment-preview/trial-coupon-summary.tsx

@@ -0,0 +1,22 @@
+import TrialPrice from './trial-price'
+import NoDiscountPrice from './no-discount-price'
+import PriceForFirstXPeriod from './price-for-first-x-period'
+
+function TrialCouponSummary() {
+  const children = [TrialPrice, NoDiscountPrice, PriceForFirstXPeriod].map(
+    (Component, index) => <Component key={index} />
+  )
+
+  const showChildren = children.some(child => child.type() != null)
+
+  if (!showChildren) return null
+
+  return (
+    <>
+      <hr className="thin" />
+      <div className="trial-coupon-summary">{children}</div>
+    </>
+  )
+}
+
+export default TrialCouponSummary