All files / ee/app/assets/javascripts/billings/components account_verification_modal.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
 
 
 
 
 
5x
5x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script>
import { GlModal, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
import Zuora from 'ee/billings/components/zuora_simple.vue';
 
// Set to 480px to accommodate Google reCAPTCHA challenge form
export const IFRAME_MINIMUM_HEIGHT = 480;
const i18n = Object.freeze({
  title: s__('Billings|Validate user account'),
  description: s__(`
Billings|To use free compute minutes on instance runners, you'll need to validate your account with a credit card. This is required to discourage and reduce abuse on GitLab infrastructure.
%{strongStart}GitLab will not charge your card, it will only be used for validation.%{strongEnd}`),
});
 
export default {
  components: {
    GlModal,
    GlSprintf,
    Zuora,
  },
  model: {
    prop: 'visible',
    event: 'change',
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    iframeUrl: {
      type: String,
      required: true,
    },
    allowedOrigin: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      hasLoadError: false,
      paymentFormId: window.gon?.payment_validation_form_id,
    };
  },
  computed: {
    actionPrimaryProps() {
      return {
        text: s__('Billings|Validate account'),
        attributes: {
          variant: 'confirm',
          disabled: this.hasLoadError,
        },
      };
    },
    currentUserId() {
      return window.gon.current_user_id;
    },
  },
  methods: {
    submit(e) {
      e.preventDefault();
 
      this.$refs.zuora.submit();
    },
    handleLoadError() {
      this.hasLoadError = true;
    },
  },
  i18n,
  iframeHeight: IFRAME_MINIMUM_HEIGHT,
};
</script>
 
<template>
  <gl-modal
    modal-id="credit-card-verification-modal"
    :visible="visible"
    :title="$options.i18n.title"
    :action-primary="actionPrimaryProps"
    @primary="submit"
    @change="$emit('change', $event)"
  >
    <p>
      <gl-sprintf :message="$options.i18n.description">
        <template #strong="{ content }">
          <strong>{{ content }}</strong>
        </template>
      </gl-sprintf>
    </p>
    <zuora
      ref="zuora"
      :current-user-id="currentUserId"
      :fixed-iframe-height="$options.iframeHeight"
      :initial-height="$options.iframeHeight"
      :iframe-url="iframeUrl"
      :allowed-origin="allowedOrigin"
      :payment-form-id="paymentFormId"
      @success="$emit('success')"
      @load-error="handleLoadError"
    />
  </gl-modal>
</template>