Merge pull request #629 from bigcapitalhq/details-subscription

fix: Add subscription plans offer text
bigcapitalhq · Aug 25, 2024 · 161d603 · 161d603
2 parents 58552c6 + 79413fa
commit 161d603
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 2 deletions.
diff --git a/...es/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansOfferChecks.module.scss b/...es/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;
+}
diff --git a/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansOfferChecks.tsx 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
@@ -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
@@ -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
@@ -29,7 +29,7 @@
 
   &__content {
     width: 100%;
-    padding-bottom: 40px;
+    padding-bottom: 80px;
   }
 
   &__left-section {