Skouter mortgage estimates. Web application with view written in PHP and Vue, but controller and models in Go.
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 
 
 
 

132 linhas
3.1 KiB

  1. <template>
  2. <section v-if="allow" class="shadowbox">
  3. <h2>Register</h2>
  4. <account v-if="step == 1" :err="err" @submit="create" />
  5. <billing v-if="step == 2" :err="err" :sub="sub"/>
  6. <completed v-if="step == 3" :err="err" :status="sub.paymentStatus"/>
  7. </section>
  8. </template>
  9. <script setup>
  10. import { ref, onMounted } from "vue"
  11. import Account from "./account.vue"
  12. import Billing from "./billing.vue"
  13. import Completed from "./completed.vue"
  14. let err = ref("")
  15. const stripe = Stripe(process.env.STRIPE_KEY)
  16. const step = ref(1)
  17. const token = ref("")
  18. const user = ref(null)
  19. const sub = ref(null)
  20. const trial = ref(false)
  21. const allow = ref(true)
  22. const clientSecret = new URLSearchParams(window.location.search).get(
  23. 'payment_intent_client_secret'
  24. );
  25. function getCookie(name) {
  26. var re = new RegExp(name + "=([^;]+)")
  27. var value = re.exec(document.cookie)
  28. return (value != null) ? unescape(value[1]) : null
  29. }
  30. function getUser() {
  31. token.value = getCookie("skouter")
  32. return fetch(`/api/user`,
  33. {method: 'GET',
  34. headers: {
  35. "Accept": "application/json",
  36. "Authorization": `Bearer ${token.value}`,
  37. },
  38. }).then(response => {
  39. if (response.ok) {
  40. return response.json()
  41. }
  42. })
  43. }
  44. function create(user) {
  45. fetch(`/api/user`,
  46. {method: 'POST',
  47. body: JSON.stringify(user),
  48. headers: {
  49. "Accept": "application/json",
  50. },
  51. }).then(resp => {
  52. if (resp.ok) {
  53. return resp.json().then(u => { err.value = "" }).
  54. then( () => {
  55. token.value = getCookie("skouter")
  56. intent(user)
  57. } )
  58. } else {
  59. resp.text().then( e => err.value = e)
  60. }
  61. })
  62. }
  63. function intent(u) {
  64. let path = `/api/user/subscribe`
  65. if (trial.value) {
  66. path = `/api/user/trial`
  67. }
  68. return fetch(path,
  69. {method: 'POST',
  70. body: JSON.stringify(u),
  71. headers: {
  72. "Accept": "application/json",
  73. "Authorization": `Bearer ${token.value}`,
  74. },
  75. }).then(resp => {
  76. if (resp.ok) {
  77. resp.json().then(s => {
  78. err.value = ""
  79. sub.value = s
  80. if (["processing", "succeeded"].includes(s.paymentStatus) &&
  81. clientSecret == s.clientSecret) {
  82. step.value = step.value + 2
  83. } else if (s.paymentStatus == "requires_payment_method") {
  84. step.value++
  85. } else {
  86. step.value = 0
  87. }
  88. })
  89. } else {
  90. resp.text().then( e => err.value = e)
  91. }
  92. })
  93. }
  94. onMounted(() => {
  95. if (window.location.pathname == "/free-trial") {
  96. trial.value = true
  97. }
  98. getUser().then( u => {
  99. if (u) { user.value = u; console.log(u); intent(u) }
  100. // If user's account was not created through a trial form but the
  101. // current path is /free-trial, hide the form.
  102. if (u && u.status != "Trial" && trial.value) {
  103. allow.value == false
  104. }
  105. })
  106. })
  107. </script>
  108. <style scoped>
  109. section {
  110. max-width: 400px;
  111. margin: auto;
  112. }
  113. </style>