feat(1525): added link to terms (#451)

src/config/lexics/userAccount.tsx

@@ -29,6 +29,7 @@ export const userAccountLexics = {
   payment: 13015,
   payment_info: 15059,
   phone: 1656,
+  privacy_policy_and_statement: 15404,
   remove: 15063,
   save_changes: 13017,
   select_subscription: 12583,

src/features/AuthStore/helpers.tsx

@@ -1,13 +1,15 @@
 import type { UserManagerSettings } from 'oidc-client'
 import { WebStorageStateStore } from 'oidc-client'
 
+export const AUTH_PROVIDER_URL = 'https://auth.instat.tv'
+
 export const getClientSettings = (): UserManagerSettings => ({
-  authority: 'https://auth.instat.tv/',
+  authority: AUTH_PROVIDER_URL,
   automaticSilentRenew: true,
   client_id: 'ott-web',
   filterProtocolClaims: false,
   loadUserInfo: false,
-  metadataUrl: 'https://auth.instat.tv/.well-known/openid-configuration',
+  metadataUrl: `${AUTH_PROVIDER_URL}/.well-known/openid-configuration`,
   redirect_uri: `${window.origin}/redirect`,
   response_mode: 'query',
   response_type: 'id_token token',

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

@@ -1,5 +1,6 @@
 import { formIds } from 'config/form'
 
+import { AUTH_PROVIDER_URL } from 'features/AuthStore/helpers'
 import { Combobox } from 'features/Combobox'
 import { Input } from 'features/Common'
 import { T9n } from 'features/T9n'
@@ -15,6 +16,7 @@ import {
   ButtonWrapper,
   PasswordInput,
   SectionTitle,
+  PrivacyPolicyLink,
 } from './styled'
 
 const labelWidth = 76
@@ -144,6 +146,12 @@ export const PersonalInfoForm = (props: Props) => {
         </SolidButton>
         <Error t={readFormError(formError) || ''} />
       </ButtonWrapper>
+      <PrivacyPolicyLink
+        target='_blank'
+        href={`${AUTH_PROVIDER_URL}/terms-and-conditions`}
+      >
+        <T9n t='privacy_policy_and_statement' />
+      </PrivacyPolicyLink>
     </Form>
   )
 }

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

@@ -94,3 +94,12 @@ export const PasswordInput = styled(PasswordInputBase)`
     margin-bottom: 1rem;
   }
 `
+
+export const PrivacyPolicyLink = styled.a`
+  display: inline-block;
+  margin-top: 4px;
+  font-size: 14px;
+  line-height: 18px;
+  color: #FFFFFF;
+  text-decoration: underline;
+`