Leve/hotfix/31 01 edits (#909)

* fix various edits * edits for order page
StoriqaTeam · Feb 1, 2019 · fd5e7d2 · fd5e7d2
1 parent 53175e5
commit fd5e7d2
Show file tree

Hide file tree

Showing 31 changed files with 594 additions and 171 deletions.
diff --git a/src/components/Confirmation/Confirmation.scss b/src/components/Confirmation/Confirmation.scss
@@ -45,18 +45,19 @@
   justify-content: space-evenly;
   align-items: center;
   flex-direction: column;
-  max-width: 54rem;
+  margin: 0 auto;
+
   button {
     width: 100%;
   }
+
   button:first-child {
     margin-bottom: 2rem;
   }
+
   @media (min-width: $md) {
     flex-direction: row;
-    // button {
-    //   width: initial;
-    // }
+
     button:first-child {
       margin-bottom:0;
       margin-right: 2rem;

diff --git a/src/components/common/Tabs/Tabs.js b/src/components/common/Tabs/Tabs.js
@@ -11,6 +11,7 @@ type PropsType = {
   selected: number,
   children: Array<React.Node>,
   onClick: (selected: number) => void,
+  withoutPanel?: boolean,
 };
 
 class Tabs extends React.Component<PropsType> {
@@ -44,11 +45,13 @@ class Tabs extends React.Component<PropsType> {
   };
 
   render() {
-    const { selected } = this.props;
+    const { selected, withoutPanel } = this.props;
     return (
       <div styleName="container">
         {this.renderTitles()}
-        <div styleName="panel">{this.props.children[selected]}</div>
+        {!withoutPanel && (
+          <div styleName="panel">{this.props.children[selected]}</div>
+        )}
       </div>
     );
   }

diff --git a/src/pages/BuyNow/BuyNow.js b/src/pages/BuyNow/BuyNow.js
@@ -86,6 +86,7 @@ export type CalculateBuyNowType = {
   totalCount: number, // количество
   deliveryCost: number, // цена доставки
   subtotalWithoutDiscounts: number, // цена всех продуктов без доставки и без скидки
+  subtotal: number, // цена всех продуктов без доставки
 };
 
 type StateType = {
@@ -141,6 +142,7 @@ class BuyNow extends Component<PropsType, StateType> {
       totalCount,
       deliveryCost,
       subtotalWithoutDiscounts,
+      subtotal,
     } = calculateBuyNow;
     const { deliveryAddressesFull } = me;
     const addresses = addressesToSelect(deliveryAddressesFull);
@@ -161,6 +163,7 @@ class BuyNow extends Component<PropsType, StateType> {
         totalCount,
         deliveryCost,
         subtotalWithoutDiscounts,
+        subtotal,
       },
       changeCountLoading: false,
       couponCodeValue: '',
@@ -367,6 +370,7 @@ class BuyNow extends Component<PropsType, StateType> {
             totalCount,
             deliveryCost,
             subtotalWithoutDiscounts,
+            subtotal,
           } = calculateBuyNow;
           this.setState({
             step: 2,
@@ -378,6 +382,7 @@ class BuyNow extends Component<PropsType, StateType> {
               totalCount,
               deliveryCost,
               subtotalWithoutDiscounts,
+              subtotal,
             },
           });
           return true;
@@ -599,6 +604,7 @@ class BuyNow extends Component<PropsType, StateType> {
           totalCount,
           deliveryCost,
           subtotalWithoutDiscounts,
+          subtotal,
         } = calculateBuyNow;
         this.setState(
           {
@@ -609,6 +615,7 @@ class BuyNow extends Component<PropsType, StateType> {
               totalCount,
               deliveryCost,
               subtotalWithoutDiscounts,
+              subtotal,
             },
             changeCountLoading: false,
           },
@@ -673,6 +680,7 @@ class BuyNow extends Component<PropsType, StateType> {
           totalCount,
           deliveryCost,
           subtotalWithoutDiscounts,
+          subtotal,
         } = calculateBuyNow;
         this.setState(
           {
@@ -683,6 +691,7 @@ class BuyNow extends Component<PropsType, StateType> {
               totalCount,
               deliveryCost,
               subtotalWithoutDiscounts,
+              subtotal,
             },
             successCouponCodeValue: couponCodeValue,
             isLoadingCouponButton: false,
@@ -742,6 +751,7 @@ class BuyNow extends Component<PropsType, StateType> {
           totalCount,
           deliveryCost,
           subtotalWithoutDiscounts,
+          subtotal,
         } = calculateBuyNow;
         this.setState(
           {
@@ -752,6 +762,7 @@ class BuyNow extends Component<PropsType, StateType> {
               totalCount,
               deliveryCost,
               subtotalWithoutDiscounts,
+              subtotal,
             },
             deliveryPackage: pkg,
           },

diff --git a/src/pages/BuyNow/CartStore/CartStore.js b/src/pages/BuyNow/CartStore/CartStore.js
@@ -7,7 +7,7 @@ import { Input, Button, Rating } from 'components/common';
 import { Icon } from 'components/Icon';
 import { withShowAlert } from 'components/Alerts/AlertContext';
 import { Container, Row, Col } from 'layout';
-import { formatPrice, getNameText, convertSrc } from 'utils';
+import { formatPrice, getNameText, convertSrc, checkCurrencyType } from 'utils';
 
 import type { AvailableDeliveryPackageType } from 'relay/queries/fetchAvailableShippingForUser';
 import type { AllCurrenciesType } from 'types';
@@ -177,13 +177,18 @@ class CartStore extends PureComponent<PropsType> {
                         <thin styleName="through">
                           {`${formatPrice(
                             buyNowData.totalCostWithoutDiscounts || 0,
+                            checkCurrencyType(currency) === 'fiat'
+                              ? 2
+                              : undefined,
                           )} ${currency || ''}`}
                         </thin>
                       </div>
                     )}
                     <div styleName="value">
-                      {`${formatPrice(buyNowData.totalCost || 0)} ${currency ||
-                        ''}`}
+                      {`${formatPrice(
+                        buyNowData.totalCost || 0,
+                        checkCurrencyType(currency) === 'fiat' ? 2 : undefined,
+                      )} ${currency || ''}`}
                     </div>
                   </div>
                 </div>

diff --git a/src/pages/BuyNow/CartStore/ProductInfo.js b/src/pages/BuyNow/CartStore/ProductInfo.js
@@ -211,9 +211,8 @@ class ProductInfo extends PureComponent<PropsType> {
               />
               <CartProductAttribute
                 title="Price"
-                value={`${formatPrice(
-                  buyNowData.subtotalWithoutDiscounts || 0,
-                )} ${currency || ''}`}
+                value={`${formatPrice(buyNowData.subtotal || 0)} ${currency ||
+                  ''}`}
               />
               <CartProductAttribute
                 title="Delivery"

diff --git a/src/pages/BuyNow/CheckoutSidebar/CheckoutSidebar.js b/src/pages/BuyNow/CheckoutSidebar/CheckoutSidebar.js
@@ -3,7 +3,7 @@
 import React, { PureComponent } from 'react';
 
 import { ContextDecorator } from 'components/App';
-import { formatPrice, getExchangePrice } from 'utils';
+import { formatPrice, getExchangePrice, checkCurrencyType } from 'utils';
 import { Button } from 'components/common/Button';
 import { Row, Col } from 'layout';
 
@@ -60,7 +60,8 @@ class CheckoutSidebar extends PureComponent<PropsType> {
                   <div styleName="label">Subtotal</div>
                   <div styleName="value">
                     {`${formatPrice(
-                      buyNowData.subtotalWithoutDiscounts || 0,
+                      buyNowData.subtotal || 0,
+                      checkCurrencyType(currency) === 'fiat' ? 2 : undefined,
                     )} ${currency}`}
                   </div>
                 </div>
@@ -69,7 +70,10 @@ class CheckoutSidebar extends PureComponent<PropsType> {
                 <div styleName="attributeContainer">
                   <div styleName="label">Delivery</div>
                   <div styleName="value">
-                    {`${formatPrice(buyNowData.deliveryCost || 0)} ${currency}`}
+                    {`${formatPrice(
+                      buyNowData.deliveryCost || 0,
+                      checkCurrencyType(currency) === 'fiat' ? 2 : undefined,
+                    )} ${currency}`}
                   </div>
                 </div>
               </Col>
@@ -80,6 +84,7 @@ class CheckoutSidebar extends PureComponent<PropsType> {
                     <div styleName="value">
                       {`−${formatPrice(
                         buyNowData.couponsDiscounts || 0,
+                        checkCurrencyType(currency) === 'fiat' ? 2 : undefined,
                       )} ${currency}`}
                     </div>
                   </div>
@@ -95,7 +100,10 @@ class CheckoutSidebar extends PureComponent<PropsType> {
                   </div>
                   <div styleName="totalCost">
                     <div styleName="value bold">
-                      {`${formatPrice(buyNowData.totalCost || 0)} ${currency}`}
+                      {`${formatPrice(
+                        buyNowData.totalCost || 0,
+                        checkCurrencyType(currency) === 'fiat' ? 2 : undefined,
+                      )} ${currency}`}
                     </div>
                     {exchangePrice != null && (
                       <div styleName="exchangePrice">{exchangePrice}</div>

diff --git a/src/pages/Cart/Cart.js b/src/pages/Cart/Cart.js
@@ -184,20 +184,7 @@ class Cart extends Component<PropsType, StateType> {
         <Container withoutGrow>
           <Row withoutGrow>
             <Col size={12}>
-              <div styleName="header">{t.myCart}</div>
-              {!emptyCart &&
-                !noTabs && (
-                  <div styleName="tabs">
-                    <Tabs selected={selectedTab} onClick={this.handleClickTab}>
-                      <div label="Fiat" amount={totalCountFiat}>
-                        This is the Fiat panel
-                      </div>
-                      <div label="Crypto" amount={totalCountCrypto}>
-                        This is the Crypto panel
-                      </div>
-                    </Tabs>
-                  </div>
-                )}
+              {/* <div styleName="header">{t.myCart}</div> */}
               <div ref={ref => this.setStoresRef(ref)}>
                 <Row withoutGrow>
                   {emptyCart ? (
@@ -210,6 +197,21 @@ class Cart extends Component<PropsType, StateType> {
                     </Col>
                   ) : (
                     <Col size={12} lg={8} xl={9}>
+                      {!noTabs && (
+                        <div styleName="tabs">
+                          <Tabs
+                            selected={selectedTab}
+                            onClick={this.handleClickTab}
+                            withoutPanel
+                          >
+                            <div label={t.cart} amount={totalCountFiat} />
+                            <div
+                              label={t.cryptoCart}
+                              amount={totalCountCrypto}
+                            />
+                          </Tabs>
+                        </div>
+                      )}
                       <div styleName="wrapper">
                         <div styleName="storeContainer">
                           {stores.map(store => (

diff --git a/src/pages/Cart/Cart.scss b/src/pages/Cart/Cart.scss
@@ -1,7 +1,7 @@
 @import "../../styles/variables.scss";
 
 .container {
-  margin: 2rem 0 4rem;
+  //margin: 2rem 0 4rem;
   overflow: hidden;
 }
 

diff --git a/src/pages/Cart/CartStore/index.js b/src/pages/Cart/CartStore/index.js
@@ -16,6 +16,7 @@ import {
   convertSrc,
   log,
   fromRelayError,
+  checkCurrencyType,
 } from 'utils';
 
 import { SetCouponInCartMutation } from 'relay/mutations';
@@ -245,12 +246,18 @@ class CartStore extends Component<PropsType, StateType> {
                         <thin styleName="through">
                           {`${formatPrice(
                             store.totalCostWithoutDiscounts || 0,
+                            checkCurrencyType(currency) === 'fiat'
+                              ? 2
+                              : undefined,
                           )} ${currency || ''}`}
                         </thin>
                       </div>
                     )}
                     <div styleName="value">
-                      {`${formatPrice(store.totalCost || 0)} ${currency || ''}`}
+                      {`${formatPrice(
+                        store.totalCost || 0,
+                        checkCurrencyType(currency) === 'fiat' ? 2 : undefined,
+                      )} ${currency || ''}`}
                     </div>
                   </div>
                 </div>

diff --git a/src/pages/Cart/ProductInfo/index.js b/src/pages/Cart/ProductInfo/index.js
@@ -8,7 +8,7 @@ import ShowMore from 'components/ShowMore';
 import Stepper from 'components/Stepper';
 import { Input } from 'components/common/Input';
 import { Container, Col, Row } from 'layout';
-import { formatPrice, convertCountries } from 'utils';
+import { formatPrice, convertCountries, checkCurrencyType } from 'utils';
 import { AppContext } from 'components/App';
 
 import type { AvailableDeliveryPackageType } from 'relay/queries/fetchAvailableShippingForUser';
@@ -295,20 +295,23 @@ class ProductInfo extends PureComponent<PropsType> {
                 <CartProductAttribute
                   title={t.price}
                   value={`${formatPrice(
-                    product.subtotalWithoutDiscounts || 0,
+                    product.subtotal || 0,
+                    checkCurrencyType(currency) === 'fiat' ? 2 : undefined,
                   )} ${currency || ''}`}
                 />
                 <CartProductAttribute
                   title={t.delivery}
                   value={`${formatPrice(
                     product.deliveryCost || 0,
+                    checkCurrencyType(currency) === 'fiat' ? 2 : undefined,
                   )} ${currency || ''}`}
                 />
                 {product.couponDiscount !== 0 && (
                   <CartProductAttribute
                     title={t.couponDiscount}
                     value={`−${formatPrice(
                       product.couponDiscount || 0,
+                      checkCurrencyType(currency) === 'fiat' ? 2 : undefined,
                     )} ${currency || ''}`}
                   />
                 )}

diff --git a/src/pages/Cart/i18n.js b/src/pages/Cart/i18n.js
@@ -6,12 +6,16 @@ import type { Translation } from 'translation/utils';
 
 type TranslationDicType = {|
   myCart: string,
+  cart: string,
+  cryptoCart: string,
 |};
 type TranslationsBundleType = Translation<TranslationDicType>;
 
 const translations: TranslationsBundleType = {
   en: {
     myCart: 'My Cart',
+    cart: 'CART',
+    cryptoCart: 'CRYPTO CART',
   },
 };
 

diff --git a/src/pages/Checkout/Checkout.js b/src/pages/Checkout/Checkout.js
@@ -481,14 +481,12 @@ class Checkout extends Component<PropsType, StateType> {
       invoice,
       currencyType,
     } = this.state;
-
     const actualCart = currencyType === 'CRYPTO' ? cart.crypto : cart.fiat;
-
     const stores = pipe(pathOr([], ['stores', 'edges']), map(path(['node'])))(
       actualCart,
     );
-
     const emptyCart = stores.length === 0;
+
     return (
       <CheckoutContext.Provider
         value={{
@@ -582,6 +580,9 @@ class Checkout extends Component<PropsType, StateType> {
                         {step === 3 &&
                           currencyType === 'FIAT' && (
                             <PaymentInfoFiat
+                              restCartCount={
+                                cart.crypto ? cart.crypto.totalCount : 0
+                              }
                               invoice={invoice}
                               me={this.props.me}
                             />
@@ -590,6 +591,9 @@ class Checkout extends Component<PropsType, StateType> {
                           invoice &&
                           currencyType === 'CRYPTO' && (
                             <PaymentInfo
+                              restCartCount={
+                                cart.fiat ? cart.fiat.totalCount : 0
+                              }
                               invoiceId={invoice.id}
                               me={this.props.me}
                             />