@live-change/billing-frontend 0.8.111 → 0.8.112
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -58,8 +58,8 @@
|
|
|
58
58
|
const settings = computed(() => billingSettings( billing ))
|
|
59
59
|
|
|
60
60
|
const value = computed(() => available.value
|
|
61
|
-
? billing?.balance?.
|
|
62
|
-
: billing?.balance?.
|
|
61
|
+
? billing?.value?.balance?.available ?? 0
|
|
62
|
+
: billing?.value?.balance?.amount ?? 0
|
|
63
63
|
)
|
|
64
64
|
|
|
65
65
|
</script>
|
|
@@ -42,15 +42,20 @@
|
|
|
42
42
|
</div>
|
|
43
43
|
</div>
|
|
44
44
|
</div>
|
|
45
|
+
|
|
46
|
+
<div class="mt-2">
|
|
47
|
+
<OperationsList ownerType="billing_Billing" :owner="billing.to ?? billing.id"
|
|
48
|
+
:currency="settings.currency" />
|
|
49
|
+
</div>
|
|
45
50
|
</div>
|
|
46
51
|
</template>
|
|
47
52
|
|
|
48
53
|
<script setup>
|
|
49
54
|
import BillingBalance from '../components/BillingBalance.vue'
|
|
50
55
|
|
|
51
|
-
import { CurrencyDisplay } from '@live-change/balance-frontend'
|
|
56
|
+
import { CurrencyDisplay, OperationsList } from '@live-change/balance-frontend'
|
|
52
57
|
|
|
53
|
-
import { defineProps, toRefs, computed, inject } from 'vue'
|
|
58
|
+
import { defineProps, toRefs, computed, inject, provide } from 'vue'
|
|
54
59
|
|
|
55
60
|
const props = defineProps({
|
|
56
61
|
user: {
|
|
@@ -87,6 +92,12 @@
|
|
|
87
92
|
const availableDifferent = computed(() => billing.value?.balance?.available !== billing.value?.balance?.all)
|
|
88
93
|
|
|
89
94
|
const settings = computed(() => billingSettings( billing ))
|
|
95
|
+
|
|
96
|
+
provide('currencyI18nConfig:'+settings.value.currency, {
|
|
97
|
+
...inject('currencyI18nConfig:'+settings.value.currency, {}),
|
|
98
|
+
currency: settings.value.currency,
|
|
99
|
+
denomination: settings.value.denomination
|
|
100
|
+
})
|
|
90
101
|
</script>
|
|
91
102
|
|
|
92
103
|
<style scoped>
|
|
@@ -1,9 +1,31 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<div v-if="selectedTopUp"
|
|
2
|
+
<div class="w-full flex flex-column align-items-center">
|
|
3
|
+
<div v-if="selectedTopUp" class="w-full lg:w-6 md:w-9 surface-card border-round shadow-1 p-3
|
|
4
|
+
flex flex-column align-items-center text-center">
|
|
5
|
+
<div class="text-2xl font-semibold my-2">
|
|
6
|
+
Top-up
|
|
7
|
+
<CurrencyDisplay :value="selectedTopUp.value"
|
|
8
|
+
:currency="settings.currency" :denomination="settings.denomination" />
|
|
9
|
+
for
|
|
10
|
+
<CurrencyDisplay :value="selectedTopUp?.price" :currency="selectedTopUp.currency"
|
|
11
|
+
:denomination="priceDenomination" />
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<div class="relative mt-4">
|
|
15
|
+
<ProgressSpinner style="width: 400px; height: 400px; max-width: 90vw; max-height: 70vh" strokeWidth="1"
|
|
16
|
+
animationDuration="1s" aria-label="Connecting to payment gateway" />
|
|
17
|
+
<div class="absolute w-full h-full top-0 left-0 flex align-items-center justify-content-center">
|
|
18
|
+
<div class="text-lg w-10rem text-center">
|
|
19
|
+
Connecting to payment gateway...
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
<!--
|
|
4
26
|
<h1>{{ offer }}</h1>
|
|
5
27
|
<h2>{{ anyTopUpPrice }}</h2>
|
|
6
|
-
<pre>{{ billingClientConfig.topUpOffers }}</pre
|
|
28
|
+
<pre>{{ billingClientConfig.topUpOffers }}</pre>-->
|
|
7
29
|
</div>
|
|
8
30
|
<NotFound v-else />
|
|
9
31
|
</div>
|
|
@@ -53,6 +75,29 @@
|
|
|
53
75
|
|
|
54
76
|
const workingZone = inject('workingZone')
|
|
55
77
|
|
|
78
|
+
const billingPath = computed(() =>
|
|
79
|
+
(path.billing.myUserBilling({}))
|
|
80
|
+
.with(billing => path.balance.ownerOwnedBalance({
|
|
81
|
+
ownerType: 'billing_Billing',
|
|
82
|
+
owner: billing.id
|
|
83
|
+
}).bind('balance'))
|
|
84
|
+
)
|
|
85
|
+
|
|
86
|
+
const [ billing ] = await Promise.all([
|
|
87
|
+
live(billingPath)
|
|
88
|
+
])
|
|
89
|
+
|
|
90
|
+
const billingSettings = inject('billingSettings', (billing) => ({
|
|
91
|
+
currency: billingClientConfig?.currency ?? 'usd',
|
|
92
|
+
denomination: billingClientConfig?.denomination ?? 100
|
|
93
|
+
}))
|
|
94
|
+
const settings = computed(() => billingSettings( billing ))
|
|
95
|
+
|
|
96
|
+
const priceDenomination = computed(() =>
|
|
97
|
+
billingClientConfig?.currencyDenomination[selectedTopUp.value?.currency]
|
|
98
|
+
?? billingClientConfig?.currencyDenomination.default
|
|
99
|
+
)
|
|
100
|
+
|
|
56
101
|
onMounted(() => {
|
|
57
102
|
if(!selectedTopUp.value) return
|
|
58
103
|
const topUp = selectedTopUp.value
|
|
@@ -1,11 +1,119 @@
|
|
|
1
|
-
<
|
|
1
|
+
<template>
|
|
2
|
+
<div class="w-full flex flex-column align-items-center">
|
|
3
|
+
<div v-if="topUp" class="w-full lg:w-6 md:w-9 surface-card border-round shadow-1 p-3
|
|
4
|
+
flex flex-column align-items-center text-center">
|
|
5
|
+
<div class="text-2xl font-semibold my-2">
|
|
6
|
+
Canceled top-up
|
|
7
|
+
<CurrencyDisplay :value="topUp.value"
|
|
8
|
+
:currency="settings.currency" :denomination="settings.denomination" />
|
|
9
|
+
for
|
|
10
|
+
<CurrencyDisplay :value="topUp?.price" :currency="topUp.currency" :denomination="priceDenomination" />
|
|
11
|
+
</div>
|
|
2
12
|
|
|
3
|
-
|
|
13
|
+
<div class="mt-4 text-lg">
|
|
14
|
+
You have canceled the top-up.
|
|
15
|
+
</div>
|
|
4
16
|
|
|
5
|
-
<
|
|
17
|
+
<div class="mt-3">Your current balance is <BillingBalance /></div>
|
|
18
|
+
|
|
19
|
+
<div class="flex flex-row justify-content-center align-items-center mt-4 mb-1 flex-wrap">
|
|
20
|
+
<router-link :to="{ name: 'billing:topUp', params: {
|
|
21
|
+
value: topUp.value, price: topUp.price, currency: topUp.currency
|
|
22
|
+
} }" class="mx-2">
|
|
23
|
+
<Button label="Retry to-up" icon="pi pi-wallet" severity="primary" />
|
|
24
|
+
</router-link>
|
|
25
|
+
<router-link :to="{ name: 'billing:billing' }" class="mx-2">
|
|
26
|
+
<Button label="Back to billing" icon="pi pi-wallet" severity="secondary" />
|
|
27
|
+
</router-link>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<Divider align="center" class="mt-4 mb-2">
|
|
31
|
+
<span class="text-600 font-normal text-sm">OR</span>
|
|
32
|
+
</Divider>
|
|
33
|
+
|
|
34
|
+
<div v-for="offer of billingClientConfig.topUpOffers" :key="'offer'+JSON.stringify(offer)">
|
|
35
|
+
<router-link :to="{ name: 'billing:topUp', params: {
|
|
36
|
+
value: offer.value, price: offer.price, currency: offer.currency
|
|
37
|
+
} }"
|
|
38
|
+
class="flex flex-row no-underline hover:underline my-1">
|
|
39
|
+
<span class="mr-1">Add</span>
|
|
40
|
+
<CurrencyDisplay class="font-semibold"
|
|
41
|
+
:value="offer.value" :currency="settings.currency" :denomination="settings.denomination" />
|
|
42
|
+
<span class="mx-1">for</span>
|
|
43
|
+
<CurrencyDisplay class="font-medium"
|
|
44
|
+
:value="offer.price" :currency="offer.currency" :denomination="offer.denomination" />
|
|
45
|
+
</router-link>
|
|
46
|
+
</div>
|
|
6
47
|
|
|
48
|
+
</div>
|
|
49
|
+
<div v-else-if="topUp === null">
|
|
50
|
+
<NotFound />
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
7
53
|
</template>
|
|
8
54
|
|
|
55
|
+
<script setup>
|
|
56
|
+
import BillingBalance from '../components/BillingBalance.vue'
|
|
57
|
+
|
|
58
|
+
import Divider from "primevue/divider"
|
|
59
|
+
import Button from "primevue/button"
|
|
60
|
+
|
|
61
|
+
import { CurrencyDisplay } from '@live-change/balance-frontend'
|
|
62
|
+
import { NotFound } from "@live-change/url-frontend";
|
|
63
|
+
|
|
64
|
+
import { defineProps, toRefs, computed, inject } from 'vue'
|
|
65
|
+
|
|
66
|
+
const props = defineProps({
|
|
67
|
+
encodedId: {
|
|
68
|
+
type: String,
|
|
69
|
+
required: true
|
|
70
|
+
},
|
|
71
|
+
})
|
|
72
|
+
const { encodedId } = toRefs(props)
|
|
73
|
+
|
|
74
|
+
const topUpId = computed(() => {
|
|
75
|
+
return encodedId.value.replace(/\(/g, '[').replace(/\)/g, ']')
|
|
76
|
+
})
|
|
77
|
+
|
|
78
|
+
import { usePath, live, useClient, useApi } from '@live-change/vue3-ssr'
|
|
79
|
+
const path = usePath()
|
|
80
|
+
const client = useClient()
|
|
81
|
+
const api = useApi()
|
|
82
|
+
|
|
83
|
+
const billingClientConfig = api.getServiceDefinition('billing')?.clientConfig
|
|
84
|
+
const billingSettings = inject('billingSettings', (billing) => ({
|
|
85
|
+
currency: billingClientConfig?.currency ?? 'usd',
|
|
86
|
+
denomination: billingClientConfig?.denomination ?? 100
|
|
87
|
+
}))
|
|
88
|
+
|
|
89
|
+
const priceDenomination = computed(() =>
|
|
90
|
+
billingClientConfig?.currencyDenomination[topUp.value?.currency]
|
|
91
|
+
?? billingClientConfig?.currencyDenomination.default
|
|
92
|
+
)
|
|
93
|
+
|
|
94
|
+
const billingPath = computed(() =>
|
|
95
|
+
(path.billing.myUserBilling({}))
|
|
96
|
+
.with(billing => path.balance.ownerOwnedBalance({
|
|
97
|
+
ownerType: 'billing_Billing',
|
|
98
|
+
owner: billing.id
|
|
99
|
+
}).bind('balance'))
|
|
100
|
+
)
|
|
101
|
+
|
|
102
|
+
const topUpPath = computed(() =>
|
|
103
|
+
path.billing.topUp({
|
|
104
|
+
topUp: topUpId.value
|
|
105
|
+
})
|
|
106
|
+
)
|
|
107
|
+
|
|
108
|
+
const [ billing, topUp ] = await Promise.all([
|
|
109
|
+
live(billingPath),
|
|
110
|
+
live(topUpPath)
|
|
111
|
+
])
|
|
112
|
+
|
|
113
|
+
const settings = computed(() => billingSettings( billing ))
|
|
114
|
+
|
|
115
|
+
</script>
|
|
116
|
+
|
|
9
117
|
<style scoped>
|
|
10
118
|
|
|
11
119
|
</style>
|
|
@@ -1,19 +1,48 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
<div class="w-full flex flex-column align-items-center">
|
|
3
|
+
<div v-if="topUp" class="w-full lg:w-6 md:w-9 surface-card border-round shadow-1 p-3
|
|
4
|
+
flex flex-column align-items-center text-center">
|
|
5
|
+
<div class="text-2xl font-semibold my-2">
|
|
6
|
+
Top-up
|
|
7
|
+
<CurrencyDisplay :value="topUp.value"
|
|
8
|
+
:currency="settings.currency" :denomination="settings.denomination" />
|
|
9
|
+
for
|
|
10
|
+
<CurrencyDisplay :value="topUp?.price" :currency="topUp.currency" :denomination="priceDenomination" />
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
<div v-if="topUp?.state === 'created'" class="mt-4 text-lg">
|
|
14
|
+
We are still waiting for payment confirmation.
|
|
15
|
+
</div>
|
|
16
|
+
<div v-if="topUp?.state === 'paid'" class="mt-4 text-lg">
|
|
17
|
+
Your top-up is successful.
|
|
18
|
+
</div>
|
|
19
|
+
<div v-if="topUp?.state === 'refunded'" class="mt-4 text-lg">
|
|
20
|
+
Your top-up is refunded.
|
|
21
|
+
</div>
|
|
22
|
+
<div v-if="topUp?.state === 'failed'" class="mt-4 text-lg">
|
|
23
|
+
Your top-up is failed.
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<div class="mt-3">Your current balance is <BillingBalance /></div>
|
|
27
|
+
|
|
28
|
+
<router-link :to="{ name: 'billing:billing' }" class="mt-5 mb-3">
|
|
29
|
+
<Button label="Back to billing" icon="pi pi-wallet" />
|
|
30
|
+
</router-link>
|
|
31
|
+
|
|
32
|
+
</div>
|
|
33
|
+
<div v-else-if="topUp === null">
|
|
34
|
+
<NotFound />
|
|
35
|
+
</div>
|
|
12
36
|
</div>
|
|
13
37
|
</template>
|
|
14
38
|
|
|
15
39
|
<script setup>
|
|
16
|
-
import
|
|
40
|
+
import BillingBalance from '../components/BillingBalance.vue'
|
|
41
|
+
|
|
42
|
+
import { CurrencyDisplay } from '@live-change/balance-frontend'
|
|
43
|
+
import { NotFound } from "@live-change/url-frontend";
|
|
44
|
+
|
|
45
|
+
import { defineProps, toRefs, computed, inject } from 'vue'
|
|
17
46
|
|
|
18
47
|
const props = defineProps({
|
|
19
48
|
encodedId: {
|
|
@@ -51,6 +80,18 @@
|
|
|
51
80
|
live(topUpPath)
|
|
52
81
|
])
|
|
53
82
|
|
|
83
|
+
const billingClientConfig = api.getServiceDefinition('billing')?.clientConfig
|
|
84
|
+
const billingSettings = inject('billingSettings', (billing) => ({
|
|
85
|
+
currency: billingClientConfig?.currency ?? 'usd',
|
|
86
|
+
denomination: billingClientConfig?.denomination ?? 100
|
|
87
|
+
}))
|
|
88
|
+
const settings = computed(() => billingSettings( billing ))
|
|
89
|
+
|
|
90
|
+
const priceDenomination = computed(() =>
|
|
91
|
+
billingClientConfig?.currencyDenomination[topUp.value?.currency]
|
|
92
|
+
?? billingClientConfig?.currencyDenomination.default
|
|
93
|
+
)
|
|
94
|
+
|
|
54
95
|
</script>
|
|
55
96
|
|
|
56
97
|
<style scoped>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@live-change/billing-frontend",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.112",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"memDev": "node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
|
|
6
6
|
"localDevInit": "rm tmp.db; node server/start.js localDev --enableSessions --dbAccess --initScript ./init.js",
|
|
@@ -35,41 +35,41 @@
|
|
|
35
35
|
"@codemirror/language": "6.10.1",
|
|
36
36
|
"@dotenvx/dotenvx": "0.27.0",
|
|
37
37
|
"@fortawesome/fontawesome-free": "^6.5.2",
|
|
38
|
-
"@live-change/access-control-frontend": "^0.8.
|
|
39
|
-
"@live-change/access-control-service": "^0.8.
|
|
40
|
-
"@live-change/backup-service": "^0.8.
|
|
41
|
-
"@live-change/blog-frontend": "^0.8.
|
|
42
|
-
"@live-change/blog-service": "^0.8.
|
|
43
|
-
"@live-change/cli": "^0.8.
|
|
44
|
-
"@live-change/content-frontend": "^0.8.
|
|
45
|
-
"@live-change/content-service": "^0.8.
|
|
46
|
-
"@live-change/dao": "^0.8.
|
|
47
|
-
"@live-change/dao-vue3": "^0.8.
|
|
48
|
-
"@live-change/dao-websocket": "^0.8.
|
|
49
|
-
"@live-change/db-client": "^0.8.
|
|
50
|
-
"@live-change/email-service": "^0.8.
|
|
51
|
-
"@live-change/framework": "^0.8.
|
|
52
|
-
"@live-change/frontend-auto-form": "^0.8.
|
|
53
|
-
"@live-change/frontend-base": "^0.8.
|
|
54
|
-
"@live-change/geoip-service": "^0.8.
|
|
55
|
-
"@live-change/image-frontend": "^0.8.
|
|
56
|
-
"@live-change/locale-settings-service": "^0.8.
|
|
57
|
-
"@live-change/password-authentication-service": "^0.8.
|
|
58
|
-
"@live-change/prosemirror-service": "^0.8.
|
|
59
|
-
"@live-change/secret-code-service": "^0.8.
|
|
60
|
-
"@live-change/secret-link-service": "^0.8.
|
|
61
|
-
"@live-change/session-service": "^0.8.
|
|
62
|
-
"@live-change/task-service": "^0.8.
|
|
63
|
-
"@live-change/upload-frontend": "^0.8.
|
|
64
|
-
"@live-change/url-frontend": "^0.8.
|
|
65
|
-
"@live-change/url-service": "^0.8.
|
|
66
|
-
"@live-change/user-frontend": "^0.8.
|
|
67
|
-
"@live-change/user-identification-service": "^0.8.
|
|
68
|
-
"@live-change/user-service": "^0.8.
|
|
69
|
-
"@live-change/vote-service": "^0.8.
|
|
70
|
-
"@live-change/vue3-components": "^0.8.
|
|
71
|
-
"@live-change/vue3-ssr": "^0.8.
|
|
72
|
-
"@live-change/wysiwyg-frontend": "^0.8.
|
|
38
|
+
"@live-change/access-control-frontend": "^0.8.112",
|
|
39
|
+
"@live-change/access-control-service": "^0.8.112",
|
|
40
|
+
"@live-change/backup-service": "^0.8.112",
|
|
41
|
+
"@live-change/blog-frontend": "^0.8.112",
|
|
42
|
+
"@live-change/blog-service": "^0.8.112",
|
|
43
|
+
"@live-change/cli": "^0.8.112",
|
|
44
|
+
"@live-change/content-frontend": "^0.8.112",
|
|
45
|
+
"@live-change/content-service": "^0.8.112",
|
|
46
|
+
"@live-change/dao": "^0.8.112",
|
|
47
|
+
"@live-change/dao-vue3": "^0.8.112",
|
|
48
|
+
"@live-change/dao-websocket": "^0.8.112",
|
|
49
|
+
"@live-change/db-client": "^0.8.112",
|
|
50
|
+
"@live-change/email-service": "^0.8.112",
|
|
51
|
+
"@live-change/framework": "^0.8.112",
|
|
52
|
+
"@live-change/frontend-auto-form": "^0.8.112",
|
|
53
|
+
"@live-change/frontend-base": "^0.8.112",
|
|
54
|
+
"@live-change/geoip-service": "^0.8.112",
|
|
55
|
+
"@live-change/image-frontend": "^0.8.112",
|
|
56
|
+
"@live-change/locale-settings-service": "^0.8.112",
|
|
57
|
+
"@live-change/password-authentication-service": "^0.8.112",
|
|
58
|
+
"@live-change/prosemirror-service": "^0.8.112",
|
|
59
|
+
"@live-change/secret-code-service": "^0.8.112",
|
|
60
|
+
"@live-change/secret-link-service": "^0.8.112",
|
|
61
|
+
"@live-change/session-service": "^0.8.112",
|
|
62
|
+
"@live-change/task-service": "^0.8.112",
|
|
63
|
+
"@live-change/upload-frontend": "^0.8.112",
|
|
64
|
+
"@live-change/url-frontend": "^0.8.112",
|
|
65
|
+
"@live-change/url-service": "^0.8.112",
|
|
66
|
+
"@live-change/user-frontend": "^0.8.112",
|
|
67
|
+
"@live-change/user-identification-service": "^0.8.112",
|
|
68
|
+
"@live-change/user-service": "^0.8.112",
|
|
69
|
+
"@live-change/vote-service": "^0.8.112",
|
|
70
|
+
"@live-change/vue3-components": "^0.8.112",
|
|
71
|
+
"@live-change/vue3-ssr": "^0.8.112",
|
|
72
|
+
"@live-change/wysiwyg-frontend": "^0.8.112",
|
|
73
73
|
"@vueuse/core": "^10.11.0",
|
|
74
74
|
"codeceptjs-assert": "^0.0.5",
|
|
75
75
|
"compression": "^1.7.4",
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
"vue3-scroll-border": "0.1.6"
|
|
92
92
|
},
|
|
93
93
|
"devDependencies": {
|
|
94
|
-
"@live-change/codeceptjs-helper": "^0.8.
|
|
94
|
+
"@live-change/codeceptjs-helper": "^0.8.112",
|
|
95
95
|
"codeceptjs": "^3.6.5",
|
|
96
96
|
"generate-password": "1.7.1",
|
|
97
97
|
"playwright": "^1.41.2",
|
|
@@ -102,5 +102,5 @@
|
|
|
102
102
|
"author": "Michał Łaszczewski <michal@laszczewski.pl>",
|
|
103
103
|
"license": "ISC",
|
|
104
104
|
"description": "",
|
|
105
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "e0d0db33777f8f9fc9f5ebe1a977cf574b837be6"
|
|
106
106
|
}
|