Merge pull request #418 from commercetools/rework-personal-details

Rework personal details
commercetools · Jun 16, 2016 · b75e850 · b75e850
2 parents 9753d00 + fb130ce
commit b75e850
Show file tree

Hide file tree

Showing 14 changed files with 193 additions and 166 deletions.
diff --git a/input/assets/js/main.js b/input/assets/js/main.js
@@ -506,14 +506,12 @@ function closeForm(formClassName) {
 function initializeEditableData(formClassName) {
    var formWrapper = $(formClassName);
    if (formWrapper.hasClass("in")) {
-      console.log('has class IN');
       openForm(formClassName);
    } else {
-     console.log('CLOSES');
       closeForm(formClassName);
    }
-   $("." + formClassName + "-show-btn").click(function(){ console.log('SHOWS BTN CLICKED'); openForm(formClassName); });
-   $("." + formClassName + "-hide-btn").click(function(){ console.log('HIDE BTN CLICKED'); closeForm(formClassName); });
+   $("." + formClassName + "-show-btn").click(function(){ openForm(formClassName); });
+   $("." + formClassName + "-hide-btn").click(function(){ closeForm(formClassName); });
 }
 
 initializeEditableData("personal-details-edit");

diff --git a/input/i18n/de/my-account.yaml b/input/i18n/de/my-account.yaml
@@ -10,6 +10,7 @@ myAccountSidebar:
   signOut: Abmelden
   changePassword: Passwort ändern
 personalDetails:
+  title: Ihre Benutzerdaten
   shopAllBtn: Alles bestellen
   updateBtn: Details aktualisieren
   cancelBtn: Abbrechen
@@ -21,7 +22,15 @@ personalDetails:
     subtitle: Neue Saison, neuer Style
   welcomeBack: Willkommen zurück
   welcomeDescription: Für einen besseren Kundenservice geben Sie bitte Ihre Kundennummer an.
-  personalDetailsTitle: Ihre Benutzerdaten
+  subscribedToNewsletter: Subscribed to weekly newsletter
+  personalDetailsForm:
+    title: Title
+    firstName: First Name
+    lastName: Last Name
+    phone: Telephone Number
+    email: Email Address
+    password: Password
+    confirmPassword: Confirm Password
 addressBook:
   title : Addressbuch
   defaultAddresses:

diff --git a/input/i18n/en/my-account.yaml b/input/i18n/en/my-account.yaml
@@ -10,6 +10,7 @@ myAccountSidebar:
   signOut: Sign Out
   changePassword: Change password
 personalDetails:
+  title: Your Personal Details
   shopAllBtn: Shop All
   updateBtn: Update Details
   cancelBtn: Cancel
@@ -21,7 +22,16 @@ personalDetails:
     subtitle: Make the great days happen
   welcomeBack: Welcome back
   welcomeDescription: for an even better customer service please provide your customer number
-  personalDetailsTitle: Your Personal Details
+  subscribedToNewsletter: Subscribed to weekly newsletter
+  personalDetailsForm:
+    title: Title
+    firstName: First Name
+    lastName: Last Name
+    phone: Telephone Number
+    email: Email Address
+    password: Password
+    confirmPassword: Confirm Password
+    subscribeToNewsletter: Please add me to the <a href="">Sunrise Newsletter</a>
 addressBook:
   title : Address Book
   defaultAddresses:

diff --git a/input/templates/my-account-change-password.hbs b/input/templates/my-account-change-password.hbs
@@ -29,8 +29,10 @@
                     </div>
                     <form id="form-change-password" action="{{@root.meta._links.changePassword.href}}" method="POST">
                       <input type="hidden" name="csrfToken" value="{{@root.meta.csrfToken}}"/>
-                      {{> form/global-messages messages=content.changePasswordForm.messages}}
-                      {{> form/global-errors errors=content.changePasswordForm.errors}}
+                      <div class="row">
+                        {{> form/global-messages messages=content.changePasswordForm.messages}}
+                        {{> form/global-errors errors=content.changePasswordForm.errors}}
+                      </div>
                       <div class="row">
                         <div class="col-sm-6">
                           <div class="form-sections">

diff --git a/input/templates/my-account-edit-address.hbs b/input/templates/my-account-edit-address.hbs
@@ -32,8 +32,10 @@
                   <form id="form-edit-my-address-book" action="{{@root.meta._links.myAddressBookEditAddressSubmit.href}}" method="POST">
                     <input type="hidden" name="csrfToken" value="{{@root.meta.csrfToken}}"/>
                     <input type="hidden" name="id" value="{{content.editAddressForm.id}}"/>
-                    {{> form/global-messages messages=content.editAddressForm.messages}}
-                    {{> form/global-errors errors=content.editAddressForm.errors}}
+                    <div class="row">
+                      {{> form/global-messages messages=content.editAddressForm.messages}}
+                      {{> form/global-errors errors=content.editAddressForm.errors}}
+                    </div>
                     <div class="row">
                       <div class="col-sm-12">
                         {{> myaccount/my-address-book-address-form form=content.editAddressForm}}

diff --git a/input/templates/my-account-login.hbs b/input/templates/my-account-login.hbs
@@ -17,11 +17,11 @@
     <div class="login-signup-box-wrapper">
       <div class="row">
         <div class="col-sm-6">
-          {{> myaccount/login-box}}
+          {{> myaccount/login-box form=content.logInForm}}
         </div>
         <div class="col-sm-6">
           <div class="signup-box-mobile">
-            {{> myaccount/signup-box}}
+            {{> myaccount/signup-box form=content.signUpForm}}
           </div>
         </div>
       </div>

diff --git a/input/templates/my-account-login.json b/input/templates/my-account-login.json
@@ -2,7 +2,22 @@
     "header" : { "$ref" : "common/header.json" },
     "footer" : { "$ref" : "common/footer.json" },
     "content" : {
-        "salutations" : { "$ref" : "form/choose-title-1.json" }
+      "signUpForm" : {
+        "salutations" : { "$ref" : "form/choose-title-1.json" },
+        "firstName" : "Bruce",
+        "lastName" : "Wayne",
+        "email" : "[email protected]",
+        "subscribeToNewsletter" : true,
+        "agreeToTerms" : true,
+        "messages" : { "$ref" : "form/messages.json" },
+        "errors" : { "$ref" : "form/errors.json" }
+      },
+      "logInForm" : {
+        "username" : "[email protected]",
+        "rememberMe" : true,
+        "messages" : { "$ref" : "form/messages.json" },
+        "errors" : { "$ref" : "form/errors.json" }
+      }
     },
     "meta" : { "$ref" : "common/meta.json" }
 }
