diff --git a/data/web/webappcontent.telegram.org/cafe.html b/data/web/webappcontent.telegram.org/cafe.html index 358b0a9591..5f2ec1e6e0 100644 --- a/data/web/webappcontent.telegram.org/cafe.html +++ b/data/web/webappcontent.telegram.org/cafe.html @@ -17,192 +17,220 @@ Telegram.WebApp.onEvent('themeChanged', setThemeClass); setThemeClass(); - +
-
-
1
-
- - - - -
-
- Burger - $4.99 -
-
- - -
-
-
1
-
- - - - -
-
- Fries - $1.49 -
-
- - -
-
-
1
-
- - - - -
-
- Hotdog - $3.49 -
-
- - -
-
-
1
-
- - - - -
-
- Taco - $3.99 -
-
- - -
-
-
1
-
- - - - -
-
- Pizza - $7.99 -
-
- - -
-
-
1
-
- - - - -
-
- Donut - $1.49 -
-
- - -
-
-
1
-
- - - - -
-
- Popcorn - $1.99 -
-
- - -
-
-
1
-
- - - - -
-
- Coke - $1.49 -
-
- - -
-
+
1
+ New +
+
+ Cake + ⭐️ 1 +
+
+ +
+
+
1
+
+ + + + + +
+
+ Burger + $4.99 +
+
+ + +
+
+
1
+
+ + + + + +
+
+ Fries + $1.49 +
+
+ + +
+
+
1
+
+ + + + + +
+
+ Hotdog + $3.49 +
+
+ + +
+
+
1
+
+ + + + + +
+
+ Taco + $3.99 +
+
+ + +
+
+
1
+
+ + + + + +
+
+ Pizza + $7.99 +
+
+ + +
+
+
1
+
+ + + + + +
+
+ Donut + $1.49 +
+
+ + +
+
+
1
+
+ + + + + +
+
+ Popcorn + $1.99 +
+
+ + +
+
+
1
+
+ + + + + +
+
+ Coke + $1.49 +
+
+ + +
+
+
1
+
+ + + + +
Cake $10.99
-
-
+
1
+
Icecream $5.99
-
-
+
1
+
Cookie $3.99
-
-
+
1
+
Flan $7.99
-
-
+
+
+ + + + +
+
+
Cake 1x
+
Bread substitute
+
+
⭐️ 1
+
@@ -441,7 +484,7 @@
- + diff --git a/data/web/webappcontent.telegram.org/css/cafe.css b/data/web/webappcontent.telegram.org/css/cafe.css index dec256945d..b7d9d4a60a 100644 --- a/data/web/webappcontent.telegram.org/css/cafe.css +++ b/data/web/webappcontent.telegram.org/css/cafe.css @@ -91,6 +91,14 @@ body.order-mode .cafe-items { padding: 0; margin: 0; } +.stars-only, +.stars-supported .no-stars-only { + display: none; +} +.stars-supported .stars-only { + display: block; +} + .cafe-item-photo { position: relative; height: 78px; @@ -121,6 +129,25 @@ body.order-mode .cafe-items { width: 100%; height: 100%; } +.cafe-item-new { + position: absolute; + right: 50%; + bottom: 10px; + margin-right: -40px; + display: inline-block; + font-family: var(--default-font); + font-weight: 500; + font-size: 11px; + line-height: 14px; + padding: 2px 5px; + border-radius: 4px; + box-sizing: border-box; + background-color: var(--accent-color); + text-transform: uppercase; + color: #fff; + outline: none; + border: none; +} .cafe-item-label { display: flex; justify-content: center; @@ -184,6 +211,14 @@ button, pointer-events: none; z-index: 3; } +.cafe-item-buy-button { + position: absolute !important; + background-color: var(--accent-color); + top: 0; + right: 0; + transition: width var(--animation); + width: 80px; +} .cafe-item-incr-button { position: absolute !important; top: 0; @@ -454,6 +489,20 @@ body.order-mode .cafe-order-overview { background-color: #d3362d; } +i.star-icon { + display: inline-block; + vertical-align: top; + white-space: nowrap; + font-style: normal; + overflow: hidden; + position: relative; + background: url('data:image/svg+xml,%3Csvg%20height%3D%2245%22%20viewBox%3D%220%200%2046%2045%22%20width%3D%2246%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%2225%25%22%20x2%3D%2274.92%25%22%20y1%3D%22.825%25%22%20y2%3D%22107.86%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffd951%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffb222%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%2250%25%22%20x2%3D%2250%25%22%20y1%3D%220%25%22%20y2%3D%2299.795%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23e58f0d%22%2F%3E%3Cstop%20offset%3D%22.99963%22%20stop-color%3D%22%23eb7915%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20id%3D%22c%22%20d%3D%22m15.45%2013.17%205.29-10.61c.61-1.22%202.09-1.71%203.3-1.09.47.24.86.63%201.09%201.11l5%2010.23c.41.83%201.21%201.4%202.12%201.51l10.47%201.27c1.42.17%202.43%201.47%202.26%202.91-.07.59-.34%201.14-.76%201.56l-8.27%208.2c-.33.33-.49.8-.44%201.27l1.38%2011.08c.2%201.59-.92%203.04-2.49%203.23-.59.08-1.19-.04-1.72-.32l-8.74-4.81c-.63-.35-1.39-.36-2.03-.03l-9.06%204.68c-1.27.66-2.83.14-3.48-1.14-.25-.49-.34-1.03-.26-1.57l.72-5.08c.36-2.49%201.89-4.64%204.1-5.78l10.06-5.17c.27-.14.37-.47.24-.74-.11-.21-.34-.33-.57-.29l-12.3%201.77c-1.88.27-3.78-.27-5.26-1.48l-4.09-3.36c-1.17-.96-1.35-2.7-.4-3.88.44-.55%201.08-.9%201.77-.99l10.5-1.36c.68-.09%201.26-.51%201.57-1.12z%22%2F%3E%3Cfilter%20id%3D%22d%22%20height%3D%22111.7%25%22%20width%3D%22111.4%25%22%20x%3D%22-5.7%25%22%20y%3D%22-5.9%25%22%3E%3CfeOffset%20dx%3D%222%22%20dy%3D%223%22%20in%3D%22SourceAlpha%22%20result%3D%22shadowOffsetInner1%22%2F%3E%3CfeComposite%20in%3D%22shadowOffsetInner1%22%20in2%3D%22SourceAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%20result%3D%22shadowInnerInner1%22%2F%3E%3CfeColorMatrix%20in%3D%22shadowInnerInner1%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%201%20%20%200%200%200%200%201%20%20%200%200%200%200%201%20%200%200%200%200.65667938%200%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cuse%20fill%3D%22url%28%23a%29%22%20fill-rule%3D%22evenodd%22%20xlink%3Ahref%3D%22%23c%22%2F%3E%3Cuse%20fill%3D%22%23000%22%20filter%3D%22url%28%23d%29%22%20xlink%3Ahref%3D%22%23c%22%2F%3E%3Cuse%20stroke%3D%22url%28%23b%29%22%20stroke-width%3D%222%22%20xlink%3Ahref%3D%22%23c%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center; + background-size: contain; + letter-spacing: 10em; + text-indent: -10em; + width: 1.3em; +} + .loading-icon { position: absolute; diff --git a/data/web/webappcontent.telegram.org/js/cafe.js b/data/web/webappcontent.telegram.org/js/cafe.js index 0f7919fa24..41399310ac 100644 --- a/data/web/webappcontent.telegram.org/js/cafe.js +++ b/data/web/webappcontent.telegram.org/js/cafe.js @@ -16,7 +16,8 @@ var Cafe = { Cafe.userId = options.userId; Cafe.userHash = options.userHash; Cafe.initLotties(); - $('body').show(); + var starsSupported = Telegram.WebApp.isVersionAtLeast('7.4'); + $('body').toggleClass('stars-supported', starsSupported).show(); if ((!Telegram.WebApp.initDataUnsafe || !Telegram.WebApp.initDataUnsafe.query_id) && Cafe.mode != 'inline' && @@ -29,6 +30,7 @@ var Cafe = { $('.js-item-lottie').on('click', Cafe.eLottieClicked); $('.js-item-incr-btn').on('click', Cafe.eIncrClicked); $('.js-item-decr-btn').on('click', Cafe.eDecrClicked); + $('.js-item-buy-btn').on('click', Cafe.eBuyClicked); $('.js-order-edit').on('click', Cafe.eEditClicked); $('.js-status').on('click', Cafe.eStatusClicked); $('.js-order-comment-field').each(function() { @@ -68,6 +70,12 @@ var Cafe = { var itemEl = $(this).parents('.js-item'); Cafe.incrClicked(itemEl, -1); }, + eBuyClicked: function(e) { + e.preventDefault(); + Telegram.WebApp.HapticFeedback.impactOccurred('light'); + var itemEl = $(this).parents('.js-item'); + Cafe.buyClicked(itemEl); + }, eEditClicked: function(e) { e.preventDefault(); Cafe.toggleMode(false); @@ -199,7 +207,7 @@ var Cafe = { getOrderData: function() { var order_data = []; $('.js-item').each(function() { - var itemEl = $(this) + var itemEl = $(this); var id = itemEl.data('item-id'); var count = +itemEl.data('item-count') || 0; if (count > 0) { @@ -313,6 +321,51 @@ var Cafe = { Cafe.toggleMode(true); } }, + buyClicked: function(itemEl) { + if (Cafe.isLoading || Cafe.isClosed) { + return false; + } + var id = itemEl.data('item-id'); + var params = { + item_id: id + }; + if (Cafe.mode) { + params.mode = Cafe.mode; + } + if (Cafe.userId && Cafe.userHash) { + params.user_id = Cafe.userId; + params.user_hash = Cafe.userHash; + } + var invoiceSupported = Telegram.WebApp.isVersionAtLeast('6.1'); + if (invoiceSupported) { + params.invoice = 1; + } + Cafe.toggleLoading(true); + Cafe.apiRequest('buyItem', params, function(result) { + Cafe.toggleLoading(false); + if (result.ok) { + if (invoiceSupported) { + Telegram.WebApp.openInvoice(result.invoice_url, function(status) { + if (status == 'paid') { + Telegram.WebApp.close(); + } else if (status == 'failed') { + Telegram.WebApp.HapticFeedback.notificationOccurred('error'); + Cafe.showStatus('Payment has been failed.'); + } else { + Telegram.WebApp.HapticFeedback.notificationOccurred('warning'); + Cafe.showStatus('You have cancelled this order.'); + } + }); + } else { + Telegram.WebApp.close(); + } + } + if (result.error) { + Telegram.WebApp.HapticFeedback.notificationOccurred('error'); + Cafe.showStatus(result.error); + } + }); + }, eStatusClicked: function() { Cafe.hideStatus(); },