diff --git a/app/assets/stylesheets/_main-nav.scss b/app/assets/stylesheets/_main-nav.scss index fba77fc3..62deb412 100644 --- a/app/assets/stylesheets/_main-nav.scss +++ b/app/assets/stylesheets/_main-nav.scss @@ -5,7 +5,7 @@ align-items: center; padding: 1rem 5rem; - @media(min-width: 80rem) { + @media (min-width: 80rem) { justify-content: space-between; } @@ -17,7 +17,7 @@ margin-right: auto; } - @media(min-width: 80rem) { + @media (min-width: 80rem) { display: flex; } } @@ -27,10 +27,9 @@ li { margin: 0 2rem; - font-weight: bold; } - @media(min-width: 80rem) { + @media (min-width: 80rem) { display: flex; } } @@ -49,7 +48,7 @@ display: none; padding: 1rem 3rem; - @media(min-width: 80rem) { + @media (min-width: 80rem) { display: flex; } } diff --git a/app/controllers/plan_changes_controller.rb b/app/controllers/plan_changes_controller.rb index 1875b067..cdcc1d0e 100644 --- a/app/controllers/plan_changes_controller.rb +++ b/app/controllers/plan_changes_controller.rb @@ -9,25 +9,30 @@ def index redirect_to root_path unless current_user&.active_subscription @user = current_user + @pending_plan_change = @user.pending_plan_change @plans = Plan.all end - # GET /users/:user_id/plan_changes/new - # GET /users/:user_id/plan_changes/new.json - def new - @plan_change = UserPlanChange.new - end - # POST /users/:user_id/plan_changes # POST /users/:user_id/plan_changes.json def create - @plan = UserPlanChange.new(user_id: current_user.id, old_plan_id: plan_change_params[:old_plan_id], new_plan_id: plan_change_params[:new_plan_id], status: 'pending') + @plan_change = + current_user.user_plan_changes.new( + old_plan_id: plan_change_params[:old_plan_id], + new_plan_id: plan_change_params[:new_plan_id], + status: 'pending' + ) respond_to do |format| - if @plan.save - format.json { render json: @plan, status: :ok } + if @plan_change.save + format.html { render :index, notice: 'Plan changed successfully' } + format.json { render json: @plan_change, status: :ok } else - format.html { render :index } + format.html { render :index, notice: 'Error while changing plans' } + format.json do + render json: { errors: @plan_change.errors.full_messages }, + status: :ok + end end end end diff --git a/app/javascript/bundles/User/components/CurrentPlan.jsx b/app/javascript/bundles/User/components/CurrentPlan.jsx index d11b8459..892abd8f 100644 --- a/app/javascript/bundles/User/components/CurrentPlan.jsx +++ b/app/javascript/bundles/User/components/CurrentPlan.jsx @@ -18,16 +18,18 @@ const useStyles = makeStyles(theme => ({ const CHANGE_PLAN_ENDPOINT = id => `/users/${id}/plan_changes` -function CurrentPlanView ({ user, activePlan, plans }) { +function CurrentPlanView ({ user, currentPlan, pendingPlanChange, plans }) { const classes = useStyles() - const [changedPlan, setPlanChanged] = useState(false) + const [planChange, setPlanChange] = useState(pendingPlanChange) + const pendingPlanChangePlan = + planChange && plans.find(plan => plan.id == planChange.new_plan_id) const changePlan = async selectedPlanId => { try { - await fetch(CHANGE_PLAN_ENDPOINT(user.id), { + const response = await fetch(CHANGE_PLAN_ENDPOINT(user.id), { body: JSON.stringify({ plan_change: { - old_plan_id: activePlan.id, + old_plan_id: currentPlan.id, new_plan_id: selectedPlanId } }), @@ -38,9 +40,12 @@ function CurrentPlanView ({ user, activePlan, plans }) { }, method: 'post' }) - setPlanChanged(true) + + const json = await response.json() + setPlanChange(json) } catch (error) { - console.error(error) // TODO: Replace with sentry + console.error(error) + Sentry.captureException(error) } } @@ -49,16 +54,17 @@ function CurrentPlanView ({ user, activePlan, plans }) {

Change your susbcription

- The plan you're using to contribute is{' '} - {activePlan.name}. + Your membership tier is {currentPlan.name}.


-

Available plans

-

You can change your current plan for another one at anytime.

- {changedPlan && ( +

Available tiers

+

You can change your membership tier to another one at anytime.

+ {planChange && (

- We have changed your subscription successfully. + Your plan is scheduled to change to{' '} + {pendingPlanChangePlan.name}. The new amount will be + charged on your next billing cycle.

)} {plans.map(plan => { @@ -78,10 +84,10 @@ function CurrentPlanView ({ user, activePlan, plans }) { ) diff --git a/app/javascript/bundles/User/components/DonationsHistory.jsx b/app/javascript/bundles/User/components/DonationsHistory.jsx index c80d4c7f..a66d321f 100644 --- a/app/javascript/bundles/User/components/DonationsHistory.jsx +++ b/app/javascript/bundles/User/components/DonationsHistory.jsx @@ -34,7 +34,7 @@ const calcDonationTotal = donations => { return donations.reduce((acc, donation) => (acc += donation), 0) } -function DonationsView ({ activePlan, donations }) { +function DonationsView ({ currentPlan, donations }) { const classes = useStyles() const donatedAmount = calcDonationTotal( donations.map(donation => Number(donation.amount)) diff --git a/app/javascript/bundles/User/components/SubscriptionCancel.jsx b/app/javascript/bundles/User/components/SubscriptionCancel.jsx index 8b921003..8c6aefc3 100644 --- a/app/javascript/bundles/User/components/SubscriptionCancel.jsx +++ b/app/javascript/bundles/User/components/SubscriptionCancel.jsx @@ -48,7 +48,7 @@ const NoSubscriptionView = ({ user }) => { function SubscriptionCancelView ({ user, subscription, - activePlan, + currentPlan, isSubscriptionChanging }) { const classes = useStyles() @@ -95,8 +95,7 @@ function SubscriptionCancelView ({

You're subscribed

- The plan you're using to contribute is{' '} - {activePlan.name}. + Your membership tier is {currentPlan.name}.

{!isSubscriptionChanging && (