refactor

astuto · riggraz · May 3, 2024 · Apr 19, 2024 · Apr 19, 2024 · Apr 19, 2024
commit 0f3e2be18186c7226053da3c6fd9d0eec743e196
diff --git a/app/controllers/billing_controller.rb b/app/controllers/billing_controller.rb
@@ -29,7 +29,14 @@ def index
       sign_in owner
       tb.invalidate_auth_token
 
-      @prices = Stripe::Price.list({limit: 2}).data
+      @prices = Stripe::Price.list({
+        lookup_keys: [
+          Rails.application.stripe_monthly_lookup_key,
+          Rails.application.stripe_yearly_lookup_key
+        ],
+        active: true
+      }).data
+      @prices = @prices.sort_by { |price| price.unit_amount }
     else
       redirect_to get_url_for(method(:root_url))
     end
@@ -87,10 +94,13 @@ def webhook
     if event['type'] == 'invoice.paid'
       Current.tenant = get_tenant_from_customer_id(event.data.object.customer)
 
+      monthly_lookup_key = Rails.application.stripe_monthly_lookup_key
+      yearly_lookup_key = Rails.application.stripe_yearly_lookup_key
+
       subscription_type = event.data.object.lines.data.last.price.lookup_key
-      return head :bad_request unless subscription_type == 'monthly' || subscription_type == 'yearly'
+      return head :bad_request unless subscription_type == monthly_lookup_key || subscription_type == yearly_lookup_key
 
