Leve/sw 38/balance (#957)

* intermediate * payment options by design
StoriqaTeam · Mar 12, 2019 · 7d01a02 · 7d01a02
1 parent e42172d
commit 7d01a02
Show file tree

Hide file tree

Showing 41 changed files with 1,801 additions and 181 deletions.
diff --git a/.env.nightly b/.env.nightly
@@ -33,3 +33,5 @@ export REACT_APP_ZENDESK_TOKEN="yu5JvQvGXeCz0fc68AUwDcZAaQxAiaSIYHgwuD98"
 export REACT_APP_COUNTRY_HEADER="cf-ipcountry"
 
 export REACT_APP_STRIPE_API_KEY="pk_test_hH0fg7QCeCIE7ZmVN19h6l9C"
+
+export REACT_APP_WALLET_APPLE_URL="https://itunes.apple.com/ru/app/ture/id1448865994?mt=8"
diff --git a/.env.production b/.env.production
@@ -43,3 +43,5 @@ export REACT_APP_GENERATE_SOURCEMAP="false"
 export REACT_APP_COUNTRY_HEADER="cf-ipcountry"
 
 export REACT_APP_STRIPE_API_KEY="pk_live_ntT9fyeyExAz1z0RcrliUAkA"
+
+export REACT_APP_WALLET_APPLE_URL="https://itunes.apple.com/ru/app/ture/id1448865994?mt=8"
diff --git a/.env.stable b/.env.stable
@@ -33,3 +33,5 @@ export REACT_APP_ZENDESK_TOKEN="yu5JvQvGXeCz0fc68AUwDcZAaQxAiaSIYHgwuD98"
 export REACT_APP_COUNTRY_HEADER="cf-ipcountry"
 
 export REACT_APP_STRIPE_API_KEY="pk_test_hH0fg7QCeCIE7ZmVN19h6l9C"
+
+export REACT_APP_WALLET_APPLE_URL="https://itunes.apple.com/ru/app/ture/id1448865994?mt=8"
diff --git a/.env.stage b/.env.stage
@@ -37,3 +37,5 @@ export REACT_APP_COUNTRY_HEADER="cf-ipcountry"
 export REACT_APP_STRIPE_API_KEY="pk_test_hH0fg7QCeCIE7ZmVN19h6l9C"
 
 export REACT_APP_RRPARTNERID="5ba8ba0797a5281c5c422860"
+
+export REACT_APP_WALLET_APPLE_URL="https://itunes.apple.com/ru/app/ture/id1448865994?mt=8"
diff --git a/src/components/Confirmation/Confirmation.js b/src/components/Confirmation/Confirmation.js
@@ -1,6 +1,7 @@
 // @flow strict
 
 import React, { PureComponent } from 'react';
+import type { Node } from 'react';
 
 import { Button } from 'components/common/Button';
 import { Modal } from 'components/Modal';
@@ -16,6 +17,8 @@ type PropsType = {
   onConfirm: () => void,
   onCancel: () => void,
   handleCloseModal: () => void,
+  children?: Node,
+  disableConfirm?: boolean,
 };
 
 class Confirmation extends PureComponent<PropsType> {
@@ -25,6 +28,8 @@ class Confirmation extends PureComponent<PropsType> {
     onConfirm: () => {},
     onCancel: () => {},
     handleCloseModal: () => {},
+    disableConfirm: false,
+    children: undefined,
   };
 
   render() {
@@ -37,6 +42,8 @@ class Confirmation extends PureComponent<PropsType> {
       title,
       description,
       showModal,
+      disableConfirm,
+      children,
     } = this.props;
     return (
       <Modal
@@ -46,11 +53,18 @@ class Confirmation extends PureComponent<PropsType> {
           <aside styleName="container" data-test="confirmationPopup">
             <h2 styleName="title">{title}</h2>
             <p styleName="description">{description}</p>
+            {children != null && <div styleName="body">{children}</div>}
             <div styleName="buttons">
               <Button wireframe big onClick={onCancel} dataTest="cancel">
                 {cancelText}
               </Button>
-              <Button big onClick={onConfirm} pink dataTest="confirm">
+              <Button
+                big
+                onClick={onConfirm}
+                pink
+                disabled={disableConfirm}
+                dataTest="confirm"
+              >
                 {confirmText}
               </Button>
             </div>

diff --git a/src/components/Confirmation/Confirmation.scss b/src/components/Confirmation/Confirmation.scss
@@ -4,7 +4,7 @@
   padding: 4rem 3.5rem;
   background: $color_white;
   max-width: 100%;
- 
+
   @media (min-width: $md) {
     max-width: 82rem;
     padding: 9rem;
@@ -36,7 +36,10 @@
   margin-bottom: 6.25rem;
   text-align: center;
   max-width: 54rem;
+}
 
+.body {
+  margin-bottom: 6.25rem;
 }
 
 .buttons {
@@ -63,5 +66,4 @@
       margin-right: 2rem;
     }
   }
-
-}
+}
diff --git a/src/components/Icon/Icon.js b/src/components/Icon/Icon.js
@@ -119,6 +119,7 @@ const iconsMap = {
   leftArrowSlider: <LeftArrowSlider />,
   login: <Login />,
   logo: <Logo />,
+  //
   logout: <Logout />,
   magnifier: <Magnifier />,
   minus: <Minus />,

diff --git a/src/components/Icon/svg/logo.svg b/src/components/Icon/svg/logo.svg
diff --git a/src/components/common/Button/Button.scss b/src/components/common/Button/Button.scss
@@ -59,10 +59,10 @@
 }
 
 .disabled {
-  background-color: $color_grey_trivial;
-  border: 1px solid $color_grey_trivial;
-  color: $color_grey_minor;
-  cursor: default;
+  background-color: $color_grey_trivial !important;
+  border: 1px solid $color_grey_trivial !important;
+  color: $color_grey_minor !important;
+  cursor: default !important;
 }
 
 .iconic {
@@ -153,14 +153,14 @@
     }
   }
 
-  &.disabled {
-    opacity: 0.3;
-
-    &:hover {
-      color: $color_blue;
-      background: transparent;
-    }
-  }
+  //&.disabled {
+  //  opacity: 0.3;
+  //
+  //  &:hover {
+  //    color: $color_blue;
+  //    background: transparent;
+  //  }
+  //}
 
   &.pink {
     border: 1px solid $color_pink;

diff --git a/src/components/common/Tabs/Tabs.scss b/src/components/common/Tabs/Tabs.scss
@@ -13,9 +13,7 @@
 .label {
   position: relative;
   padding: 0 2rem 2rem;
-  margin-bottom: -0.25rem;
   cursor: pointer;
-  //text-transform: uppercase;
 
   .labelText {
     color: $color_grey_minor;

diff --git a/src/index.js b/src/index.js
@@ -17,22 +17,22 @@ if (process.env.BROWSER && buildApp) {
         ReactDOM.hydrate(App, document.getElementById('root'));
       }
       // $FlowIgnore
-      if (process.env.NODE_ENV === 'development' && module.hot) {
-        module.hot.accept('./components/entry.js', () => {
-          import('./components/entry.js')
-            .then(newInstance => {
-              const rebuildApp = newInstance.default;
-              rebuildApp()
-                .then(NewApp => {
-                  ReactDOM.render(NewApp, document.getElementById('root'));
-                  return true;
-                })
-                .catch(log.error);
-              return true;
-            })
-            .catch(log.error);
-        });
-      }
+      // if (process.env.NODE_ENV === 'development' && module.hot) {
+      //   module.hot.accept('./components/entry.js', () => {
+      //     import('./components/entry.js')
+      //       .then(newInstance => {
+      //         const rebuildApp = newInstance.default;
+      //         rebuildApp()
+      //           .then(NewApp => {
+      //             ReactDOM.render(NewApp, document.getElementById('root'));
+      //             return true;
+      //           })
+      //           .catch(log.error);
+      //         return true;
+      //       })
+      //       .catch(log.error);
+      //   });
+      // }
       return true;
     })
     .catch(log.error);

diff --git a/src/pages/Checkout/PaymentInfo/PaymentInfo.js b/src/pages/Checkout/PaymentInfo/PaymentInfo.js
@@ -206,7 +206,7 @@ class PaymentInfo extends PureComponent<PropsType, StateType> {
       <div>
         Don’t you have one yet?{' '}
         <a
-          href="https://itunes.apple.com/ru/app/ture/id1448865994?mt=8"
+          href={process.env.REACT_APP_WALLET_APPLE_URL}
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -285,7 +285,9 @@ class PaymentInfo extends PureComponent<PropsType, StateType> {
                   </div>
                   <div styleName="paymentInfo">
                     <div styleName="addressTitle">Address</div>
-                    <div styleName="address">{wallet}</div>
+                    <div styleName="address" data-test="walletNumberField">
+                      {wallet}
+                    </div>
                     <div styleName="amountTitle">Amount</div>
                     <div styleName="amount">
                       <strong>{`${formatPrice(amount)} ${