Merge pull request #60 from mjrousos/Issue56-CartViewFormUsability

Update check out form to be editable and only visible to authenticated users
Glimpse · Jun 14, 2017 · d706171 · d706171
2 parents 57f9ecf + 2257025
commit d706171
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 24 deletions.
diff --git a/client/src/utils/api/auth-api.js b/client/src/utils/api/auth-api.js
@@ -4,17 +4,17 @@ import { request } from '../api';
 export function getUserProfile() {
 
     console.log('User profile requested.');
-    createGetUserProfileRequestAction();
+    profileActions.createGetUserProfileRequestAction();
 
     request({url: 'users/auth/user_profile'},
         (err, res) => {
             if (err || !res.profile) {
                 console.log('Request for user profile failed.');
-                createGetUserProfileFailAction();
+                profileActions.createGetUserProfileFailAction();
                 return;
             }
             console.log('Request for user profile succeeded.');
-            createGetUserProfileSuccessAction(res.profile);
+            profileActions.createGetUserProfileSuccessAction(res.profile);
         }
     );
 }
diff --git a/client/src/views/normal-cart-view/normal-cart-view.js b/client/src/views/normal-cart-view/normal-cart-view.js
@@ -75,13 +75,64 @@ export default React.createClass({
         userProfile: React.PropTypes.object
     },
 
+    getInitialState() {
+        return {
+            fullName: this.props.userProfile != null && this.props.userProfile.isAuthenticated ? this.props.userProfile.fullName : '',
+            email: this.props.userProfile != null && this.props.userProfile.isAuthenticated ? this.props.userProfile.email : ''
+        };
+    },
+
+    onNameChanged(e) {
+        this.setState({ fullName: e.target.value });
+    },
+
+    onEmailChanged(e) {
+        this.setState({ email: e.target.value });
+    },
+
     render() {
         const items = this.props.items;
-        const fullName = this.props.userProfile != null && this.props.userProfile.isAuthenticated ? this.props.userProfile.fullName : '';
-        const email = this.props.userProfile != null && this.props.userProfile.isAuthenticated ? this.props.userProfile.email : '';
 
         // TODO: items is an array of IDs, need to look up or convert to whole objects
         const itemRows = items.map((item) => <ItemRow item={item} key={item.id} />);
+
+        var rightPane = null;
+        if (this.props.userProfile != null && this.props.userProfile.isAuthenticated) {
+            // If the user is logged in, include the checkout form in the right pane
+            rightPane = 
+                <div className="gs-cartview-normal-rightpane">
+                    <div className="gs-cartview-normal-rightpane-label">Name</div>
+                    <input placeholder="required"
+                        value={this.state.fullName}
+                        onChange={this.onNameChanged}
+                        className="gs-cartview-normal-rightpane-input" name="checkout-name" min="1"/>
+                    <div className="gs-cartview-normal-rightpane-label">Email Address</div>
+                    <input placeholder="required"
+                        name="email"
+                        value={this.state.email}
+                        onChange={this.onEmailChanged}
+                        className="gs-cartview-normal-rightpane-input" name="checkout-email" type="email" min="1"/>
+                    <div className="gs-cartview-normal-rightpane-disclaimer">
+                        *You will be able to pick up your stickers right after the order is processed. No physical address is required.
+                    </div>
+                    <div className="gs-cartview-normal-rightpane-submitcontainer">
+                        <button type="submit" className="gs-cartview-normal-rightpane-submit">
+                            <Icon className="gs-cartview-normal-rightpane-submit-icon" name="lock" size="lg" />
+                            <div>Print my stickers</div>
+                        </button>
+                    </div>
+                </div>
+        } else {
+            // If the user is not logged in, provide a button to redirect to the login page
+            rightPane = 
+                    <div className="gs-cartview-normal-rightpane">
+                        <div className="gs-cartview-normal-rightpane-label">Log In to Print Stickers</div>
+                        <div className="gs-cartview-normal-rightpane-submitcontainer">
+                            <a className="gs-cartview-normal-rightpane-submit" href="/users/auth?p=B2C_1_SignInAndSignUp">Log In</a>
+                        </div>
+                    </div>
+        }
+
         return (
             <div className="gs-cartview-normal">
 
@@ -103,25 +154,7 @@ export default React.createClass({
                         <input type="hidden" name="token" value={token} />
                     </div>
 
-                    <div className="gs-cartview-normal-rightpane">
-                        <div className="gs-cartview-normal-rightpane-label">Name</div>
-                        <input placeholder="required"
-                            value={fullName}
-                            className="gs-cartview-normal-rightpane-input" name="checkout-name" min="1"/>
-                        <div className="gs-cartview-normal-rightpane-label">Email Address</div>
-                        <input placeholder="required"
-                            value={email}
-                            className="gs-cartview-normal-rightpane-input" name="checkout-email" type="email" min="1"/>
-                        <div className="gs-cartview-normal-rightpane-disclaimer">
-                            *You will be able to pick up your stickers right after the order is processed. No physical address is required.
-                        </div>
-                        <div className="gs-cartview-normal-rightpane-submitcontainer">
-                            <button type="submit" className="gs-cartview-normal-rightpane-submit">
-                                <Icon className="gs-cartview-normal-rightpane-submit-icon" name="lock" size="lg" />
-                                <div>Print my stickers</div>
-                            </button>
-                        </div>
-                    </div>
+                    {rightPane}
                 </form>
 
             </div>