From fc9e5305994c5c98d7960acf78615878e1d16dfe Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Sat, 21 Nov 2015 18:09:41 -0500
Subject: gender dropdown

---
 StoneIsland/www/css/account.css                | 32 ++++++++++++++++++++++++++
 StoneIsland/www/index.html                     | 10 ++++++++
 StoneIsland/www/js/lib/auth/SignupView.js      |  1 +
 StoneIsland/www/js/sdk/account.js              |  4 ++--
 StoneIsland/www/js/sdk/address.js              |  2 +-
 StoneIsland/www/js/sdk/cart.js                 | 22 +++++++++---------
 StoneIsland/www/js/sdk/payment.js              |  4 ++--
 StoneIsland/www/js/sdk/shipping.js             |  8 +++----
 StoneIsland/www/js/vendor/view/serializable.js | 12 ++++++++++
 9 files changed, 75 insertions(+), 20 deletions(-)

diff --git a/StoneIsland/www/css/account.css b/StoneIsland/www/css/account.css
index 81ca44c2..9876b3c5 100644
--- a/StoneIsland/www/css/account.css
+++ b/StoneIsland/www/css/account.css
@@ -326,3 +326,35 @@ input.switch:checked + label:after {
   text-align: center;
 }
 
+.select-wrapper {
+  position: relative;
+  text-align: center;
+
+  font-size: 14px;
+  outline: none!important;
+  color: #000;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  height: 35px;
+  text-align: center;
+  margin: 0px auto;
+  display: block;
+  margin-top: 4px;
+  width: calc(100vw - 10px);
+  border: 1px solid #a9a9a9;
+}
+.select-wrapper select {
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0; left: 0;
+}
+.select-wrapper span {
+  position: relative;
+  top: 8px;
+  color: #888;
+}
+.select-wrapper.picked span {
+  color: #000;
+}
\ No newline at end of file
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index ac2e5bf2..0b79c15d 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -320,6 +320,16 @@
         <input type="email" name="Email" placeholder="EMAIL ADDRESS" required>
         <input type="email" name="ConfirmEmail" placeholder="CONFIRM EMAIL ADDRESS" required>
         <input type="date" name="Birthday" placeholder="BIRTHDAY" required>
+
+        <div class="select-wrapper">
+          <span>GENDER</span>
+          <select name="Gender">
+            <option value="NONE">Gender</option>
+            <option value="M">Male</option>
+            <option value="F">Female</option>
+          </select>
+        </div>
+
         <h2>PASSWORD</h2>
         <input type="password" name="Password" placeholder="PASSWORD (7 CHARACTERS OR MORE)" required>
         <input type="password" name="Password2" placeholder="CONFIRM PASSWORD" required>
