pukaad-ui-lib 1.253.0 → 1.255.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.253.0",
+  "version": "1.255.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/input/input-date-picker.vue

@@ -102,7 +102,7 @@
         </Popover>
       </ShadFormControl>
 
-      <ShadFormDescription v-if="props.description">
+      <ShadFormDescription v-if="props.description" class="text-gray">
         {{ props.description }}
       </ShadFormDescription>
       <ShadFormMessage v-if="!props.disabledErrorMessage" />
@@ -122,7 +122,10 @@ import {
   PopoverContent,
   PopoverTrigger
 } from "#pukaad-ui/runtime/components/ui/popover";
-import { ScrollArea, ScrollBar } from "#pukaad-ui/runtime/components/ui/scroll-area";
+import {
+  ScrollArea,
+  ScrollBar
+} from "#pukaad-ui/runtime/components/ui/scroll-area";
 const props = defineProps({
   id: { type: String, required: false, default: "input-date-picker" },
   name: { type: String, required: false, default: "input-date-picker" },

package/dist/runtime/components/modal/modal-forgot-password.vue

@@ -45,6 +45,11 @@ const modalProps = computed(() => ({
   phoneOTP: {
     phone: phone.value,
     phoneLabel: maskedPhone.value,
+    requestPath: "/auth/forgot-password/send-otp",
+    requestBody: { phone: phone.value, method: "sms" },
+    verifyPath: "/auth/forgot-password/verify-otp",
+    verifyBody: { phone: phone.value },
+    initialExpiredTime: expiredTime.value,
     confirmedText: "\u0E16\u0E31\u0E14\u0E44\u0E1B"
   },
   emailOTP: {
@@ -74,7 +79,13 @@ const handleComplete = async (key, data) => {
     return;
   }
   if (key === "phoneOTP") {
-    await callVerifyOTP(data);
+    const token = data?.reset_token;
+    if (!token) {
+      $toast?.error?.("\u0E44\u0E21\u0E48\u0E1E\u0E1A reset token");
+      return;
+    }
+    resetToken.value = token;
+    modalStates.passwordNew = true;
     return;
   }
   if (key === "emailOTP") {
@@ -114,22 +125,6 @@ const callSendOTP = async () => {
     isLoading.value = false;
   }
 };
-const callVerifyOTP = async (code) => {
-  isLoading.value = true;
-  try {
-    const res = await api("/auth/forgot-password/verify-otp", {
-      method: "POST",
-      body: { phone: phone.value, code }
-    });
-    resetToken.value = res.data.reset_token;
-    modalStates.passwordNew = true;
-  } catch (e) {
-    const msg = e?.data?.message?.description || e?.data?.message || "OTP \u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07\u0E2B\u0E23\u0E37\u0E2D\u0E2B\u0E21\u0E14\u0E2D\u0E32\u0E22\u0E38";
-    $toast?.error?.(msg);
-  } finally {
-    isLoading.value = false;
-  }
-};
 watch(isOpen, (v) => {
   if (v) {
     phone.value = "";

package/dist/runtime/components/modal/modal-phone-OTP.d.vue.ts

@@ -8,11 +8,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "update:modelValue": (value: boolean) => any;
 } & {
     close: () => any;
-    complete: (value: string) => any;
+    complete: (data?: any) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClose?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onComplete?: ((value: string) => any) | undefined;
+    onComplete?: ((data?: any) => any) | undefined;
 }>, {
     phone: string;
     confirmedText: string;

package/dist/runtime/components/modal/modal-phone-OTP.vue

@@ -13,6 +13,7 @@
         <InputOTP name="otp" columnGap="auto" v-model="valueOTP" :error="otpError" />
       </div>
 
+
       <div class="text-center font-body-large">
         <template v-if="countdown !== '00:00'">
           กรุณารอ <span class="text-primary">{{ countdown }}</span> นาที
@@ -26,7 +27,7 @@
     </div>
 
     <template #footer="{ meta }">
-      <Button type="submit" color="primary" :disabled="!meta.valid" class="w-full">
+      <Button type="submit" color="primary" :disabled="!meta.valid || isLoading" class="w-full">
         {{ props.confirmedText }}
       </Button>
     </template>
@@ -35,12 +36,19 @@
 
 <script setup>
 import { ref, watch } from "vue";
+import { useNuxtApp } from "nuxt/app";
+import { useApi } from "../../composables/useApi";
 import { useCountDown } from "../../composables/useCountDown";
 const emit = defineEmits(["complete", "close"]);
 const props = defineProps({
   phoneLabel: { type: String, required: false, default: "" },
   phone: { type: String, required: false, default: "" },
   confirmedText: { type: String, required: false, default: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19" },
+  requestPath: { type: String, required: false },
+  requestBody: { type: Object, required: false },
+  verifyPath: { type: String, required: false },
+  verifyBody: { type: Object, required: false },
+  initialExpiredTime: { type: String, required: false },
   name: { type: String, required: false },
   type: { type: String, required: false },
   gap: { type: Number, required: false },
@@ -49,33 +57,77 @@ const props = defineProps({
   placeholder: { type: String, required: false }
 });
 const isOpen = defineModel({ type: Boolean, ...{ default: false } });
+const { $toast } = useNuxtApp();
+const api = useApi();
 const textRef = ref("");
 const valueOTP = ref("");
 const otpError = ref("");
+const isLoading = ref(false);
 const { CountdownTime } = useCountDown();
 const expireAt = ref("");
 const countdown = CountdownTime(expireAt);
-const resetCountdown = () => {
-  expireAt.value = new Date(Date.now() + 5 * 60 * 1e3).toISOString();
+const handleSendOTP = async () => {
+  try {
+    isLoading.value = true;
+    const path = props.requestPath ?? "/me/phone-otp-request";
+    const body = props.requestBody ?? { phone: props.phone };
+    if (!props.requestBody && !props.phone) {
+      throw new Error("\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38 phone");
+    }
+    const response = await api(path, {
+      method: "POST",
+      body
+    });
+    if (response?.data?.expired_time) {
+      expireAt.value = response.data.expired_time;
+    } else {
+      expireAt.value = new Date(Date.now() + 5 * 60 * 1e3).toISOString();
+    }
+    if (response?.data?.ref) {
+      textRef.value = response.data.ref;
+    }
+  } catch (err) {
+    const msg = err?.data?.message?.description || err?.data?.message || "\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14\u0E43\u0E19\u0E01\u0E32\u0E23\u0E2A\u0E48\u0E07 OTP";
+    $toast?.error?.(msg);
+  } finally {
+    isLoading.value = false;
+  }
 };
 const onResend = () => {
   valueOTP.value = "";
   otpError.value = "";
-  resetCountdown();
+  handleSendOTP();
 };
-const onVerifyOTP = () => {
-  if (valueOTP.value === "123456") {
+const onVerifyOTP = async () => {
+  try {
+    isLoading.value = true;
+    const path = props.verifyPath ?? "/me/phone-otp-verify";
+    const body = props.verifyBody ? { ...props.verifyBody, code: valueOTP.value } : { code: valueOTP.value, phone: props.phone };
+    const response = await api(path, {
+      method: "POST",
+      body
+    });
     otpError.value = "";
-    emit("complete", valueOTP.value);
+    emit("complete", response?.data || valueOTP.value);
     isOpen.value = false;
-  } else {
+  } catch (err) {
     otpError.value = "\u0E23\u0E2B\u0E31\u0E2A\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07";
+  } finally {
+    isLoading.value = false;
   }
 };
 watch(isOpen, (value) => {
   textRef.value = "";
   valueOTP.value = "";
   otpError.value = "";
-  if (value) resetCountdown();
+  if (value) {
+    if (props.initialExpiredTime) {
+      expireAt.value = props.initialExpiredTime;
+    } else {
+      handleSendOTP();
+    }
+  } else {
+    expireAt.value = "";
+  }
 });
 </script>

package/dist/runtime/components/modal/modal-phone-OTP.vue.d.ts

@@ -8,11 +8,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "update:modelValue": (value: boolean) => any;
 } & {
     close: () => any;
-    complete: (value: string) => any;
+    complete: (data?: any) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClose?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onComplete?: ((value: string) => any) | undefined;
+    onComplete?: ((data?: any) => any) | undefined;
 }>, {
     phone: string;
     confirmedText: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.253.0",
+  "version": "1.255.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",