1. <template>
2.   <div>
3.     <v-btn
4.       v-show="
5.         getProfile &&
6.           getProfile.bluemediaPaymentConfig.gpay.redirect &&
7.           !applePayAvailable()
8.       "
9.       :disabled="!isOnline"
10.       outlined
11.       class="googleButton text-none pr-2 pl-4 mb-1"
12.       x-large
13.       @click="send(GOOGLE)"
14.     >
15.       <div class="content_button_wrapper">
16.         <img
17.           src="@/assets/donation/google_pay-mark_800_gray.svg"
18.           alt="Logo Google Pay"
19.         />
20.         Google Pay
21.       </div>
22.       <v-icon>chevron_right</v-icon>
23.     </v-btn>
24.     <v-btn
25.       v-show="
26.         getProfile &&
27.           getProfile.bluemediaPaymentConfig.apple.redirect &&
28.           applePayAvailable()
29.       "
30.       outlined
31.       class="googleButton text-none pr-2 pl-4"
32.       :disabled="!isOnline"
33.       x-large
34.       @click="send(APPLE)"
35.     >
36.       <div class="content_button_wrapper">
37.         <img
38.           src="@/assets/donation/apple_pay_payment_mark.svg"
39.           alt="Apple Pay"
40.         />
41.         Apple Pay
42.       </div>
43.       <v-icon>chevron_right</v-icon>
44.     </v-btn>
45.  
46.     <v-btn
47.       v-if="getProfile && getProfile.bluemediaPaymentConfig.card.redirect"
48.       :outlined="canMakePayment"
49.       :disabled="!isOnline"
50.       width="100%"
51.       large
52.       class="f-payment f-normal-case card_button text-none pr-2 pl-4 my-4"
53.       :class="canMakePayment ? 'f-outlined' : 'f-normal'"
54.       x-large
55.       @click="makePaymentInFrame()"
56.     >
57.       <div class="content_button_wrapper">
58.         <div class="icon_wrapper mr-6">
59.           <v-icon class="ma-0" color="#3c4043" left>credit_card</v-icon>
60.         </div>
61.  
62.         {{ $t(`${userPath}.donateWithCard`) }}
63.       </div>
64.       <v-icon>chevron_right</v-icon>
65.     </v-btn>
66.  
67.     <v-btn
68.       :disabled="!isOnline"
69.       outlined
70.       class="googleButton text-none pr-2 pl-4"
71.       x-large
72.       @click="send(BM)"
73.     >
74.       <div class="content_button_wrapper">
75.         <img
76.           class="bm_icon"
77.           src="@/assets/donation/bluemedia/logo_blue_media.png"
78.           alt="Logo Bluemedia"
79.         />
80.         {{ $t(`${userPath}.donateWithBm`) }}
81.       </div>
82.       <v-icon>chevron_right</v-icon>
83.     </v-btn>
84.   </div>
85. </template>
86.  
87. <script>
88. import '@/plugins/checkout'
89. import {
90.   bluemediaPaymentIntentCard,
91.   bluemediaPaymentIntentGooglePay
92. } from '@/services/bluemedia/paymentIntents'
93. import '@google-pay/button-element'
94. import { mapMutations, mapGetters, mapState } from 'vuex'
95. import {
96.   GOOGLE_CONFIG,
97.   BM_GATEWAY,
98.   EXTERNAL_WALLETS_TYPES,
99.   PAYMENT_OPERATORS
100. } from '@/utils/macros/payments'
101. import { fetchMerchant } from '@/services/bluemedia/merchantScript'
102. import UsersDB from '@/firebase/users-db'
103.  
104. export default {
105.   name: 'BluemediaButtons',
106.   props: {
107.     disableButtons: {
108.       type: Boolean
109.     },
110.     teamName: {
111.       type: String
112.     },
113.     price: {
114.       type: String,
115.       default: ''
116.     },
117.     boxId: {
118.       type: Number
119.     },
120.     currency: {
121.       type: String
122.     },
123.     canMakePayment: {
124.       type: Boolean
125.     }
126.   },
127.   data: () => ({
128.     successLink: '',
129.     snackbar: '',
130.     basePath: 'tournaments.tournamentForm',
131.     paymentPending: false,
132.     ...BM_GATEWAY,
133.     userPath: 'layout.donation.user',
134.     alertPath: 'layout.donation.alerts',
135.     merchantInfo: {},
136.     googleButtonSettings: {
137.       environment: 'PRODUCTION',
138.       buttonType: 'pay',
139.       buttonColor: 'black',
140.       buttonSize: 'static'
141.     },
142.     googleMerchantId: '',
143.     googleConfig: GOOGLE_CONFIG
144.   }),
145.   beforeMount() {
146.     window.onpageshow = async event => {
147.       if (event.persisted) {
148.         this.$emit('change-loader', true)
149.         window.location.reload()
150.       }
151.     }
152.   },
153.   computed: {
154.     ...mapGetters('donation', ['getProfile']),
155.     ...mapState('app', { isOnline: 'networkOnLine' })
156.   },
157.  
158.   destroyed() {
159.     window.onpageshow = null
160.   },
161.   async mounted() {
162.     const link = this.$route.params.userLink.toLowerCase()
163.     const field = link.length === 4 ? 'link' : 'customLink'
164.     await new UsersDB().find(field, link).then(async user => {
165.       this.setProfile(user)
166.     })
167.  
168.     if (!this.getProfile?.bluemediaPaymentConfig?.gpay?.redirect) {
169.       const {
170.         merchantOrigin,
171.         merchantName,
172.         authJwt,
173.         merchantId,
174.         acceptorId
175.       } = await fetchMerchant()
176.  
177.       this.googleConfig.merchantInfo = {
178.         merchantOrigin,
179.         merchantName,
180.         authJwt,
181.         merchantId
182.       }
183.  
184.       this.googleConfig.allowedPaymentMethods[0].tokenizationSpecification.parameters = {
185.         gateway: PAYMENT_OPERATORS.BLUEMEDIA,
186.         gatewayMerchantId: acceptorId.toString()
187.       }
188.     }
189.  
190.     window.PayBmCheckout.transactionDeclined = async () => {
191.       this.paymentPending = false
192.       this.$emit('change-loader', false)
193.     }
194.     window.PayBmCheckout.transactionSuccess = async () => {
195.       this.$router.push(`/service/bluemedia/transaction${this.successLink}`)
196.       this.paymentPending = false
197.       this.$emit('change-loader', false)
198.     }
199.     window.PayBmCheckout.transactionError = async () => {
200.       this.paymentPending = false
201.       this.$emit('change-loader', false)
202.     }
203.   },
204.   methods: {
205.     ...mapMutations('donation', ['setAlertMessage', 'setProfile']),
206.     async makePaymentInFrame() {
207.       this.$emit('change-loader', true)
208.       if (this.getProfile.bluemediaPaymentConfig.cardsEnabled) {
209.         await this.makePaymentCard()
210.       } else {
211.         this.setAlertMessage(
212.           this.$t(`${this.alertPath}.unavailablePaymentMethod`)
213.         )
214.       }
215.       this.$emit('change-loader', false)
216.     },
217.     applePayAvailable() {
218.       return window.ApplePaySession !== undefined
219.     },
220.     onError: event => {
221.       console.error('error', event.error)
222.     },
223.     onPaymentDataAuthorized: () => {
224.       return {
225.         transactionState: 'SUCCESS'
226.       }
227.     },
228.     onReadyToPayChange(e) {},
229.     async onLoadPaymentData({ detail }) {
230.       const { token } = detail.paymentMethodData.tokenizationData
231.       await this.makePayment(
232.         this.GOOGLE,
233.         JSON.stringify(token),
234.         EXTERNAL_WALLETS_TYPES.google
235.       )
236.     },
237.     async send(gatewayId) {
238.       this.$emit('change-loader', true)
239.       if (
240.         [this.BM].includes(gatewayId) &&
241.         this.getProfile.bluemediaPaymentConfig.otherMethodsEnabled
242.       ) {
243.         await this.makePayment(gatewayId)
244.       } else if (
245.         [this.APPLE, this.GOOGLE].includes(gatewayId) &&
246.         this.getProfile.bluemediaPaymentConfig.cardsEnabled
247.       ) {
248.         await this.makePayment(gatewayId)
249.       } else {
250.         this.setAlertMessage(
251.           this.$t(`${this.alertPath}.unavailablePaymentMethod`)
252.         )
253.       }
254.       this.$emit('change-loader', false)
255.     },
256.  
257.     async makePayment(
258.       gatewayId,
259.       token,
260.       type = EXTERNAL_WALLETS_TYPES.appleAndGoogle
261.     ) {
262.       this.paymentPending = true
263.       const response = await bluemediaPaymentIntentGooglePay({
264.         amount: this.price,
265.         currency: this.currency.toUpperCase(),
266.         token,
267.         type,
268.         uid: this.getProfile.uid,
269.         link: this.getProfile.link,
270.         gatewayId
271.       })
272.  
273.       window.location.href = response
274.     },
275.     async makePaymentCard() {
276.       this.paymentPending = true
277.       const result = await bluemediaPaymentIntentCard({
278.         amount: this.price,
279.         currency: this.currency.toUpperCase(),
280.         type: 'card',
281.         uid: this.getProfile.uid,
282.         link: this.getProfile.link
283.       })
284.  
285.       this.successLink = result.success
286.       window.PayBmCheckout.transactionStartByUrl(result.url)
287.     }
288.   }
289. }
290. </script>
291. <style lang="scss">
292. @import '@/theme/variables.scss';
293.  
294. #google-pay-button {
295.   height: 52px;
296.   width: 100%;
297.  
298.   div {
299.     height: 100%;
300.  
301.     .gpay-button {
302.       width: 100%;
303.       height: 100%;
304.     }
305.   }
306. }
307.  
308. .bm_icon {
309.   border: 1px solid black;
310.   border-radius: 3px;
311. }
312.  
313. .card_button {
314.   display: flex;
315.   justify-content: space-between;
316.   background-color: white !important;
317.   box-shadow: none;
318.   border: 1px solid $color-secondary-dark;
319.   border-color: $color-secondary-dark !important;
320.   color: $color-secondary-dark !important;
321. }
322.  
323. .content_button_wrapper {
324.   display: flex;
325.   align-items: center;
326. }
327.  
328. .icon_wrapper {
329.   border: 1px solid #3c4043;
330.   background-color: white !important;
331.   border-radius: 4px;
332.   height: 32px;
333.   width: 50px;
334.   display: flex;
335.   justify-content: center;
336.   align-items: center;
337. }
338.  
339. .content_button_wrapper {
340.   display: flex;
341.   align-items: center;
342. }
343.  
344. .googleButton {
345.   width: 100%;
346.   border-color: $color-secondary-dark !important;
347.   color: $color-secondary-dark !important;
348.  
349.   img {
350.     width: auto;
351.     height: 32px;
352.     margin-right: 24px !important;
353.   }
354.  
355.   div {
356.     width: 100% !important;
357.     height: 100% !important;
358.  
359.     button {
360.       width: 100% !important;
361.       height: 100% !important;
362.     }
363.   }
364. }
365. </style>
366.