diff --git a/StoneIsland/www/js/lib/auth/SignupView.js b/StoneIsland/www/js/lib/auth/SignupView.js
index a29b4657..b7095a98 100644
--- a/StoneIsland/www/js/lib/auth/SignupView.js
+++ b/StoneIsland/www/js/lib/auth/SignupView.js
@@ -36,6 +36,7 @@ var SignupView = FormView.extend({
     if (data.Password.length < 7) { errors.push([ "Password", "Password must be 7 characters or more." ]) }
     if (data.Password !== data.Password2) { errors.push([ "Password2", "Passwords don't match." ]) }
     if (data.Email.toLowerCase() !== data.ConfirmEmail.toLowerCase()) { errors.push([ "ConfirmEmail", "Email addresses don't match." ]) }
+    if (data.Gender === "NONE") { errors.push([ "Gender", "Please supply your gender." ]) }
     if (data.DataProfiling !== "true") { errors.push([ "DataProfiling", "You must consent to use this service." ]) }
     if (data.DataProfiling2 !== "true") { errors.push([ "DataProfiling2", "You must consent to use this service." ]) }
     if (! data.YooxLetter) { data.YooxLetter = "false" }
diff --git a/StoneIsland/www/js/sdk/account.js b/StoneIsland/www/js/sdk/account.js
index 3474dce0..a1678139 100644
--- a/StoneIsland/www/js/sdk/account.js
+++ b/StoneIsland/www/js/sdk/account.js
@@ -12,7 +12,7 @@ sdk.account = (function(){
         "x-yoox-appname": auth.appname,
         "x-yoox-api-key": auth.apikey,
       },
-      data: opt.data,
+      data: JSON.stringify( opt.data ),
       success: function(data){
         user_id = data['UserAccount']['UserId']
         access_token = data['UserAccount']['AccessToken']
@@ -33,7 +33,7 @@ sdk.account = (function(){
         "x-yoox-appname": auth.appname,
         "x-yoox-account-token": auth.access_token,
       },
-      data: opt.data,
+      data: JSON.stringify( opt.data ),
       success: function(data){
         // console.log(data)
         auth.user_id = data['UserFull']['UserId']
diff --git a/StoneIsland/www/js/sdk/address.js b/StoneIsland/www/js/sdk/address.js
index 35eaee56..f4e36376 100644
--- a/StoneIsland/www/js/sdk/address.js
+++ b/StoneIsland/www/js/sdk/address.js
@@ -9,7 +9,7 @@ sdk.address = (function(){
         "x-yoox-appname": auth.appname,
         "x-yoox-account-token": auth.access_token,
       },
-      data: opt.data,
+      data: JSON.stringify( opt.data ),
       success: function(data){
         // console.log(data)
         opt.success(data)
diff --git a/StoneIsland/www/js/sdk/cart.js b/StoneIsland/www/js/sdk/cart.js
index a8cfaf2b..cf21f640 100644
--- a/StoneIsland/www/js/sdk/cart.js
+++ b/StoneIsland/www/js/sdk/cart.js
@@ -32,10 +32,10 @@ sdk.cart = (function(){
         "x-yoox-appname": auth.appname,
         "x-yoox-cart-token": cart.token,
       },
-      data: {
+      data: JSON.stringify({
         "UserId": auth.user_id,
         "UserToken": auth.access_token,
-      },
+      }),
       success: function(data){
         opt.success(data)
       },
@@ -52,7 +52,7 @@ sdk.cart = (function(){
         "x-yoox-appname": auth.appname,
         "x-yoox-cart-token": cart.token,
       },
-      data: opt.data,
+      data: JSON.stringify( opt.data ),
       success: function(data){
         // console.log(data)
         opt.success(data)
@@ -71,7 +71,7 @@ sdk.cart = (function(){
         "x-yoox-appname": auth.appname,
         "x-yoox-cart-token": cart.token,
       },
-      data: {},
+      data: "{}",
       success: function(data){
         // console.log(data)
         opt.success(data)
@@ -113,10 +113,10 @@ sdk.cart = (function(){
         "x-yoox-appname": auth.appname,
         "x-yoox-cart-token": cart.token,
       },
-      data: {
+      data: JSON.stringify({
         "UserId": auth.user_id,
         "UserToken": auth.access_token,
-      },
+      }),
       success: function(data){
         // console.log(data)
         opt.success(data)
@@ -134,7 +134,7 @@ sdk.cart = (function(){
         "x-yoox-appname": auth.appname,
         "x-yoox-cart-token": cart.token,
       },
-      data: opt.data,
+      data: JSON.stringify( opt.data ),
       success: function(data){
         // console.log(data)
         opt.success(data)
@@ -152,7 +152,7 @@ sdk.cart = (function(){
         "x-yoox-appname": auth.appname,
         "x-yoox-cart-token": cart.token,
       },
-      data: opt.data,
+      data: JSON.stringify( opt.data ),
       success: function(data){
         // console.log(data)
         opt.success(data)
@@ -172,13 +172,13 @@ sdk.cart = (function(){
         "x-yoox-appname": auth.appname,
         "x-yoox-cart-token": cart.token,
       },
-      data: { // NB may be wrapped in UserCreditCard object
+      data: JSON.stringify({ // NB may be wrapped in UserCreditCard object
         "Guid": opt.guid,
         "UserId": auth.user_id,
         "AccessToken": auth.access_token,
         "Cvv": opt.cvv,
         "Issue": opt.issue,
-      },
+      }),
       success: function(data){
         // console.log(data)
         opt.success(data)
@@ -196,7 +196,7 @@ sdk.cart = (function(){
         "x-yoox-cart-token": cart.token,
         "x-yoox-device": auth.device,
       },
-      data: opt.data,
+      data: JSON.stringify( opt.data ),
       success: function(data){
         console.log(data)
         // order number is:
diff --git a/StoneIsland/www/js/sdk/payment.js b/StoneIsland/www/js/sdk/payment.js
index 63a66fee..d0951017 100644
--- a/StoneIsland/www/js/sdk/payment.js
+++ b/StoneIsland/www/js/sdk/payment.js
@@ -9,7 +9,7 @@ sdk.payment = (function(){
         "x-yoox-appname": auth.appname,
         "x-yoox-account-token": auth.access_token,
       },
-      data: opt.data,
+      data: JSON.stringify( opt.data ),
       success: function(data){
         // console.log(data)
         opt.success(data)
@@ -46,7 +46,7 @@ sdk.payment = (function(){
         "x-yoox-appname": auth.appname,
         "x-yoox-account-token": auth.access_token,
       },
-      data: {},
+      data: "{}",
       success: function(data){
         // console.log(data)
         opt.success(data)
diff --git a/StoneIsland/www/js/sdk/shipping.js b/StoneIsland/www/js/sdk/shipping.js
index 0325e17b..a4615531 100644
--- a/StoneIsland/www/js/sdk/shipping.js
+++ b/StoneIsland/www/js/sdk/shipping.js
@@ -30,9 +30,9 @@ sdk.shipping = (function() {
         "x-yoox-appname": auth.appname,
         "x-yoox-cart-token": sdk.cart.token,
       },
-      data: {
+      data: JSON.stringify({
         "Type": opt.type,
-      },
+      }),
       success: function(data){
         // console.log(data)
         opt.success(data)
@@ -72,9 +72,9 @@ sdk.shipping = (function() {
       },
       // temporarily commented out
       /*
-      data: {
+      data: JSON.stringify({
         "Id": opt.id,
-      },
+      }),
       */
       success: function(data){
         //console.log(data)
diff --git a/StoneIsland/www/js/vendor/view/serializable.js b/StoneIsland/www/js/vendor/view/serializable.js
index 3c069880..8de169ae 100644
--- a/StoneIsland/www/js/vendor/view/serializable.js
+++ b/StoneIsland/www/js/vendor/view/serializable.js
@@ -1,5 +1,9 @@
 var SerializableView = View.extend({
 
+  events: {
+    "change select": "update_select",
+  },
+
   serialize: function(){
     var fields = {}
     this.$("input[name], select[name], textarea[name]").each( function(){
@@ -15,6 +19,14 @@ var SerializableView = View.extend({
     })
   },
   
+  update_select: function(e){
+    var $target = $(e.currentTarget), value = $target.val()
+    var label = $($("select")[0]).find("option").filter(function(){ return this.value === value }).html()
+    
+    $target.parent().addClass("picked")
+    $target.parent().find("span").html(label)
+  },
+  
   validate: function(errors){
     var data = this.serialize()
     var errors = []
-- 
cgit v1.2.3-70-g09d2