Ott 424 subscription (#186)

* fix(ott-424): not finished yet

* feat(ott-424): rendered user subscriptions list

* fix(ott-424): deleted comments

* fix(ott-424): deleted background

* fix(ott-424): fixed imports

* fix(ott-424): fixed comments

* fix(ott-424): поправил комментарий

* fix(ott-424): edited according to Mirlan's comments

* fix(ott-424): deleted suffix from get subscriptions

* fix(ott-424): done

public/images/plusIcon.svg

@@ -0,0 +1,17 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<rect x="10" y="-0.00012207" width="2" height="20" fill="white"/>
+<rect x="1" y="8.99988" width="20" height="2" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0" y="-0.00012207" width="22" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

src/config/procedures.tsx

@@ -16,10 +16,13 @@ export const PROCEDURES = {
   get_user_favorites: 'get_user_favorites',
   get_user_info: 'get_user_info',
   get_user_match_second: 'get_user_match_second',
+  get_user_subscriptions: 'get_user_subscriptions',
   logout_user: 'logout_user',
   lst_c_country: 'lst_c_country',
   param_lexical: 'param_lexical',
+  save_user_custom_subscription: 'save_user_custom_subscription',
   save_user_favorite: 'save_user_favorite',
   save_user_info: 'save_user_info',
   save_user_match_second: 'save_user_match_second',
+  save_user_subscription: 'save_user_subscription',
 }

src/features/Combobox/styled.tsx

@@ -10,7 +10,6 @@ export const Label = styled.label`
 
 export const PopOver = styled.ul`
   position: absolute;
-  min-height: 70px;
   max-height: 400px;
   width: 100%;
   top: 55px;

src/features/Header/styled.tsx

@@ -9,6 +9,7 @@ export const HomeButtonLink = styled(Link)`
   background-image: url('/images/home-btn.svg');
   background-repeat: no-repeat;
   background-position: center;
+  
   &:hover{
     background-image: url('/images/home-btn-hover.svg');
     cursor:pointer;

src/features/UserAccount/components/PlusIcon/styled.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components/macro'
 export const PlusIconWrapper = styled.span`
   width: 20px;
   height: 20px;
-  margin: 0 22px;
+  margin-right: 22px;
-  background: url('/images/plusIcon.png') no-repeat;
+  margin-left: 10px;
+  background: url('/images/plusIcon.svg') no-repeat;
 `

src/features/UserAccount/components/UserAccountButton/styled.tsx

@@ -1,17 +1,20 @@
 import styled from 'styled-components/macro'
 
+import { outlineButtonStyles } from 'features/Common/Button'
+
 import { TextWrapper } from '../CardNumber/styled'
 
 export const UserAccountButtonWrapper = styled.div`
+  ${outlineButtonStyles};
+  width: 288px;
+  margin-top: 20px;
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  align-self: flex-start;
-  height: 48px;
+  color: white;
-  background-color: transparent;
+  font-weight: bold;
-  border: 1.5px solid #3F3F3F;
+  border-color: #0033CC;
-  border-radius: 2px;
+  background-color: #0033CC;
-  margin-top: 20px;
-  width: 100%;
 
   &:hover {
     cursor: pointer;
@@ -20,5 +23,5 @@ export const UserAccountButtonWrapper = styled.div`
 
 export const PlusIconTextWrapper = styled(TextWrapper)`
   font-size: 20px;
-  color: #494949;
+  color: white;
 `

src/features/UserAccount/components/UserAccountSubscription/index.tsx

@@ -1,14 +1,12 @@
 import React from 'react'
 
 import { Price } from 'features/Register/components/Price'
-import { Radio } from 'features/Common/Radio'
-import { Checkbox } from 'features/Common/Checkbox'
 
 import {
-  CheckboxWrapper,
   UserAccountSubscriptionWrapper,
   UserAccountBoldTextWrapper,
   UserAccountNormalTextWrapper,
+  Text,
 } from './styled'
 import { PriceWrapper } from '../CardNumber/styled'
 
@@ -25,8 +23,6 @@ type Props = {
 
 export const UserAccountSubscription = ({
   amount,
-  checked,
-  inputType,
   label,
   noMarginBottom,
   noMarginTop,
@@ -37,20 +33,7 @@ export const UserAccountSubscription = ({
     noMarginTop={noMarginTop}
     noMarginBottom={noMarginBottom}
   >
-    {inputType === 'radio' ? (
+    <Text>{label}</Text>
-      <Radio
-        checked={checked}
-        onChange={() => {}}
-      />
-    ) : (
-      <CheckboxWrapper>
-        <Checkbox
-          checked={checked}
-          onChange={() => {}}
-          label={label}
-        />
-      </CheckboxWrapper>
-    )}
     {packageName && <UserAccountBoldTextWrapper>{packageName}</UserAccountBoldTextWrapper>}
     {packageAction && <UserAccountNormalTextWrapper>{packageAction}</UserAccountNormalTextWrapper>}
     <PriceWrapper>

src/features/UserAccount/components/UserAccountSubscription/styled.tsx

@@ -32,8 +32,8 @@ export const UserAccountSubscriptionWrapperStyles = css<Props>`
   }};
   margin-top: ${({ noMarginTop }) => (noMarginTop ? '0' : '20px')};
   margin-bottom: ${({ noMarginBottom }) => (noMarginBottom ? '0' : '20px')};
