From 6d8d925f75bfa54efba37958517e24985dfd3b84 Mon Sep 17 00:00:00 2001 From: odera Date: Sun, 2 Jul 2023 03:41:15 +0000 Subject: [PATCH 01/10] customizationz for midtrans intgeration --- .../src/components/PrepaidCreditsDialog.vue | 141 +++++++++++++++++- press/agent.py | 2 +- press/api/account.py | 2 +- press/api/config.py | 4 +- press/auth.py | 1 + .../doctype/subscription/subscription.py | 5 + press/press/workspace/press/press.json | 73 ++++----- 7 files changed, 185 insertions(+), 43 deletions(-) diff --git a/dashboard/src/components/PrepaidCreditsDialog.vue b/dashboard/src/components/PrepaidCreditsDialog.vue index e346cc613eb..246c8d414b3 100644 --- a/dashboard/src/components/PrepaidCreditsDialog.vue +++ b/dashboard/src/components/PrepaidCreditsDialog.vue @@ -48,6 +48,39 @@ +
+ + + + + + +
+ +
+ +
+
+
+
@@ -90,7 +130,8 @@ export default { data() { return { paymentGateway: null, - creditsToBuy: 0 + creditsToBuy: 0, + response_data: {'name':'odera'} }; }, mounted() { @@ -102,9 +143,22 @@ export default { razorpayCheckoutJS.async = true; document.head.appendChild(razorpayCheckoutJS); + //get midtrans checkout + const midtransCheckoutJS = document.createElement('script'); + midtransCheckoutJS.setAttribute( + 'src', + 'https://app.sandbox.midtrans.com/snap/snap.js' + ); + midtransCheckoutJS.setAttribute( + 'data-client-key', + this.$account.team.midtrans_client_id + ); + midtransCheckoutJS.async = true; + document.head.appendChild(midtransCheckoutJS); + if ( this.$account.team.currency === 'USD' && - !this.$account.team.razorpay_enabled + !this.$account.team.razorpay_enabled && !this.$account.team.midtrans_enabled ) { this.paymentGateway = 'stripe'; } @@ -115,7 +169,7 @@ export default { }, minimumAmount: { type: Number, - default: 0 + default: 10 } }, emits: ['update:modelValue', 'success'], @@ -136,7 +190,7 @@ export default { } }; }, - handlePaymentSuccess() { + handlePaymentSuccess(response) { return { method: 'press.api.billing.handle_razorpay_payment_success', onSuccess() { @@ -151,12 +205,76 @@ export default { console.log('Payment Failed.'); } }; - } + }, + createMidTransToken(){ + return { + method: 'optibizpro.utils.create_midtrans_token', + params: { + amount: this.creditsToBuy + }, + onSuccess(data) { + this.processMidTransOrder(data); //this initializes the midtrans snap.js inline checkout + }, + validate() { + if (this.creditsToBuy < this.minimumAmount) { + return 'Amount less than minimum amount required'; + } + } + }; + }, + MidTransPaymentSuccess() { + return { + method: 'optibizpro.utils.handle_midtrans_payment_success', + + onSuccess() { + this.$emit('success'); + } + }; + }, + MidTransPaymentFailed() { + return { + method: 'optibizpro.utils.handle_midtrans_payment_failed', + onSuccess() { + console.log('Payment Failed.'); + } + }; + }, }, methods: { buyCreditsWithRazorpay() { this.$resources.createRazorpayOrder.submit(); }, + buyCreditsWithMidTrans(){ + this.$resources.createMidTransToken.submit(); + }, + processMidTransOrder(data){ + var transaction_token = data.token + window.snap.pay(transaction_token, { + onSuccess: (result) => { + /* You may add your own implementation here */ + + // alert("payment success!"); + result["team"] = this.$account.team.name + this.$resources.MidTransPaymentSuccess.submit({result}); + + }, + onPending: function(result){ + /* You may add your own implementation here */ + alert("awaiting payment!"); console.log(result); + }, + onError: function(result){ + /* You may add your own implementation here */ + result["team"] = this.$account.team.name + this.$resources.MidTransPaymentFailed.submit({result}); + + // alert("payment failed!"); console.log(result); + }, + onClose: function(){ + /* You may add your own implementation here */ + alert('you closed the popup without finishing the payment'); + } + }) + }, processOrder(data) { const options = { key: data.key_id, @@ -185,7 +303,18 @@ export default { handlePaymentFailed(response) { this.$resources.handlePaymentFailed.submit({ response }); - } + }, + + // MidTransPaymentSuccess_b(response) { + // console.log("respppppppppp",response) + // this.$resources.MidTransPaymentSuccess.submit(response); + // this.$emit('success'); + // }, + + // MidTransPaymentFailed(response) { + // this.$resources.MidTransPaymentFailed.submit({ response }); + // } + }, watch: { minimumAmount(amt) { diff --git a/press/agent.py b/press/agent.py index d052d436faf..545ea4d3180 100644 --- a/press/agent.py +++ b/press/agent.py @@ -346,7 +346,7 @@ def archive_site(self, site, site_name=None, force=False): def backup_site(self, site, with_files=False, offsite=False): from press.press.doctype.site_backup.site_backup import get_backup_bucket - + return data = {"with_files": with_files} if offsite: diff --git a/press/api/account.py b/press/api/account.py index a162baa18a0..f0a6fe4b5fb 100644 --- a/press/api/account.py +++ b/press/api/account.py @@ -320,7 +320,7 @@ def get(): [parent_teams], as_dict=True, ) - + teams = None return { "user": frappe.get_doc("User", user), "ssh_key": get_ssh_key(user), diff --git a/press/api/config.py b/press/api/config.py index 3e45455ab8e..2506f610097 100644 --- a/press/api/config.py +++ b/press/api/config.py @@ -17,7 +17,9 @@ def is_valid(keys): invalid = [] blacklisted = get_client_blacklisted_keys() - + frappe.log_error('blacklisted',blacklisted) + blacklisted.remove("developer_mode") + for key in keys: if key in blacklisted: invalid.append(key) diff --git a/press/auth.py b/press/auth.py index d7bf43f9630..5a722ce0fd7 100644 --- a/press/auth.py +++ b/press/auth.py @@ -35,6 +35,7 @@ ALLOWED_WILDCARD_PATHS = [ "/api/method/helpdesk.", "/api/method/press.api.", + "/api/method/optibizpro." ] DENIED_WILDCARD_PATHS = [ diff --git a/press/press/doctype/subscription/subscription.py b/press/press/doctype/subscription/subscription.py index 5c3e5987adb..8bbd2eb9378 100644 --- a/press/press/doctype/subscription/subscription.py +++ b/press/press/doctype/subscription/subscription.py @@ -49,15 +49,20 @@ def create_usage_record(self): if cannot_charge: return + print('reached here') if self.is_usage_record_created(): return + print('reached here 2') team = frappe.get_cached_doc("Team", self.team) if team.parent_team: team = frappe.get_cached_doc("Team", team.parent_team) + print('reached_here 3') if not team.get_upcoming_invoice(): + print('reached_here 4') + team.create_upcoming_invoice() plan = frappe.get_cached_doc("Plan", self.plan) diff --git a/press/press/workspace/press/press.json b/press/press/workspace/press/press.json index 567168fc9e9..8b006bf7d6a 100644 --- a/press/press/workspace/press/press.json +++ b/press/press/workspace/press/press.json @@ -1,23 +1,20 @@ { - "category": "Modules", "charts": [], + "content": "[{\"id\":\"xlKWJ95KNf\",\"type\":\"header\",\"data\":{\"text\":\"Press Shortcuts\",\"col\":12}},{\"id\":\"IHwzm35RLN\",\"type\":\"shortcut\",\"data\":{\"shortcut_name\":\"Active Servers\",\"col\":3}},{\"id\":\"RQ7ICZ5FWH\",\"type\":\"shortcut\",\"data\":{\"shortcut_name\":\"Database Servers\",\"col\":3}},{\"id\":\"yk1o4iofv_\",\"type\":\"shortcut\",\"data\":{\"shortcut_name\":\"Proxy Servers\",\"col\":3}},{\"id\":\"zODur2kNtb\",\"type\":\"shortcut\",\"data\":{\"shortcut_name\":\"Active Benches\",\"col\":3}},{\"id\":\"_IaCYX1ZzB\",\"type\":\"shortcut\",\"data\":{\"shortcut_name\":\"Active Sites\",\"col\":3}},{\"id\":\"yOCppvNVp4\",\"type\":\"shortcut\",\"data\":{\"shortcut_name\":\"Pending Jobs\",\"col\":3}},{\"id\":\"KqYYkPdqz6\",\"type\":\"spacer\",\"data\":{\"col\":12}},{\"id\":\"hC-P-W0z7t\",\"type\":\"header\",\"data\":{\"text\":\"Reports & Masters\",\"col\":12}},{\"id\":\"ig-mifiKGY\",\"type\":\"card\",\"data\":{\"card_name\":\"Site\",\"col\":4}},{\"id\":\"Q_10-Z8SWT\",\"type\":\"card\",\"data\":{\"card_name\":\"Infrastructure\",\"col\":4}},{\"id\":\"stU8uupAX3\",\"type\":\"card\",\"data\":{\"card_name\":\"Teams\",\"col\":4}},{\"id\":\"CPgbqV1fh9\",\"type\":\"card\",\"data\":{\"card_name\":\"Settings\",\"col\":4}},{\"id\":\"jK1fl1EwZQ\",\"type\":\"card\",\"data\":{\"card_name\":\"Updates\",\"col\":4}}]", "creation": "2020-03-13 12:00:25.244955", - "developer_mode_only": 0, - "disable_user_customization": 0, "docstatus": 0, "doctype": "Workspace", - "extends_another_page": 0, "hide_custom": 0, "icon": "setting-gear", "idx": 0, - "is_default": 0, - "is_standard": 1, + "is_hidden": 0, "label": "Press", "links": [ { "hidden": 0, "is_query_report": 0, "label": "Site", + "link_count": 0, "onboard": 0, "type": "Card Break" }, @@ -25,6 +22,7 @@ "hidden": 0, "is_query_report": 0, "label": "Site", + "link_count": 0, "link_to": "Site", "link_type": "DocType", "onboard": 0, @@ -34,6 +32,7 @@ "hidden": 0, "is_query_report": 0, "label": "Site Activity", + "link_count": 0, "link_to": "Site Activity", "link_type": "DocType", "onboard": 0, @@ -43,6 +42,7 @@ "hidden": 0, "is_query_report": 0, "label": "Site Update", + "link_count": 0, "link_to": "Site Update", "link_type": "DocType", "onboard": 0, @@ -52,6 +52,7 @@ "hidden": 0, "is_query_report": 0, "label": "Site Backup", + "link_count": 0, "link_to": "Site Backup", "link_type": "DocType", "onboard": 0, @@ -61,6 +62,7 @@ "hidden": 0, "is_query_report": 0, "label": "Site Domain", + "link_count": 0, "link_to": "Site Domain", "link_type": "DocType", "onboard": 0, @@ -70,40 +72,27 @@ "hidden": 0, "is_query_report": 0, "label": "Site Usage", + "link_count": 0, "link_to": "Site Usage", "link_type": "DocType", "onboard": 0, "type": "Link" }, - { - "hidden": 0, - "is_query_report": 0, - "label": "Payments", - "onboard": 0, - "type": "Card Break" - }, { "hidden": 0, "is_query_report": 0, "label": "Invoice", + "link_count": 0, "link_to": "Invoice", "link_type": "DocType", "onboard": 0, "type": "Link" }, - { - "hidden": 0, - "is_query_report": 0, - "label": "Payment Ledger Entry", - "link_to": "Payment Ledger Entry", - "link_type": "DocType", - "onboard": 0, - "type": "Link" - }, { "hidden": 0, "is_query_report": 0, "label": "Plan", + "link_count": 0, "link_to": "Plan", "link_type": "DocType", "onboard": 0, @@ -113,6 +102,7 @@ "hidden": 0, "is_query_report": 0, "label": "Infrastructure", + "link_count": 0, "onboard": 0, "type": "Card Break" }, @@ -120,6 +110,7 @@ "hidden": 0, "is_query_report": 0, "label": "Server", + "link_count": 0, "link_to": "Server", "link_type": "DocType", "onboard": 0, @@ -129,6 +120,7 @@ "hidden": 0, "is_query_report": 0, "label": "Database Server", + "link_count": 0, "link_to": "Database Server", "link_type": "DocType", "onboard": 0, @@ -138,6 +130,7 @@ "hidden": 0, "is_query_report": 0, "label": "Proxy Server", + "link_count": 0, "link_to": "Proxy Server", "link_type": "DocType", "onboard": 0, @@ -147,6 +140,7 @@ "hidden": 0, "is_query_report": 0, "label": "Bench", + "link_count": 0, "link_to": "Bench", "link_type": "DocType", "onboard": 0, @@ -156,22 +150,17 @@ "hidden": 0, "is_query_report": 0, "label": "Site", + "link_count": 0, "link_to": "Site", "link_type": "DocType", "onboard": 0, "type": "Link" }, - { - "hidden": 0, - "is_query_report": 0, - "label": "Apps", - "onboard": 0, - "type": "Card Break" - }, { "hidden": 0, "is_query_report": 0, "label": "App", + "link_count": 0, "link_to": "App", "link_type": "DocType", "onboard": 0, @@ -181,6 +170,7 @@ "hidden": 0, "is_query_report": 0, "label": "Release Group", + "link_count": 0, "link_to": "Release Group", "link_type": "DocType", "onboard": 0, @@ -190,6 +180,7 @@ "hidden": 0, "is_query_report": 0, "label": "App Release", + "link_count": 0, "link_to": "App Release", "link_type": "DocType", "onboard": 0, @@ -199,6 +190,7 @@ "hidden": 0, "is_query_report": 0, "label": "App Tag", + "link_count": 0, "link_to": "App Tag", "link_type": "DocType", "onboard": 0, @@ -208,6 +200,7 @@ "hidden": 0, "is_query_report": 0, "label": "GitHub Webhook Log", + "link_count": 0, "link_to": "GitHub Webhook Log", "link_type": "DocType", "onboard": 0, @@ -217,6 +210,7 @@ "hidden": 0, "is_query_report": 0, "label": "Teams", + "link_count": 0, "onboard": 0, "type": "Card Break" }, @@ -224,6 +218,7 @@ "hidden": 0, "is_query_report": 0, "label": "Team", + "link_count": 0, "link_to": "Team", "link_type": "DocType", "onboard": 0, @@ -233,6 +228,7 @@ "hidden": 0, "is_query_report": 0, "label": "Account Request", + "link_count": 0, "link_to": "Account Request", "link_type": "DocType", "onboard": 0, @@ -242,6 +238,7 @@ "hidden": 0, "is_query_report": 0, "label": "Updates", + "link_count": 0, "onboard": 0, "type": "Card Break" }, @@ -249,6 +246,7 @@ "hidden": 0, "is_query_report": 0, "label": "Deploy", + "link_count": 0, "link_to": "Deploy", "link_type": "DocType", "onboard": 0, @@ -258,6 +256,7 @@ "hidden": 0, "is_query_report": 0, "label": "Deploy Candidate Difference", + "link_count": 0, "link_to": "Deploy Candidate Difference", "link_type": "DocType", "onboard": 0, @@ -267,6 +266,7 @@ "hidden": 0, "is_query_report": 0, "label": "Settings", + "link_count": 0, "onboard": 0, "type": "Card Break" }, @@ -274,19 +274,23 @@ "hidden": 0, "is_query_report": 0, "label": "Press Settings", + "link_count": 0, "link_to": "Press Settings", "link_type": "DocType", "onboard": 0, "type": "Link" } ], - "modified": "2021-05-24 12:44:58.237352", - "modified_by": "Administrator", + "modified": "2023-06-29 06:23:32.338954", + "modified_by": "user@admin.com", "module": "Press", "name": "Press", + "number_cards": [], "owner": "Administrator", - "pin_to_bottom": 0, - "pin_to_top": 1, + "public": 1, + "quick_lists": [], + "roles": [], + "sequence_id": 0.0, "shortcuts": [ { "doc_view": "", @@ -327,5 +331,6 @@ "stats_filter": "{\"status\": [\"in\", [\"Running\", \"Pending\"]]}", "type": "DocType" } - ] + ], + "title": "Press" } \ No newline at end of file From c0d83e0411fb475c7ac87cfba8c65ee9c69e28f4 Mon Sep 17 00:00:00 2001 From: odera Date: Sun, 2 Jul 2023 03:56:55 +0000 Subject: [PATCH 02/10] add midtrans svg --- dashboard/src/assets/midtrans_logo.svg | 1 + 1 file changed, 1 insertion(+) create mode 100644 dashboard/src/assets/midtrans_logo.svg diff --git a/dashboard/src/assets/midtrans_logo.svg b/dashboard/src/assets/midtrans_logo.svg new file mode 100644 index 00000000000..7543b40220e --- /dev/null +++ b/dashboard/src/assets/midtrans_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file From 10035bc81f4a19b86bdb9409182896dffc4931a4 Mon Sep 17 00:00:00 2001 From: odera Date: Thu, 6 Jul 2023 12:23:43 +0000 Subject: [PATCH 03/10] add support to save cards via midtrans --- dashboard/src/assets/card.css | 621 +++++++++++++++++ dashboard/src/assets/card.scss | 631 ++++++++++++++++++ dashboard/src/assets/mastercard.png | Bin 0 -> 1123 bytes dashboard/src/components/MidtransCard.vue | 345 ++++++++++ dashboard/src/components/MidtransLogo.vue | 74 ++ .../src/components/PrepaidCreditsDialog.vue | 9 +- .../src/views/billing/AccountBillingCards.vue | 13 +- press/press/workspace/press/press.json | 5 +- 8 files changed, 1687 insertions(+), 11 deletions(-) create mode 100644 dashboard/src/assets/card.css create mode 100644 dashboard/src/assets/card.scss create mode 100644 dashboard/src/assets/mastercard.png create mode 100644 dashboard/src/components/MidtransCard.vue create mode 100644 dashboard/src/components/MidtransLogo.vue diff --git a/dashboard/src/assets/card.css b/dashboard/src/assets/card.css new file mode 100644 index 00000000000..6d5781526e4 --- /dev/null +++ b/dashboard/src/assets/card.css @@ -0,0 +1,621 @@ +@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600,700|Source+Sans+Pro:400,600,700&display=swap"); + body { + background: #ddeefc; + font-family: "Source Sans Pro", sans-serif; + font-size: 16px; +} + * { + box-sizing: border-box; +} + *:focus { + outline: none; +} + .wrapper { + min-height: 100vh; + display: flex; + padding: 50px 15px; +} + @media screen and (max-width: 700px), (max-height: 500px) { + .wrapper { + flex-wrap: wrap; + flex-direction: column; + } +} + .card-form { + max-width: 570px; + margin: auto; + width: 100%; +} + @media screen and (max-width: 576px) { + .card-form { + margin: 0 auto; + } +} + .card-form__inner { + background: #fff; + /* // box-shadow: 3px 13px 30px 0px rgba(21, 34, 67, 0.2); + */ + box-shadow: 0 30px 60px 0 rgba(90, 116, 148, 0.4); + border-radius: 10px; + padding: 35px; + padding-top: 180px; +} + @media screen and (max-width: 480px) { + .card-form__inner { + padding: 25px; + padding-top: 165px; + } +} + @media screen and (max-width: 360px) { + .card-form__inner { + padding: 15px; + padding-top: 165px; + } +} + .card-form__row { + display: flex; + align-items: flex-start; +} + @media screen and (max-width: 480px) { + .card-form__row { + flex-wrap: wrap; + } +} + .card-form__col { + flex: auto; + margin-right: 35px; +} + .card-form__col:last-child { + margin-right: 0; +} + @media screen and (max-width: 480px) { + .card-form__col { + margin-right: 0; + flex: unset; + width: 100%; + margin-bottom: 20px; + } + .card-form__col:last-child { + margin-bottom: 0; + } +} + .card-form__col.-cvv { + max-width: 150px; +} + @media screen and (max-width: 480px) { + .card-form__col.-cvv { + max-width: initial; + } +} + .card-form__group { + display: flex; + align-items: flex-start; + flex-wrap: wrap; +} + .card-form__group .card-input__input { + flex: 1; + margin-right: 15px; +} + .card-form__group .card-input__input:last-child { + margin-right: 0; +} + .card-form__button { + width: 100%; + height: 55px; + background: #2364d2; + border: none; + border-radius: 5px; + font-size: 22px; + font-weight: 500; + font-family: "Source Sans Pro", sans-serif; + box-shadow: 3px 10px 20px 0px rgba(35, 100, 210, 0.3); + color: #fff; + margin-top: 20px; + cursor: pointer; +} + @media screen and (max-width: 480px) { + .card-form__button { + margin-top: 10px; + } +} + .card-item { + max-width: 430px; + height: 270px; + margin-left: auto; + margin-right: auto; + position: relative; + z-index: 2; + width: 100%; +} + @media screen and (max-width: 480px) { + .card-item { + max-width: 310px; + height: 220px; + width: 90%; + } +} + @media screen and (max-width: 360px) { + .card-item { + height: 180px; + } +} + .card-item.-active .card-item__side.-front { + transform: perspective(1000px) rotateY(180deg) rotateX(0deg) rotateZ(0deg); +} + .card-item.-active .card-item__side.-back { + transform: perspective(1000px) rotateY(0) rotateX(0deg) rotateZ(0deg); + /* // box-shadow: 0 20px 50px 0 rgba(81, 88, 206, 0.65); + */ +} + .card-item__focus { + position: absolute; + z-index: 3; + border-radius: 5px; + left: 0; + top: 0; + width: 100%; + height: 100%; + transition: all 0.35s cubic-bezier(0.71, 0.03, 0.56, 0.85); + opacity: 0; + pointer-events: none; + overflow: hidden; + border: 2px solid rgba(255, 255, 255, 0.65); +} + .card-item__focus:after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + background: #08142f; + height: 100%; + border-radius: 5px; + filter: blur(25px); + opacity: 0.5; +} + .card-item__focus.-active { + opacity: 1; +} + .card-item__side { + border-radius: 15px; + overflow: hidden; + /* // box-shadow: 3px 13px 30px 0px rgba(11, 19, 41, 0.5); + */ + box-shadow: 0 20px 60px 0 rgba(14, 42, 90, 0.55); + transform: perspective(2000px) rotateY(0deg) rotateX(0deg) rotate(0deg); + transform-style: preserve-3d; + transition: all 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85); + backface-visibility: hidden; + height: 100%; +} + .card-item__side.-back { + position: absolute; + top: 0; + left: 0; + width: 100%; + transform: perspective(2000px) rotateY(-180deg) rotateX(0deg) rotate(0deg); + z-index: 2; + padding: 0; + /* // background-color: #2364d2; + // background-image: linear-gradient( // 43deg, // #4158d0 0%, // #8555c7 46%, // #2364d2 100% // ); + */ + height: 100%; +} + .card-item__side.-back .card-item__cover { + transform: rotateY(-180deg); +} + .card-item__bg { + max-width: 100%; + display: block; + max-height: 100%; + height: 100%; + width: 100%; + object-fit: cover; +} + .card-item__cover { + height: 100%; + background-color: #1c1d27; + position: absolute; + height: 100%; + background-color: #1c1d27; + left: 0; + top: 0; + width: 100%; + border-radius: 15px; + overflow: hidden; +} + .card-item__cover:after { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(6, 2, 29, 0.45); +} + .card-item__top { + display: flex; + align-items: flex-start; + justify-content: space-between; + margin-bottom: 40px; + padding: 0 10px; +} + @media screen and (max-width: 480px) { + .card-item__top { + margin-bottom: 25px; + } +} + @media screen and (max-width: 360px) { + .card-item__top { + margin-bottom: 15px; + } +} + .card-item__chip { + width: 60px; +} + @media screen and (max-width: 480px) { + .card-item__chip { + width: 50px; + } +} + @media screen and (max-width: 360px) { + .card-item__chip { + width: 40px; + } +} + .card-item__type { + height: 45px; + position: relative; + display: flex; + justify-content: flex-end; + max-width: 100px; + margin-left: auto; + width: 100%; +} + @media screen and (max-width: 480px) { + .card-item__type { + height: 40px; + max-width: 90px; + } +} + @media screen and (max-width: 360px) { + .card-item__type { + height: 30px; + } +} + .card-item__typeImg { + max-width: 100%; + object-fit: contain; + max-height: 100%; + object-position: top right; +} + .card-item__info { + color: #fff; + width: 100%; + max-width: calc(100% - 85px); + padding: 10px 15px; + font-weight: 500; + display: block; + cursor: pointer; +} + @media screen and (max-width: 480px) { + .card-item__info { + padding: 10px; + } +} + .card-item__holder { + opacity: 0.7; + font-size: 13px; + margin-bottom: 6px; +} + @media screen and (max-width: 480px) { + .card-item__holder { + font-size: 12px; + margin-bottom: 5px; + } +} + .card-item__wrapper { + font-family: "Source Code Pro", monospace; + padding: 25px 15px; + position: relative; + z-index: 4; + height: 100%; + text-shadow: 7px 6px 10px rgba(14, 42, 90, 0.8); + user-select: none; +} + @media screen and (max-width: 480px) { + .card-item__wrapper { + padding: 20px 10px; + } +} + .card-item__name { + font-size: 18px; + line-height: 1; + white-space: nowrap; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + text-transform: uppercase; +} + @media screen and (max-width: 480px) { + .card-item__name { + font-size: 16px; + } +} + .card-item__nameItem { + display: inline-block; + min-width: 8px; + position: relative; +} + .card-item__number { + font-weight: 500; + line-height: 1; + color: #fff; + font-size: 27px; + margin-bottom: 35px; + display: inline-block; + padding: 10px 15px; + cursor: pointer; +} + @media screen and (max-width: 480px) { + .card-item__number { + font-size: 21px; + margin-bottom: 15px; + padding: 10px 10px; + } +} + @media screen and (max-width: 360px) { + .card-item__number { + font-size: 19px; + margin-bottom: 10px; + padding: 10px 10px; + } +} + .card-item__numberItem { + width: 16px; + display: inline-block; +} + .card-item__numberItem.-active { + width: 30px; +} + @media screen and (max-width: 480px) { + .card-item__numberItem { + width: 13px; + } + .card-item__numberItem.-active { + width: 16px; + } +} + @media screen and (max-width: 360px) { + .card-item__numberItem { + width: 12px; + } + .card-item__numberItem.-active { + width: 8px; + } +} + .card-item__content { + color: #fff; + display: flex; + align-items: flex-start; +} + .card-item__date { + flex-wrap: wrap; + font-size: 18px; + margin-left: auto; + padding: 10px; + display: inline-flex; + width: 80px; + white-space: nowrap; + flex-shrink: 0; + cursor: pointer; +} + @media screen and (max-width: 480px) { + .card-item__date { + font-size: 16px; + } +} + .card-item__dateItem { + position: relative; +} + .card-item__dateItem span { + width: 22px; + display: inline-block; +} + .card-item__dateTitle { + opacity: 0.7; + font-size: 13px; + padding-bottom: 6px; + width: 100%; +} + @media screen and (max-width: 480px) { + .card-item__dateTitle { + font-size: 12px; + padding-bottom: 5px; + } +} + .card-item__band { + background: rgba(0, 0, 19, 0.8); + width: 100%; + height: 50px; + margin-top: 30px; + position: relative; + z-index: 2; +} + @media screen and (max-width: 480px) { + .card-item__band { + margin-top: 20px; + } +} + @media screen and (max-width: 360px) { + .card-item__band { + height: 40px; + margin-top: 10px; + } +} + .card-item__cvv { + text-align: right; + position: relative; + z-index: 2; + padding: 15px; +} + .card-item__cvv .card-item__type { + opacity: 0.7; +} + @media screen and (max-width: 360px) { + .card-item__cvv { + padding: 10px 15px; + } +} + .card-item__cvvTitle { + padding-right: 10px; + font-size: 15px; + font-weight: 500; + color: #fff; + margin-bottom: 5px; +} + .card-item__cvvBand { + height: 45px; + background: #fff; + margin-bottom: 30px; + text-align: right; + display: flex; + align-items: center; + justify-content: flex-end; + padding-right: 10px; + color: #1a3b5d; + font-size: 18px; + border-radius: 4px; + box-shadow: 0px 10px 20px -7px rgba(32, 56, 117, 0.35); +} + @media screen and (max-width: 480px) { + .card-item__cvvBand { + height: 40px; + margin-bottom: 20px; + } +} + @media screen and (max-width: 360px) { + .card-item__cvvBand { + margin-bottom: 15px; + } +} + .card-list { + margin-bottom: -130px; +} + @media screen and (max-width: 480px) { + .card-list { + margin-bottom: -120px; + } +} + .card-input { + margin-bottom: 20px; +} + .card-input__label { + font-size: 14px; + margin-bottom: 5px; + font-weight: 500; + color: #1a3b5d; + width: 100%; + display: block; + user-select: none; +} + .card-input__input { + width: 100%; + height: 50px; + border-radius: 5px; + box-shadow: none; + border: 1px solid #ced6e0; + transition: all 0.3s ease-in-out; + font-size: 18px; + padding: 5px 15px; + background: none; + color: #1a3b5d; + font-family: "Source Sans Pro", sans-serif; +} + .card-input__input:hover, .card-input__input:focus { + border-color: #3d9cff; +} + .card-input__input:focus { + box-shadow: 0px 10px 20px -13px rgba(32, 56, 117, 0.35); +} + .card-input__input.-select { + -webkit-appearance: none; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNrM1sEJwkAQBdCsngXPHsQO9O5FS7AAMVYgdqAd2IGCDWgFnryLFQiCZ8EGnJUNimiyM/tnk4HNEAg/8y6ZmMRVqz9eUJvRaSbvutCZ347bXVJy/ZnvTmdJ862Me+hAbZCTs6GHpyUi1tTSvPnqTpoWZPUa7W7ncT3vK4h4zVejy8QzM3WhVUO8ykI6jOxoGA4ig3BLHcNFSCGqGAkig2yqgpEiMsjSfY9LxYQg7L6r0X6wS29YJiYQYecemY+wHrXD1+bklGhpAhBDeu/JfIVGxaAQ9sb8CI+CQSJ+QmJg0Ii/EE2MBiIXooHRQhRCkBhNhBcEhLkwf05ZCG8ICCOpk0MULmvDSY2M8UawIRExLIQIEgHDRoghihgRIgiigBEjgiFATBACAgFgghEwSAAGgoBCBBgYAg5hYKAIFYgHBo6w9RRgAFfy160QuV8NAAAAAElFTkSuQmCC'); + background-size: 12px; + background-position: 90% center; + background-repeat: no-repeat; + padding-right: 30px; +} + .slide-fade-up-enter-active { + transition: all 0.25s ease-in-out; + transition-delay: 0.1s; + position: relative; +} + .slide-fade-up-leave-active { + transition: all 0.25s ease-in-out; + position: absolute; +} + .slide-fade-up-enter { + opacity: 0; + transform: translateY(15px); + pointer-events: none; +} + .slide-fade-up-leave-to { + opacity: 0; + transform: translateY(-15px); + pointer-events: none; +} + .slide-fade-right-enter-active { + transition: all 0.25s ease-in-out; + transition-delay: 0.1s; + position: relative; +} + .slide-fade-right-leave-active { + transition: all 0.25s ease-in-out; + position: absolute; +} + .slide-fade-right-enter { + opacity: 0; + transform: translateX(10px) rotate(45deg); + pointer-events: none; +} + .slide-fade-right-leave-to { + opacity: 0; + transform: translateX(-10px) rotate(45deg); + pointer-events: none; +} + .github-btn { + position: absolute; + right: 40px; + bottom: 50px; + text-decoration: none; + padding: 15px 25px; + border-radius: 4px; + box-shadow: 0px 4px 30px -6px rgba(36, 52, 70, 0.65); + background: #24292e; + color: #fff; + font-weight: bold; + letter-spacing: 1px; + font-size: 16px; + text-align: center; + transition: all 0.3s ease-in-out; +} + @media screen and (min-width: 500px) { + .github-btn:hover { + transform: scale(1.1); + box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36); + } +} + @media screen and (max-width: 700px) { + .github-btn { + position: relative; + bottom: auto; + right: auto; + margin-top: 20px; + } + .github-btn:active { + transform: scale(1.1); + box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36); + } +} + \ No newline at end of file diff --git a/dashboard/src/assets/card.scss b/dashboard/src/assets/card.scss new file mode 100644 index 00000000000..200ecacd4fc --- /dev/null +++ b/dashboard/src/assets/card.scss @@ -0,0 +1,631 @@ +@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600,700|Source+Sans+Pro:400,600,700&display=swap"); + + +body { + background: #ddeefc; + font-family: "Source Sans Pro", sans-serif; + font-size: 16px; +} +* { + box-sizing: border-box; + &:focus { + outline: none; + } +} +.wrapper { + min-height: 100vh; + display: flex; + padding: 50px 15px; + @media screen and (max-width: 700px), (max-height: 500px) { + flex-wrap: wrap; + flex-direction: column; + } +} + +.card-form { + max-width: 570px; + margin: auto; + width: 100%; + + @media screen and (max-width: 576px) { + margin: 0 auto; + } + + &__inner { + background: #fff; + // box-shadow: 3px 13px 30px 0px rgba(21, 34, 67, 0.2); + box-shadow: 0 30px 60px 0 rgba(90, 116, 148, 0.4); + border-radius: 10px; + padding: 35px; + padding-top: 180px; + + @media screen and (max-width: 480px) { + padding: 25px; + padding-top: 165px; + } + @media screen and (max-width: 360px) { + padding: 15px; + padding-top: 165px; + } + } + + &__row { + display: flex; + align-items: flex-start; + @media screen and (max-width: 480px) { + flex-wrap: wrap; + } + } + + &__col { + flex: auto; + margin-right: 35px; + + &:last-child { + margin-right: 0; + } + + @media screen and (max-width: 480px) { + margin-right: 0; + flex: unset; + width: 100%; + margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; + } + } + + &.-cvv { + max-width: 150px; + @media screen and (max-width: 480px) { + max-width: initial; + } + } + } + + &__group { + display: flex; + align-items: flex-start; + flex-wrap: wrap; + + .card-input__input { + flex: 1; + margin-right: 15px; + + &:last-child { + margin-right: 0; + } + } + } + + &__button { + width: 100%; + height: 55px; + background: #2364d2; + border: none; + border-radius: 5px; + font-size: 22px; + font-weight: 500; + font-family: "Source Sans Pro", sans-serif; + box-shadow: 3px 10px 20px 0px rgba(35, 100, 210, 0.3); + color: #fff; + margin-top: 20px; + cursor: pointer; + + @media screen and (max-width: 480px) { + margin-top: 10px; + } + } +} + +.card-item { + max-width: 430px; + height: 270px; + margin-left: auto; + margin-right: auto; + position: relative; + z-index: 2; + width: 100%; + + @media screen and (max-width: 480px) { + max-width: 310px; + height: 220px; + width: 90%; + } + + @media screen and (max-width: 360px) { + height: 180px; + } + + &.-active { + .card-item__side { + &.-front { + transform: perspective(1000px) rotateY(180deg) rotateX(0deg) + rotateZ(0deg); + } + &.-back { + transform: perspective(1000px) rotateY(0) rotateX(0deg) rotateZ(0deg); + // box-shadow: 0 20px 50px 0 rgba(81, 88, 206, 0.65); + } + } + } + + &__focus { + position: absolute; + z-index: 3; + border-radius: 5px; + left: 0; + top: 0; + width: 100%; + height: 100%; + transition: all 0.35s cubic-bezier(0.71, 0.03, 0.56, 0.85); + opacity: 0; + pointer-events: none; + overflow: hidden; + border: 2px solid rgba(255, 255, 255, 0.65); + + &:after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + background: rgb(8, 20, 47); + height: 100%; + border-radius: 5px; + filter: blur(25px); + opacity: 0.5; + } + + &.-active { + opacity: 1; + } + } + + &__side { + border-radius: 15px; + overflow: hidden; + // box-shadow: 3px 13px 30px 0px rgba(11, 19, 41, 0.5); + box-shadow: 0 20px 60px 0 rgba(14, 42, 90, 0.55); + transform: perspective(2000px) rotateY(0deg) rotateX(0deg) rotate(0deg); + transform-style: preserve-3d; + transition: all 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85); + backface-visibility: hidden; + height: 100%; + + &.-back { + position: absolute; + top: 0; + left: 0; + width: 100%; + transform: perspective(2000px) rotateY(-180deg) rotateX(0deg) rotate(0deg); + z-index: 2; + padding: 0; + // background-color: #2364d2; + // background-image: linear-gradient( + // 43deg, + // #4158d0 0%, + // #8555c7 46%, + // #2364d2 100% + // ); + height: 100%; + + .card-item__cover { + transform: rotateY(-180deg) + } + } + } + &__bg { + max-width: 100%; + display: block; + max-height: 100%; + height: 100%; + width: 100%; + object-fit: cover; + } + &__cover { + height: 100%; + background-color: #1c1d27; + position: absolute; + height: 100%; + background-color: #1c1d27; + left: 0; + top: 0; + width: 100%; + border-radius: 15px; + overflow: hidden; + &:after { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(6, 2, 29, 0.45); + } + } + + &__top { + display: flex; + align-items: flex-start; + justify-content: space-between; + margin-bottom: 40px; + padding: 0 10px; + + @media screen and (max-width: 480px) { + margin-bottom: 25px; + } + @media screen and (max-width: 360px) { + margin-bottom: 15px; + } + } + + &__chip { + width: 60px; + @media screen and (max-width: 480px) { + width: 50px; + } + @media screen and (max-width: 360px) { + width: 40px; + } + } + + &__type { + height: 45px; + position: relative; + display: flex; + justify-content: flex-end; + max-width: 100px; + margin-left: auto; + width: 100%; + + @media screen and (max-width: 480px) { + height: 40px; + max-width: 90px; + } + @media screen and (max-width: 360px) { + height: 30px; + } + } + + &__typeImg { + max-width: 100%; + object-fit: contain; + max-height: 100%; + object-position: top right; + } + + &__info { + color: #fff; + width: 100%; + max-width: calc(100% - 85px); + padding: 10px 15px; + font-weight: 500; + display: block; + + cursor: pointer; + + @media screen and (max-width: 480px) { + padding: 10px; + } + } + + &__holder { + opacity: 0.7; + font-size: 13px; + margin-bottom: 6px; + @media screen and (max-width: 480px) { + font-size: 12px; + margin-bottom: 5px; + } + } + + &__wrapper { + font-family: "Source Code Pro", monospace; + padding: 25px 15px; + position: relative; + z-index: 4; + height: 100%; + text-shadow: 7px 6px 10px rgba(14, 42, 90, 0.8); + user-select: none; + @media screen and (max-width: 480px) { + padding: 20px 10px; + } + } + + &__name { + font-size: 18px; + line-height: 1; + white-space: nowrap; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + text-transform: uppercase; + @media screen and (max-width: 480px) { + font-size: 16px; + } + } + &__nameItem { + display: inline-block; + min-width: 8px; + position: relative; + } + + &__number { + font-weight: 500; + line-height: 1; + color: #fff; + font-size: 27px; + margin-bottom: 35px; + display: inline-block; + padding: 10px 15px; + cursor: pointer; + + @media screen and (max-width: 480px) { + font-size: 21px; + margin-bottom: 15px; + padding: 10px 10px; + } + + @media screen and (max-width: 360px) { + font-size: 19px; + margin-bottom: 10px; + padding: 10px 10px; + } + } + + &__numberItem { + width: 16px; + display: inline-block; + &.-active { + width: 30px; + } + + @media screen and (max-width: 480px) { + width: 13px; + + &.-active { + width: 16px; + } + } + + @media screen and (max-width: 360px) { + width: 12px; + + &.-active { + width: 8px; + } + } + } + + &__content { + color: #fff; + display: flex; + align-items: flex-start; + } + + &__date { + flex-wrap: wrap; + font-size: 18px; + margin-left: auto; + padding: 10px; + display: inline-flex; + width: 80px; + white-space: nowrap; + flex-shrink: 0; + cursor: pointer; + + @media screen and (max-width: 480px) { + font-size: 16px; + } + } + + &__dateItem { + position: relative; + span { + width: 22px; + display: inline-block; + } + } + + &__dateTitle { + opacity: 0.7; + font-size: 13px; + padding-bottom: 6px; + width: 100%; + + @media screen and (max-width: 480px) { + font-size: 12px; + padding-bottom: 5px; + } + } + &__band { + background: rgba(0, 0, 19, 0.8); + width: 100%; + height: 50px; + margin-top: 30px; + position: relative; + z-index: 2; + @media screen and (max-width: 480px) { + margin-top: 20px; + } + @media screen and (max-width: 360px) { + height: 40px; + margin-top: 10px; + } + } + + &__cvv { + text-align: right; + position: relative; + z-index: 2; + padding: 15px; + .card-item__type { + opacity: 0.7; + } + + @media screen and (max-width: 360px) { + padding: 10px 15px; + } + } + &__cvvTitle { + padding-right: 10px; + font-size: 15px; + font-weight: 500; + color: #fff; + margin-bottom: 5px; + } + &__cvvBand { + height: 45px; + background: #fff; + margin-bottom: 30px; + text-align: right; + display: flex; + align-items: center; + justify-content: flex-end; + padding-right: 10px; + color: #1a3b5d; + font-size: 18px; + border-radius: 4px; + box-shadow: 0px 10px 20px -7px rgba(32, 56, 117, 0.35); + + @media screen and (max-width: 480px) { + height: 40px; + margin-bottom: 20px; + } + + @media screen and (max-width: 360px) { + margin-bottom: 15px; + } + } +} + +.card-list { + margin-bottom: -130px; + + @media screen and (max-width: 480px) { + margin-bottom: -120px; + } +} + +.card-input { + margin-bottom: 20px; + &__label { + font-size: 14px; + margin-bottom: 5px; + font-weight: 500; + color: #1a3b5d; + width: 100%; + display: block; + user-select: none; + } + &__input { + width: 100%; + height: 50px; + border-radius: 5px; + box-shadow: none; + border: 1px solid #ced6e0; + transition: all 0.3s ease-in-out; + font-size: 18px; + padding: 5px 15px; + background: none; + color: #1a3b5d; + font-family: "Source Sans Pro", sans-serif; + + &:hover, + &:focus { + border-color: #3d9cff; + } + + &:focus { + box-shadow: 0px 10px 20px -13px rgba(32, 56, 117, 0.35); + } + &.-select { + -webkit-appearance: none; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNrM1sEJwkAQBdCsngXPHsQO9O5FS7AAMVYgdqAd2IGCDWgFnryLFQiCZ8EGnJUNimiyM/tnk4HNEAg/8y6ZmMRVqz9eUJvRaSbvutCZ347bXVJy/ZnvTmdJ862Me+hAbZCTs6GHpyUi1tTSvPnqTpoWZPUa7W7ncT3vK4h4zVejy8QzM3WhVUO8ykI6jOxoGA4ig3BLHcNFSCGqGAkig2yqgpEiMsjSfY9LxYQg7L6r0X6wS29YJiYQYecemY+wHrXD1+bklGhpAhBDeu/JfIVGxaAQ9sb8CI+CQSJ+QmJg0Ii/EE2MBiIXooHRQhRCkBhNhBcEhLkwf05ZCG8ICCOpk0MULmvDSY2M8UawIRExLIQIEgHDRoghihgRIgiigBEjgiFATBACAgFgghEwSAAGgoBCBBgYAg5hYKAIFYgHBo6w9RRgAFfy160QuV8NAAAAAElFTkSuQmCC'); + background-size: 12px; + background-position: 90% center; + background-repeat: no-repeat; + padding-right: 30px; + } + } +} + +.slide-fade-up-enter-active { + transition: all 0.25s ease-in-out; + transition-delay: 0.1s; + position: relative; +} +.slide-fade-up-leave-active { + transition: all 0.25s ease-in-out; + position: absolute; +} +.slide-fade-up-enter { + opacity: 0; + transform: translateY(15px); + pointer-events: none; +} +.slide-fade-up-leave-to { + opacity: 0; + transform: translateY(-15px); + pointer-events: none; +} + +.slide-fade-right-enter-active { + transition: all 0.25s ease-in-out; + transition-delay: 0.1s; + position: relative; +} +.slide-fade-right-leave-active { + transition: all 0.25s ease-in-out; + position: absolute; +} +.slide-fade-right-enter { + opacity: 0; + transform: translateX(10px) rotate(45deg); + pointer-events: none; +} +.slide-fade-right-leave-to { + opacity: 0; + transform: translateX(-10px) rotate(45deg); + pointer-events: none; +} + + + +.github-btn { + position: absolute; + right: 40px; + bottom: 50px; + text-decoration: none; + padding: 15px 25px; + border-radius: 4px; + box-shadow: 0px 4px 30px -6px rgba(36, 52, 70, 0.65); + background: #24292e; + color: #fff; + font-weight: bold; + letter-spacing: 1px; + font-size: 16px; + text-align: center; + transition: all .3s ease-in-out; + + @media screen and (min-width: 500px) { + &:hover { + transform: scale(1.1); + box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36); + } + } + + @media screen and (max-width: 700px) { + position: relative; + bottom: auto; + right: auto; + margin-top: 20px; + + &:active { + transform: scale(1.1); + box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36); + } + } +} \ No newline at end of file diff --git a/dashboard/src/assets/mastercard.png b/dashboard/src/assets/mastercard.png new file mode 100644 index 0000000000000000000000000000000000000000..90b2e75d027cef949a5247bd3cdd7b8e078a6812 GIT binary patch literal 1123 zcmV-p1f2VcP)o z&bbf-K@bE%5ClOGt~g!3r(Z-c24GAbP68;XKVmbBaL>j#rF<|9;GsIC@#uI{9T(EM zu+YZbI?jbw!cGHtri6`x1lR!Z4#1kO@JiU`afUU_Xq>k+j%(qa30*`$lYOZv?!O?B z*8nVL(OQU7zWzhfII}Tbrg2`SbKyqJ^R&de&_x7vxh};NxE0Gv@Op%+2wt)v@I^@I z`E)Ma2K7Sp+K!Pd#F2wg-yy4IU+KF&zpDWmU2 z0=2$w*F!-?_e?q${{|gfXrCe{ua`0ObO&Aiz{!J~sAf{GhlHwBrs9enOX!Y>+*4H_ zBrcWMiI@&_Mr5K=MbFj_x{gj=4-YlRH*rp2EOZgUk`Iwd+{}}o=S6NnVt?Fq?Lvde zQa&)gIU1!7RU@yP4$9%$<6lVMKWJ-F85=}pbiju@#Dq!dXByEfhIT9{WkiWgBn$h# zQV3M-&W0^?5y5QJT7^?6nsrHj+4tcRR0?4~B$-6C%LkIbP&B7Tj2kU`H^`#((lK) zGgw-%gwCS=uFOmND1FYbZ7KoZ#*hu}dqb1k`=ZMkG@ufXQiv`T&7QiKU~*-%h0Y>e z^%d2>-w$bjw=z2D)R!hGnpe3-rUmPqp&bi~>e8p^bU^I}9;12Q#K=hKEb8^+vWYF1 z!>xg~Pl~ln%4bgprOiSqAFPz}0jupGZtvZPjI?uQ&Ta+9B pJGMnx5ClOG1VIo4LAcTY_yd{;Up(Z$U`PM}002ovPDHLkV1km-46pzI literal 0 HcmV?d00001 diff --git a/dashboard/src/components/MidtransCard.vue b/dashboard/src/components/MidtransCard.vue new file mode 100644 index 00000000000..f5003a6eb7d --- /dev/null +++ b/dashboard/src/components/MidtransCard.vue @@ -0,0 +1,345 @@ + + + + + + \ No newline at end of file diff --git a/dashboard/src/components/MidtransLogo.vue b/dashboard/src/components/MidtransLogo.vue new file mode 100644 index 00000000000..3e27444c6b3 --- /dev/null +++ b/dashboard/src/components/MidtransLogo.vue @@ -0,0 +1,74 @@ + + diff --git a/dashboard/src/components/PrepaidCreditsDialog.vue b/dashboard/src/components/PrepaidCreditsDialog.vue index 246c8d414b3..4aa8f97cb9f 100644 --- a/dashboard/src/components/PrepaidCreditsDialog.vue +++ b/dashboard/src/components/PrepaidCreditsDialog.vue @@ -131,10 +131,13 @@ export default { return { paymentGateway: null, creditsToBuy: 0, - response_data: {'name':'odera'} }; }, - mounted() { + async mounted() { + + let client_key = await this.$call( + 'optibizpro.utils.get_client_key' + ); const razorpayCheckoutJS = document.createElement('script'); razorpayCheckoutJS.setAttribute( 'src', @@ -151,7 +154,7 @@ export default { ); midtransCheckoutJS.setAttribute( 'data-client-key', - this.$account.team.midtrans_client_id + client_key ); midtransCheckoutJS.async = true; document.head.appendChild(midtransCheckoutJS); diff --git a/dashboard/src/views/billing/AccountBillingCards.vue b/dashboard/src/views/billing/AccountBillingCards.vue index 3d819d43bbc..cdcd6e52aab 100644 --- a/dashboard/src/views/billing/AccountBillingCards.vue +++ b/dashboard/src/views/billing/AccountBillingCards.vue @@ -4,7 +4,7 @@