WIP Add support for affiliate campaigns

docs/configuration.md

@@ -28,7 +28,6 @@ class Config {
 
   // optional pricing config
   pricingPlans?: PricingPlan[]
-  coupons?: Coupon[]
 
   // optional version info
   saasifyVersion?: number = 1
@@ -165,14 +164,6 @@ Optional array of `PricingPlan` objects to fully customize the pricing of your p
 
 Refer to our [pricing guide](pricing.md) for details on pricing configuration including examples of setting up common billing models.
 
-#### coupons
-
-Optional array of `Coupon` objects to enable for this product.
-
-Coupons are a great way to offer discounts to different customer segments.
-
-Saasify coupons follow the same format as [Stripe coupons](https://stripe.com/docs/billing/subscriptions/discounts ':target=_blank').
-
 #### saasifyVersion
 
 Optional `string` platform version. The only allowable value is currently `1`.

docs/pricing.md

@@ -74,7 +74,7 @@ class Config {
 
   // optional pricing config
   pricingPlans?: PricingPlan[]
-  coupons?: Coupon[]
+  enableCoupons?: boolean
 }
 
 class PricingPlan {
@@ -125,20 +125,6 @@ class PricingPlanTier {
   upTo: string
 }
 
-class Coupon {
-  name?: string
-
-  currency?: string
-  amount_off?: number
-  percent_off?: number
-
-  duration: string
-  duration_in_months?: number
-
-  redeem_by?: string
-  max_redemptions?: number
-}
-
 class RateLimit {
   // whether or not this rate limit is enabled
   enabled?: boolean = true
@@ -155,6 +141,12 @@ Saasify's pricing plan schemas are based directly on Stripe's subscription billi
 
 Note that Saasify uses camelCase for property names whereas Stripe uses snake_case. Converting between the two should be straightforward, but please let us know if you have any questions.
 
+## Coupons
+
+To enable coupons / discounts / promo codes for your product, set `enableCoupons` to `true` in your config and then [create your coupons in your Stripe dashboard](https://stripe.com/docs/billing/subscriptions/discounts).
+
+Saasify will check for verify that a given coupon code exists and is valid on your Stripe account before applying it to a customer subscription.
+
 <p align="center">
   <img src="./_media/undraw/stripe_payments.svg" alt="Stripe" width="200" />
 </p>

examples/readme.md

@@ -23,7 +23,6 @@
 
 These examples show how to use different Saasify platform features.
 
-- [coupons](./typescript/coupons) - Shows the use of coupons.
 - [secrets](./typescript/secrets) - Shows the use of environment variable secrets.
 - [features](./typescript/features) - Shows how to customize the SaaS client features section.
 

packages/react-saasify/package.json

@@ -68,6 +68,7 @@
     "saasify-client": "^1.20.0",
     "saasify-codegen": "^1.20.0",
     "saasify-faas-sdk": "^1.20.0",
+    "stripe-coupon-to-string": "^0.1.2",
     "titleize": "^2.1.0"
   },
   "peerDependencies": {

packages/react-saasify/src/components/CheckoutForm/CheckoutForm.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import theme from 'lib/theme'
+import stripeCouponToString from 'stripe-coupon-to-string'
 
 import {
   StripeProvider,
@@ -12,6 +13,7 @@ import {
 import { observer, inject } from 'mobx-react'
 import { Button, Icon, Tooltip } from 'lib/antd'
 import env from 'lib/env'
+import API from 'lib/api'
 
 import styles from './styles.module.css'
 
@@ -33,6 +35,7 @@ const createOptions = (fontSize = 16) => {
   }
 }
 
+@inject('auth')
 @inject('config')
 @observer
 export class CheckoutForm extends Component {
@@ -43,6 +46,7 @@ export class CheckoutForm extends Component {
     action: PropTypes.node,
     footer: PropTypes.node,
     className: PropTypes.string,
+    auth: PropTypes.object.isRequired,
     config: PropTypes.object.isRequired
   }
 
@@ -74,8 +78,13 @@ class CheckoutFormImpl extends Component {
     loading: false
   }
 
+  state = {
+    coupon: null
+  }
+
   render() {
     const { config, loading, title, action, footer, className } = this.props
+    const { coupon } = this.state
 
     return (
       <form
@@ -106,18 +115,28 @@ class CheckoutFormImpl extends Component {
           <CardElement {...createOptions()} />
         </label>
 
-        {config.coupons && config.coupons.length > 0 && (
+        {config?.deployment?.enableCoupons && (
           <label className={theme(styles, 'label')}>
             Promo Code
             <input
               className={theme(styles, 'input')}
               name='coupon'
               type='text'
-              placeholder=''
+              placeholder='Optional'
+              onChange={this._onChangeCoupon}
             />
           </label>
         )}
 
+        {coupon &&
+          (coupon.valid ? (
+            <p>
+              <i>{stripeCouponToString(coupon)}</i>
+            </p>
+          ) : (
+            <p>This coupon is no longer valid.</p>
+          ))}
+
         {action && (
           <Button
             type='primary'
@@ -141,4 +160,17 @@ class CheckoutFormImpl extends Component {
     const coupon = e.target.coupon && e.target.coupon.value
     this.props.onSubmit({ name, coupon, stripe: this.props.stripe })
   }
+
+  _onChangeCoupon = async (e) => {
+    const consumerId = this.props.auth.consumer?.id
+    const couponId = e.target.value
+
+    try {
+      const coupon = await API.getCouponForConsumer(consumerId, couponId)
+      this.setState({ coupon })
+    } catch (err) {
+      console.error(err)
+      this.setState({ coupon: null })
+    }
+  }
 }

packages/react-saasify/src/components/NavHeader/styles.module.css

@@ -154,6 +154,7 @@
   .actions {
     width: 100%;
     margin-top: 0.5em;
+    flex-wrap: wrap;
   }
 
   .actions .action {