From ff1041bcb507783bdd5c2768b40a84cb84ead4a0 Mon Sep 17 00:00:00 2001 From: Rakov Roman Date: Thu, 5 May 2022 11:57:01 +0300 Subject: [PATCH] fix(#2404): added brazilian price into packages list popup --- Makefile | 2 +- .../components/PackagesList/styled.tsx | 11 ++- src/features/Modal/styled.tsx | 2 +- .../Price/components/BasePrice/index.tsx | 51 ++++++++++++++ .../Price/components/BrazilianPrice/index.tsx | 51 ++++++++++++++ .../components/BrazilianPrice/styled.tsx | 6 ++ src/features/Price/index.tsx | 67 +++++++++---------- src/features/Price/styled.tsx | 4 -- 8 files changed, 152 insertions(+), 42 deletions(-) create mode 100644 src/features/Price/components/BasePrice/index.tsx create mode 100644 src/features/Price/components/BrazilianPrice/index.tsx create mode 100644 src/features/Price/components/BrazilianPrice/styled.tsx diff --git a/Makefile b/Makefile index 5820759c..2fe29737 100644 --- a/Makefile +++ b/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/ diff --git a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx b/src/features/BuyMatchPopup/components/PackagesList/styled.tsx index 4575bbe3..f94c2d92 100644 --- a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx +++ b/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` diff --git a/src/features/Modal/styled.tsx b/src/features/Modal/styled.tsx index 66b0f288..9e5c4a99 100644 --- a/src/features/Modal/styled.tsx +++ b/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; diff --git a/src/features/Price/components/BasePrice/index.tsx b/src/features/Price/components/BasePrice/index.tsx new file mode 100644 index 00000000..4080f83a --- /dev/null +++ b/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) => ( + + { + isFrom + ? ( + + + + ) + : '' + } + {amount} + + {currency} + { + perPeriod && ( + + / + + ) + } + + +) diff --git a/src/features/Price/components/BrazilianPrice/index.tsx b/src/features/Price/components/BrazilianPrice/index.tsx new file mode 100644 index 00000000..2abce8a7 --- /dev/null +++ b/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) => ( + + { + isFrom + ? ( + + + + ) + : '' + } + + {currency} + {amount} + { + perPeriod && ( + + / + + ) + } + + +) diff --git a/src/features/Price/components/BrazilianPrice/styled.tsx b/src/features/Price/components/BrazilianPrice/styled.tsx new file mode 100644 index 00000000..69bbe934 --- /dev/null +++ b/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; +` diff --git a/src/features/Price/index.tsx b/src/features/Price/index.tsx index f40b6257..1c1d85d5 100644 --- a/src/features/Price/index.tsx +++ b/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 { - Prefix, - PriceAmount, - PriceDetails, - PriceWrapper, - Currency, - Period, -} from './styled' - -type Props = { +export type PriceProps = { amount: number, className?: string, currency?: string, @@ -19,33 +12,37 @@ type Props = { perPeriod?: string | null, } -export const Price = ({ +export const Price: React.FC = ({ amount, className, - currency = currencySymbols.RUB, + currency, isFrom, perPeriod, -}: Props) => ( - - { - isFrom - ? ( - - - +}) => { + const priceContent = useMemo(() => { + switch (currency) { + case currencySymbols.BRL: + return ( + ) - : '' - } - {amount} - - {currency} - { - perPeriod && ( - - / - + default: + return ( + ) - } - - -) + } + }, [amount, className, currency, isFrom, perPeriod]) + + return priceContent +} diff --git a/src/features/Price/styled.tsx b/src/features/Price/styled.tsx index dd90ce97..17ffcb42 100644 --- a/src/features/Price/styled.tsx +++ b/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`