RanchiMall/flopay
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.0.34

Browse Source
This commit is contained in:
sairaj mote 2020-09-19 01:38:59 +05:30
parent 45631075b2
commit 08a16aabcc
7 changed files with 204 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components.js
View File

@ -368,7 +368,7 @@ customElements.define('sm-input',
this.dispatchEvent(event); this.dispatchEvent(event);
} }
checkInput = () => { checkInput = (e) => {
if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '')
return; return;
if (this.input.value !== '') { if (this.input.value !== '') {
@ -397,6 +397,8 @@ customElements.define('sm-input',
this.helperText = this.shadowRoot.querySelector('.helper-text') this.helperText = this.shadowRoot.querySelector('.helper-text')
this.valueChanged = false; this.valueChanged = false;
this.readonly = false this.readonly = false
this.min
this.max
this.animate = this.hasAttribute('animate') this.animate = this.hasAttribute('animate')
this.input = this.shadowRoot.querySelector('input') this.input = this.shadowRoot.querySelector('input')
this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder') this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder')
@ -410,6 +412,12 @@ customElements.define('sm-input',
if (this.hasAttribute('min')) { if (this.hasAttribute('min')) {
let minValue = this.getAttribute('min') let minValue = this.getAttribute('min')
this.input.setAttribute('min', minValue) this.input.setAttribute('min', minValue)
this.min = parseInt(minValue)
}
if (this.hasAttribute('max')) {
let maxValue = this.getAttribute('max')
this.input.setAttribute('max', maxValue)
this.max = parseInt(maxValue)
} }
if (this.hasAttribute('pattern')) { if (this.hasAttribute('pattern')) {
this.input.setAttribute('pattern', this.getAttribute('pattern')) this.input.setAttribute('pattern', this.getAttribute('pattern'))
@ -1817,6 +1825,15 @@ customElements.define('sm-popup', class extends HTMLElement {
this.popupContainer.classList.remove('hide') this.popupContainer.classList.remove('hide')
this.popup.style.transform = 'translateY(0)'; this.popup.style.transform = 'translateY(0)';
document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`) document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
this.dispatchEvent(
new CustomEvent("popupopened", {
bubbles: true,
detail: {
popup: this,
popupStack: this.popupStack
}
})
)
return this.popupStack return this.popupStack
} }
hide = () => { hide = () => {

1
css/Asset 1.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="807.02" height="429.87" viewBox="0 0 807.02 429.87"><defs><style>.a{fill:#e6e6e6;}</style></defs><title>Asset 1</title><path class="a" d="M298.86,193c-.48-12.19,59.59-31,100.69-42.4A16.91,16.91,0,0,0,404,120L234.06,13.35,0,140.73s190.43,1,118.74,1.5L104.46,400.35c51.53-8.08,112-22.6,115.56-49.68,3.07-23.38-38.57-38.65-34.56-59.4C193.05,252,350.84,261.79,355,233,357.05,219,299.57,211,298.86,193Z"/><path class="a" d="M699.14,106.56H807L637.16,0,462.82,94.88A27.08,27.08,0,0,0,449,118.35a.49.49,0,0,0,0,.12c-1,14.78,42.47,27.38,40,47.52-2.85,22.87-61.39,26.9-61.56,42.12-.23,20.48,105.68,27.94,108,55.08,1.84,21.5-63.59,28.79-67,59.4-4.27,38.75,94.82,79.49,148,95,37.17,10.88,55.76,16.32,71.28,8.64,60.74-30.06,36.62-191.63,30.24-234.36A643.24,643.24,0,0,0,699.14,106.56Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 828 B

1
css/card-back.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" viewBox="0 0 512 512"><defs><style>.a{fill:url(#a);}.b{fill:#ead9c5;}.c{fill:#d6b799;}</style><radialGradient id="a" cx="-21.79" cy="-46.86" r="476.25" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#68bbea"/><stop offset="1" stop-color="#ade4f7"/></radialGradient></defs><title>card-back</title><path class="a" d="M-107.16,293.52C45.19,273,156.39,282.59,232,296.31c18,3.27,67,12.77,130.64,5.53C397,297.93,509.84,285,538.18,216c6-14.53,4.59-37,1.58-81.25-1.53-22.54-7-103.17-17.28-132.84C483.09-111.8,116.85-217.84-46.68-32.64-152.11,86.76-113.71,265.09-107.16,293.52Z"/><path class="b" d="M261.88,223.61c78.38,54.16,155.44,51.73,155.12,63.07-.26,9-48.57,14.57-71.38,17.21-51.93,6-79.16,4.29-126.62,5.83-68.51,2.23-141.69,10-141.84,18.48C77.08,332.63,97,335,96.6,338.52c-.94,7.9-99.11,17.06-122.64,25-.16.06-8.08,5.28-8.4,5.28-1.21,0-2.28-2.28-3.33-6.15L49.08,193.13,70.32,170l25.14-49.93a14.19,14.19,0,0,1,8.19,2.15l139,87.18C246.45,211.85,252.1,216.84,261.88,223.61Z"/><path class="c" d="M95.46,120.11,70.32,170,49.08,193.13-37.77,362.61C-44.5,337.73-50.1,245.78-82.25,245.55c-14.7-.1-19.62-19.7-6.71-26.73l178.25-97A14,14,0,0,1,95.46,120.11Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

32
css/main.css
View File

@ -67,6 +67,10 @@ p {
color: rgba(var(--text-color), 0.9); color: rgba(var(--text-color), 0.9);
} }
strong {
font-weight: 500;
}
button { button {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
@ -976,10 +980,26 @@ sm-panel {
stroke-dashoffset: 0; stroke-dashoffset: 0;
} }
} }
#success_section h4, #failure_section h4 { #transaction_result {
text-align: center; z-index: 12;
}
#transaction_result::part(popup) {
background-image: url(card-back.svg);
background-size: cover;
background-position-y: -4rem;
background-repeat: no-repeat;
}
#transaction_result .copy-row {
margin-top: 1rem; margin-top: 1rem;
} }
#transaction_result h4, #transaction_result p {
text-align: center;
}
#transaction_result > h4 {
font-size: 1.2rem;
margin-top: 6rem;
margin-bottom: 0.5rem;
}
#success_svg, #failure_svg { #success_svg, #failure_svg {
height: 5rem; height: 5rem;
@ -988,8 +1008,8 @@ sm-panel {
align-self: center; align-self: center;
stroke: none; stroke: none;
stroke-dasharray: 50; stroke-dasharray: 50;
fill: rgba(var(--text-color), 0.06); fill: rgba(var(--foreground-color), 0.8);
animation: popup 2s forwards infinite cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
} }
#success_svg polyline { #success_svg polyline {
@ -1007,6 +1027,10 @@ sm-panel {
fill: rgba(var(--text-color), 0.5); fill: rgba(var(--text-color), 0.5);
} }
#deposit_rupee .copy-row {
margin-bottom: 1rem;
}
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
#home_page, #deposit { #home_page, #deposit {
display: grid; display: grid;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

34
css/main.scss
View File

@ -66,7 +66,9 @@ p {
max-width: 60ch; max-width: 60ch;
color: rgba(var(--text-color), 0.9); color: rgba(var(--text-color), 0.9);
} }
strong{
font-weight: 500;
}
button { button {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
@ -1047,11 +1049,25 @@ sm-panel{
stroke-dashoffset: 0; stroke-dashoffset: 0;
} }
} }
#success_section, #failure_section{ #transaction_result{
h4{ z-index: 12;
text-align: center; &::part(popup){
background-image: url(card-back.svg);
background-size: cover;
background-position-y: -4rem;
background-repeat: no-repeat;
}
.copy-row{
margin-top: 1rem; margin-top: 1rem;
} }
h4, p{
text-align: center;
}
& > h4{
font-size: 1.2rem;
margin-top: 6rem;
margin-bottom: 0.5rem;
}
} }
#success_svg, #failure_svg{ #success_svg, #failure_svg{
height: 5rem; height: 5rem;
@ -1060,8 +1076,8 @@ sm-panel{
align-self: center; align-self: center;
stroke: none; stroke: none;
stroke-dasharray: 50; stroke-dasharray: 50;
fill: rgba(var(--text-color), 0.06); fill: rgba(var(--foreground-color), 0.8);
animation: popup 2s forwards infinite cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
} }
#success_svg{ #success_svg{
@ -1082,6 +1098,12 @@ sm-panel{
fill: rgba(var(--text-color), 0.5); fill: rgba(var(--text-color), 0.5);
} }
#deposit_rupee{
.copy-row{
margin-bottom: 1rem;
}
}
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
#home_page, #deposit{ #home_page, #deposit{
display: grid; display: grid;

237
index.html
View File

@ -68,10 +68,10 @@
</svg> </svg>
<p> <p>
Send rupee to any FLO address.<br> Send rupee to any FLO address.<br>
*Requires Rupee to be deposited first. <strong>Make sure you hav enough balance.</strong>
</p> </p>
<sm-input floId id="token_receiver" placeholder="Reciever's FLO ID" required animate></sm-input> <sm-input floId id="token_receiver" placeholder="Reciever's FLO ID" required animate></sm-input>
<sm-input id="token_amount" placeholder="Amount" type="number" min="1" required animate> <sm-input id="token_amount" placeholder="Amount" type="number" min="1" max="100000" required animate>
<svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64"> <svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64">
<title>rupee-symbol</title> <title>rupee-symbol</title>
<path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/> <path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/>
@ -105,34 +105,30 @@
d="M54.39,32h6.08a3,3,0,0,1,3,3V44a3,3,0,0,1-3,3H54.39a7.49,7.49,0,0,1-7.49-7.49v0A7.49,7.49,0,0,1,54.39,32Z" /> d="M54.39,32h6.08a3,3,0,0,1,3,3V44a3,3,0,0,1-3,3H54.39a7.49,7.49,0,0,1-7.49-7.49v0A7.49,7.49,0,0,1,54.39,32Z" />
<polyline points="38.61 44.12 29.54 35.05 20.39 44.2" /> <polyline points="38.61 44.12 29.54 35.05 20.39 44.2" />
</svg> </svg>
<sm-button onclick="showPopup('transaction_result')">result</sm-button> <p>
<section id="deposit_amount_section"> Add money through UPI.
<p> </p>
Add money through UPI. <sm-button onclick="showPopup('transaction_result')">show</sm-button>
</p> <p id="send_amount_to_deposit">Pay ₹0 to UPI Id below.</p>
<sm-input id="token_amount_to_buy" placeholder="Amount" type="number" min="1" required animate> <div class="copy-row">
<svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64"> <h4 id="send_cash_to_deposit" class="copy"></h4>
<title>rupee-symbol</title> <svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
<path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/> <title>Copy</title>
</svg> <rect x="16" y="16" width="48" height="48" rx="6" />
</sm-input> <path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
</section> </svg>
<section id="upi_txId_section" class="hide-completely"> </div>
<p id="send_amount_to_deposit"></p> <sm-input id="token_amount_to_buy" placeholder="Amount" type="number" min="1" max="100000" required animate>
<div class="copy-row"> <svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64">
<h4 id="send_cash_to_deposit" class="copy"></h4> <title>rupee-symbol</title>
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64"> <path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/>
<title>Copy</title> </svg>
<rect x="16" y="16" width="48" height="48" rx="6" /> </sm-input>
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" /> <sm-input id="deposited_rupee_txid" placeholder="UPI Transaction ID" pattern="^[a-zA-z0-9]+"
</svg> required animate></sm-input>
</div>
<sm-input id="deposited_rupee_txid" placeholder="UPI Transaction ID" pattern="^[a-zA-z0-9]+" disabled
required animate></sm-input>
</section>
<button id="request_tokens_btn" class="action expand" type="submit" disabled> <button id="request_tokens_btn" class="action expand" type="submit" disabled>
<h4 class="primary-btn expand"> <h4 class="primary-btn expand">
Continue Deposit
</h4> </h4>
<svg viewBox="0 0 73 73" class="loader"> <svg viewBox="0 0 73 73" class="loader">
<path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" /> <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
@ -162,14 +158,14 @@
<p> <p>
Withdraw or redeem your Rupee back to your specified UPI address. Withdraw or redeem your Rupee back to your specified UPI address.
</p> </p>
<sm-input id="user_withdraw_upi" placeholder="Reciever's UPI address" pattern="^[a-zA-z0-9]+@[a-zA-z0-9]+" <sm-input id="withdraw_cash_amount" placeholder="Amount" type="number" min="1" max="100000" required animate>
required animate></sm-input>
<sm-input id="withdraw_cash_amount" placeholder="Amount" type="number" min="1" required animate>
<svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64"> <svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64">
<title>rupee-symbol</title> <title>rupee-symbol</title>
<path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/> <path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/>
</svg> </svg>
</sm-input> </sm-input>
<sm-input id="user_withdraw_upi" placeholder="Reciever's UPI address" pattern="^[a-zA-z0-9]+@[a-zA-z0-9]+"
required animate></sm-input>
<button id="withdraw_cash_btn" class="action expand" type="submit" disabled> <button id="withdraw_cash_btn" class="action expand" type="submit" disabled>
<h4 class="primary-btn expand"> <h4 class="primary-btn expand">
withdraw withdraw
@ -196,7 +192,7 @@
Request Rupee from other's using FLO address. Request Rupee from other's using FLO address.
</p> </p>
<sm-input floId id="requested_address" placeholder="Request from" required animate></sm-input> <sm-input floId id="requested_address" placeholder="Request from" required animate></sm-input>
<sm-input id="requested_amount" placeholder="Amount" type="number" min="1" required animate> <sm-input id="requested_amount" placeholder="Amount" type="number" min="1" max="100000" required animate>
<svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64"> <svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64">
<title>rupee-symbol</title> <title>rupee-symbol</title>
<path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/> <path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/>
@ -235,8 +231,8 @@
</p> </p>
</details> </details>
<p id="pay_cashier_info"></p> <p id="pay_cashier_info"></p>
<sm-input floId id="recvr_id" placeholder="Reciever's FLO ID" required animaate></sm-input> <sm-input floId id="recvr_id" placeholder="Reciever's FLO ID" required animate></sm-input>
<sm-input id="recvr_amount_to_pay" placeholder="Amount" type="number" min="1" required animate> <sm-input id="recvr_amount_to_pay" placeholder="Amount" type="number" min="1" max="100000" required animate>
<svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64"> <svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64">
<title>rupee-symbol</title> <title>rupee-symbol</title>
<path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/> <path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/>
@ -261,21 +257,12 @@
<line x1="64" y1="64" x2="0" y2="0" /> <line x1="64" y1="64" x2="0" y2="0" />
</svg> </svg>
</header> </header>
<section id="success_section" class="flex direction-column"> <section id="success_section" class="flex direction-column hide-completely">
<svg id="success_svg" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <svg id="success_svg" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<title>success</title> <title>success</title>
<ellipse cx="32" cy="32" rx="31.5" ry="31.49"/> <ellipse cx="32" cy="32" rx="31.5" ry="31.49"/>
<polyline points="17.04 30.48 27.92 41.36 46.96 22.32"/> <polyline points="17.04 30.48 27.92 41.36 46.96 22.32"/>
</svg> </svg>
<h4>Transaction Successful</h4>
<div class="copy-row">
<h4 id="successful_transaction_id" class="copy"></h4>
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
<title>Copy</title>
<rect x="16" y="16" width="48" height="48" rx="6" />
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
</svg>
</div>
</section> </section>
<section id="failure_section" class="hide-completely flex direction-column"> <section id="failure_section" class="hide-completely flex direction-column">
<svg id="failure_svg" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <svg id="failure_svg" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
@ -284,9 +271,17 @@
<line x1="22.5" y1="22.5" x2="41.5" y2="41.5"/> <line x1="22.5" y1="22.5" x2="41.5" y2="41.5"/>
<line x1="41.5" y1="22.5" x2="22.5" y2="41.5"/> <line x1="41.5" y1="22.5" x2="22.5" y2="41.5"/>
</svg> </svg>
<h4>Transaction Failed</h4>
</section> </section>
<h4 id="transaction_heading"></h4>
<p id="transaction_message"></p> <p id="transaction_message"></p>
<div class="copy-row">
<h4 id="successful_transaction_id" class="copy"></h4>
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
<title>Copy</title>
<rect x="16" y="16" width="48" height="48" rx="6" />
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
</svg>
</div>
</sm-popup> </sm-popup>
<!-- Report popup--> <!-- Report popup-->
<sm-popup id="report_popup"> <sm-popup id="report_popup">
@ -356,7 +351,7 @@
<line y1="32.5" x2="19" y2="32.5" /> <line y1="32.5" x2="19" y2="32.5" />
<line x1="7" y1="50" x2="26" y2="50" /> <line x1="7" y1="50" x2="26" y2="50" />
</svg> </svg>
<h5>Transactions</h5> <h5>Activity</h5>
</div> </div>
<div title="helpline page" class="navbar-item helpline-option" id="helpline_page_btn" <div title="helpline page" class="navbar-item helpline-option" id="helpline_page_btn"
onclick="showPage(this, 'helpline_page')"> onclick="showPage(this, 'helpline_page')">
@ -711,7 +706,7 @@
</sm-tab-panels> </sm-tab-panels>
</section> </section>
<section id="activity_page" class="page"> <section id="activity_page" class="page">
<h3>Transactions</h3> <h3>Activity</h3>
<p class="bottom-margin">*If your request isn't completed in 12hrs, use <strong>REPORT</strong> to get <p class="bottom-margin">*If your request isn't completed in 12hrs, use <strong>REPORT</strong> to get
assistance from our helpline.</p> assistance from our helpline.</p>
<sm-tab-header target="user_activities"> <sm-tab-header target="user_activities">
@ -1308,10 +1303,18 @@
// hides the popup or modal // hides the popup or modal
function hidePopup() { function hidePopup() {
if (popupStack.peek() === undefined) if (popupStack.peek() === undefined)
return; return;
thisPopup.hide() popupStack.peek().popup.hide()
} }
document.addEventListener('popupopened', e => {
let thisPopup = e.detail.popup
switch(e.detail.popup.id){
case 'deposit_rupee' :
request_rupee_token()
break;
}
})
document.addEventListener('popupclosed', e => { document.addEventListener('popupclosed', e => {
popupStack = e.detail.popupStack popupStack = e.detail.popupStack
let thisPopup = e.detail.popup, let thisPopup = e.detail.popup,
@ -1337,12 +1340,12 @@
tokenReceiver.disabled = false tokenReceiver.disabled = false
tokenAmount.disabled = false tokenAmount.disabled = false
break; break;
case 'deposit_rupee': case 'transaction_result' :
depositRequested = 0; transactionHeading.textContent = ''
document.getElementById('upi_txId_section').classList.add('hide-completely') transactionMessage.innerHTML = ''
document.getElementById('deposit_amount_section').classList.remove('hide-completely') transactionSuccessId.textContent = ''
depositedRupeeTxId.disabled = true transactionSuccessSection.classList.add('hide-completely')
document.getElementById('request_tokens_btn').children[0].textContent = 'Continue' transactionFailedSection.classList.add('hide-completely')
break; break;
case 'prompt': case 'prompt':
if (thisPopup.querySelector('sm-input').value == '') if (thisPopup.querySelector('sm-input').value == '')
@ -1508,15 +1511,21 @@
submitBtn.disabled = true; submitBtn.disabled = true;
} }
let allForms = document.querySelectorAll('form'), let payingRequested = false,
payingRequested = false,
currentPaymentRequest; currentPaymentRequest;
const tokenReceiver = document.getElementById('token_receiver'), const tokenReceiver = document.getElementById('token_receiver'),
tokenAmount = document.getElementById('token_amount') tokenAmount = document.getElementById('token_amount'),
depositRupeeAmount = document.getElementById('token_amount_to_buy')
window.addEventListener('load', () => { window.addEventListener('load', () => {
document.addEventListener('input', e => { document.addEventListener('input', e => {
if (e.target.closest('sm-input')) { if (e.target.closest('sm-input')) {
formValidation(e.target.closest('sm-input')) let input = e.target.closest('sm-input')
formValidation(input)
if(input.id === 'token_amount_to_buy'){
let amount = input.value < 1 ? 0 : input.value
document.getElementById('send_amount_to_deposit').innerHTML = `Pay <b>₹${amount}</b> to UPI Id below.`;
}
} }
}) })
document.addEventListener('keyup', (e) => { document.addEventListener('keyup', (e) => {
@ -1602,7 +1611,7 @@
senderAddress = parent.dataset.senderAddress, senderAddress = parent.dataset.senderAddress,
amount = parent.dataset.amount, amount = parent.dataset.amount,
paymentRequestId = parent.dataset.paymentRequestId;; paymentRequestId = parent.dataset.paymentRequestId;;
let popup = showPopup('cash_transfer'); showPopup('cash_transfer');
payingRequested = true; payingRequested = true;
currentPaymentRequest = { currentPaymentRequest = {
paymentRequest: parent, paymentRequest: parent,
@ -1648,6 +1657,27 @@
}) })
const transactionSuccessSection = document.getElementById('success_section'),
transactionFailedSection = document.getElementById('failure_section'),
transactionSuccessId = document.getElementById('successful_transaction_id'),
transactionHeading = document.getElementById('transaction_heading'),
transactionMessage = document.getElementById('transaction_message')
function showTrasactionStatus(status, heading, message, transactionId){
transactionHeading.textContent = heading
transactionMessage.innerHTML = message
transactionSuccessId.textContent = transactionId
if(status === 'success'){
transactionSuccessSection.classList.remove('hide-completely')
transactionFailedSection.classList.add('hide-completely')
}
else{
transactionSuccessSection.classList.add('hide-completely')
transactionFailedSection.classList.remove('hide-completely')
}
showPopup('transaction_result')
}
let allPages = document.querySelectorAll('.page'), let allPages = document.querySelectorAll('.page'),
allTabs = document.querySelectorAll('.navbar-item'); allTabs = document.querySelectorAll('.navbar-item');
@ -11158,7 +11188,10 @@
{ {
"FCja6sLv58e3RMy41T5AmWyvXEWesqBCkX": { "FCja6sLv58e3RMy41T5AmWyvXEWesqBCkX": {
"upi_id": "8507742774@ybl" "upi_id": "8507742774@ybl"
}, }
}`
/*
,
"FHW2kgYEhDt85vjAiMMF7bQqdP74L7iwvQ": { "FHW2kgYEhDt85vjAiMMF7bQqdP74L7iwvQ": {
"upi_id": "8340617958@ybl" "upi_id": "8340617958@ybl"
}, },
@ -11174,7 +11207,7 @@
"FQ6udJuTbGDa2kWZAkmNpwgHaUEeYLPAtt": { "FQ6udJuTbGDa2kWZAkmNpwgHaUEeYLPAtt": {
"upi_id": "krishraj1012-2@okicici" "upi_id": "krishraj1012-2@okicici"
} }
}` */
text = removeWhiteSpaces(text); text = removeWhiteSpaces(text);
return text; return text;
const master_data = await ajaxGet( const master_data = await ajaxGet(
@ -11318,9 +11351,6 @@
userType.forEach(user => user.textContent = 'User') userType.forEach(user => user.textContent = 'User')
showPage(document.getElementById('home_page_btn'), 'home_page') showPage(document.getElementById('home_page_btn'), 'home_page')
} }
hidePopup()
await this.retrieveLatestContent(); await this.retrieveLatestContent();
@ -11709,14 +11739,12 @@
if (token_receiver.length < 1 || !floCrypto.validateAddr(token_receiver)) { if (token_receiver.length < 1 || !floCrypto.validateAddr(token_receiver)) {
err_msg = `Invalid receiver FLO address.`; err_msg = `Invalid receiver FLO address.`;
notify(err_msg, 'error'); notify(err_msg, 'error');
hidePopup();
return false; return false;
} }
if (typeof sender_token_balance !== "object") { if (typeof sender_token_balance !== "object") {
err_msg = `Failed to load Sender balance.`; err_msg = `Failed to load Sender balance.`;
notify(err_msg, 'error'); notify(err_msg, 'error');
hidePopup()
return false; return false;
} }
@ -11782,23 +11810,25 @@
} }
const get_user_unconfirmed_rupee_balance = await get_unconfirmed_balance(myFloID, get_user_rupee_balance.balance); const get_user_unconfirmed_rupee_balance = await get_unconfirmed_balance(myFloID, get_user_rupee_balance.balance);
const get_user_flo_balance = await floBlockchainAPI.getBalance(myFloID)
console.log(get_user_flo_balance)
if (typeof get_user_unconfirmed_rupee_balance == "number" && !isNaN(get_user_unconfirmed_rupee_balance)) { if (typeof get_user_unconfirmed_rupee_balance == "number" && !isNaN(get_user_unconfirmed_rupee_balance)) {
document.querySelectorAll('.uncnf-token-balance').forEach(elem => elem.textContent = get_user_unconfirmed_rupee_balance); document.querySelectorAll('.uncnf-token-balance').forEach(elem => elem.textContent = get_user_unconfirmed_rupee_balance);
} }
/*
const get_user_flo_balance = await floBlockchainAPI.getBalance(myFloID)
console.log(get_user_flo_balance)
if (typeof get_user_flo_balance !== "number" || isNaN(get_user_flo_balance)) { if (typeof get_user_flo_balance !== "number" || isNaN(get_user_flo_balance)) {
get_user_flo_balance = 0; get_user_flo_balance = 0;
} }
document.querySelectorAll('.flo-balance').forEach(elem => elem.textContent = get_user_flo_balance); document.querySelectorAll('.flo-balance').forEach(elem => elem.textContent = get_user_flo_balance);*/
} }
if (refreshButton) { if (refreshButton) {
notify('Balance Updated') notify('Balance Updated')
refreshButton.classList.remove('animate-loader') refreshButton.textContent = 'Check Balance'
} }
return true; return true;
} catch (error) { } catch (error) {
notify("Unable to load balance", 'error')
throw new Error(error); throw new Error(error);
} }
} }
@ -12030,48 +12060,37 @@
<!-- User functions --> <!-- User functions -->
<script> <script>
let depositRequested = 0, let depositedRupeeTxId = document.getElementById('deposited_rupee_txid');
depositedRupeeTxId = document.getElementById('deposited_rupee_txid');
function request_rupee_token() { function request_rupee_token() {
try { try {
const request_tokens_btn = document.getElementById('request_tokens_btn'); const request_tokens_btn = document.getElementById('request_tokens_btn');
const cashier = randomNoRepeats(Object.keys(token_app.master_configurations.cashiers))(); const cashier = randomNoRepeats(Object.keys(token_app.master_configurations.cashiers))();
const token_amount_to_buy = document.getElementById('token_amount_to_buy'); const token_amount_to_buy = document.getElementById('token_amount_to_buy');
const cashier_upi = token_app.master_configurations.cashiers[cashier].upi_id;
document.getElementById('send_cash_to_deposit').textContent = cashier_upi;
request_tokens_btn.onclick = async function () { request_tokens_btn.onclick = async function () {
if (depositRequested === 0) { if (typeof myFloID !== "string" || myFloID.length < 1) return;
if (typeof myFloID !== "string" || myFloID.length < 1) return; btnLoading('request_tokens_btn', 'start')
const cashier_upi = token_app.master_configurations.cashiers[cashier].upi_id; let upi_txid = depositedRupeeTxId.value
document.getElementById('send_cash_to_deposit').innerHTML = cashier_upi; let request_object = {
document.getElementById('send_amount_to_deposit').innerHTML = `Please pay <b>₹${token_amount_to_buy.value}</b> to UPI Id below.`; user_flo_id: myFloID,
document.getElementById('upi_txId_section').classList.remove('hide-completely') upi_txid: upi_txid,
document.getElementById('deposit_amount_section').classList.add('hide-completely') deposit_amount: token_amount_to_buy.value
depositedRupeeTxId.disabled = false
request_tokens_btn.disabled = true
request_tokens_btn.children[0].textContent = 'Request'
} }
if (depositRequested === 1) { if (typeof upi_txid === "string" && upi_txid.length > 1) {
btnLoading('request_tokens_btn', 'start') floCloudAPI.sendGeneralData(request_object, token_app.master_configurations
let upi_txid = depositedRupeeTxId.value .TYPE_DEPOSITS, {
let request_object = { receiverID: cashier
user_flo_id: myFloID, }).then(result => {
upi_txid: upi_txid, console.log(result);
deposit_amount: token_amount_to_buy.value hidePopup()
} showTrasactionStatus('success', 'Deposit request sent.', 'It may take upto 48 hours for deposited amount to be reflected in your account.')
if (typeof upi_txid === "string" && upi_txid.length > 1) { btnLoading('request_tokens_btn', 'stop')
floCloudAPI.sendGeneralData(request_object, token_app.master_configurations })
.TYPE_DEPOSITS, { return true;
receiverID: cashier
}).then(result => {
console.log(result);
notify('Deposit request sent.', 'success');
hidePopup()
})
return true;
}
hidePopup()
return false;
} }
depositRequested = depositRequested === 1 ? 0 : 1 hidePopup()
return false;
} }
} catch (error) { } catch (error) {
throw new Error(error) throw new Error(error)
@ -12439,11 +12458,9 @@
} }
} }
async function get_unconfirmed_balance(flo_id='') { async function get_unconfirmed_balance(flo_id='', token_balance) {
try { try {
let api = `https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressTransactions?floAddress=${flo_id}`; let api = `https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressTransactions?floAddress=${flo_id}`;
let token_balance = await ajaxGet(`https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressBalance?token=rupee&floAddress=${flo_id}`);
token_balance = token_balance.balance;
let tokens_transfers_tx_list = await ajaxGet(api); let tokens_transfers_tx_list = await ajaxGet(api);
tokens_transfers_tx_list = Object.keys(tokens_transfers_tx_list.transactions); tokens_transfers_tx_list = Object.keys(tokens_transfers_tx_list.transactions);
let receiverID = floGlobals.adminID; let receiverID = floGlobals.adminID;