diff --git a/input/templates/my-account-new-address.hbs b/input/templates/my-account-new-address.hbs
@@ -31,8 +31,10 @@
                   </div>
                   <form id="form-add-my-address-book" action="{{@root.meta._links.myAddressBookAddAddressSubmit.href}}" method="POST">
                     <input type="hidden" name="csrfToken" value="{{@root.meta.csrfToken}}"/>
-                    {{> form/global-messages messages=content.newAddressForm.messages}}
-                    {{> form/global-errors errors=content.newAddressForm.errors}}
+                    <div class="row">
+                      {{> form/global-messages messages=content.newAddressForm.messages}}
+                      {{> form/global-errors errors=content.newAddressForm.errors}}
+                    </div>
                     <div class="row">
                       <div class="col-sm-12">
                         {{> myaccount/my-address-book-address-form form=content.newAddressForm}}

diff --git a/input/templates/my-account-personal-details.hbs b/input/templates/my-account-personal-details.hbs
@@ -1,3 +1,4 @@
+<!-- start my-account-personal-details.hbs -->
 <!DOCTYPE html>
 <html lang="en">
 
@@ -24,83 +25,79 @@
                 <div class="personal-details">
                   <div class="personal-details-text-one">
                     <span>{{i18n "my-account:personalDetails.welcomeBack"}}</span>
-                    <span>{{content.welcomeName}}</span>
+                    <span>{{content.customerInfo.customer.firstName}}</span>
                   </div>
                   <div class="personal-details-text-two">
                     {{i18n "my-account:personalDetails.welcomeDescription"}}<br>
-                    <span class="customer-number">{{content.customerNumber}}</span>
+                    <span class="customer-number">{{content.customerInfo.customer.customerNumber}}</span>
                   </div>
-                  <div class="personal-details-landing-wrapper personal-details-edit-hide">
                     <div class="personal-details-title">
-                      {{i18n "my-account:personalDetails.personalDetailsTitle"}}
+                        <span>{{i18n "my-account:personalDetails.title"}}</span>
+                        <span class="pull-right required-text personal-details-edit-show">{{i18n "main:form.required"}}*</span>
                     </div>
