Fix referrer on embed (#1181)

* Fix referrer on embed

* Fix override

* Fix condition

ui/page/embedWrapper/index.js

@@ -11,6 +11,7 @@ import { doCommentSocketConnect, doCommentSocketDisconnect } from 'redux/actions
 import { doFetchActiveLivestreams, doFetchChannelLiveStatus } from 'redux/actions/livestream';
 import { selectIsActiveLivestreamForUri, selectActiveLivestreamInitialized } from 'redux/selectors/livestream';
 import { getThumbnailFromClaim, isStreamPlaceholderClaim } from 'util/claim';
+import { doUserSetReferrerWithUri } from 'redux/actions/user';
 
 const select = (state, props) => {
   const { match } = props;
@@ -58,6 +59,7 @@ const perform = {
   doCommentSocketConnect,
   doCommentSocketDisconnect,
   doFetchActiveLivestreams,
+  setReferrer: doUserSetReferrerWithUri,
 };
 
 export default connect(select, perform)(EmbedWrapperPage);

ui/page/embedWrapper/view.jsx

@@ -43,6 +43,7 @@ type Props = {
   doCommentSocketConnect: (string, string, string) => void,
   doCommentSocketDisconnect: (string, string) => void,
   doFetchActiveLivestreams: () => void,
+  setReferrer: (uri: string) => void,
 };
 
 export const EmbedContext = React.createContext<any>();
@@ -77,6 +78,7 @@ export default function EmbedWrapperPage(props: Props) {
     doCommentSocketConnect,
     doCommentSocketDisconnect,
     doFetchActiveLivestreams,
+    setReferrer,
   } = props;
 
   const {
@@ -88,6 +90,8 @@ export default function EmbedWrapperPage(props: Props) {
 
   const channelUrl = channelUri && formatLbryChannelName(channelUri);
   const urlParams = new URLSearchParams(search);
+  const rawReferrerParam = urlParams.get('r');
+  const sanitizedReferrerParam = rawReferrerParam && rawReferrerParam.replace(':', '#');
   const embedLightBackground = urlParams.get('embedBackgroundLight');
   const readyToDisplay = isCurrentClaimLive || (haveClaim && streamingUrl);
   const isLiveClaimFetching = isLivestreamClaim && !activeLivestreamInitialized;
@@ -107,6 +111,10 @@ export default function EmbedWrapperPage(props: Props) {
 
   const thumbnail = useThumbnail(claimThumbnail, containerRef);
 
+  React.useEffect(() => {
+    if (!sanitizedReferrerParam) setReferrer(uri);
+  }, [sanitizedReferrerParam, setReferrer, uri]);
+
   React.useEffect(() => {
     if (doFetchActiveLivestreams && isLivestreamClaim) {
       doFetchActiveLivestreams();

ui/redux/actions/user.js

@@ -1,5 +1,5 @@
 import Lbry from 'lbry';
-import { makeSelectClaimForUri } from 'redux/selectors/claims';
+import { selectClaimForUri } from 'redux/selectors/claims';
 import { doFetchChannelListMine } from 'redux/actions/claims';
 import { isURIValid, normalizeURI } from 'util/lbryURI';
 import { batchActions } from 'util/batch-actions';
@@ -9,6 +9,7 @@ import * as ACTIONS from 'constants/action_types';
 import { doFetchGeoBlockedList } from 'redux/actions/blocked';
 import { doClaimRewardType, doRewardList } from 'redux/actions/rewards';
 import { selectEmailToVerify, selectPhoneToVerify, selectUserCountryCode, selectUser } from 'redux/selectors/user';
+import { selectIsRewardApproved } from 'redux/selectors/rewards';
 import { doToast } from 'redux/actions/notifications';
 import rewards from 'rewards';
 import { Lbryio } from 'lbryinc';
@@ -717,17 +718,54 @@ export function doUserSetReferrerReset() {
     });
   };
 }
+
+export function doUserSetReferrerWithUri(uri) {
+  return async (dispatch, getState) => {
+    const state = getState();
+    let claim = selectClaimForUri(state, uri);
+
+    let referrerCode;
+    if (!claim) {
+      try {
+        const response = await Lbry.resolve({ urls: [uri] });
+        if (response && response[uri] && !response[uri].error) claim = response && response[uri];
+        if (claim) {
+          if (claim.signing_channel) {
+            referrerCode = claim.signing_channel.permanent_url.replace('lbry://', '');
+          } else {
+            referrerCode = claim.permanent_url.replace('lbry://', '');
+          }
+          const isRewardApproved = selectIsRewardApproved(state);
+          dispatch(doUserSetReferrer(referrerCode, isRewardApproved));
+        }
+      } catch (error) {
+        dispatch({
+          type: ACTIONS.USER_SET_REFERRER_FAILURE,
+          data: { error },
+        });
+      }
+    } else {
+      referrerCode = claim.permanent_url.replace('lbry://', '');
+      const isRewardApproved = selectIsRewardApproved(state);
+      dispatch(doUserSetReferrer(referrerCode, isRewardApproved));
+    }
+  };
+}
+
 export function doUserSetReferrer(referrer, shouldClaim) {
   return async (dispatch, getState) => {
     dispatch({
       type: ACTIONS.USER_SET_REFERRER_STARTED,
     });
-    let claim;
-    let referrerCode;
+
+    let claim, referrerCode;
     const isValid = isURIValid(referrer);
+
     if (isValid) {
+      const state = getState();
       const uri = normalizeURI(referrer);
-      claim = makeSelectClaimForUri(uri)(getState());
+      claim = selectClaimForUri(state, uri);
+
       if (!claim) {
         try {
           const response = await Lbry.resolve({ urls: [uri] });

ui/redux/selectors/rewards.js

@@ -1,5 +1,6 @@
 import { createSelector } from 'reselect';
 import REWARDS from 'rewards';
+import { selectUser } from 'redux/selectors/user';
 
 const selectState = (state) => state.rewards || {};
 
@@ -81,3 +82,5 @@ export const selectWeeklyWatchClaimedThisWeek = createSelector(selectUnclaimedRe
   }
   return false;
 });
+
+export const selectIsRewardApproved = createSelector(selectUser, (user) => user && user.is_reward_approved);