feat: default billed yearly

Author: danshuitaihejie

src/components/subscription/PricingModal.jsx

@@ -10,7 +10,7 @@ export function PricingModal({
   loginHandler,
   onSubscriptionChange,
 }) {
-  const [isMonthlyType, setIsMonthlyType] = useState(true);
+  const [isMonthlyType, setIsMonthlyType] = useState(false);
   const monthlyBillingClicked = (e) => {
     setIsMonthlyType(true);
   };
@@ -41,7 +41,7 @@ export function PricingModal({
                     onClick={yearlyBillingClicked}
                     class={`${isMonthlyType ? '' : 'bg-black'} ml-0.5 relative border border-transparent rounded-md py-2 w-1/2 text-xs  whitespace-nowrap focus:outline-none sm:w-auto sm:px-8`}
                   >
-                    Yearly{' '}
+                    Billed Yearly{' '}
                     <span
                       className={`${isMonthlyType ? '' : 'text-green-500'}`}
                     >
@@ -57,7 +57,9 @@ export function PricingModal({
                 <SubscriptionItem
                   planName="Starter"
                   planType="free"
-                  priceDesc="Free"
+                  price="Free"
+                  priceDesc="Free for everyone"
+                  priceSaveDesc={isMonthlyType ? '' : ' '}
                   upgradeBtnName={
                     userService.getPlanType() == 'free'
                       ? 'Current plan'
@@ -75,8 +77,10 @@ export function PricingModal({
                 />
                 <SubscriptionItem
                   planName="Basic"
-                  priceDesc={isMonthlyType ? '$4.99' : '$0.83'}
+                  price={isMonthlyType ? '$4.99' : '$0.83'}
                   priceTerm="/month"
+                  priceDesc={isMonthlyType ? ' ' : 'Billed yearly'}
+                  priceSaveDesc={isMonthlyType ? '' : 'Save 49.92 USD'}
                   planType={isMonthlyType ? 'basic-monthly' : 'basic-yearly'}
                   upgradeBtnName="Upgrade to Basic"
                   preActionCallback={onClose}
@@ -88,9 +92,11 @@ export function PricingModal({
                 />
                 <SubscriptionItem
                   planName="Plus"
-                  priceDesc={isMonthlyType ? '$7.99' : '$1.25'}
+                  price={isMonthlyType ? '$7.99' : '$1.25'}
                   priceTerm="/month"
                   planType={isMonthlyType ? 'plus-monthly' : 'plus-yearly'}
+                  priceDesc={isMonthlyType ? ' ' : 'Billed yearly'}
+                  priceSaveDesc={isMonthlyType ? '' : 'Save 80.88 USD'}
                   upgradeBtnName="Upgrade to Plus"
                   preActionCallback={onClose}
                   loginCallback={loginHandler}
@@ -104,8 +110,10 @@ export function PricingModal({
                 />
                 <SubscriptionItem
                   planName="Enterprise"
-                  priceDesc="-"
+                  price="Custom"
                   planType="enterprise"
+                  priceDesc=" "
+                  priceSaveDesc={isMonthlyType ? '' : ' '}
                   upgradeBtnName="Contact us"
                   preActionCallback={onClose}
                   loginCallback={loginHandler}

src/components/subscription/SubscriptionItem.jsx

@@ -16,11 +16,28 @@ export function SubscriptionItem(props) {
       <div class="p-3">
         <h2 class="text-xs font-semibold leading-6">{props.planName}</h2>
         <p class="mt-1">
-          {props.priceDesc && (
-            <span class="text-2xl font-semibold">{props.priceDesc}</span>
+          {props.price && (
+            <span class="text-2xl font-semibold">{props.price}</span>
           )}
           {props.priceTerm && <span class="text-base">{props.priceTerm}</span>}
         </p>
+        <div>
+          {props.priceDesc && props.priceDesc != ' ' && (
+            <p class="mt-2 text-xs font-semibold">{props.priceDesc}</p>
+          )}
+          {props.priceDesc && props.priceDesc == ' ' && (
+            <p class="invisible mt-2 text-xs font-semibold">&nbsp;</p>
+          )}
+
+          {props.priceSaveDesc && props.priceSaveDesc != ' ' && (
+            <p class="text-green-500 text-xs font-semibold">
+              {props.priceSaveDesc}
+            </p>
+          )}
+          {props.priceSaveDesc && props.priceSaveDesc == ' ' && (
+            <p class="invisible text-xs font-semibold">&nbsp;</p>
+          )}
+        </div>
         {props.planName != 'Enterprise' && featureToggle.isPaymentEnabled && (
           <SubscriptionAction
             planType={props.planType}