Updates config setup due to env difficulties

BloomTech-Labs · May 1, 2019 · 620cae2 · 620cae2
1 parent 053d6c2
commit 620cae2
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 35 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1 @@
+{}
diff --git a/client/src/Components/LandingPage/Header.js b/client/src/Components/LandingPage/Header.js
@@ -25,7 +25,7 @@ export const HomePageHeader = ({ mobile }) => (
       />
       <Header
         as="h2"
-        content="One app to manage your properties."
+        content="One app to manage your rental properties."
         inverted
         style={{
           fontSize: mobile ? "1.5em" : "1.7em",

diff --git a/client/src/Components/Settings/billing.jsx b/client/src/Components/Settings/billing.jsx
@@ -32,6 +32,7 @@ export default class Billing extends Component {
 
   render() {
     const { nextBilling, billingPlan } = this.state;
+    console.log('stripeCustomerID', this.state.stripeCustomerID, billingPlan)
 
     let loading;
     if (this.state.billingPlan === "") {
@@ -43,35 +44,58 @@ export default class Billing extends Component {
           </Dimmer>
         </Segment>
       );
-    } else {
+    } else if(!this.state.stripeCustomerID){
       loading = (
-        <Segment>
-          <Header as="h2">Current Plan:</Header>
-          <Segment.Inline>
-            {" "}
-            <strong>{billingPlans[billingPlan].name}</strong>:{" "}
-            {billingPlans[billingPlan].description}
-          </Segment.Inline>
-          <FlexRow style={{ marginTop: "25px" }}>
-            <PlanModal
-              customerID={this.state.stripeCustomerID}
-              user={this.props.user}
-              properties={this.props.properties}
-            />
+        <React.Fragment>
+          <Header as="h1">Billing Details</Header>
+          <Segment>
+            <Header as="h2">Current Plan:</Header>
+            <Segment.Inline>
+              {" "}
+              <strong>{billingPlans[billingPlan].name}</strong>:{" "}
+              {billingPlans[billingPlan].description}
+            </Segment.Inline>
+            <FlexRow style={{ marginTop: "25px" }}>
+              <PlanModal
+                customerID={this.state.stripeCustomerID}
+                user={this.props.user}
+                properties={this.props.properties}
+              />
+            </FlexRow>
+          </Segment>
+        </React.Fragment>
+      );
+    }else {
+      loading = (
+        <React.Fragment>
+          <Header as="h1">Billing Details</Header>
+          <CreditCard user={this.props.user} />
+
+          <FlexRow style={{ marginTop: "25px", marginBottom: "35px" }}>
+            <p>Your next bill will be sent on {nextBilling}.</p>
           </FlexRow>
-        </Segment>
+
+          <Segment>
+            <Header as="h2">Current Plan:</Header>
+            <Segment.Inline>
+              {" "}
+              <strong>{billingPlans[billingPlan].name}</strong>:{" "}
+              {billingPlans[billingPlan].description}
+            </Segment.Inline>
+            <FlexRow style={{ marginTop: "25px" }}>
+              <PlanModal
+                customerID={this.state.stripeCustomerID}
+                user={this.props.user}
+                properties={this.props.properties}
+              />
+            </FlexRow>
+          </Segment>
+        </React.Fragment>
       );
     }
 
     return (
       <div>
-        <Header as="h1">Billing Details</Header>
-        <CreditCard user={this.props.user} />
-
-        <FlexRow style={{ marginTop: "25px", marginBottom: "35px" }}>
-          <p>Your next bill will be sent on {nextBilling}.</p>
-        </FlexRow>
-
         {loading}
       </div>
     );

diff --git a/client/src/Components/Settings/planModal.jsx b/client/src/Components/Settings/planModal.jsx
@@ -1,6 +1,7 @@
 import React, { Component } from "react";
-import { Header, Segment, Button, Modal, Grid } from "semantic-ui-react";
+import { Header, Segment, Button, Modal, Grid, Popup, Icon } from "semantic-ui-react";
 import { Elements, StripeProvider } from "react-stripe-elements";
+import { FlexRow } from '../../custom-components/index';
 import CheckoutForm from "./updatePlan";
 import { config } from "../../config/dev";
 
@@ -55,15 +56,40 @@ export default class PlanModal extends Component {
         </Button>
 
         <Modal open={open} onClose={this.close}>
-          <Modal.Header>Choose Your Monthly Billing Plan</Modal.Header>
+          <FlexRow style={{ marginTop: '2em', marginLeft: '3%' }}>
+          <Header as='h1'>
+            Choose Your Monthly Billing Plan
+          </Header>
+
+          <Popup
+              trigger={
+                <Icon
+                  name="info"
+                  size="small"
+                  style={{
+                    alignSelf: "flex-start",
+                    opacity: "0.8",
+                    paddingLeft: "1%"
+                  }}
+                />
+              }
+              content={`Roostr's monthly plan auto-updates each time you add or remove a property, but only runs a charge at the end of your monthly billing period. You will be notified of any new billing amount. Properties cannot be deleted until they have no upcoming reservations.`}
+              hideOnScroll
+              position="right center"
+              style={{ width: "30vw" }}
+            />
+          </FlexRow>
 
           <Modal.Content>
             <Segment>
               <Grid centered divided columns={2}>
                 <Grid.Column textAlign="center">
-                  <Header as="h4">Basic Plan</Header>
+                  <Header as="h4" style={{fontSize: '1.25em'}}>Basic Plan</Header>
+                  <p>
+                    <b>1</b> rental property
+                  </p>
                   <p>
-                    <b>1</b> free property
+                    <b>Free</b> every month
                   </p>
                   <Button
                     value="free"
@@ -76,7 +102,7 @@ export default class PlanModal extends Component {
                 </Grid.Column>
 
                 <Grid.Column textAlign="center">
-                  <Header as="h4">Upgraded Plan</Header>
+                  <Header as="h4" style={{fontSize: '1.25em'}}>Upgraded Plan</Header>
                   <p>
                     <b>2-9</b> properties, $8 per property
                   </p>

diff --git a/client/src/Components/Settings/updateBillingModal.jsx b/client/src/Components/Settings/updateBillingModal.jsx
@@ -74,7 +74,7 @@ export default class UpdateBillingModal extends Component {
               </Header>
               <Grid divided columns={2}>
                 <Form>
-                  <Grid.Column left>
+                  <Grid.Column>
                     <Grid row={2}>
                       <Grid.Row textAlign="left">
                         <Form.Field>

diff --git a/client/src/Components/Settings/updatePlan.jsx b/client/src/Components/Settings/updatePlan.jsx
@@ -104,6 +104,7 @@ class CheckoutForm extends Component {
             positive
             content="Update"
             onClick={this.submit}
+            style={{marginRight: '1%'}}
           />
         </Segment>
       </div>

diff --git a/server/src/config/index.js b/server/src/config/index.js
@@ -8,9 +8,16 @@ const baseConfig = {
   isTest: env === 'testing',
   port: 5000,
   secrets: {
-    jwt: process.env.JWT_SECRET,
+    jwt: 'local secrets are no fun',
     jwtExp: '100d'
-  }
+  },
+  stripe: {
+    stripe_pub: 'pk_test_Il1MCOR4thnvsuNgiwCaJzOw',
+    stripe_secret: 'sk_test_DNgeIDV0yXsWhahC6Wq4ZKg9',
+    stripe_plan: 'plan_EpLtM3j2EMurWg'
+  },
+  sendGrid:
+    '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'
 };
 
 let envConfig = {};

diff --git a/server/src/utils/stripe/stripe.controllers.js b/server/src/utils/stripe/stripe.controllers.js
@@ -4,9 +4,9 @@ import stripeModule from 'stripe';
 import { User } from '../../resources/user/user.model';
 import { Reservation } from '../../resources/reservations/reservations.model';
 
-const keyPublishable = config.keys.stripePublishable;
-const keySecret = config.keys.stripeSecret;
-const planid = config.keys.stripePlan;
+const keyPublishable = config.stripe.stripe_pub;
+const keySecret = config.stripe.stripe_secret;
+const planid = config.stripe.stripe_plan;
 
 const stripe = stripeModule(keySecret);
 
@@ -58,7 +58,7 @@ const createSubscription = async (err, customer, res) => {
         userObject.subscriptionID = subscription.id;
         const subscriptionItemID = subscription.items.data[0].id;
         userObject.subscriptionItemID = subscriptionItemID;
-
+        console.log('userObject', userObject)
         const updateUser = await updateUserWithStripeInfo(err, res);
         if (updateUser) {
           return res.status(200).send(updateUser);
@@ -88,6 +88,7 @@ const updateUserWithStripeInfo = async (err, res) => {
         .exec();
 
       if (user) {
+        console.log('updated user:', user)
         return res.status(201).send(user);
       }
     } catch (err) {