From 58485a8d974413fed5e816e7ce9e67f90f299ca3 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Tue, 2 Aug 2022 14:13:50 +0200
Subject: [PATCH] Added static HTML template for free trial tier card variant

refs https://github.com/TryGhost/Team/issues/1724
---
 .../src/components/common/ProductsSection.js  | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/ghost/portal/src/components/common/ProductsSection.js b/ghost/portal/src/components/common/ProductsSection.js
index edb8125559..6c3b313b10 100644
--- a/ghost/portal/src/components/common/ProductsSection.js
+++ b/ghost/portal/src/components/common/ProductsSection.js
@@ -225,6 +225,10 @@ export const ProductsSectionStyles = ({site}) => {
             color: var(--grey0);
         }
 
+        .gh-portal-product-price .amount.trial-duration {
+            letter-spacing: -0.022em;
+        }
+
         .gh-portal-product-price .billing-period {
             align-self: flex-end;
             font-size: 1.5rem;
@@ -242,6 +246,14 @@ export const ProductsSectionStyles = ({site}) => {
             display: none;
         }
 
+        .after-trial-amount {
+            display: block;
+            font-size: 1.5rem;
+            color: var(--grey6);
+            margin-top: 12px;
+            line-height: 1;
+        }
+
         .gh-portal-product-card-detaildata {
             flex: 1;
         }
@@ -538,6 +550,15 @@ function ProductCardPrice({product}) {
             {(selectedInterval === 'year' ? <YearlyDiscount discount={yearlyDiscount} /> : '')}
             <ProductCardAlternatePrice price={alternatePrice} />
         </div>
+        // Static HTML template for variant of product card for tiers with free trial enabled
+        // <div className="gh-portal-product-card-pricecontainer">
+        //     <div className="gh-portal-product-price">
+        //         <span className="amount trial-duration">30 days free</span>
+        //     </div>
+        //     {(selectedInterval === 'year' ? <YearlyDiscount discount={yearlyDiscount} /> : '')}
+        //     <ProductCardAlternatePrice price={alternatePrice} />
+        // </div>
+        // <span className="after-trial-amount">Then $30/month</span>
     );
 }