|
|
|
/*
|
|
|
|
* https://github.com/morethanwords/tweb
|
|
|
|
* Copyright (C) 2019-2021 Eduard Kuzmenko
|
|
|
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
|
|
|
*/
|
|
|
|
|
|
|
|
import PopupElement from '.';
|
|
|
|
import accumulate from '../../helpers/array/accumulate';
|
|
|
|
import {attachClickEvent} from '../../helpers/dom/clickEvent';
|
|
|
|
import paymentsWrapCurrencyAmount from '../../helpers/paymentsWrapCurrencyAmount';
|
|
|
|
import {PaymentsPaymentForm, PaymentsValidatedRequestedInfo, ShippingOption} from '../../layer';
|
|
|
|
import Button from '../button';
|
|
|
|
import RadioField from '../radioField';
|
|
|
|
import Row, {RadioFormFromRows} from '../row';
|
|
|
|
import {SettingSection} from '../sidebarLeft';
|
|
|
|
import {PaymentButton} from './payment';
|
|
|
|
|
|
|
|
export default class PopupPaymentShippingMethods extends PopupElement<{
|
|
|
|
finish: (shippingOption: ShippingOption) => void
|
|
|
|
}> {
|
|
|
|
constructor(
|
|
|
|
private paymentForm: PaymentsPaymentForm,
|
|
|
|
private requestedInfo: PaymentsValidatedRequestedInfo,
|
|
|
|
private shippingOption: ShippingOption
|
|
|
|
) {
|
|
|
|
super('popup-payment popup-payment-shipping-methods', {
|
|
|
|
closable: true,
|
|
|
|
overlayClosable: true,
|
|
|
|
body: true,
|
|
|
|
scrollable: true,
|
|
|
|
title: 'PaymentShippingMethod'
|
|
|
|
});
|
|
|
|
|
|
|
|
this.d();
|
|
|
|
}
|
|
|
|
|
|
|
|
private d() {
|
|
|
|
const section = new SettingSection({name: 'PaymentCheckoutShippingMethod', noDelimiter: true, noShadow: true});
|
|
|
|
|
|
|
|
const rows = this.requestedInfo.shipping_options.map((shippingOption) => {
|
|
|
|
return new Row({
|
|
|
|
radioField: new RadioField({
|
|
|
|
text: shippingOption.title,
|
|
|
|
name: 'shipping-method',
|
|
|
|
value: shippingOption.id
|
|
|
|
}),
|
|
|
|
subtitle: paymentsWrapCurrencyAmount(
|
|
|
|
accumulate(shippingOption.prices.map(({amount}) => +amount), 0),
|
|
|
|
this.paymentForm.invoice.currency
|
|
|
|
)
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
let lastShippingId: string;
|
|
|
|
const form = RadioFormFromRows(rows, (value) => {
|
|
|
|
lastShippingId = value;
|
|
|
|
});
|
|
|
|
|
|
|
|
if(this.shippingOption) {
|
|
|
|
rows.find((row) => row.radioField.input.value === this.shippingOption.id).radioField.checked = true;
|
|
|
|
} else {
|
|
|
|
rows[0].radioField.checked = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
section.content.append(form);
|
|
|
|
|
|
|
|
this.scrollable.append(section.container);
|
|
|
|
|
|
|
|
const payButton = PaymentButton({
|
|
|
|
key: 'PaymentInfo.Done',
|
|
|
|
onClick: () => {
|
|
|
|
this.dispatchEvent('finish', this.requestedInfo.shipping_options.find((option) => option.id === lastShippingId));
|
|
|
|
this.hide();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
this.body.append(this.btnConfirmOnEnter = payButton);
|
|
|
|
|
|
|
|
this.show();
|
|
|
|
}
|
|
|
|
}
|