8000 Purchases: Move methods from `PurchasesMixin` to new, non-mixin module · elsewhencode/wp-calypso@b321e42 · GitHub
[go: up one dir, main page]
Skip to content
This repository was archived by the owner on Dec 5, 2023. It is now read-only.

Commit b321e42

Browse files
drewblaisdellscruffian
drewblaisdell
authored and
scruffian
committed
Purchases: Move methods from PurchasesMixin to new, non-mixin module
Fixes Automattic#12109.
1 parent bac373a commit b321e42

File tree

10 files changed

+94
-113
lines changed

10 files changed

+94
-113
lines changed

‎client/me/purchases/cancel-private-registration/index.jsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import paths from '../paths';
1616
import { isRefundable } from 'lib/purchases';
1717
import { cancelPrivateRegistration } from 'lib/upgrades/actions';
1818
import SimpleNotice from 'notices/simple-notice';
19+
import { goToManagePurchase } from '../helper';
1920

2021
const CancelPrivateRegistration = React.createClass( {
2122
getInitialState() {
@@ -24,12 +25,6 @@ const CancelPrivateRegistration = React.createClass( {
2425
};
2526
},
2627

27-
goToManagePurchase() {
28-
const { domain, id } = this.props.selectedPurchase.data;
29-
30-
page( paths.managePurchase( domain, id ) );
31-
},
32-
3328
cancel() {
3429
const { domain, id } = this.props.selectedPurchase.data;
3530

@@ -132,7 +127,7 @@ const CancelPrivateRegistration = React.createClass( {
132127
return (
133128

134129
<Main className="manage-purchase__detail">
135-
<HeaderCake onClick={ this.goToManagePurchase }>
130+
<HeaderCake onClick={ goToManagePurchase.bind( null, this.props ) }>
136131
{ this.translate( 'Cancel Private Registration' ) }
137132
</HeaderCake>
138133
{ notice }

‎client/me/purchases/cancel-purchase/index.jsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,14 @@ import HeaderCake from 'components/header-cake';
1717
import Main from 'components/main';
1818
import paths from '../paths';
1919
import { getName, isCancelable } from 'lib/purchases';
20-
import purchasesMixin from '../purchases-mixin';
20+
import { getPurchase, goToManagePurchase, isDataLoading } from '../helper';
2121

2222
const CancelPurchase = React.createClass( {
2323
propTypes: {
2424
selectedPurchase: React.PropTypes.object.isRequired,
2525
selectedSite: React.PropTypes.object
2626
},
2727

28-
mixins: [ purchasesMixin ],
29-
3028
componentDidMount() {
3129
this.ensurePageCanLoad();
3230
},
@@ -36,9 +34,9 @@ const CancelPurchase = React.createClass( {
3634
},
3735

3836
render() {
39-
const purchase = this.getPurchase();
37+
const purchase = getPurchase( this.props );
4038

41-
if ( this.isDataLoading() || ! purchase ) {
39+
if ( isDataLoading( this.props ) || ! purchase ) {
4240
return (
4341
<Main className="cancel-purchase">
4442
{ this.translate( 'Loading…' ) }
@@ -48,7 +46,7 @@ const CancelPurchase = React.createClass( {
4846

4947
return (
5048
<Main className="cancel-purchase">
51-
<HeaderCake onClick={ this.goToManagePurchase }>
49+
<HeaderCake onClick={ goToManagePurchase.bind( null, this.props ) }>
5250
{ this.translate( 'Cancel Purchase' ) }
5351
</HeaderCake>
5452

@@ -94,11 +92,11 @@ const CancelPurchase = React.createClass( {
9492
},
9593

9694
ensurePageCanLoad() {
97-
if ( this.isDataLoading() ) {
95+
if ( isDataLoading( this.props ) ) {
9896
return;
9997
}
10098

101-
const purchase = this.getPurchase();
99+
const purchase = getPurchase( this.props );
102100

103101
if ( purchase ) {
104102
const { domain, id } = purchase;

‎client/me/purchases/confirm-cancel-purchase/index.jsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,14 @@ import HeaderCake from 'components/header-cake';
1414
import Main from 'components/main';
1515
import notices from 'notices';
1616
import paths from 'me/purchases/paths';
17-
import purchasesMixin from '../purchases-mixin';
17+
import { goToManagePurchase } from '../helper';
1818

1919
const ConfirmCancelPurchase = React.createClass( {
2020
propTypes: {
2121
selectedPurchase: React.PropTypes.object,
2222
selectedSite: React.PropTypes.object
2323
},
2424

25-
mixins: [ purchasesMixin ],
26-
2725
componentDidMount() {
2826
if ( ! this.props.selectedPurchase.hasLoadedFromServer || ! this.props.selectedSite ) {
2927
return;
@@ -76,7 +74,7 @@ const ConfirmCancelPurchase = React.createClass( {
7674
render() {
7775
return (
7876
<Main className="cancel-confirm">
79-
<HeaderCake onClick={ this.goToManagePurchase }>{ this.translate( 'Confirm Cancellation' ) }</HeaderCake>
77+
<HeaderCake onClick={ goToManagePurchase.bind( null, this.props ) }>{ this.translate( 'Confirm Cancellation' ) }</HeaderCake>
8078
{ this.renderCard() }
8179
</Main>
8280
);

‎client/me/purchases/helper.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import page from 'page';
5+
6+
/**
7+
* Internal dependencies
8+
*/
9+
import paths from './paths';
10+
11+
function getPurchase( props ) {
12+
return props.selectedPurchase.data;
13+
}
14+
15+
function goToList() {
16+
page( paths.list() );
17+
}
18+
19+
function goToEditCardDetails( props ) {
20+
const { domain, id, payment: { creditCard } } = getPurchase( props );
21+
22+
page( paths.editCardDetails( domain, id, creditCard.id ) );
23+
}
24+
25+
function goToManagePurchase( props ) {
26+
const { domain, id } = getPurchase( props );
27+
28+
page( paths.managePurchase( domain, id ) );
29+
}
30+
31+
function isDataLoading( props ) {
32+
return ( ! props.selectedSite || ! props.selectedPurchase.hasLoadedFromServer );
33+
}
34+
35+
export {
36+
getPurchase,
37+
goToList,
38+
goToEditCardDetails,
39+
goToManagePurchase,
40+
isDataLoading
41+
}

‎client/me/purchases/manage-purchase/index.jsx

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ import {
4444
showCreditCardExpiringWarning,
4545
showEditPaymentDetails
4646
} from 'lib/purchases';
47-
import purchasesMixin from '../purchases-mixin';
47+
import { getPurchase, goToList, isDataLoading } from '../helper';
4848

4949
const ManagePurchase = React.createClass( {
5050
propTypes: {
@@ -54,8 +54,6 @@ const ManagePurchase = React.createClass( {
5454
destinationType: React.PropTypes.string
5555
},
5656

57-
mixins: [ purchasesMixin ],
58-
5957
isDataFetchingAfterRenewal() {
6058
return 'thank-you' === this.props.destinationType && this.props.selectedPurchase.isFetching;
6159
},
@@ -65,10 +63,10 @@ const ManagePurchase = React.createClass( {
6563
},
6664

6765
renderPurchaseExpiringNotice() {
68-
const purchase = this.getPurchase();
66+
const purchase = getPurchase( this.props );
6967
let noticeStatus = 'is-info';
7068

71-
if ( this.isDataLoading() || ! isExpiring( purchase ) || this.isDataFetchingAfterRenewal() ) {
69+
if ( isDataLoading( this.props ) || ! isExpiring( purchase ) || this.isDataFetchingAfterRenewal() ) {
7270
return null;
7371
}
7472

@@ -97,11 +95,11 @@ const ManagePurchase = React.createClass( {
9795
},
9896

9997
renderCreditCardExpiringNotice() {
100-
if ( this.isDataLoading() ) {
98+
if ( isDataLoading( this.props ) ) {
10199
return null;
102100
}
103101

104-
const purchase = this.getPurchase(),
102+
const purchase = getPurchase( this.props ),
105103
{ domain, id, payment: { creditCard } } = purchase;
106104

107105
if ( isExpired( purchase ) || isOneTimePurchase( purchase ) || isIncludedWithPlan( purchase ) ) {
@@ -134,11 +132,11 @@ const ManagePurchase = React.createClass( {
134132
},
135133

136134
renderPathNotice() {
137-
if ( this.isDataLoading() || ! this.props.destinationType ) {
135+
if ( isDataLoading( this.props ) || ! this.props.destinationType ) {
138136
return;
139137
}
140138

141-
const purchase = this.getPurchase();
139+
const purchase = getPurchase( this.props );
142140
let text;
143141

144142
if ( 'thank-you' === this.props.destinationType ) {
@@ -171,7 +169,7 @@ const ManagePurchase = React.createClass( {
171169
},
172170

173171
handleRenew() {
174-
const purchase = this.getPurchase(),
172+
const purchase = getPurchase( this.props ),
175173
cartItem = cartItems.getRenewalItemFromProduct( purchase, {
176174
domain: purchase.meta
177175
} );
@@ -204,7 +202,7 @@ const ManagePurchase = React.createClass( {
204202
},
205203

206204
renderPrice() {
207-
const purchase = this.getPurchase(),
205+
const purchase = getPurchase( this.props ),
208206
{ amount, currencyCode, currencySymbol } = purchase;
209207

210208
if ( isOneTimePurchase( purchase ) ) {
@@ -230,7 +228,7 @@ const ManagePurchase = React.createClass( {
230228

231229
renderProductLink() {
232230
const { selectedSite } = this.props,
233-
purchase = this.getPurchase();
231+
purchase = getPurchase( this.props );
234232
let url, text;
235233

236234
if ( isPlan( purchase ) ) {
@@ -265,9 +263,9 @@ const ManagePurchase = React.createClass( {
265263
},
266264

267265
renderPaymentInfo() {
268-
const purchase = this.getPurchase();
266+
const purchase = getPurchase( this.props );
269267

270-
if ( this.isDataLoading() ) {
268+
if ( isDataLoading( this.props ) ) {
271269
return <span className="manage-purchase__detail" />;
272270
}
273271

@@ -298,22 +296,22 @@ const ManagePurchase = React.createClass( {
298296
},
299297

300298
renderPaymentDetails() {
301-
const purchase = this.getPurchase();
299+
const purchase = getPurchase( this.props );
302300

303-
if ( ! this.isDataLoading() && isOneTimePurchase( purchase ) ) {
301+
if ( ! isDataLoading( this.props ) && isOneTimePurchase( purchase ) ) {
304302
return null;
305303
}
306304

307305
let paymentDetails = (
308306
<span>
309307
<em className="manage-purchase__detail-label">
310-
{ this.isDataLoading() ? null : this.translate( 'Payment method' ) }
308+
{ isDataLoading( this.props ) ? null : this.translate( 'Payment method' ) }
311309
</em>
312310
{ this.renderPaymentInfo() }
313311
</span>
314312
);
315313

316-
if ( this.isDataLoading() || ! showEditPaymentDetails( purchase ) ) {
314+
if ( isDataLoading( this.props ) || ! showEditPaymentDetails( purchase ) ) {
317315
return (
318316
<li>
319317
{ paymentDetails }
@@ -333,7 +331,7 @@ const ManagePurchase = React.createClass( {
333331
},
334332

335333
renderRenewButton() {
336-
const purchase = this.getPurchase();
334+
const purchase = getPurchase( this.props );
337335

338336
if ( ! isRenewable( purchase ) || isExpired( purchase ) || isExpiring( purchase ) || this.isDataFetchingAfterRenewal() ) {
339337
return null;
@@ -345,7 +343,7 @@ const ManagePurchase = React.createClass( {
345343
},
346344

347345
renderExpiredRenewNotice() {
348-
const purchase = this.getPurchase();
346+
const purchase = getPurchase( this.props );
349347

350348
if ( ! isRenewable( purchase ) && ! isRedeemable( purchase ) ) {
351349
return null;
@@ -368,7 +366,7 @@ const ManagePurchase = React.createClass( {
368366
},
369367

370368
renderRenewsOrExpiresOnLabel() {
371-
const purchase = this.getPurchase();
369+
const purchase = getPurchase( this.props );
372370

373371
if ( ! this.isDataFetchingAfterRenewal() && ( isExpiring( purchase ) || creditCardExpiresBeforeSubscription( purchase ) ) ) {
374372
return this.translate( 'Expires on' );
@@ -382,7 +380,7 @@ const ManagePurchase = React.createClass( {
382380
},
383381

384382
renderRenewsOrExpiresOn() {
385-
const purchase = this.getPurchase();
383+
const purchase = getPurchase( this.props );
386384

387385
if ( this.isDataFetchingAfterRenewal() ) {
388386
return null;
@@ -418,7 +416,7 @@ const ManagePurchase = React.createClass( {
418416
},
419417

420418
renderEditPaymentMethodNavItem() {
421-
const purchase = this.getPurchase(),
419+
const purchase = getPurchase( this.props ),
422420
{ domain, id, payment } = purchase;
423421

424422
if ( showEditPaymentDetails( purchase ) ) {
@@ -433,7 +431,7 @@ const ManagePurchase = React.createClass( {
433431
},
434432

435433
renderCancelPurchaseNavItem() {
436-
const purchase = this.getPurchase(),
434+
const purchase = getPurchase( this.props ),
437435
{ domain, id } = purchase;
438436

439437
if ( isExpired( purchase ) || ! isCancelable( purchase ) ) {
@@ -456,7 +454,7 @@ const ManagePurchase = React.createClass( {
456454
},
457455

458456
renderCancelPrivateRegistration() {
459-
const purchase = this.getPurchase(),
457+
const purchase = getPurchase( this.props ),
460458
{ domain, id } = purchase;
461459

462460
if ( isExpired( purchase ) || ! hasPrivateRegistration( purchase ) ) {
@@ -488,12 +486,12 @@ const ManagePurchase = React.createClass( {
488486
cancelPurchaseNavItem,
489487
cancelPrivateRegistrationNavItem;
490488

491-
if ( this.isDataLoading() ) {
489+
if ( isDataLoading( this.props ) ) {
492490
classes = 'manage-purchase__info is-placeholder';
493491
editPaymentMethodNavItem = <VerticalNavItem isPlaceholder />;
494492
cancelPurchaseNavItem = <VerticalNavItem isPlaceholder />;
495493
} else {
496-
purchase = this.getPurchase();
494+
purchase = getPurchase( this.props );
497495
classes = classNames( 'manage-purchase__info', {
498496
'is-expired': purchase && isExpired( purchase )
499497
} );
@@ -532,7 +530,7 @@ const ManagePurchase = React.createClass( {
532530
<ul className="manage-purchase__meta">
533531
<li>
534532
<em className="manage-purchase__detail-label">
535-
{ this.isDataLoading() ? null : this.translate( 'Price' ) }
533+
{ isDataLoading( this.props ) ? null : this.translate( 'Price' ) }
536534
</em>
537535
<span className="manage-purchase__detail">{ price }</span>
538536
</li>
@@ -557,7 +555,7 @@ const ManagePurchase = React.createClass( {
557555
},
558556

559557
render() {
560-
if ( this.props.selectedPurchase.hasLoadedFromServer && ! this.getPurchase() ) {
558+
if ( this.props.selectedPurchase.hasLoadedFromServer && ! getPurchase( this.props ) ) {
561559
// TODO: redirect to purchases list
562560
return null;
563561
}
@@ -566,7 +564,7 @@ const ManagePurchase = React.createClass( {
566564
<span>
567565
{ this.renderPathNotice() }
568566
<Main className="manage-purchase">
569-
<HeaderCake onClick={ this.goToList }>{ this.translate( 'Manage Purchase' ) }</HeaderCake>
567+
<HeaderCake onClick={ goToList }>{ this.translate( 'Manage Purchase' ) }</HeaderCake>
570568
{ this.renderNotices() }
571569
{ this.renderPurchaseDetail() }
572570
</Main>

0 commit comments

Comments
 (0)
0