feat(#789): share highlight

public/images/share.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M15 17.8332C14.3056 17.8332 13.7153 17.5901 13.2292 17.104C12.7431 16.6179 12.5 16.0276 12.5 15.3332C12.5 15.2359 12.5069 15.1351 12.5208 15.0307C12.5347 14.9262 12.5556 14.8326 12.5833 14.7498L6.70833 11.3332C6.47222 11.5415 6.20833 11.7048 5.91667 11.8232C5.625 11.9415 5.31944 12.0004 5 11.9998C4.30556 11.9998 3.71528 11.7568 3.22917 11.2707C2.74306 10.7846 2.5 10.1943 2.5 9.49984C2.5 8.80539 2.74306 8.21512 3.22917 7.729C3.71528 7.24289 4.30556 6.99984 5 6.99984C5.31944 6.99984 5.625 7.059 5.91667 7.17734C6.20833 7.29567 6.47222 7.45873 6.70833 7.6665L12.5833 4.24984C12.5556 4.1665 12.5347 4.07289 12.5208 3.969C12.5069 3.86511 12.5 3.76428 12.5 3.6665C12.5 2.97206 12.7431 2.38178 13.2292 1.89567C13.7153 1.40956 14.3056 1.1665 15 1.1665C15.6944 1.1665 16.2847 1.40956 16.7708 1.89567C17.2569 2.38178 17.5 2.97206 17.5 3.6665C17.5 4.36095 17.2569 4.95123 16.7708 5.43734C16.2847 5.92345 15.6944 6.1665 15 6.1665C14.6806 6.1665 14.375 6.10761 14.0833 5.98984C13.7917 5.87206 13.5278 5.70873 13.2917 5.49984L7.41667 8.9165C7.44444 8.99984 7.46528 9.09373 7.47917 9.19817C7.49306 9.30261 7.5 9.40317 7.5 9.49984C7.5 9.59706 7.49306 9.69789 7.47917 9.80234C7.46528 9.90678 7.44444 10.0004 7.41667 10.0832L13.2917 13.4998C13.5278 13.2915 13.7917 13.1284 14.0833 13.0107C14.375 12.8929 14.6806 12.8337 15 12.8332C15.6944 12.8332 16.2847 13.0762 16.7708 13.5623C17.2569 14.0484 17.5 14.6387 17.5 15.3332C17.5 16.0276 17.2569 16.6179 16.7708 17.104C16.2847 17.5901 15.6944 17.8332 15 17.8332Z"
+        fill="white" />
+</svg>

src/config/env.tsx

@@ -8,7 +8,7 @@ export const isValidEnv = (value: string): value is ENVType => (
   Boolean(value) && includes(apis, value)
 )
 
-export const ENV = process.env.REACT_APP_ENV || 'staging'
+export const ENV = process.env.REACT_APP_ENV || 'production'
 
 export const isAvailable = true
 

src/config/lexics/indexLexics.tsx

@@ -198,6 +198,7 @@ export const indexLexics = {
   kg: 652,
   kickoff_in: 13027,
   likes: 16628,
+  link_copied_to_clipboard: 20305,
   live: 13024,
   loading: 3527,
   logout: 4306,

src/features/Icon/index.tsx

@@ -1,11 +1,11 @@
-import React, { CSSProperties } from 'react'
+import React, { CSSProperties, SyntheticEvent } from 'react'
 import * as icons from '../../libs/index'
 
 export type IconProps = {
   className?: string,
   color?: string,
   direction?: number,
-  onClick?: () => void,
+  onClick?: (e: SyntheticEvent) => void,
   refIcon: keyof typeof icons | string,
   size?: number | string,
   styles?: CSSProperties,

src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx

@@ -1,4 +1,4 @@
-import type { ForwardedRef } from 'react'
+import type { ForwardedRef, SyntheticEvent } from 'react'
 import { forwardRef } from 'react'
 
 import styled, { css } from 'styled-components/macro'
@@ -19,9 +19,18 @@ import { isEqual } from 'features/MatchSidePlaylists/helpers'
 import { T9n } from 'features/T9n'
 import { useMatchPageStore } from 'features/MatchPage/store'
 import { useLexicsStore } from 'features/LexicsStore'
+import { Icon } from 'features/Icon'
+import { Loader } from 'features/Loader'
 
 import { MATCH_ADS } from 'components/Ads/types'
 
+import { getShareHighlight } from 'requests'
+import {
+  usePageParams,
+  useRequest,
+  useToggle,
+} from 'hooks'
+
 import { PlayButton } from '../PlayButton'
 import { MatchDownloadButton } from '../MatchDownloadButton'
 
@@ -59,6 +68,24 @@ export const Item = styled.li`
   }
 `
 
+const ShareWrapper = styled.div`
+  display: flex;
+  position: absolute;
+  right: 7%;
+  top: 55%;
+  transform: translateY(-50%);
+`
+const Tooltip = styled.div`
+  position: absolute;
+  bottom: 100%;
+  right: -50%;
+  background-color: #FFFFFF;
+  white-space: nowrap;
+  font-size: 14px;
+  padding: 10px;
+  border-radius: 6px;
+`
+
 export const MatchPlaylists = forwardRef(
   (
     {
@@ -71,6 +98,16 @@ export const MatchPlaylists = forwardRef(
   ) => {
     const { ads, setEpisodeInfo } = useMatchPageStore()
     const { translate } = useLexicsStore()
+    const { profileId, sportType } = usePageParams()
+    const {
+      isFetching: isShareHighlightFetching,
+      request: shareHighLightRequest,
+    } = useRequest(getShareHighlight)
+    const {
+      close,
+      isOpen,
+      open,
+    } = useToggle()
 
     const handleButtonClick = (playlist: MatchPlaylistOption) => {
       onSelect?.(playlist)
@@ -82,6 +119,18 @@ export const MatchPlaylists = forwardRef(
       })
     }
 
+    const handleShareClick = async (e: SyntheticEvent) => {
+      e.stopPropagation()
+      const res = await shareHighLightRequest(sportType, profileId)
+      if (res) {
+        open()
+        navigator.clipboard.writeText(res.url)
+        setTimeout(() => {
+          close()
+        }, 2000)
+      }
+    }
+
     return (
       <List
         ref={ref}
@@ -99,6 +148,24 @@ export const MatchPlaylists = forwardRef(
                 live={live}
                 disabled={playlist.id !== FULL_GAME_KEY && isEmpty(playlist.episodes)}
                 onClick={() => handleButtonClick(playlist)}
+                shareContent={playlist.id === 'highlights' && (
+                  <ShareWrapper>
+                    {isOpen && (
+                      <Tooltip>
+                        <T9n t='link_copied_to_clipboard' />
+                      </Tooltip>
+                    )}
+                    {isShareHighlightFetching
+                      ? <Loader color='white' diameter={0.3} />
+                      : (
+                        <Icon
+                          onClick={handleShareClick}
+                          refIcon='Share'
+                          styles={{ cursor: 'pointer', display: 'flex' }}
+                        />
+                      )}
+                  </ShareWrapper>
+                )}
               >
                 <T9n t={playlist.lexic} />
               </PlayButton>

src/features/MatchSidePlaylists/components/PlayButton/index.tsx

@@ -19,6 +19,7 @@ type Props = {
   leftContent?: ReactNode,
   live?: boolean,
   onClick: () => void,
+  shareContent?: ReactNode,
 }
 
 type TLiveBtn = {
@@ -47,6 +48,7 @@ export const PlayButton = ({
   leftContent,
   live,
   onClick,
+  shareContent,
 }: Props) => (
   <Button
     className={className}
@@ -67,5 +69,6 @@ export const PlayButton = ({
         )
         : <Duration>{secondsToHms(duration)}</Duration>
     )}
+    {shareContent}
   </Button>
 )

src/libs/index.ts

@@ -15,3 +15,4 @@ export { PoweredByInstat } from './objects/PoweredByInstat'
 export { PoweredByInsports } from './objects/PoweredByInsports'
 export { Info } from './objects/Info'
 export { Rupee } from './objects/Rupee'
+export { Share } from './objects/Share'

src/libs/objects/Share.tsx

@@ -0,0 +1,14 @@
+export const Share = () => (
+  <svg
+    width='20'
+    height='21'
+    viewBox='0 0 20 21'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M15 17.8332C14.3056 17.8332 13.7153 17.5901 13.2292 17.104C12.7431 16.6179 12.5 16.0276 12.5 15.3332C12.5 15.2359 12.5069 15.1351 12.5208 15.0307C12.5347 14.9262 12.5556 14.8326 12.5833 14.7498L6.70833 11.3332C6.47222 11.5415 6.20833 11.7048 5.91667 11.8232C5.625 11.9415 5.31944 12.0004 5 11.9998C4.30556 11.9998 3.71528 11.7568 3.22917 11.2707C2.74306 10.7846 2.5 10.1943 2.5 9.49984C2.5 8.80539 2.74306 8.21512 3.22917 7.729C3.71528 7.24289 4.30556 6.99984 5 6.99984C5.31944 6.99984 5.625 7.059 5.91667 7.17734C6.20833 7.29567 6.47222 7.45873 6.70833 7.6665L12.5833 4.24984C12.5556 4.1665 12.5347 4.07289 12.5208 3.969C12.5069 3.86511 12.5 3.76428 12.5 3.6665C12.5 2.97206 12.7431 2.38178 13.2292 1.89567C13.7153 1.40956 14.3056 1.1665 15 1.1665C15.6944 1.1665 16.2847 1.40956 16.7708 1.89567C17.2569 2.38178 17.5 2.97206 17.5 3.6665C17.5 4.36095 17.2569 4.95123 16.7708 5.43734C16.2847 5.92345 15.6944 6.1665 15 6.1665C14.6806 6.1665 14.375 6.10761 14.0833 5.98984C13.7917 5.87206 13.5278 5.70873 13.2917 5.49984L7.41667 8.9165C7.44444 8.99984 7.46528 9.09373 7.47917 9.19817C7.49306 9.30261 7.5 9.40317 7.5 9.49984C7.5 9.59706 7.49306 9.69789 7.47917 9.80234C7.46528 9.90678 7.44444 10.0004 7.41667 10.0832L13.2917 13.4998C13.5278 13.2915 13.7917 13.1284 14.0833 13.0107C14.375 12.8929 14.6806 12.8337 15 12.8332C15.6944 12.8332 16.2847 13.0762 16.7708 13.5623C17.2569 14.0484 17.5 14.6387 17.5 15.3332C17.5 16.0276 17.2569 16.6179 16.7708 17.104C16.2847 17.5901 15.6944 17.8332 15 17.8332Z'
+      fill='white'
+    />
+  </svg>
+)

src/requests/index.tsx

@@ -40,3 +40,4 @@ export * from './getAds'
 export * from './getFavouriteTeam'
 export * from './getCountryCode'
 export * from './getAgreements'
+export * from './share'

src/requests/share/getHighlight.tsx

@@ -0,0 +1,20 @@
+import {
+  API_ROOT,
+} from 'config'
+
+import { callApi } from 'helpers'
+
+interface Response {
+  url: string,
+}
+
+export const getShareHighlight = (sport_id: number, match_id: number): Promise<Response> => {
+  const config = {
+    method: 'GET',
+  }
+
+  return callApi({
+    config,
+    url: `${API_ROOT}/v1/share/highlight/${sport_id}/${match_id}`,
+  })
+}

src/requests/share/index.ts

@@ -0,0 +1 @@
+export * from './getHighlight'