fix(#2038): add min price in sunscription

4 years ago · 4e84a6392e
parent d927435c21
commit 4e84a6392e
6 changed files with 64 additions and 21 deletions
--- a/src/config/lexics/indexLexics.tsx
+++ b/src/config/lexics/indexLexics.tsx
@ -9,6 +9,7 @@ const matchPopupLexics = {
  episode_duration: 13410,
  events: 1020,
  from_end_match: 15396,
+  from_price: 3992,
  from_start_match: 15395,
  gk: 3515,
  go_back_to_match: 13405,
--- a/src/features/BuyMatchPopup/components/SelectSubscription/index.tsx
+++ b/src/features/BuyMatchPopup/components/SelectSubscription/index.tsx
@ -31,6 +31,8 @@ import {
  Pass,
 } from '../SubscriptionsList/styled'

+import { Price } from './styled'
+
 export const ChooseSub = styled.div`
  font-weight: 600;
  font-size: 16px;
@ -87,27 +89,31 @@ export const SelectSubscriptionStep = () => {
      </Header>
      <Body marginTop={15}>
        <ChooseSubList>
-          {
-            map(initialSubscription.data, (subscription, index) => (
-              <ChooseSubItem
-                key={subscription.id}
-                onClick={() => onItemClick(subscription, index)}
-                active={active === index}
-              >
-                <InfoWrapper>
-                  <Pass>
-                    <T9n t={subscription.lexic} />
-                  </Pass>
-                  <Name>
-                    <T9n t={subscription.lexic2} />
-                  </Name>
-                  <Description>
-                    <T9n t={subscription.lexic3} />
-                  </Description>
-                </InfoWrapper>
-              </ChooseSubItem>
-            ))
-          }
+          {map(initialSubscription.data, (subscription, index) => (
+            <ChooseSubItem
+              key={subscription.id}
+              onClick={() => onItemClick(subscription, index)}
+              active={active === index}
+            >
+              <InfoWrapper>
+                <Pass>
+                  <T9n t={subscription.lexic} />
+                </Pass>
+                <Name>
+                  <T9n t={subscription.lexic2} />
+                </Name>
+                <Description>
+                  <T9n t={subscription.lexic3} />
+                </Description>
+              </InfoWrapper>
+
+              <Price
+                amount={subscription.min_price || 0}
+                currency={subscription.packages.month.all.currency_iso}
+                isFrom={Boolean(subscription.min_price)}
+              />
+            </ChooseSubItem>
+          ))}
        </ChooseSubList>
      </Body>
      <Footer>
--- a/src/features/BuyMatchPopup/components/SelectSubscription/styled.tsx
+++ b/src/features/BuyMatchPopup/components/SelectSubscription/styled.tsx
@ -0,0 +1,14 @@
+import styled from 'styled-components/macro'
+import { Price as BasePrice } from 'features/Price'
+import { PriceAmount, PriceDetails } from 'features/Price/styled'
+
+export const Price = styled(BasePrice)`
+  ${PriceAmount} {
+    font-size: 24px;
+    font-weight: normal;
+  }
+  ${PriceDetails} {
+    padding-top: 5px;
+    font-size: 12px;
+  }
+`
--- a/src/features/Price/index.tsx
+++ b/src/features/Price/index.tsx
@ -3,6 +3,7 @@ import { currencySymbols } from 'config'
 import { T9n } from 'features/T9n'

 import {
+  Prefix,
  PriceAmount,
  PriceDetails,
  PriceWrapper,
@ -14,6 +15,7 @@ type Props = {
  amount: number,
  className?: string,
  currency?: string,
+  isFrom?: boolean,
  perPeriod?: string | null,
 }

@ -21,9 +23,19 @@ export const Price = ({
  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>
--- a/src/features/Price/styled.tsx
+++ b/src/features/Price/styled.tsx
@ -55,3 +55,12 @@ export const Currency = styled.span`
 export const Period = styled.span`
  text-transform: uppercase;
 `
+
+export const Prefix = styled.span`
+  padding-top: 5px;
+  text-transform: lowercase;
+  line-height: 40px;
+  font-size: 12px;
+  font-weight: normal;
+  margin-right: 5px;
+`
--- a/src/requests/getSubscriptions.tsx
+++ b/src/requests/getSubscriptions.tsx
@ -13,6 +13,7 @@ export type SelectSubscriptionData = {
  lexic: number,
  lexic2: number,
  lexic3: number,
+  min_price?: number,
  packages: SelectSubscriptionPackages,
 }