1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
import PaymentsStore from "../PaymentsStore.js";
/**
* A mixin for a custom element to observe store changes to information about a payment request.
*/
/**
* State of the payment request dialog.
*/
export let requestStore = new PaymentsStore({
changesPrevented: false,
orderDetailsShowing: false,
"basic-card-page": {
guid: null,
// preserveFieldValues: true,
selectedStateKey: "selectedPaymentCard",
},
"shipping-address-page": {
guid: null,
},
"payer-address-page": {
guid: null,
},
"billing-address-page": {
guid: null,
},
"payment-summary": {},
page: {
id: "payment-summary",
previousId: null,
// onboardingWizard: true,
// error: "",
},
request: {
completeStatus: "",
tabId: null,
topLevelPrincipal: { URI: { displayHost: null } },
requestId: null,
paymentMethods: [],
paymentDetails: {
id: null,
totalItem: { label: null, amount: { currency: null, value: 0 } },
displayItems: [],
payerErrors: {},
paymentMethodErrors: null,
shippingAddressErrors: {},
shippingOptions: [],
modifiers: null,
error: "",
},
paymentOptions: {
requestPayerName: false,
requestPayerEmail: false,
requestPayerPhone: false,
requestShipping: false,
shippingType: "shipping",
},
shippingOption: null,
},
selectedPayerAddress: null,
selectedPaymentCard: null,
selectedPaymentCardSecurityCode: null,
selectedShippingAddress: null,
selectedShippingOption: null,
savedAddresses: {},
savedBasicCards: {},
tempAddresses: {},
tempBasicCards: {},
});
/**
* A mixin to render UI based upon the requestStore and get updated when that store changes.
*
* Attaches `requestStore` to the element to give access to the store.
* @param {class} superClass The class to extend
* @returns {class}
*/
export default function PaymentStateSubscriberMixin(superClass) {
return class PaymentStateSubscriber extends superClass {
constructor() {
super();
this.requestStore = requestStore;
}
connectedCallback() {
this.requestStore.subscribe(this);
this.render(this.requestStore.getState());
if (super.connectedCallback) {
super.connectedCallback();
}
}
disconnectedCallback() {
this.requestStore.unsubscribe(this);
if (super.disconnectedCallback) {
super.disconnectedCallback();
}
}
/**
* Called by the store upon state changes.
* @param {object} state The current state
*/
stateChangeCallback(state) {
this.render(state);
}
};
}
|
