fix(#2404): added brazilian price into packages list popup

Makefile

@@ -130,7 +130,7 @@ b-stage: build-b
 	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/b-wwwroot/
 
 c-stage: build-c
-	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/c-wwwroot/
+	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/c-wwwroot/
 
 d-stage: build-d
 	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/d-wwwroot/

src/features/BuyMatchPopup/components/PackagesList/styled.tsx

@@ -9,8 +9,11 @@ import {
   Period,
 } from 'features/Price/styled'
 
+import { devices } from '../../../../config'
+
 export const List = styled.ul`
   width: 100%;
+  height: 460px;
   overflow-y: auto;
   margin-top: 25px;
   padding: 0 40px;
@@ -19,6 +22,7 @@ export const List = styled.ul`
 
   @media (max-width: 1370px) {
     max-height: 415px;
+    height: auto;
   }
 
   @media (max-height: 768px) {
@@ -210,9 +214,14 @@ export const ScAutoRenewal = styled(PriceDetails)`
   line-height: 21px;
   font-size: 12px;
   text-transform: none;
-  white-space: nowrap;
   margin: 0;
   color: ${({ theme: { colors } }) => colors.text70};
+
+  @media ${devices.mobile} {
+    line-height: normal;
+    font-size: 10px;
+    text-align: center;
+  }
 `
 
 export const ScPriceContainer = styled.div`

src/features/Modal/styled.tsx

@@ -6,7 +6,7 @@ export const ModalContainer = styled.div`
   position: fixed;
   top: 0;
   left: 0;
-  height: 100vh;
+  height: 100%;
   width: 100vw;
   display: flex;
   align-items: center;

src/features/Price/components/BasePrice/index.tsx

@@ -0,0 +1,51 @@
+import { currencySymbols } from 'config'
+
+import { T9n } from 'features/T9n'
+
+import {
+  Prefix,
+  PriceAmount,
+  PriceDetails,
+  PriceWrapper,
+  Currency,
+  Period,
+} from '../../styled'
+
+type Props = {
+  amount: number,
+  className?: string,
+  currency?: string,
+  isFrom?: boolean,
+  perPeriod?: string | null,
+}
+
+export const BasePrice = ({
+  amount,
+  className,
+  currency = currencySymbols.RUB,
+  isFrom,
+  perPeriod,
+}: Props) => (
+  <PriceWrapper className={className}>
+    {
+      isFrom
+        ? (
+          <Prefix>
+            <T9n t='from_price' />
+          </Prefix>
+        )
+        : ''
+    }
+    <PriceAmount>{amount}</PriceAmount>
+    <PriceDetails>
+      <Currency>{currency}</Currency>
+      {
+        perPeriod && (
+          <Period>
+            / <T9n t={perPeriod} />
+          </Period>
+        )
+      }
+    </PriceDetails>
+  </PriceWrapper>
+)

src/features/Price/components/BrazilianPrice/index.tsx

@@ -0,0 +1,51 @@
+import { currencySymbols } from 'config'
+
+import { T9n } from 'features/T9n'
+
+import {
+  Prefix,
+  PriceDetails,
+  PriceWrapper,
+  Currency,
+  Period,
+} from '../../styled'
+import { PriceAmount } from './styled'
+
+type Props = {
+  amount: number,
+  className?: string,
+  currency?: string,
+  isFrom?: boolean,
+  perPeriod?: string | null,
+}
+
+export const BrazilianPrice = ({
+  amount,
+  className,
+  currency = currencySymbols.BRL,
+  isFrom,
+  perPeriod,
+}: Props) => (
+  <PriceWrapper className={className}>
+    {
+      isFrom
+        ? (
+          <Prefix>
+            <T9n t='from_price' />
+          </Prefix>
+        )
+        : ''
+    }
+    <PriceDetails>
+      <Currency>{currency}</Currency>
+      <PriceAmount>{amount}</PriceAmount>
+      {
+        perPeriod && (
+          <Period>
+            / <T9n t={perPeriod} />
+          </Period>
+        )
+      }
+    </PriceDetails>
+  </PriceWrapper>
+)

src/features/Price/components/BrazilianPrice/styled.tsx

@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+import { PriceAmount as BasePriceAmount } from '../../styled'
+
+export const PriceAmount = styled(BasePriceAmount)`
+  margin-right: 4px;
+`

src/features/Price/index.tsx

@@ -1,17 +1,10 @@
 import { currencySymbols } from 'config'
 
-import { T9n } from 'features/T9n'
+import { useMemo } from 'react'
+import { BasePrice } from './components/BasePrice'
+import { BrazilianPrice } from './components/BrazilianPrice'
 
-import {
+export type PriceProps = {
-  Prefix,
-  PriceAmount,
-  PriceDetails,
-  PriceWrapper,
-  Currency,
-  Period,
-} from './styled'
-
-type Props = {
   amount: number,
   className?: string,
   currency?: string,
@@ -19,33 +12,37 @@ type Props = {
   perPeriod?: string | null,
 }
 
-export const Price = ({
+export const Price: React.FC<PriceProps> = ({
   amount,
   className,
-  currency = currencySymbols.RUB,
+  currency,
   isFrom,
   perPeriod,
-}: Props) => (
+}) => {
-  <PriceWrapper className={className}>
+  const priceContent = useMemo(() => {
-    {
+    switch (currency) {
-      isFrom
+      case currencySymbols.BRL:
-        ? (
+        return (
-          <Prefix>
+          <BrazilianPrice
-            <T9n t='from_price' />
+            amount={amount}
-          </Prefix>
+            className={className}
+            currency={currency}
+            isFrom={isFrom}
+            perPeriod={perPeriod}
+          />
         )
-        : ''
+      default:
-    }
+        return (
-    <PriceAmount>{amount}</PriceAmount>
+          <BasePrice
-    <PriceDetails>
+            amount={amount}
-      <Currency>{currency}</Currency>
+            className={className}
-      {
+            currency={currency}
-        perPeriod && (
+            isFrom={isFrom}
-          <Period>
+            perPeriod={perPeriod}
-            / <T9n t={perPeriod} />
+          />
-          </Period>
         )
-      }
+    }
-    </PriceDetails>
+  }, [amount, className, currency, isFrom, perPeriod])
-  </PriceWrapper>
+
-)
+  return priceContent
+}

src/features/Price/styled.tsx

@@ -27,10 +27,6 @@ export const PriceAmount = styled.span`
   @media ${devices.tablet} {
     font-size: 36px;
   }
-
-  @media ${devices.mobile} {
-    margin-left: 8px;
-  }
 `
 
 export const PriceDetails = styled.span`