Improve design of payment bottom buttons.

Telegram/SourceFiles/payments/payments_checkout_process.cpp

@@ -106,7 +106,7 @@ CheckoutProcess::CheckoutProcess(
 	}, _lifetime);
 	_panel->backRequests(
 	) | rpl::start_with_next([=] {
-		showForm();
+		panelCancelEdit();
 	}, _panel->lifetime());
 	showForm();
 }
@@ -385,6 +385,13 @@ bool CheckoutProcess::panelWebviewNavigationAttempt(const QString &uri) {
 	return false;
 }
 
+void CheckoutProcess::panelCancelEdit() {
+	if (_submitState != SubmitState::None) {
+		return;
+	}
+	showForm();
+}
+
 void CheckoutProcess::panelEditPaymentMethod() {
 	if (_submitState != SubmitState::None
 		&& _submitState != SubmitState::Validated) {

Telegram/SourceFiles/payments/payments_checkout_process.h

@@ -85,6 +85,7 @@ private:
 	void panelWebviewMessage(const QJsonDocument &message) override;
 	bool panelWebviewNavigationAttempt(const QString &uri) override;
 
+	void panelCancelEdit() override;
 	void panelEditPaymentMethod() override;
 	void panelEditShippingInformation() override;
 	void panelEditName() override;

Telegram/SourceFiles/payments/ui/payments.style

@@ -9,12 +9,13 @@ using "ui/basic.style";
 
 using "info/info.style";
 
+paymentsPanelButton: defaultBoxButton;
 paymentsPanelSubmit: RoundButton(defaultActiveButton) {
-	width: 0px;
+	width: -36px;
-	height: 49px;
+	height: 36px;
-	padding: margins(0px, -3px, 0px, 0px);
+	font: boxButtonFont;
-	textTop: 16px;
 }
+paymentsPanelPadding: margins(8px, 12px, 15px, 12px);
 
 paymentsCoverPadding: margins(26px, 0px, 26px, 13px);
 paymentsDescription: FlatLabel(defaultFlatLabel) {

Telegram/SourceFiles/payments/ui/payments_edit_card.cpp

@@ -208,10 +208,14 @@ EditCard::EditCard(
 , _scroll(this, st::passportPanelScroll)
 , _topShadow(this)
 , _bottomShadow(this)
-, _done(
+, _submit(
+	this,
+	tr::lng_about_done(),
+	st::paymentsPanelButton)
+, _cancel(
 		this,
-		tr::lng_about_done(),
+		tr::lng_cancel(),
-		st::passportPanelSaveValue) {
+		st::paymentsPanelButton) {
 	setupControls();
 }
 
@@ -241,9 +245,12 @@ void EditCard::showError(CardField field) {
 void EditCard::setupControls() {
 	const auto inner = setupContent();
 
-	_done->addClickHandler([=] {
+	_submit->addClickHandler([=] {
 		_delegate->panelValidateCard(collect());
 	});
+	_cancel->addClickHandler([=] {
+		_delegate->panelCancelEdit();
+	});
 
 	using namespace rpl::mappers;
 
@@ -364,14 +371,20 @@ void EditCard::focusInEvent(QFocusEvent *e) {
 }
 
 void EditCard::updateControlsGeometry() {
-	const auto submitTop = height() - _done->height();
+	const auto &padding = st::paymentsPanelPadding;
-	_scroll->setGeometry(0, 0, width(), submitTop);
+	const auto buttonsHeight = padding.top()
+		+ _cancel->height()
+		+ padding.bottom();
+	const auto buttonsTop = height() - buttonsHeight;
+	_scroll->setGeometry(0, 0, width(), buttonsTop);
 	_topShadow->resizeToWidth(width());
 	_topShadow->moveToLeft(0, 0);
 	_bottomShadow->resizeToWidth(width());
-	_bottomShadow->moveToLeft(0, submitTop - st::lineWidth);
+	_bottomShadow->moveToLeft(0, buttonsTop - st::lineWidth);
-	_done->setFullWidth(width());
+	auto right = padding.right();
-	_done->moveToLeft(0, submitTop);
+	_submit->moveToRight(right, buttonsTop + padding.top());
+	right += _submit->width() + padding.left();
+	_cancel->moveToRight(right, buttonsTop + padding.top());
 
 	_scroll->updateBars();
 }

Telegram/SourceFiles/payments/ui/payments_edit_card.h

@@ -53,7 +53,8 @@ private:
 	object_ptr<ScrollArea> _scroll;
 	object_ptr<FadeShadow> _topShadow;
 	object_ptr<FadeShadow> _bottomShadow;
-	object_ptr<RoundButton> _done;
+	object_ptr<RoundButton> _submit;
+	object_ptr<RoundButton> _cancel;
 
 	std::unique_ptr<Field> _number;
 	std::unique_ptr<Field> _cvc;

Telegram/SourceFiles/payments/ui/payments_edit_information.cpp

@@ -44,10 +44,14 @@ EditInformation::EditInformation(
 , _scroll(this, st::passportPanelScroll)
 , _topShadow(this)
 , _bottomShadow(this)
-, _done(
+, _submit(
+	this,
+	tr::lng_settings_save(),
+	st::paymentsPanelButton)
+, _cancel(
 		this,
-		tr::lng_about_done(),
+		tr::lng_cancel(),
-		st::passportPanelSaveValue) {
+		st::paymentsPanelButton) {
 	setupControls();
 }
 
@@ -79,9 +83,12 @@ void EditInformation::showError(InformationField field) {
 void EditInformation::setupControls() {
 	const auto inner = setupContent();
 
-	_done->addClickHandler([=] {
+	_submit->addClickHandler([=] {
 		_delegate->panelValidateInformation(collect());
 	});
+	_cancel->addClickHandler([=] {
+		_delegate->panelCancelEdit();
+	});
 
 	using namespace rpl::mappers;
 
@@ -189,14 +196,20 @@ void EditInformation::focusInEvent(QFocusEvent *e) {
 }
 
 void EditInformation::updateControlsGeometry() {
-	const auto submitTop = height() - _done->height();
+	const auto &padding = st::paymentsPanelPadding;
-	_scroll->setGeometry(0, 0, width(), submitTop);
+	const auto buttonsHeight = padding.top()
+		+ _cancel->height()
+		+ padding.bottom();
+	const auto buttonsTop = height() - buttonsHeight;
+	_scroll->setGeometry(0, 0, width(), buttonsTop);
 	_topShadow->resizeToWidth(width());
 	_topShadow->moveToLeft(0, 0);
 	_bottomShadow->resizeToWidth(width());
-	_bottomShadow->moveToLeft(0, submitTop - st::lineWidth);
+	_bottomShadow->moveToLeft(0, buttonsTop - st::lineWidth);
-	_done->setFullWidth(width());
+	auto right = padding.right();
-	_done->moveToLeft(0, submitTop);
+	_submit->moveToRight(right, buttonsTop + padding.top());
+	right += _submit->width() + padding.left();
+	_cancel->moveToRight(right, buttonsTop + padding.top());
 
 	_scroll->updateBars();
 }

Telegram/SourceFiles/payments/ui/payments_edit_information.h

@@ -59,7 +59,8 @@ private:
 	object_ptr<ScrollArea> _scroll;
 	object_ptr<FadeShadow> _topShadow;
 	object_ptr<FadeShadow> _bottomShadow;
-	object_ptr<RoundButton> _done;
+	object_ptr<RoundButton> _submit;
+	object_ptr<RoundButton> _cancel;
 
 	std::unique_ptr<Field> _street1;
 	std::unique_ptr<Field> _street2;

Telegram/SourceFiles/payments/ui/payments_form_summary.cpp

@@ -47,16 +47,20 @@ FormSummary::FormSummary(
 , _scroll(this, st::passportPanelScroll)
 , _topShadow(this)
 , _bottomShadow(this)
-, _submit(
+, _submit(_invoice.receipt.paid
-	this,
+	? object_ptr<RoundButton>(nullptr)
-	(_invoice.receipt.paid
+	: object_ptr<RoundButton>(
-		? tr::lng_about_done()
+		this,
-		: tr::lng_payments_pay_amount(
+		tr::lng_payments_pay_amount(
 			lt_amount,
-			rpl::single(formatAmount(computeTotalAmount())))),
+			rpl::single(formatAmount(computeTotalAmount()))),
-	(_invoice.receipt.paid
+		st::paymentsPanelSubmit))
-		? st::passportPanelSaveValue
+, _cancel(
-		: st::paymentsPanelSubmit)) {
+		this,
+		(_invoice.receipt.paid
+			? tr::lng_about_done()
+			: tr::lng_cancel()),
+		st::paymentsPanelButton) {
 	setupControls();
 }
 
@@ -92,11 +96,19 @@ int64 FormSummary::computeTotalAmount() const {
 void FormSummary::setupControls() {
 	const auto inner = setupContent();
 
-	_submit->addClickHandler([=] {
+	if (_submit) {
-		_delegate->panelSubmit();
+		_submit->addClickHandler([=] {
+			_delegate->panelSubmit();
+		});
+	}
+	_cancel->addClickHandler([=] {
+		_delegate->panelRequestClose();
 	});
 	if (!_invoice) {
-		_submit->hide();
+		if (_submit) {
+			_submit->hide();
+		}
+		_cancel->hide();
 	}
 
 	using namespace rpl::mappers;
@@ -387,14 +399,22 @@ void FormSummary::resizeEvent(QResizeEvent *e) {
 }
 
 void FormSummary::updateControlsGeometry() {
-	const auto submitTop = height() - _submit->height();
+	const auto &padding = st::paymentsPanelPadding;
-	_scroll->setGeometry(0, 0, width(), submitTop);
+	const auto buttonsHeight = padding.top()
+		+ _cancel->height()
+		+ padding.bottom();
+	const auto buttonsTop = height() - buttonsHeight;
+	_scroll->setGeometry(0, 0, width(), buttonsTop);
 	_topShadow->resizeToWidth(width());
 	_topShadow->moveToLeft(0, 0);
 	_bottomShadow->resizeToWidth(width());
-	_bottomShadow->moveToLeft(0, submitTop - st::lineWidth);
+	_bottomShadow->moveToLeft(0, buttonsTop - st::lineWidth);
-	_submit->setFullWidth(width());
+	auto right = padding.right();
-	_submit->moveToLeft(0, submitTop);
+	if (_submit) {
+		_submit->moveToRight(right, buttonsTop + padding.top());
+		right += _submit->width() + padding.left();
+	}
+	_cancel->moveToRight(right, buttonsTop + padding.top());
 
 	_scroll->updateBars();
 }

Telegram/SourceFiles/payments/ui/payments_form_summary.h

@@ -58,6 +58,7 @@ private:
 	object_ptr<FadeShadow> _topShadow;
 	object_ptr<FadeShadow> _bottomShadow;
 	object_ptr<RoundButton> _submit;
+	object_ptr<RoundButton> _cancel;
 	rpl::event_stream<QImage> _thumbnails;
 
 };

Telegram/SourceFiles/payments/ui/payments_panel_delegate.h

@@ -31,6 +31,7 @@ public:
 	virtual void panelWebviewMessage(const QJsonDocument &message) = 0;
 	virtual bool panelWebviewNavigationAttempt(const QString &uri) = 0;
 
+	virtual void panelCancelEdit() = 0;
 	virtual void panelEditPaymentMethod() = 0;
 	virtual void panelEditShippingInformation() = 0;
 	virtual void panelEditName() = 0;

Telegram/SourceFiles/ui/text/format_values.cpp

@@ -372,7 +372,7 @@ QString FillAmountAndCurrency(int64 amount, const QString &currency) {
 	const auto name = (*rule.international)
 		? QString::fromUtf8(rule.international)
 		: currency;
-	auto result = QString();
+	auto result = prefix;
 	if (rule.left) {
 		result.append(name);
 		if (rule.space) result.append(' ');
@@ -381,7 +381,7 @@ QString FillAmountAndCurrency(int64 amount, const QString &currency) {
 		|| std::floor(value) != value)
 		? exponent
 		: 0;
-	result.append(prefix).append(FormatWithSeparators(
+	result.append(FormatWithSeparators(
 		value,
 		precision,
 		rule.decimal,