LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Preorder button touchups (#1755)

Browse source 
* update precommit hook

* touchup code per kps comments
This commit is contained in:
mayeaux 2022-06-24 15:08:46 +02:00 committed by GitHub
parent 628da8bb04
commit de068d36f1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 81 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
package.json
View file

@ -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",

4
ui/component/fileActions/index.js
View file

@ -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)),
};
};

8
ui/component/preorderButton/index.js
View file

@ -1,6 +1,6 @@
import { connect } from 'react-redux';
import { selectPreorderTag, selectClaimForUri, selectClaimIsMine } from 'redux/selectors/claims';
import ClaimTags from './view';
import { selectPreorderTagForUri, selectClaimForUri, selectClaimIsMine } from 'redux/selectors/claims';
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);

95
ui/component/preorderButton/view.jsx
View file

@ -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;
for (const transaction of customerTransactionResponse) {
if (claimId === transaction.source_claim_id) {
matchingTransaction = true;
// if they have a transaction for this claim already, assume it's a preorder
// note: this *could* be spoofed, because it doesn't check versus the amount,
// but should be OK for now
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>
<Button
// ref={buttonRef}
iconColor="red"
className={'preorder-button'}
// largestLabel={isMobile && shrinkOnMobile ? '' : subscriptionLabel}
icon={fiatIconToUse}
button="primary"
label={`Preorder now for ${fiatSymbolToUse}${preorderTag}`}
// title={titlePrefix}
requiresAuth
onClick={() => doOpenModal(MODALS.PREORDER_CONTENT, { uri, checkIfAlreadyPurchased })}
/>
</div>)}
{preorderTag && hasAlreadyPreordered && !myUpload && (<div>
<Button
// ref={buttonRef}
iconColor="red"
className={'preorder-button'}
// largestLabel={isMobile && shrinkOnMobile ? '' : subscriptionLabel}
button="primary"
label={'You have preordered this content'}
// title={titlePrefix}
requiresAuth
/>
</div>)}
{preorderTag && myUpload && (<div>
<Button
// ref={buttonRef}
iconColor="red"
className={'preorder-button'}
// largestLabel={isMobile && shrinkOnMobile ? '' : subscriptionLabel}
button="primary"
label={'You cannot preorder your own content'}
// title={titlePrefix}
/>
</div>)}
{preorderTag && !hasAlreadyPreordered && !myUpload && (
<div>
<Button
iconColor="red"
className={'preorder-button'}
icon={fiatIconToUse}
button="primary"
label={__('Preorder now for %fiatSymbolToUse%%preorderTag%', {
fiatSymbolToUse,
preorderTag,
})}
requiresAuth
onClick={() => doOpenModal(MODALS.PREORDER_CONTENT, { uri, checkIfAlreadyPurchased })}
/>
</div>
)}
{preorderTag && hasAlreadyPreordered && !myUpload && (
<div>
<Button
iconColor="red"
className={'preorder-button'}
button="primary"
label={__('You have preordered this content')}
requiresAuth
/>
</div>
)}
{preorderTag && myUpload && (
<div>
<Button
iconColor="red"
className={'preorder-button'}
button="primary"
label={__('You cannot preorder your own content')}
/>
</div>
)}
</>
);
}

11
ui/component/preorderContent/index.js
View file

@ -1,8 +1,5 @@
import { connect } from 'react-redux';
import {
selectClaimForUri,
selectPreorderTag,
} from 'redux/selectors/claims';
import { selectClaimForUri, selectPreorderTagForUri } 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));

46
ui/component/preorderContent/view.jsx
View file

@ -88,12 +88,11 @@ export default function PreorderContent(props: Props) {
});
}, [setHasSavedCard]);
// text for modal header
const titleText = 'Preorder Your Content';
const modalHeaderText = __('Preorder Your Content');
// icon to use or explainer text to show per tab
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';
let subtitleText = __(
'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={
<>
{/* short explainer under the button */}
<div className="section__subtitle">{explainerText}</div>
</>
}
subtitle={<div className="section__subtitle">{subtitleText}</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">
<Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card')} button="link" />
{' ' + __('To Preorder Content')}
</div>
</>
<div className="add-card-prompt">
<Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card')} button="link" />
{' ' + __('To Preorder Content')}
</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={
<>
{/* short explainer under the button */}
<div className="section__subtitle">{'Processing your purchase...'}</div>
</>
}
subtitle={<div className="section__subtitle">{__('Processing your purchase...')}</div>}
/>
)}
</Form>

2
ui/redux/selectors/claims.js
View file

@ -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));