-                    <div class="personal-details-box">
-                      <div>{{content.personalDetails.name}}</div>
-                      <div>{{content.personalDetails.phone}}</div>
-                      <div>{{content.personalDetails.email}}</div><br>
-                      <div>{{content.personalDetails.subscribed}}</div>
-                      <div class="personal-details-box-edit">
-                        <button class="personal-details-edit-show-btn"><img src="{{meta.assetsPath}}/img/edit-1.png" alt="edit icon">{{i18n "main:form.edit"}}</button>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="personal-details-edit personal-details-edit-show in">
-                    <form id="form-personal-details" action="{{@root.meta._links.personalDetails.href}}" method="POST">
-                     <input type="hidden" name="csrfToken" value="{{@root.meta.csrfToken}}"/>
-                     <input type="hidden" name="id" value="{{content.address.id}}"/>
-                      <div class="personal-details-title">
-                        <span>{{i18n "my-account:personalDetails.personalDetailsTitle"}}</span>
-                        <span class="pull-right required-text">{{i18n "main:form.required"}}*</span>
-                      </div>
-                      <div class="row">
-                        <div class="col-sm-12">
-                          <div class="form-sections">
-                            <span class="form-labels">{{content.editPersonalDetails.title}}</span><br>
-                            <select class="select-input" name="" id="">
-                              {{#each content.editPersonalDetails.titleOptions}}
-                                <option value="{{value}}" {{#if disabled}}disabled{{/if}} {{#if selected}}selected{{/if}}>{{text}}</option>
-                              {{/each}}
-                            </select>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="row">
-                        <div class="col-sm-6">
-                          <div class="form-sections">
-                            <span class="form-labels">{{content.editPersonalDetails.firstName}}*</span><br>
-                            <input class="form-inputs" type="text">
+
+                    <div class="personal-details-edit-hide">
+                        <div class="personal-details-box">
+                          <div>
+                              {{content.customerInfo.customer.title}}
+                              {{content.customerInfo.customer.firstName}}
+                              {{content.customerInfo.customer.lastName}}
                           </div>
-                          <div class="form-sections">
-                            <span class="form-labels">{{content.editPersonalDetails.primaryPhone}}</span><br>
-                            <input class="form-inputs" type="text"><br>
-                            <span class="form-notes">{{content.editPersonalDetails.formNotesOne}}</span>
+                          <div>{{content.customerInfo.customer.email}}</div><br>
+                            {{#if content.customerInfo.subscribed}}
+                            <div>{{i18n "my-account:personalDetails.subscribedToNewsletter"}}</div>
+                            {{/if}}
+                          <div class="personal-details-box-edit">
+                            <button class="personal-details-edit-show-btn"><img src="{{@root.meta.assetsPath}}img/edit-1.png" alt="edit icon">{{i18n "main:form.edit"}}</button>
                           </div>
                         </div>
-                        <div class="col-sm-6">
-                          <div class="form-sections">
-                            <span class="form-labels">{{content.editPersonalDetails.secondName}}*</span><br>
-                            <input class="form-inputs" type="text">
+                  </div>
+
+                  <div class="personal-details-edit personal-details-edit-show {{#if content.personalDetailsForm.errors}}in{{/if}}">
+                      <form id="form-edit-personal-details" action="{{@root.meta._links.editMyPersonalDetails.href}}" method="POST">
+                          <input type="hidden" name="csrfToken" value="{{@root.meta.csrfToken}}"/>
+                          <div class="row">
+                            {{> form/global-messages messages=content.personalDetailsForm.messages}}
+                            {{> form/global-errors errors=content.personalDetailsForm.errors}}
                           </div>
-                          <div class="form-sections">
-                            <span class="form-labels">{{content.editPersonalDetails.email}}*</span><br>
-                            <input class="form-inputs" type="text"><br>
-                            <span class="form-notes">{{content.editPersonalDetails.formNotesTwo}}</span>
+                          <div class="row">
+                            <div class="col-sm-12">
+                              {{> form/choose-title containerClass="form-sections" selectId="personal-details-title-select" selectName="title" options=content.personalDetailsForm.salutations}}
+                            </div>
                           </div>
+                          <div class="row">
+                            <div class="col-sm-6">
+                              <div class="form-sections">
+                                <span class="form-labels">{{i18n "my-account:personalDetails.personalDetailsForm.firstName"}}*</span><br>
+                                <input class="form-inputs" name="firstName" value="{{content.personalDetailsForm.firstName}}" type="text">
+                              </div>
+                              <div class="form-sections">
+                                <span class="form-labels">{{i18n "my-account:personalDetails.personalDetailsForm.email"}}*</span><br>
+                                <input class="form-inputs" name="email" value="{{content.personalDetailsForm.email}}" type="email"><br>
+                                <span class="form-notes"></span>
+                              </div>
+                            </div>
+                            <div class="col-sm-6">
+                              <div class="form-sections">
+                                <span class="form-labels">{{i18n "my-account:personalDetails.personalDetailsForm.lastName"}}*</span><br>
+                                <input class="form-inputs" name="lastName" value="{{content.personalDetailsForm.lastName}}" type="text">
+                              </div>
+                            </div>
+                          </div>
+                        <hr class="light-grey-hr">
+                        <div class="personal-details-newsletter">
+                          <span>
+                            <input name="subscribeToNewsletter" type="checkbox" {{#if personalDetails.personalDetailsForm.subscribeToNewsletter}}checked{{/if}}/>
+                            {{i18n "my-account:personalDetails.personalDetailsForm.subscribeToNewsletter"}}
+                          </span>
+                        </div>
+                        <div class="personal-details-edit-btn">
+                          <span>
+                            <button type="submit" class="update-btn">{{i18n "my-account:personalDetails.updateBtn"}}</button>
+                            <button type="button" class="cancel-btn personal-details-edit-hide-btn">{{i18n "my-account:personalDetails.cancelBtn"}}</button>
+                          </span>
                         </div>
-                      </div>
-                      <hr class="light-grey-hr">
-                      <div class="personal-details-newsletter">
-                        <span>
-                          <input type="checkbox">{{content.addMeTo}} <a href="">{{content.newsletter}}</a>
-                        </span>
-                      </div>
-                      <div class="personal-details-edit-btn">
-                        <span>
-                          <button type="submit" class="update-btn">{{i18n "my-account:personalDetails.updateBtn"}}</button>
-                          <button class="cancel-btn personal-details-edit-hide-btn">{{i18n "my-account:personalDetails.cancelBtn"}}</button>
-                        </span>
-                      </div>
-                    </form>
+                      </form>
                   </div>
                 </div>
               </div>
@@ -148,3 +145,4 @@
 </body>
 
 </html>
+<!-- end my-account-personal-details.hbs -->
diff --git a/input/templates/my-account-personal-details.json b/input/templates/my-account-personal-details.json
@@ -2,46 +2,19 @@
 	"header" : { "$ref" : "common/header.json" },
 	"footer" : { "$ref" : "common/footer.json" },
 	"content" : {
-		"welcomeName" : "Bruce Wayne",
-		"customerNumber" : "1010101069691010",
-		"personalDetailsRequired" : "Required",
-		"personalDetails" : {
-			"name" : "Mr. Bruce Wayne",
-			"password" : "Password: ********",
-			"phone" : "Phone: +49 123 123 123 123",
-			"email" : "[email protected]",
-			"subscribed" : "Subscribed to weekly newsletter",
-			"editBtn" : "Edit"
+		"customerInfo" : {
+			"customer" : { "$ref" : "common/customer-1.json" },
+			"subscribed" : true
 		},
-		"editPersonalDetails" : {
-			"title" : "Title",
-			"titleOptions" : [
-				{
-					"text" : "Choose your title",
-					"value" : "choose your title",
-					"disabled" : true,
-					"selected" : true
-				},
-				{
-					"text" : "Mr.",
-					"value" : "mr",
-					"selected" : false
-				},
-				{
-					"text" : "Mrs.",
-					"value" : "mrs",
-					"selected" : false
-				}
-			],
-			"firstName" : "First Name",
-			"primaryPhone" : "Primary Telephone Number",
-			"formNotesOne" : "Please provide your lorem ipsun, bla bla bla, Please provide your lorem ipsun, bla bla bla",
-			"secondName" : "Second Name",
-			"email" : "Email Address",
-			"formNotesTwo" : "Please provide your lorem ipsun, bla bla bla, Please provide your lorem ipsun, bla bla bla"
-		},
-		"addMeTo" : "Please add me to the",
-		"newsletter" : "SUNRISE Newsletter"
+		"personalDetailsForm" : {
+			"salutations" : { "$ref" : "form/choose-title-1.json" },
+			"firstName" : "Bruce",
+			"lastName" : "Wayne",
+			"email" : "[email protected]",
+			"subscribeToNewsletter" : true,
+			"messages" : { "$ref" : "form/messages.json" },
+			"errors" : { "$ref" : "form/errors.json" }
+		}
 	},
-    "meta" : { "$ref" : "common/meta.json" }
+  "meta" : { "$ref" : "common/meta.json" }
 }
diff --git a/input/templates/partials/common/customer-1.json b/input/templates/partials/common/customer-1.json
@@ -0,0 +1,7 @@
+{
+  "customerNumber" : "1010101069691010",
+  "email" : "[email protected]",
+  "firstName" : "Bruce",
+  "lastName" : "Wayne",
+  "title" : "Mr."
+}