+  padding-left: 20px;
   width: 100%;
-
   ${RadioLabel}::before {
     margin-left: 22px;
   }
@@ -51,7 +51,7 @@ export const UserAccountSubscriptionWrapper = styled.div`
 export const CheckboxWrapper = styled.div`
   ${CheckboxLabel} {
     font-weight: bold;
-    font-size: 14px;
+    font-size: 16px;
     line-height: 24px;
 
     &::before {
@@ -60,16 +60,26 @@ export const CheckboxWrapper = styled.div`
   }
 `
 
+export const Text = styled.p`
+  color: #fff;
+  font-size: 18px;
+  cursor: default;
+`
+
 export const UserAccountBoldTextWrapper = styled(TextWrapper)`
   color: #fff;
   font-weight: bold;
   font-size: 20px;
   margin-right: 24px;
+
+  &:hover {
+    cursor: default;
+}
 `
 
 export const UserAccountNormalTextWrapper = styled(TextWrapper)`
   color: #fff;
   font-weight: normal;
-  font-size: 14px;
+  font-size: 16px;
   margin-right: 24px;
 `

src/features/UserAccount/hooks/useUserInfo.tsx

@@ -42,7 +42,6 @@ export const useUserInfo = () => {
     (fieldName: string) => trim(readFormValue(fieldName)),
     [readFormValue],
   )
-
   const handleSubmit = useCallback(() => {
     if (validateForm()) {
       const firstname = readTrimmedValue(formIds.firstname)

src/features/UserAccount/hooks/useUserSubscriptions.tsx

@@ -0,0 +1,41 @@
+import {
+  useEffect,
+  useState,
+  useCallback,
+} from 'react'
+
+import map from 'lodash/map'
+
+import { getUserSubscriptions } from 'requests/getUserSubscriptions'
+
+import { useLexicsStore } from 'features/LexicsStore'
+
+export type Team = {
+  id: number,
+  name_eng: string,
+  name_rus: string,
+}
+
+export const useUserSubscriptions = () => {
+  const [subscriptions, setSubscriptions] = useState<Array<Team>>([])
+  const { suffix } = useLexicsStore()
+
+  type Names = 'name_eng' | 'name_rus'
+
+  useEffect(() => {
+    getUserSubscriptions().then((res) => {
+      setSubscriptions(res.custom[0].teams)
+    })
+  }, [])
+
+  const normalizeSubscriptions = useCallback(() => {
+    const nameKey = `name_${suffix}` as Names
+
+    return map(subscriptions, (team) => ({
+      ...team,
+      name: team[nameKey],
+    }))
+  }, [subscriptions, suffix])
+
+  return normalizeSubscriptions()
+}

src/features/UserAccount/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
 
+import map from 'lodash/map'
+
 import { userAccountLexics } from 'config/lexics/userAccount'
 import { formIds } from 'config/form'
 
@@ -15,7 +17,8 @@ import { UserAccountButton } from './components/UserAccountButton'
 import { PageTitle } from './components/PageTitle'
 import { UserAccountSubscription } from './components/UserAccountSubscription'
 import { TextNoBorder } from './components/TextNoBorder'
-import { useUserInfo } from './hooks'
+import { useUserInfo } from './hooks/useUserInfo'
+import { useUserSubscriptions } from './hooks/useUserSubscriptions'
 
 import {
   FormWrapper,
@@ -48,6 +51,8 @@ export const UserAccount = () => {
     updateFormValue,
   } = useUserInfo()
 
+  const subscriptions = useUserSubscriptions()
+
   return (
     <UserAccountComponentWrapper>
       <UserAccountWrapper>
@@ -181,49 +186,20 @@ export const UserAccount = () => {
               </UserAccountBlockTitle>
               <UserAccountSubscription
                 amount={1999}
-                checked
                 inputType='radio'
                 packageName='Базовая'
-                packageAction={translate('add_card')}
+                // packageAction={translate('add_card')}
-              />
+                // Ещё не решили что делать с add card
-              <UserAccountSubscription
+              />
-                noMarginBottom
+              {map(subscriptions, (subscription) => (
-                amount={1999}
+                <UserAccountSubscription
-                checked
+                  key={subscription.id}
-                inputType='checkbox'
+                  noMarginBottom
-                label='Российская Премьер-Лига'
+                  amount={1999}
-              />
+                  inputType='checkbox'
-              <UserAccountSubscription
+                  label={subscription.name}
-                noMarginTop
+                />
-                noMarginBottom
+              ))}
-                amount={499}
-                checked
-                inputType='checkbox'
-                label='Primera División'
-              />
-              <UserAccountSubscription
-                noMarginTop
-                noMarginBottom
-                amount={499}
-                checked
-                inputType='checkbox'
-                label='Primera División'
-              />
-              <UserAccountSubscription
-                noMarginTop
-                noMarginBottom
-                amount={499}
-                checked
-                inputType='checkbox'
-                label='Primera División'
-              />
-              <UserAccountSubscription
-                noMarginTop
-                amount={299}
-                checked
-                inputType='checkbox'
-                label='Manchester United'
-              />
               <UserAccountButton text={translate('select_subscription')} />
               <TextNoBorder
                 text={`${translate('next_debit')} 31.02.2020`}

src/requests/getUserSubscriptions.tsx

@@ -0,0 +1,38 @@
+import {
+  DATA_URL,
+  PROCEDURES,
+} from 'config'
+import { callApi, getResponseData } from 'helpers'
+
+const proc = PROCEDURES.get_user_subscriptions
+
+type Team = {
+  id: number,
+  name_eng: string,
+  name_rus: string,
+}
+
+type CustomSubscription = {
+  sport: number,
+  teams: Array<Team>,
+}
+
+type UserSubscription = {
+  custom: Array<CustomSubscription>,
+  id: number,
+  lexic: number,
+}
+
+export const getUserSubscriptions = (): Promise<UserSubscription> => {
+  const config = {
+    body: {
+      params: {},
+      proc,
+    },
+  }
+
+  return callApi({
+    config,
+    url: DATA_URL,
+  }).then(getResponseData(proc))
+}

src/requests/saveUserCustomSubscription.tsx

@@ -0,0 +1,43 @@
+import {
+  DATA_URL,
+  PROCEDURES,
+} from 'config'
+import { callApi } from 'helpers'
+
+const proc = PROCEDURES.save_user_custom_subscription
+
+type Response = {
+  _p_error: string | null,
+  _p_status: 1 | 2,
+}
+
+const responseStatus = {
+  FAILURE: 2,
+  SUCCESS: 1,
+}
+
+export const saveUserCustomSubscription = async () => {
+  const config = {
+    body: {
+      params: {
+        _p_action: 1,
+        _p_id: 1,
+        _p_sport: 1,
+        _p_status: 1,
+        _p_type: 1,
+        _p_user_id: 1,
+      },
+      proc,
+    },
+  }
+
+  const response: Response = await callApi({
+    config,
+    url: DATA_URL,
+  })
+
+  if (response._p_status === responseStatus.SUCCESS) {
+    return Promise.resolve(response)
+  }
+  return Promise.reject(response._p_error)
+}

src/requests/saveUserSubscription.tsx

@@ -0,0 +1,42 @@
+import {
+  DATA_URL,
+  PROCEDURES,
+} from 'config'
+import { callApi } from 'helpers'
+
+const proc = PROCEDURES.save_user_subscription
+
+type Type = {
+  subscriptionId: number,
+}
+
+type Response = {
+  _p_error: string | null,
+  _p_status: 1 | 2,
+}
+
+const responseStatus = {
+  FAILURE: 2,
+  SUCCESS: 1,
+}
+
+export const saveUserSubscription = async ({ subscriptionId }: Type) => {
+  const config = {
+    body: {
+      params: {
+        p_subscription_id: subscriptionId,
+      },
+      proc,
+    },
+  }
+
+  const response: Response = await callApi({
+    config,
+    url: DATA_URL,
+  })
+
+  if (response._p_status === responseStatus.SUCCESS) {
+    return Promise.resolve(response)
+  }
+  return Promise.reject(response._p_error)
+}