From 79413fa85ea4bf1e625819b2654d891c9c3e6cff Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sun, 25 Aug 2024 19:43:54 +0200
Subject: [PATCH] fix: Add subscription plans offer text

---
 .../SubscriptionPlansOfferChecks.module.scss  | 20 +++++++++++
 .../SubscriptionPlansOfferChecks.tsx          | 35 +++++++++++++++++++
 .../SubscriptionPlansPeriodSwitcher.tsx       |  2 +-
 .../SubscriptionPlansSection.tsx              |  2 ++
 .../src/style/pages/Setup/SetupPage.scss      |  2 +-
 5 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansOfferChecks.module.scss
 create mode 100644 packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansOfferChecks.tsx

diff --git a/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansOfferChecks.module.scss b/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansOfferChecks.module.scss
new file mode 100644
index 000000000..203799313
--- /dev/null
+++ b/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansOfferChecks.module.scss
@@ -0,0 +1,20 @@
+.container {
+  text-align: center;
+  margin-bottom: 1.15rem;
+}
+
+.iconText {
+  display: inline-flex;
+  font-size: 14px;
+  margin-right: 16px;
+  color: #00824d;
+
+  &:last-child {
+    margin-right: 0; /* Remove the margin on the last item */
+  }
+  
+}
+
+.icon {
+  margin-right: 2px;
+}
\ No newline at end of file
diff --git a/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansOfferChecks.tsx b/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansOfferChecks.tsx
new file mode 100644
index 000000000..b212fedd3
--- /dev/null
+++ b/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansOfferChecks.tsx
@@ -0,0 +1,35 @@
+import styles from './SubscriptionPlansOfferChecks.module.scss';
+
+export function SubscriptionPlansOfferChecks() {
+  return (
+    <div className={styles.container}>
+      <span className={styles.iconText}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="18px"
+          width="18px"
+          viewBox="0 -960 960 960"
+          fill="rgb(0, 130, 77)"
+          className={styles.icon}
+        >
+          <path d="M378-225 133-470l66-66 179 180 382-382 66 65-448 448Z"></path>
+        </svg>
+        14-day free trial
+      </span>
+
+      <span className={styles.iconText}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="18px"
+          width="18px"
+          viewBox="0 -960 960 960"
+          fill="rgb(0, 130, 77)"
+          className={styles.icon}
+        >
+          <path d="M378-225 133-470l66-66 179 180 382-382 66 65-448 448Z"></path>
+        </svg>
+        24/7 online support
+      </span>
+    </div>
+  );
+}
diff --git a/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansPeriodSwitcher.tsx b/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansPeriodSwitcher.tsx
index fb7cc23a7..d8dded741 100644
--- a/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansPeriodSwitcher.tsx
+++ b/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansPeriodSwitcher.tsx
@@ -24,7 +24,7 @@ function SubscriptionPlansPeriodSwitcherRoot({
     );
   };
   return (
-    <Group position={'center'} spacing={10} style={{ marginBottom: '1.2rem' }}>
+    <Group position={'center'} spacing={10} style={{ marginBottom: '1.6rem' }}>
       <Text>Pay Monthly</Text>
       <Switch
         large
diff --git a/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansSection.tsx b/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansSection.tsx
index 764ff8ecd..ad1c9efb3 100644
--- a/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansSection.tsx
+++ b/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansSection.tsx
@@ -1,6 +1,7 @@
 import { Callout } from '@blueprintjs/core';
 import { SubscriptionPlans } from './SubscriptionPlans';
 import { SubscriptionPlansPeriodSwitcher } from './SubscriptionPlansPeriodSwitcher';
+import { SubscriptionPlansOfferChecks } from './SubscriptionPlansOfferChecks';
 
 /**
  * Billing plans.
@@ -14,6 +15,7 @@ export function SubscriptionPlansSection() {
         include applicable taxes.
       </Callout>
 
+      <SubscriptionPlansOfferChecks />
       <SubscriptionPlansPeriodSwitcher />
       <SubscriptionPlans />
     </section>
diff --git a/packages/webapp/src/style/pages/Setup/SetupPage.scss b/packages/webapp/src/style/pages/Setup/SetupPage.scss
index d594aab2e..53355fa23 100644
--- a/packages/webapp/src/style/pages/Setup/SetupPage.scss
+++ b/packages/webapp/src/style/pages/Setup/SetupPage.scss
@@ -29,7 +29,7 @@
 
   &__content {
     width: 100%;
-    padding-bottom: 40px;
+    padding-bottom: 80px;
   }
 
   &__left-section {