From fb4ccf1ada96284e89a1f27f0a6e3bd5d0e6d7b0 Mon Sep 17 00:00:00 2001 From: Sung Won Cho Date: Fri, 7 Feb 2020 11:49:07 +1000 Subject: [PATCH 001/120] Allow to use yearly (#411) * Toggle * Display breakdown * Process yearly plan * Display summary * Fix style --- jslib/src/services/payment.ts | 3 +- pkg/server/handlers/subscription.go | 12 ++- ...ySelect.module.scss => CountrySelect.scss} | 2 +- .../Common/PaymentInput/CountrySelect.tsx | 2 +- .../Common/PaymentInput/NameOnCard.tsx | 2 +- .../Common/PaymentInput/PaymentInput.scss | 4 +- web/src/components/Common/Toggle.scss | 23 ++++- web/src/components/Common/Toggle.tsx | 17 +++- web/src/components/Note/ShareModal/index.tsx | 3 +- .../Subscription/Checkout/Form.scss | 8 +- .../components/Subscription/Checkout/Form.tsx | 13 ++- .../Subscription/Checkout/PaymentSummary.tsx | 36 ++++++++ .../Subscription/Checkout/Price.tsx | 28 ++++++ .../Subscription/Checkout/ScheduleSummary.tsx | 43 +++++++++ .../Subscription/Checkout/Sidebar.scss | 84 ++++++++++++----- .../Subscription/Checkout/Sidebar.tsx | 91 ++++++++++++------- 16 files changed, 294 insertions(+), 77 deletions(-) rename web/src/components/Common/PaymentInput/{CountrySelect.module.scss => CountrySelect.scss} (98%) create mode 100644 web/src/components/Subscription/Checkout/PaymentSummary.tsx create mode 100644 web/src/components/Subscription/Checkout/Price.tsx create mode 100644 web/src/components/Subscription/Checkout/ScheduleSummary.tsx diff --git a/jslib/src/services/payment.ts b/jslib/src/services/payment.ts index 8ceea3f4..d2539c02 100644 --- a/jslib/src/services/payment.ts +++ b/jslib/src/services/payment.ts @@ -22,8 +22,9 @@ export default function init(config: HttpClientConfig) { const client = getHttpClient(config); return { - createSubscription: ({ source, country }) => { + createSubscription: ({ yearly, source, country }) => { const payload = { + yearly, source, country }; diff --git a/pkg/server/handlers/subscription.go b/pkg/server/handlers/subscription.go index 354fb1a1..783447d8 100644 --- a/pkg/server/handlers/subscription.go +++ b/pkg/server/handlers/subscription.go @@ -41,8 +41,6 @@ import ( "github.com/stripe/stripe-go/webhook" ) -var proPlanID = "plus" - func getOrCreateStripeCustomer(tx *gorm.DB, user database.User) (*stripe.Customer, error) { if user.StripeCustomerID != "" { c, err := customer.Get(user.StripeCustomerID, nil) @@ -121,6 +119,7 @@ func createCustomerSubscription(customerID, planID string) (*stripe.Subscription } type createSubPayload struct { + Yearly bool `json:"yearly"` Source stripe.Source `json:"source"` Country string `json:"country"` } @@ -169,7 +168,14 @@ func (a *API) createSub(w http.ResponseWriter, r *http.Request) { return } - if _, err := createCustomerSubscription(customer.ID, proPlanID); err != nil { + var planID string + if payload.Yearly { + planID = os.Getenv("StripeYearlyPlanID") + } else { + planID = os.Getenv("StripeMonthlyPlanID") + } + + if _, err := createCustomerSubscription(customer.ID, planID); err != nil { tx.Rollback() HandleError(w, "creating subscription", err, http.StatusInternalServerError) return diff --git a/web/src/components/Common/PaymentInput/CountrySelect.module.scss b/web/src/components/Common/PaymentInput/CountrySelect.scss similarity index 98% rename from web/src/components/Common/PaymentInput/CountrySelect.module.scss rename to web/src/components/Common/PaymentInput/CountrySelect.scss index 3f2f184e..d7e6bf77 100644 --- a/web/src/components/Common/PaymentInput/CountrySelect.module.scss +++ b/web/src/components/Common/PaymentInput/CountrySelect.scss @@ -28,7 +28,7 @@ select.select { // match the height of the stripe element with other inputs padding: rem(7px) rem(12px); - + border-radius: 0; border: 2px solid $border-color; background-color: #ffffff; -webkit-font-smoothing: antialiased; diff --git a/web/src/components/Common/PaymentInput/CountrySelect.tsx b/web/src/components/Common/PaymentInput/CountrySelect.tsx index bdaa0946..f5dd589b 100644 --- a/web/src/components/Common/PaymentInput/CountrySelect.tsx +++ b/web/src/components/Common/PaymentInput/CountrySelect.tsx @@ -23,7 +23,7 @@ import classnames from 'classnames'; import { countries } from 'web/libs/countries'; -import styles from './CountrySelect.module.scss'; +import styles from './CountrySelect.scss'; interface Props { id: string; diff --git a/web/src/components/Common/PaymentInput/NameOnCard.tsx b/web/src/components/Common/PaymentInput/NameOnCard.tsx index 0436f825..e8619aa5 100644 --- a/web/src/components/Common/PaymentInput/NameOnCard.tsx +++ b/web/src/components/Common/PaymentInput/NameOnCard.tsx @@ -35,7 +35,7 @@ const NameOnCard: React.FunctionComponent = ({ labelClassName }) => { return ( -
+