Preorder button touchups (#1755)

* update precommit hook

* touchup code per kps comments

package.json

@@ -41,7 +41,6 @@
     "lint-fix": "eslint --fix --quiet 'ui/**/*.{js,jsx}' && eslint --fix --quiet 'extras/**/*.{js,jsx}' && eslint --fix --quiet 'web/**/*.{js,jsx}' && eslint --fix --quiet 'electron/**/*.js'",
     "format": "prettier 'src/**/*.{js,jsx,scss,json}' --write",
     "flow-defs": "flow-typed install",
-    "precommit": "lint-staged",
     "preinstall": "",
     "postinstall": "cd web && yarn && cd .. && if-env NODE_ENV=production && yarn postinstall:warning || if-env APP_ENV=web && echo 'Done installing deps' || yarn postinstall:electron",
     "postinstall:electron": "electron-builder install-app-deps && node ./build/downloadDaemon.js && node ./build/downloadLBRYFirst.js",
@@ -252,6 +251,11 @@
     "node": ">=7",
     "yarn": "^1.3"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
   "lbrySettings": {
     "lbrynetDaemonVersion": "0.99.0",
     "lbrynetDaemonUrlTemplate": "https://github.com/lbryio/lbry/releases/download/vDAEMONVER/lbrynet-OSNAME.zip",

ui/component/fileActions/index.js

@@ -5,7 +5,7 @@ import {
   selectHasChannels,
   makeSelectTagInClaimOrChannelForUri,
   selectClaimIsNsfwForUri,
-  selectPreorderTag,
+  selectPreorderTagForUri,
 } from 'redux/selectors/claims';
 import { makeSelectStreamingUrlForUri } from 'redux/selectors/file_info';
 import { doPrepareEdit } from 'redux/actions/publish';
@@ -33,7 +33,7 @@ const select = (state, props) => {
     streamingUrl: makeSelectStreamingUrlForUri(uri)(state),
     disableDownloadButton: makeSelectTagInClaimOrChannelForUri(uri, DISABLE_DOWNLOAD_BUTTON_TAG)(state),
     isMature: selectClaimIsNsfwForUri(state, uri),
-    isAPreorder: selectPreorderTag(state, props.uri),
+    isAPreorder: Boolean(selectPreorderTagForUri(state, props.uri)),
   };
 };
 

ui/component/preorderButton/index.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
-import { selectPreorderTag, selectClaimForUri, selectClaimIsMine } from 'redux/selectors/claims';
+import { selectPreorderTagForUri, selectClaimForUri, selectClaimIsMine } from 'redux/selectors/claims';
-import ClaimTags from './view';
+import PreorderButton from './view';
 import { doOpenModal } from 'redux/actions/app';
 import * as SETTINGS from 'constants/settings';
 import { selectClientSetting } from 'redux/selectors/settings';
@@ -9,7 +9,7 @@ const select = (state, props) => {
   const claim = selectClaimForUri(state, props.uri);
 
   return {
-    preorderTag: selectPreorderTag(state, props.uri),
+    preorderTag: selectPreorderTagForUri(state, props.uri),
     claimIsMine: selectClaimIsMine(state, claim),
     claim,
     preferredCurrency: selectClientSetting(state, SETTINGS.PREFERRED_CURRENCY),
@@ -20,4 +20,4 @@ const perform = {
   doOpenModal,
 };
 
-export default connect(select, perform)(ClaimTags);
+export default connect(select, perform)(PreorderButton);

ui/component/preorderButton/view.jsx

@@ -5,7 +5,7 @@ import Button from 'component/button';
 import * as ICONS from 'constants/icons';
 import { Lbryio } from 'lbryinc';
 import { getStripeEnvironment } from 'util/stripe';
-let stripeEnvironment = getStripeEnvironment();
+const stripeEnvironment = getStripeEnvironment();
 
 type Props = {
   preorderTag: string,
@@ -38,18 +38,19 @@ export default function PreorderButton(props: Props) {
   async function checkIfAlreadyPurchased() {
     try {
       // get card payments customer has made
-      let customerTransactionResponse = await getPaymentHistory();
+      const customerTransactionResponse = await getPaymentHistory();
 
-      let matchingTransaction = false;
+      // if they have a transaction for this claim already, assume it's a preorder
-      for (const transaction of customerTransactionResponse) {
+      // note: this *could* be spoofed, because it doesn't check versus the amount,
-        if (claimId === transaction.source_claim_id) {
+      // but should be OK for now
-          matchingTransaction = true;
+      if (customerTransactionResponse?.length) {
+        for (const transaction of customerTransactionResponse) {
+          if (claimId === transaction.source_claim_id) {
+            setHasAlreadyPreordered(true);
+            break;
+          }
         }
       }
-
-      if (matchingTransaction) {
-        setHasAlreadyPreordered(true);
-      }
     } catch (err) {
       console.log(err);
     }
@@ -69,43 +70,43 @@ export default function PreorderButton(props: Props) {
 
   return (
     <>
-      {preorderTag && !hasAlreadyPreordered && !myUpload && (<div>
+      {preorderTag && !hasAlreadyPreordered && !myUpload && (
-        <Button
+        <div>
-          // ref={buttonRef}
+          <Button
-          iconColor="red"
+            iconColor="red"
-          className={'preorder-button'}
+            className={'preorder-button'}
-          // largestLabel={isMobile && shrinkOnMobile ? '' : subscriptionLabel}
+            icon={fiatIconToUse}
-          icon={fiatIconToUse}
+            button="primary"
-          button="primary"
+            label={__('Preorder now for %fiatSymbolToUse%%preorderTag%', {
-          label={`Preorder now for ${fiatSymbolToUse}${preorderTag}`}
+              fiatSymbolToUse,
-          // title={titlePrefix}
+              preorderTag,
-          requiresAuth
+            })}
-          onClick={() => doOpenModal(MODALS.PREORDER_CONTENT, { uri, checkIfAlreadyPurchased })}
+            requiresAuth
-        />
+            onClick={() => doOpenModal(MODALS.PREORDER_CONTENT, { uri, checkIfAlreadyPurchased })}
-      </div>)}
+          />
-      {preorderTag && hasAlreadyPreordered && !myUpload && (<div>
+        </div>
-        <Button
+      )}
-          // ref={buttonRef}
+      {preorderTag && hasAlreadyPreordered && !myUpload && (
-          iconColor="red"
+        <div>
-          className={'preorder-button'}
+          <Button
-          // largestLabel={isMobile && shrinkOnMobile ? '' : subscriptionLabel}
+            iconColor="red"
-          button="primary"
+            className={'preorder-button'}
-          label={'You have preordered this content'}
+            button="primary"
-          // title={titlePrefix}
+            label={__('You have preordered this content')}
-          requiresAuth
+            requiresAuth
-        />
+          />
-      </div>)}
+        </div>
-      {preorderTag && myUpload && (<div>
+      )}
-        <Button
+      {preorderTag && myUpload && (
-          // ref={buttonRef}
+        <div>
-          iconColor="red"
+          <Button
-          className={'preorder-button'}
+            iconColor="red"
-          // largestLabel={isMobile && shrinkOnMobile ? '' : subscriptionLabel}
+            className={'preorder-button'}
-          button="primary"
+            button="primary"
-          label={'You cannot preorder your own content'}
+            label={__('You cannot preorder your own content')}
-          // title={titlePrefix}
+          />
-        />
+        </div>
-      </div>)}
+      )}
     </>
   );
 }

ui/component/preorderContent/index.js

@@ -1,8 +1,5 @@
 import { connect } from 'react-redux';
-import {
+import { selectClaimForUri, selectPreorderTagForUri } from 'redux/selectors/claims';
-  selectClaimForUri,
-  selectPreorderTag,
-} from 'redux/selectors/claims';
 import { doHideModal } from 'redux/actions/app';
 import { preOrderPurchase } from 'redux/actions/wallet';
 import { selectClientSetting } from 'redux/selectors/settings';
@@ -10,7 +7,7 @@ import { selectActiveChannelClaim } from 'redux/selectors/app';
 import { withRouter } from 'react-router';
 import * as SETTINGS from 'constants/settings';
 import { getChannelIdFromClaim, getChannelNameFromClaim } from 'util/claim';
-import WalletSendTip from './view';
+import PreorderContent from './view';
 
 const select = (state, props) => {
   const { uri } = props;
@@ -33,7 +30,7 @@ const select = (state, props) => {
     channelClaimId,
     tipChannelName,
     preferredCurrency: selectClientSetting(state, SETTINGS.PREFERRED_CURRENCY),
-    preorderTag: selectPreorderTag(state, props.uri),
+    preorderTag: selectPreorderTagForUri(state, props.uri),
   };
 };
 
@@ -42,4 +39,4 @@ const perform = {
   preOrderPurchase,
 };
 
-export default withRouter(connect(select, perform)(WalletSendTip));
+export default withRouter(connect(select, perform)(PreorderContent));

ui/component/preorderContent/view.jsx

@@ -88,12 +88,11 @@ export default function PreorderContent(props: Props) {
     });
   }, [setHasSavedCard]);
 
-  // text for modal header
+  const modalHeaderText = __('Preorder Your Content');
-  const titleText = 'Preorder Your Content';
 
-  // icon to use or explainer text to show per tab
+  let subtitleText = __(
-  let explainerText =
+    'This content is not available yet but you can pre-order ' + 'it now so you can access it as soon as it goes live'
-    'This content is not available yet but you' + ' can pre-order it now so you can access it as soon as it goes live';
+  );
 
   // when the form button is clicked
   function handleSubmit() {
@@ -130,42 +129,36 @@ export default function PreorderContent(props: Props) {
   }
 
   function buildButtonText() {
-    return `Preorder your content for ${fiatSymbolToUse}${tipAmount.toString()}`;
+    return __('Preorder your content for %fiatSymbolToUse%%tipAmount%', {
+      fiatSymbolToUse,
+      tipAmount: tipAmount.toString(),
+    });
   }
 
   return (
     <Form onSubmit={handleSubmit}>
       {!waitingForBackend && (
         <Card
-          title={titleText}
+          title={modalHeaderText}
           className={'preorder-content-modal'}
-          subtitle={
+          subtitle={<div className="section__subtitle">{subtitleText}</div>}
-            <>
-              {/* short explainer under the button */}
-              <div className="section__subtitle">{explainerText}</div>
-            </>
-          }
           actions={
-            // confirm purchase card
+            // confirm purchase functionality
             <>
-              {/*  */}
               <div className="handle-submit-area">
                 <Button
                   autoFocus
                   onClick={handleSubmit}
                   button="primary"
-                  // label={__('Confirm')}
                   label={buildButtonText()}
                   disabled={!hasCardSaved}
                 />
 
                 {!hasCardSaved && (
-                  <>
+                  <div className="add-card-prompt">
-                    <div className="add-card-prompt">
+                    <Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card')} button="link" />
-                      <Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card')} button="link" />
+                    {' ' + __('To Preorder Content')}
-                      {' ' + __('To Preorder Content')}
+                  </div>
-                    </div>
-                  </>
                 )}
               </div>
             </>
@@ -175,14 +168,9 @@ export default function PreorderContent(props: Props) {
       {/* processing payment card */}
       {waitingForBackend && (
         <Card
-          title={titleText}
+          title={modalHeaderText}
           className={'preorder-content-modal-loading'}
-          subtitle={
+          subtitle={<div className="section__subtitle">{__('Processing your purchase...')}</div>}
-            <>
-              {/* short explainer under the button */}
-              <div className="section__subtitle">{'Processing your purchase...'}</div>
-            </>
-          }
         />
       )}
     </Form>

ui/redux/selectors/claims.js

@@ -680,7 +680,7 @@ export const selectTagsForUri = createCachedSelector(selectMetadataForUri, (meta
   return metadata && metadata.tags ? metadata.tags.filter((tag) => !INTERNAL_TAGS.includes(tag)) : [];
 })((state, uri) => String(uri));
 
-export const selectPreorderTag = createCachedSelector(selectMetadataForUri, (metadata: ?GenericMetadata) => {
+export const selectPreorderTagForUri = createCachedSelector(selectMetadataForUri, (metadata: ?GenericMetadata) => {
   const matchingTag = metadata && metadata.tags && metadata.tags.find((tag) => tag.includes('preorder:'));
   if (matchingTag) return matchingTag.slice(9);
 })((state, uri) => String(uri));