{"version":3,"file":"4s1lbR1W.js","sources":["../../../../skeleton/components/form/phone-verify.vue","../../../../skeleton/components/modal/phone.vue"],"sourcesContent":["<template>\n  <div class=\"phone-verify\">\n    <div class=\"description\">\n      {{ getContent(fieldsSettings, defaultLocaleFieldsSettings, 'forms.phoneVerificationDescription') }} +{{ props.phone }}\n    </div>\n\n    <form-input-code\n      ref=\"codeInput\"\n      v-model:completeCode=\"completeCode\"\n      :hint=\"props.errorHint\"\n    />\n\n    <div class=\"phone-verify__resend\">\n      <span class=\"phone-verify__resend-hint\">\n        <template v-if=\"limitError\">\n          {{ getContent(fieldsSettings, defaultLocaleFieldsSettings, 'forms.verification.limitError') }}\n        </template>\n      </span>\n\n      <template v-if=\"!limitError\">\n        <div v-if=\"timer\" class=\"phone-verify__resend-timer\">\n          <div class=\"label\">\n            {{ getContent(fieldsSettings, defaultLocaleFieldsSettings, 'forms.verification.timerLabel') }}\n          </div>\n\n          <div class=\"time\">\n            <span>{{ Math.floor(currentTime / 60) }}</span>:<span>{{ String(currentTime % 60).padStart(2, '0') }}</span>\n          </div>\n        </div>\n\n        <div v-else class=\"resend\" @click=\"resendCode\">\n          <span>{{ getContent(fieldsSettings, defaultLocaleFieldsSettings, 'forms.verification.resendText') }}</span>\n          <span class=\"link\">{{ getContent(fieldsSettings, defaultLocaleFieldsSettings, 'forms.verification.resendlink') }}</span>\n        </div>\n      </template>\n    </div>\n\n    <div class=\"phone-verify__actions\">\n      <button-base\n        class=\"phone-verify__cancel-button\"\n        tagName=\"div\"\n        type=\"gray\"\n        size=\"md\"\n        @click=\"emit('cancel')\"\n      >\n        {{ props.buttonCancelLabel }}\n      </button-base>\n\n      <button-base\n        class=\"phone-verify__verify-button\"\n        tagName=\"div\"\n        type=\"primary\"\n        size=\"md\"\n        :isDisabled=\"!completeCode || props.errorHint || props.loading || limitError\"\n        @click=\"verifyPhone\"\n      >\n        <atomic-spinner :is-shown=\"props.loading\"/>\n        {{ props.buttonSubmitLabel }}\n      </button-base>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  import { storeToRefs } from 'pinia';\n\n  const props = defineProps<{\n    phone: string;\n    reason: 'registration'|'phoneVerification'|'changingPass';\n    errorHint?: { variant: string, message: string };\n    loading: boolean;\n    buttonSubmitLabel: string;\n    buttonCancelLabel: string;\n  }>();\n\n  const emit = defineEmits(['verifyPhone', 'removeErrorHint', 'cancel']);\n  const {\n    fieldsSettings,\n    defaultLocaleFieldsSettings\n  } = storeToRefs(useGlobalStore());\n  const { getContent } = useProjectMethods();\n  const completeCode = ref<string>('');\n\n  watch(completeCode, () => {\n    if (props.errorHint) emit('removeErrorHint');\n  });\n\n  const TIMER_TIME = 60;\n  const timer = ref<any>(undefined);\n  const currentTime = ref<number>(TIMER_TIME);\n\n  const startTimer = ():void => {\n    timer.value = setInterval(() => {\n      if (currentTime.value === 0) {\n        clearInterval(timer.value);\n        timer.value = undefined;\n        return;\n      }\n      currentTime.value -= 1;\n    }, 1000);\n  };\n\n  const resendingCode = ref<boolean>(false);\n  const limitError = ref<boolean>(false);\n  const resendCode = async (): Promise<void> => {\n    if (resendingCode.value) return;\n\n    resendingCode.value = true;\n\n    try {\n      const { sendOtp } = useCoreAuthApi();\n      await sendOtp({ phone: props.phone, reason: props.reason });\n      currentTime.value = TIMER_TIME;\n      startTimer();\n    } catch (error: any) {\n      if (error.data?.error?.code === 11005) limitError.value = true;\n      else throw error;\n    }\n\n    resendingCode.value = false;\n  }\n\n  const verifyPhone = async(): Promise<void> => {\n    if (props.loading) return;\n    emit('verifyPhone', completeCode.value);\n  }\n\n  const codeInput = ref();\n  onMounted(() => {\n    startTimer();\n    codeInput.value.focusInput();\n  });\n\n  onBeforeUnmount(() => {\n    clearInterval(timer.value);\n  });\n</script>\n\n<style src=\"~/assets/styles/components/form/phone-verify.scss\" lang=\"scss\" />\n","<template>\n  <vue-final-modal\n    class=\"modal-phone\"\n    :clickToClose=\"false\"\n    :overlayTransition=\"{ mode: 'in-out', duration: 200 }\"\n    :contentTransition=\"{ mode: 'in-out', duration: 200 }\"\n  >\n    <div class=\"scroll\">\n      <div class=\"header\">\n        <button-modal-close @click=\"closeModal(ModalName.PHONE)\" />\n        <div class=\"title\">{{ getContent(popupsData, defaultLocalePopupsData, 'phone.modalTitle') }}</div>\n      </div>\n\n      <div class=\"modal-phone__form\">\n        <form-input-phone\n          v-if=\"!isShowPhoneVerification\"\n          :label=\"getContent(popupsData, defaultLocalePopupsData, 'phone.label')\"\n          :placeholder=\"getContent(popupsData, defaultLocalePopupsData, 'phone.placeholder')\"\n          :hint=\"setError('phone')\"\n          v-model:value=\"phoneForm.phone\"\n        />\n\n        <form-phone-verify\n          v-if=\"isShowPhoneVerification\"\n          :phone=\"phoneForm.phone as string\"\n          reason=\"phoneVerification\"\n          :errorHint=\"verificationError\"\n          :loading=\"verifyLoading\"\n          :buttonSubmitLabel=\"getContent(layoutData, defaultLocaleLayoutData, 'buttons.submit')\"\n          :buttonCancelLabel=\"getContent(layoutData, defaultLocaleLayoutData, 'buttons.back')\"\n          @verify-phone=\"verifyPhone\"\n          @remove-error-hint=\"verificationError = undefined\"\n          @cancel=\"closeVerify\"\n        />\n      </div>\n      <div class=\"modal-phone__actions\" v-if=\"!isShowPhoneVerification\">\n        <button-base\n          type=\"gray\"\n          size=\"md\"\n          @click=\"closeModal(ModalName.PHONE)\"\n        >\n          {{ getContent(layoutData, defaultLocaleLayoutData, 'buttons.cancel') }}\n        </button-base>\n\n        <button-base\n          type=\"primary\"\n          size=\"md\"\n          @click=\"sendVerifyCode\"\n          :isDisabled=\"sendingCode\"\n        >\n          <atomic-spinner :is-shown=\"sendingCode\"/>\n          {{ getContent(layoutData, defaultLocaleLayoutData, 'buttons.save') }}\n        </button-base>\n      </div>\n    </div>\n  </vue-final-modal>\n</template>\n\n<script setup lang=\"ts\">\n  import { storeToRefs } from 'pinia';\n  import { VueFinalModal } from 'vue-final-modal';\n\n  import type { IFieldHint } from '~/types';\n  import { ModalName } from \"@skeleton/consts/modals\";\n\n  const profileStore = useProfileStore();\n  const { profile } = storeToRefs(profileStore);\n  const { closeModal } = useModalStore();\n  const globalStore = useGlobalStore();\n  const { getContent } = useProjectMethods();\n\n  const {\n    layoutData,\n    defaultLocaleLayoutData,\n    fieldsSettings,\n    defaultLocaleFieldsSettings,\n    popupsData,\n    defaultLocalePopupsData\n  } = storeToRefs(globalStore);\n\n  const verificationError = ref<IFieldHint|undefined>();\n\n  const phoneForm = reactive({\n    phone: profile.value?.phone as string\n  });\n\n  const { getFormRules, createValidationRules } = useProjectMethods();\n  const phoneRules = createValidationRules([{ name: 'phone', isRequired: true }], true);\n  const phoneFormRules = getFormRules(phoneRules);\n  const { serverFormErrors, v$, setError } = useFormValidation(phoneFormRules, phoneForm);\n\n  const sendingCode = ref(false);\n  const isShowPhoneVerification = ref(false);\n\n  const sendVerifyCode = async (): Promise<void> => {\n    v$.value.$reset();\n    const validFormData = await v$.value.$validate();\n\n    if (sendingCode.value || !validFormData) return;\n    sendingCode.value = true;\n\n    try {\n      const { sendOtp } = useCoreAuthApi();\n      await sendOtp({ phone: profile.value?.phone as string, reason: 'phoneVerification' });\n      isShowPhoneVerification.value = true;\n    } catch (error:any) {\n      if (error.data?.error?.code === 11005) {\n        const limitError = getContent(fieldsSettings.value, defaultLocaleFieldsSettings.value, 'forms.verification.limitError');\n        serverFormErrors.value = { phone: [limitError] };\n      } else {\n        serverFormErrors.value = { phone: [error.data?.error?.message] };\n      }\n    }\n\n    sendingCode.value = false;\n  }\n\n  const verifyLoading = ref(false);\n  const verifyPhone = async (verificationCode: string): Promise<void> => {\n    if (verifyLoading.value) return;\n    verifyLoading.value = true;\n\n    try {\n      const { phoneVerification } = useCoreAuthApi();\n      await phoneVerification({\n        phone: profile.value?.phone as string,\n        reason: 'phoneVerification',\n        code: verificationCode\n      });\n      await profileStore.getProfileData();\n      isShowPhoneVerification.value = false;\n    } catch (error: any) {\n      if (error.data?.error?.code === 11003) {\n        verificationError.value = {\n          variant: 'error',\n          message: getContent(fieldsSettings.value, defaultLocaleFieldsSettings.value, 'forms.verification.invalidError')\n        };\n      } else {\n        verificationError.value = {\n          variant: 'error',\n          message: error.data?.error?.message || 'Cannot verify phone number'\n        };\n      }\n    }\n    verifyLoading.value = false;\n  }\n\n  const closeVerify = (): void => {\n    v$.value.$reset();\n    isShowPhoneVerification.value = false;\n  }\n</script>\n\n<style src=\"~/assets/styles/components/modal/phone.scss\" lang=\"scss\" />\n\n"],"names":["TIMER_TIME","props","__props","emit","__emit","fieldsSettings","defaultLocaleFieldsSettings","storeToRefs","useGlobalStore","getContent","useProjectMethods","completeCode","ref","watch","timer","currentTime","startTimer","setInterval","resendingCode","limitError","resendCode","sendOtp","useCoreAuthApi","error","_b","_a","verifyPhone","codeInput","onMounted","onBeforeUnmount","profileStore","useProfileStore","profile","closeModal","useModalStore","globalStore","layoutData","defaultLocaleLayoutData","popupsData","defaultLocalePopupsData","verificationError","phoneForm","reactive","getFormRules","createValidationRules","phoneRules","phoneFormRules","serverFormErrors","v$","setError","useFormValidation","sendingCode","isShowPhoneVerification","sendVerifyCode","validFormData","_c","_e","_d","verifyLoading","verificationCode","phoneVerification","closeVerify"],"mappings":"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"}