diff --git a/public/images/share.svg b/public/images/share.svg
new file mode 100644
index 00000000..0c7d557c
--- /dev/null
+++ b/public/images/share.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/src/config/env.tsx b/src/config/env.tsx
index f0c0b415..548f68b1 100644
--- a/src/config/env.tsx
+++ b/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
diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx
index 3a3442cd..65ae84c9 100644
--- a/src/config/lexics/indexLexics.tsx
+++ b/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,
diff --git a/src/features/Icon/index.tsx b/src/features/Icon/index.tsx
index c8d3cd28..a68ab08d 100644
--- a/src/features/Icon/index.tsx
+++ b/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,
diff --git a/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx b/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx
index b66725a6..4f2fb544 100644
--- a/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx
+++ b/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 (
handleButtonClick(playlist)}
+ shareContent={playlist.id === 'highlights' && (
+
+ {isOpen && (
+
+
+
+ )}
+ {isShareHighlightFetching
+ ?
+ : (
+
+ )}
+
+ )}
>
diff --git a/src/features/MatchSidePlaylists/components/PlayButton/index.tsx b/src/features/MatchSidePlaylists/components/PlayButton/index.tsx
index 1c04304c..86f693ee 100644
--- a/src/features/MatchSidePlaylists/components/PlayButton/index.tsx
+++ b/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) => (
)
diff --git a/src/libs/index.ts b/src/libs/index.ts
index ccd0ac87..aa71fc99 100644
--- a/src/libs/index.ts
+++ b/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'
diff --git a/src/libs/objects/Share.tsx b/src/libs/objects/Share.tsx
new file mode 100644
index 00000000..5adaff71
--- /dev/null
+++ b/src/libs/objects/Share.tsx
@@ -0,0 +1,14 @@
+export const Share = () => (
+
+)
diff --git a/src/requests/index.tsx b/src/requests/index.tsx
index d16ce922..2b82cdef 100644
--- a/src/requests/index.tsx
+++ b/src/requests/index.tsx
@@ -40,3 +40,4 @@ export * from './getAds'
export * from './getFavouriteTeam'
export * from './getCountryCode'
export * from './getAgreements'
+export * from './share'
diff --git a/src/requests/share/getHighlight.tsx b/src/requests/share/getHighlight.tsx
new file mode 100644
index 00000000..969d6cdd
--- /dev/null
+++ b/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 => {
+ const config = {
+ method: 'GET',
+ }
+
+ return callApi({
+ config,
+ url: `${API_ROOT}/v1/share/highlight/${sport_id}/${match_id}`,
+ })
+}
diff --git a/src/requests/share/index.ts b/src/requests/share/index.ts
new file mode 100644
index 00000000..ac065027
--- /dev/null
+++ b/src/requests/share/index.ts
@@ -0,0 +1 @@
+export * from './getHighlight'