-      subscription_duration = subscription_type == 'monthly' ? 1.month : 1.year
+      subscription_duration = subscription_type == monthly_lookup_key ? 1.month : 1.year
       Current.tenant.tenant_billing.update!(
         status: 'active',
         subscription_ends_at: Time.current + subscription_duration

diff --git a/app/javascript/components/Billing/PricingTable.tsx b/app/javascript/components/Billing/PricingTable.tsx
@@ -5,71 +5,86 @@ interface Props {
   currentPrice: string;
   setCurrentPrice: (priceId: string) => void;
   setChosenPrice: (priceId: string) => void;
+  stripeMonthlyLookupKey: string;
+  stripeYearlyLookupKey: string;
 }
 
-const PricingTable = ({ prices, currentPrice, setCurrentPrice, setChosenPrice }: Props) => (
-  <div className="pricingTable">
-    <h3>Choose your plan</h3>
+const PricingTable = ({
+  prices,
+  currentPrice,
+  setCurrentPrice,
+  setChosenPrice,
+  stripeMonthlyLookupKey,
+  stripeYearlyLookupKey,
+}: Props) => {
+  const monthlyPlanUnitAmount = prices.find(p => p.lookup_key === stripeMonthlyLookupKey).unit_amount;
+  const yearlyPlanUnitAmount = prices.find(p => p.lookup_key === stripeYearlyLookupKey).unit_amount;
+  const yearlyPlanDiscount = 1 - yearlyPlanUnitAmount / (monthlyPlanUnitAmount*12)
 
-    <ul className="pricingPlansNav">
-      {
-        prices && prices.map((price) => (
-          <li key={price.id} className="nav-item">
-            <a className={`nav-link${currentPrice === price.id ? ' active' : ''}`} onClick={() => setCurrentPrice(price.id)}>
-              {price.lookup_key}
-              { 
-                price.lookup_key === 'yearly' &&
-                  <span className="yearlyPlanDiscount">-{(1 - ((prices.find(p => p.lookup_key === 'yearly').unit_amount) / (prices.find(p => p.lookup_key === 'monthly').unit_amount*12))) * 100}%</span>
-              }
-            </a>
-          </li>
-        ))
-      }
-    </ul>
-  {
-    prices && prices.filter(price => price.id === currentPrice).map((price) => (
-      <div key={price.id} className="pricingTableColumn">
-        <h4>{ price.lookup_key === 'monthly' ? 'Monthly subscription' : 'Yearly subscription' }</h4>
+  return (
+    <div className="pricingTable">
+      <h3>Choose your plan</h3>
 
-        <div className="priceContainer">
-          <p className="price">
-            <span className="amount">{price.unit_amount / 100.0}</span>
-            &nbsp;
-            <span className="currency">{price.currency}</span>
-            &nbsp;/&nbsp;
-            <span className="period">{price.recurring.interval}</span>
-          </p>
+      <ul className="pricingPlansNav">
+        {
+          prices && prices.map((price) => (
+            <li key={price.id} className="nav-item">
+              <a className={`nav-link${currentPrice === price.id ? ' active' : ''}`} onClick={() => setCurrentPrice(price.id)}>
+                {price.lookup_key}
+                { 
+                  price.lookup_key === stripeYearlyLookupKey &&
+                    <span className="yearlyPlanDiscount">-{yearlyPlanDiscount * 100}%</span>
+                }
+              </a>
+            </li>
+          ))
+        }
+      </ul>
+    {
+      prices && prices.filter(price => price.id === currentPrice).map((price) => (
+        <div key={price.id} className="pricingTableColumn">
+          <h4>{ price.lookup_key === stripeMonthlyLookupKey ? 'Monthly subscription' : 'Yearly subscription' }</h4>
 
-          {
-            price.lookup_key === 'yearly' &&
-              <p className="priceYearly">
-                (
-                <span className="amount">{price.unit_amount / 100.0 / 12}</span>
-                &nbsp;
-                <span className="currency">{price.currency}</span>
-                &nbsp;/&nbsp;
-                <span className="period">month</span>
-                )
-              </p>
-          }
-        </div>
+          <div className="priceContainer">
+            <p className="price">
+              <span className="amount">{price.unit_amount / 100.0}</span>
+              &nbsp;
+              <span className="currency">{price.currency}</span>
+              &nbsp;/&nbsp;
+              <span className="period">{price.recurring.interval}</span>
+            </p>
 
-        <p className="description">
-          For most small-medium organizations.<br />
-          Bigger organizations can <a className="link" href="mailto:info@astuto.io">contact us</a> for a custom plan.
-        </p>
+            {
+              price.lookup_key === stripeYearlyLookupKey &&
+                <p className="priceYearly">
+                  (
+                  <span className="amount">{price.unit_amount / 100.0 / 12}</span>
+                  &nbsp;
+                  <span className="currency">{price.currency}</span>
+                  &nbsp;/&nbsp;
+                  <span className="period">month</span>
+                  )
+                </p>
+            }
+          </div>
 
-        <ul className="features">
-          <li>All features</li>
-          <li>Unlimited feedback</li>
-          <li>Unlimited boards</li>
-        </ul>
+          <p className="description">
+            For most small-medium organizations.<br />
+            Bigger organizations can <a className="link" href="mailto:info@astuto.io">contact us</a> for a custom plan.
+          </p>
 
-        <button onClick={() => setChosenPrice(price.id)} className="btnPrimary">Subscribe</button>
-      </div>
-    ))
-  }
-  </div>
-);
+          <ul className="features">
+            <li>All features</li>
+            <li>Unlimited feedback</li>
+            <li>Unlimited boards</li>
+          </ul>
+
+          <button onClick={() => setChosenPrice(price.id)} className="btnPrimary">Subscribe</button>
+        </div>
+      ))
+    }
+    </div>
+  );
+};
 
 export default PricingTable;
diff --git a/app/javascript/components/Billing/index.tsx b/app/javascript/components/Billing/index.tsx
@@ -17,7 +17,8 @@ interface Props {
   createCheckoutSessionUrl: string;
   billingUrl: string;
   manageSubscriptionUrl: string;
-
+  stripeMonthlyLookupKey: string;
+  stripeYearlyLookupKey: string;
   stripePublicKey: string;
   authenticityToken: string;
 }
@@ -28,6 +29,8 @@ const Billing = ({
   createCheckoutSessionUrl,
   billingUrl,
   manageSubscriptionUrl,
+  stripeMonthlyLookupKey,
+  stripeYearlyLookupKey,
   stripePublicKey,
   authenticityToken,
 }: Props) => {
@@ -122,6 +125,8 @@ const Billing = ({
             currentPrice={currentPrice}
             setCurrentPrice={setCurrentPrice}
             setChosenPrice={setChosenPrice}
+            stripeMonthlyLookupKey={stripeMonthlyLookupKey}
+            stripeYearlyLookupKey={stripeYearlyLookupKey}
           />
       }
 

diff --git a/app/views/billing/index.html.erb b/app/views/billing/index.html.erb
@@ -7,7 +7,8 @@
       createCheckoutSessionUrl: create_checkout_session_url,
       billingUrl: get_url_for(method(:request_billing_page_url)),
       manageSubscriptionUrl: Rails.application.stripe_manage_subscription_url,
-
+      stripeMonthlyLookupKey: Rails.application.stripe_monthly_lookup_key,
+      stripeYearlyLookupKey: Rails.application.stripe_yearly_lookup_key,
       stripePublicKey: Rails.application.stripe_public_key,
       authenticityToken: form_authenticity_token
     }

diff --git a/config/application.rb b/config/application.rb
@@ -53,5 +53,13 @@ def stripe_endpoint_secret
     def stripe_manage_subscription_url
       ENV["STRIPE_MANAGE_SUBSCRIPTION_URL"]
     end
+
+    def stripe_monthly_lookup_key
+      ENV["STRIPE_MONTHLY_LOOKUP_KEY"]
+    end
+
+    def stripe_yearly_lookup_key
+      ENV["STRIPE_YEARLY_LOOKUP_KEY"]
+    end
   end
 end