Initial commit: Add logistics and order_detail message types

- Add Logistics component with progress tracking
- Add OrderDetail component for order information
- Support data-driven steps and actions
- Add blue color scale to widget SCSS
- Fix node overflow and progress bar rendering issues
- Add English translations for dashboard components

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/javascript/v3/views/auth/confirmation/Index.vue

@@ -0,0 +1,39 @@
+<script>
+import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
+import { verifyPasswordToken } from '../../../api/auth';
+import Spinner from 'shared/components/Spinner.vue';
+
+export default {
+  components: { Spinner },
+  props: {
+    confirmationToken: {
+      type: String,
+      default: '',
+    },
+  },
+  mounted() {
+    this.confirmToken();
+  },
+  methods: {
+    async confirmToken() {
+      try {
+        await verifyPasswordToken({
+          confirmationToken: this.confirmationToken,
+        });
+        window.location = DEFAULT_REDIRECT_URL;
+      } catch (error) {
+        window.location = DEFAULT_REDIRECT_URL;
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-center min-h-screen h-full bg-n-background w-full"
+  >
+    <Spinner color-scheme="primary" size="" />
+    <div class="ml-2 text-n-slate-11">{{ $t('CONFIRM_EMAIL') }}</div>
+  </div>
+</template>

app/javascript/v3/views/auth/password/Edit.vue

@@ -0,0 +1,139 @@
+<script>
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
+import FormInput from '../../../components/Form/Input.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
+import { setNewPassword } from '../../../api/auth';
+
+export default {
+  components: {
+    FormInput,
+    NextButton,
+  },
+  props: {
+    resetPasswordToken: { type: String, default: '' },
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      // We need to initialize the component with any
+      // properties that will be used in it
+      credentials: {
+        confirmPassword: '',
+        password: '',
+      },
+      newPasswordAPI: {
+        message: '',
+        showLoading: false,
+      },
+      error: '',
+    };
+  },
+  mounted() {
+    // If url opened without token
+    // redirect to login
+    if (!this.resetPasswordToken) {
+      window.location = DEFAULT_REDIRECT_URL;
+    }
+  },
+  validations: {
+    credentials: {
+      password: {
+        required,
+        minLength: minLength(6),
+      },
+      confirmPassword: {
+        required,
+        minLength: minLength(6),
+        isEqPassword(value) {
+          if (value !== this.credentials.password) {
+            return false;
+          }
+          return true;
+        },
+      },
+    },
+  },
+  methods: {
+    showAlertMessage(message) {
+      // Reset loading, current selected agent
+      this.newPasswordAPI.showLoading = false;
+      useAlert(message);
+    },
+    submitForm() {
+      this.newPasswordAPI.showLoading = true;
+      const credentials = {
+        confirmPassword: this.credentials.confirmPassword,
+        password: this.credentials.password,
+        resetPasswordToken: this.resetPasswordToken,
+      };
+      setNewPassword(credentials)
+        .then(() => {
+          window.location = DEFAULT_REDIRECT_URL;
+        })
+        .catch(error => {
+          this.showAlertMessage(
+            error?.message || this.$t('SET_NEW_PASSWORD.API.ERROR_MESSAGE')
+          );
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col justify-center w-full min-h-screen py-12 bg-n-brand/5 dark:bg-n-background sm:px-6 lg:px-8"
+  >
+    <form
+      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
+      @submit.prevent="submitForm"
+    >
+      <h1
+        class="mb-1 text-2xl font-medium tracking-tight text-left text-n-slate-12"
+      >
+        {{ $t('SET_NEW_PASSWORD.TITLE') }}
+      </h1>
+
+      <div class="space-y-5">
+        <FormInput
+          v-model="credentials.password"
+          class="mt-3"
+          name="password"
+          type="password"
+          :has-error="v$.credentials.password.$error"
+          :error-message="$t('SET_NEW_PASSWORD.PASSWORD.ERROR')"
+          :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
+          @blur="v$.credentials.password.$touch"
+        />
+        <FormInput
+          v-model="credentials.confirmPassword"
+          class="mt-3"
+          name="confirm_password"
+          type="password"
+          :has-error="v$.credentials.confirmPassword.$error"
+          :error-message="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')"
+          :placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
+          @blur="v$.credentials.confirmPassword.$touch"
+        />
+        <NextButton
+          lg
+          type="submit"
+          data-testid="submit_button"
+          class="w-full"
+          :label="$t('SET_NEW_PASSWORD.SUBMIT')"
+          :disabled="
+            v$.credentials.password.$invalid ||
+            v$.credentials.confirmPassword.$invalid ||
+            newPasswordAPI.showLoading
+          "
+          :is-loading="newPasswordAPI.showLoading"
+        />
+      </div>
+    </form>
+  </div>
+</template>

app/javascript/v3/views/auth/reset/password/Index.vue

@@ -0,0 +1,110 @@
+<script>
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required, minLength, email } from '@vuelidate/validators';
+import { useBranding } from 'shared/composables/useBranding';
+import FormInput from '../../../../components/Form/Input.vue';
+import { resetPassword } from '../../../../api/auth';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+export default {
+  components: { FormInput, NextButton },
+  setup() {
+    const { replaceInstallationName } = useBranding();
+    return { v$: useVuelidate(), replaceInstallationName };
+  },
+  data() {
+    return {
+      credentials: { email: '' },
+      resetPassword: {
+        message: '',
+        showLoading: false,
+      },
+      error: '',
+    };
+  },
+  validations() {
+    return {
+      credentials: {
+        email: {
+          required,
+          email,
+          minLength: minLength(4),
+        },
+      },
+    };
+  },
+  methods: {
+    showAlertMessage(message) {
+      // Reset loading, current selected agent
+      this.resetPassword.showLoading = false;
+      useAlert(message);
+    },
+    submit() {
+      this.resetPassword.showLoading = true;
+      resetPassword(this.credentials)
+        .then(res => {
+          let successMessage = this.$t('RESET_PASSWORD.API.SUCCESS_MESSAGE');
+          if (res.data && res.data.message) {
+            successMessage = res.data.message;
+          }
+          this.showAlertMessage(successMessage);
+        })
+        .catch(error => {
+          let errorMessage = this.$t('RESET_PASSWORD.API.ERROR_MESSAGE');
+          if (error?.response?.data?.message) {
+            errorMessage = error.response.data.message;
+          }
+          this.showAlertMessage(errorMessage);
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col justify-center w-full min-h-screen py-12 bg-n-brand/5 dark:bg-n-background sm:px-6 lg:px-8"
+  >
+    <form
+      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
+      @submit.prevent="submit"
+    >
+      <h1
+        class="mb-1 text-2xl font-medium tracking-tight text-left text-n-slate-12"
+      >
+        {{ $t('RESET_PASSWORD.TITLE') }}
+      </h1>
+      <p
+        class="mb-4 text-sm font-normal leading-6 tracking-normal text-n-slate-11"
+      >
+        {{ replaceInstallationName($t('RESET_PASSWORD.DESCRIPTION')) }}
+      </p>
+      <div class="space-y-5">
+        <FormInput
+          v-model="credentials.email"
+          name="email_address"
+          :has-error="v$.credentials.email.$error"
+          :error-message="$t('RESET_PASSWORD.EMAIL.ERROR')"
+          :placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
+          @input="v$.credentials.email.$touch"
+        />
+        <NextButton
+          lg
+          type="submit"
+          data-testid="submit_button"
+          class="w-full"
+          :label="$t('RESET_PASSWORD.SUBMIT')"
+          :disabled="v$.credentials.email.$invalid || resetPassword.showLoading"
+          :is-loading="resetPassword.showLoading"
+        />
+      </div>
+      <p class="mt-4 -mb-1 text-sm text-n-slate-11">
+        {{ $t('RESET_PASSWORD.GO_BACK_TO_LOGIN') }}
+        <router-link to="/auth/login" class="text-link text-n-brand">
+          {{ $t('COMMON.CLICK_HERE') }}.
+        </router-link>
+      </p>
+    </form>
+  </div>
+</template>

app/javascript/v3/views/auth/signup/Index.vue

@@ -0,0 +1,85 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useBranding } from 'shared/composables/useBranding';
+import SignupForm from './components/Signup/Form.vue';
+import Testimonials from './components/Testimonials/Index.vue';
+import Spinner from 'shared/components/Spinner.vue';
+
+export default {
+  components: {
+    SignupForm,
+    Spinner,
+    Testimonials,
+  },
+  setup() {
+    const { replaceInstallationName } = useBranding();
+    return { replaceInstallationName };
+  },
+  data() {
+    return { isLoading: false };
+  },
+  computed: {
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
+    isAChatwootInstance() {
+      return this.globalConfig.installationName === 'Chatwoot';
+    },
+  },
+  beforeMount() {
+    this.isLoading = this.isAChatwootInstance;
+  },
+  methods: {
+    resizeContainers() {
+      this.isLoading = false;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="w-full h-full bg-n-background">
+    <div v-show="!isLoading" class="flex h-full min-h-screen items-center">
+      <div
+        class="flex-1 min-h-[640px] inline-flex items-center h-full justify-center overflow-auto py-6"
+      >
+        <div class="px-8 max-w-[560px] w-full overflow-auto">
+          <div class="mb-4">
+            <img
+              :src="globalConfig.logo"
+              :alt="globalConfig.installationName"
+              class="block w-auto h-8 dark:hidden"
+            />
+            <img
+              v-if="globalConfig.logoDark"
+              :src="globalConfig.logoDark"
+              :alt="globalConfig.installationName"
+              class="hidden w-auto h-8 dark:block"
+            />
+            <h2
+              class="mt-6 text-3xl font-medium text-left mb-7 text-n-slate-12"
+            >
+              {{ $t('REGISTER.TRY_WOOT') }}
+            </h2>
+          </div>
+          <SignupForm />
+          <div class="px-1 text-sm text-n-slate-12">
+            <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }} </span>
+            <router-link class="text-link text-n-brand" to="/app/login">
+              {{ replaceInstallationName($t('LOGIN.TITLE')) }}
+            </router-link>
+          </div>
+        </div>
+      </div>
+      <Testimonials
+        v-if="isAChatwootInstance"
+        class="flex-1"
+        @resize-containers="resizeContainers"
+      />
+    </div>
+    <div
+      v-show="isLoading"
+      class="flex items-center min-h-screen justify-center w-full h-full"
+    >
+      <Spinner color-scheme="primary" size="" />
+    </div>
+  </div>
+</template>

app/javascript/v3/views/auth/signup/components/Signup/Form.vue

@@ -0,0 +1,329 @@
+<script>
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength, email, sameAs } from '@vuelidate/validators';
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
+import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
+import SimpleDivider from '../../../../../components/Divider/SimpleDivider.vue';
+import FormInput from '../../../../../components/Form/Input.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import { isValidPassword } from 'shared/helpers/Validators';
+import GoogleOAuthButton from '../../../../../components/GoogleOauth/Button.vue';
+import { register } from '../../../../../api/auth';
+import * as CompanyEmailValidator from 'company-email-validator';
+
+const MIN_PASSWORD_LENGTH = 6;
+const SPECIAL_CHAR_REGEX = /[!@#$%^&*()_+\-=[\]{}|'"/\\.,`<>:;?~]/;
+
+export default {
+  components: {
+    FormInput,
+    GoogleOAuthButton,
+    NextButton,
+    SimpleDivider,
+    Icon,
+    VueHcaptcha,
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      credentials: {
+        accountName: '',
+        fullName: '',
+        email: '',
+        password: '',
+        confirmPassword: '',
+        hCaptchaClientResponse: '',
+      },
+      didCaptchaReset: false,
+      isSignupInProgress: false,
+      error: '',
+    };
+  },
+  validations() {
+    return {
+      credentials: {
+        accountName: {
+          required,
+          minLength: minLength(2),
+        },
+        fullName: {
+          required,
+          minLength: minLength(2),
+        },
+        email: {
+          required,
+          email,
+          businessEmailValidator(value) {
+            return CompanyEmailValidator.isCompanyEmail(value);
+          },
+        },
+        password: {
+          required,
+          isValidPassword,
+          minLength: minLength(MIN_PASSWORD_LENGTH),
+        },
+        confirmPassword: {
+          required,
+          minLength: minLength(MIN_PASSWORD_LENGTH),
+          sameAsPassword: sameAs(this.credentials.password),
+        },
+      },
+    };
+  },
+  computed: {
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
+    termsLink() {
+      return this.$t('REGISTER.TERMS_ACCEPT')
+        .replace('https://www.chatwoot.com/terms', this.globalConfig.termsURL)
+        .replace(
+          'https://www.chatwoot.com/privacy-policy',
+          this.globalConfig.privacyURL
+        );
+    },
+    hasAValidCaptcha() {
+      if (this.globalConfig.hCaptchaSiteKey) {
+        return !!this.credentials.hCaptchaClientResponse;
+      }
+      return true;
+    },
+    confirmPasswordErrorText() {
+      const { confirmPassword } = this.v$.credentials;
+      if (!confirmPassword.$error) return '';
+      if (confirmPassword.sameAsPassword.$invalid) {
+        return this.$t('REGISTER.CONFIRM_PASSWORD.ERROR');
+      }
+      return '';
+    },
+    allowedLoginMethods() {
+      return window.chatwootConfig.allowedLoginMethods || ['email'];
+    },
+    showGoogleOAuth() {
+      return (
+        this.allowedLoginMethods.includes('google_oauth') &&
+        Boolean(window.chatwootConfig.googleOAuthClientId)
+      );
+    },
+    isFormValid() {
+      return !this.v$.$invalid && this.hasAValidCaptcha;
+    },
+    passwordRequirements() {
+      const password = this.credentials.password || '';
+      return {
+        length: password.length >= MIN_PASSWORD_LENGTH,
+        uppercase: /[A-Z]/.test(password),
+        lowercase: /[a-z]/.test(password),
+        number: /[0-9]/.test(password),
+        special: SPECIAL_CHAR_REGEX.test(password),
+      };
+    },
+    passwordRequirementItems() {
+      const reqs = this.passwordRequirements;
+      return [
+        {
+          id: 'length',
+          met: reqs.length,
+          label: this.$t('REGISTER.PASSWORD.REQUIREMENTS_LENGTH', {
+            min: MIN_PASSWORD_LENGTH,
+          }),
+        },
+        {
+          id: 'uppercase',
+          met: reqs.uppercase,
+          label: this.$t('REGISTER.PASSWORD.REQUIREMENTS_UPPERCASE'),
+        },
+        {
+          id: 'lowercase',
+          met: reqs.lowercase,
+          label: this.$t('REGISTER.PASSWORD.REQUIREMENTS_LOWERCASE'),
+        },
+        {
+          id: 'number',
+          met: reqs.number,
+          label: this.$t('REGISTER.PASSWORD.REQUIREMENTS_NUMBER'),
+        },
+        {
+          id: 'special',
+          met: reqs.special,
+          label: this.$t('REGISTER.PASSWORD.REQUIREMENTS_SPECIAL'),
+        },
+      ];
+    },
+    passwordRequirementsMet() {
+      return Object.values(this.passwordRequirements).every(Boolean);
+    },
+  },
+  methods: {
+    async submit() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        this.resetCaptcha();
+        return;
+      }
+      this.isSignupInProgress = true;
+      try {
+        await register(this.credentials);
+        window.location = DEFAULT_REDIRECT_URL;
+      } catch (error) {
+        let errorMessage =
+          error?.message || this.$t('REGISTER.API.ERROR_MESSAGE');
+        this.resetCaptcha();
+        useAlert(errorMessage);
+      } finally {
+        this.isSignupInProgress = false;
+      }
+    },
+    onRecaptchaVerified(token) {
+      this.credentials.hCaptchaClientResponse = token;
+      this.didCaptchaReset = false;
+      this.v$.$touch();
+    },
+    resetCaptcha() {
+      if (!this.globalConfig.hCaptchaSiteKey) return;
+      this.$refs.hCaptcha.reset();
+      this.credentials.hCaptchaClientResponse = '';
+      this.didCaptchaReset = true;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="flex-1 px-1 overflow-auto">
+    <form class="space-y-3" @submit.prevent="submit">
+      <div class="grid grid-cols-2 gap-2">
+        <FormInput
+          v-model="credentials.fullName"
+          name="full_name"
+          class="flex-1"
+          :class="{ error: v$.credentials.fullName.$error }"
+          :label="$t('REGISTER.FULL_NAME.LABEL')"
+          :placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
+          :has-error="v$.credentials.fullName.$error"
+          :error-message="$t('REGISTER.FULL_NAME.ERROR')"
+          @blur="v$.credentials.fullName.$touch"
+        />
+        <FormInput
+          v-model="credentials.accountName"
+          name="account_name"
+          class="flex-1"
+          :class="{ error: v$.credentials.accountName.$error }"
+          :label="$t('REGISTER.COMPANY_NAME.LABEL')"
+          :placeholder="$t('REGISTER.COMPANY_NAME.PLACEHOLDER')"
+          :has-error="v$.credentials.accountName.$error"
+          :error-message="$t('REGISTER.COMPANY_NAME.ERROR')"
+          @blur="v$.credentials.accountName.$touch"
+        />
+      </div>
+      <FormInput
+        v-model="credentials.email"
+        type="email"
+        name="email_address"
+        :class="{ error: v$.credentials.email.$error }"
+        :label="$t('REGISTER.EMAIL.LABEL')"
+        :placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
+        :has-error="v$.credentials.email.$error"
+        :error-message="$t('REGISTER.EMAIL.ERROR')"
+        @blur="v$.credentials.email.$touch"
+      />
+      <FormInput
+        v-model="credentials.password"
+        type="password"
+        name="password"
+        :class="{ error: v$.credentials.password.$error }"
+        :label="$t('LOGIN.PASSWORD.LABEL')"
+        :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
+        :has-error="v$.credentials.password.$error"
+        aria-describedby="password-requirements"
+        @blur="v$.credentials.password.$touch"
+      />
+      <div
+        id="password-requirements"
+        class="text-xs rounded-md px-4 py-3 outline outline-1 outline-n-weak bg-n-alpha-black2"
+      >
+        <ul role="list" class="grid grid-cols-2 gap-1">
+          <li
+            v-for="item in passwordRequirementItems"
+            :key="item.id"
+            class="inline-flex gap-1 items-start"
+          >
+            <Icon
+              class="flex-none flex-shrink-0 w-3 mt-0.5"
+              :icon="item.met ? 'i-lucide-circle-check-big' : 'i-lucide-circle'"
+              :class="item.met ? 'text-n-teal-10' : 'text-n-slate-10'"
+            />
+
+            <span :class="item.met ? 'text-n-slate-11' : 'text-n-slate-10'">
+              {{ item.label }}
+            </span>
+          </li>
+        </ul>
+      </div>
+      <FormInput
+        v-model="credentials.confirmPassword"
+        type="password"
+        name="confirm_password"
+        :class="{ error: v$.credentials.confirmPassword.$error }"
+        :label="$t('REGISTER.CONFIRM_PASSWORD.LABEL')"
+        :placeholder="$t('REGISTER.CONFIRM_PASSWORD.PLACEHOLDER')"
+        :has-error="v$.credentials.confirmPassword.$error"
+        :error-message="confirmPasswordErrorText"
+        @blur="v$.credentials.confirmPassword.$touch"
+      />
+      <div v-if="globalConfig.hCaptchaSiteKey" class="mb-3">
+        <VueHcaptcha
+          ref="hCaptcha"
+          :class="{ error: !hasAValidCaptcha && didCaptchaReset }"
+          :sitekey="globalConfig.hCaptchaSiteKey"
+          @verify="onRecaptchaVerified"
+        />
+        <span
+          v-if="!hasAValidCaptcha && didCaptchaReset"
+          class="text-xs text-n-ruby-9"
+        >
+          {{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
+        </span>
+      </div>
+      <NextButton
+        lg
+        type="submit"
+        data-testid="submit_button"
+        class="w-full"
+        icon="i-lucide-chevron-right"
+        trailing-icon
+        :label="$t('REGISTER.SUBMIT')"
+        :disabled="isSignupInProgress || !isFormValid"
+        :is-loading="isSignupInProgress"
+      />
+    </form>
+    <div class="flex flex-col">
+      <SimpleDivider
+        v-if="showGoogleOAuth"
+        :label="$t('COMMON.OR')"
+        bg="bg-n-background"
+        class="uppercase"
+      />
+      <GoogleOAuthButton v-if="showGoogleOAuth">
+        {{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
+      </GoogleOAuthButton>
+    </div>
+    <p
+      class="text-sm mb-1 mt-5 text-n-slate-12 [&>a]:text-n-brand [&>a]:font-medium [&>a]:hover:brightness-110"
+      v-html="termsLink"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.h-captcha--box {
+  &::v-deep .error {
+    iframe {
+      @apply rounded-md border border-n-ruby-8 dark:border-n-ruby-8;
+    }
+  }
+}
+</style>

app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue

@@ -0,0 +1,66 @@
+<script>
+import TestimonialCard from './TestimonialCard.vue';
+import { getTestimonialContent } from '../../../../../api/testimonials';
+export default {
+  components: { TestimonialCard },
+  emits: ['resizeContainers'],
+  data() {
+    return { testimonials: [] };
+  },
+  beforeMount() {
+    this.fetchTestimonials();
+  },
+  methods: {
+    async fetchTestimonials() {
+      try {
+        const { data } = await getTestimonialContent();
+        this.testimonials = data;
+      } catch (error) {
+        // Ignoring the error as the UI wouldn't break
+      } finally {
+        this.$emit('resizeContainers', !!this.testimonials.length);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-show="testimonials.length"
+    class="relative flex-1 min-h-screen hidden overflow-hidden bg-n-blue-8 dark:bg-n-blue-5 xl:flex"
+  >
+    <img
+      src="assets/images/auth/top-left.svg"
+      class="absolute top-0 left-0 w-40 h-40"
+    />
+    <img
+      src="assets/images/auth/bottom-right.svg"
+      class="absolute bottom-0 right-0 w-40 h-40"
+    />
+    <img
+      src="assets/images/auth/auth--bg.svg"
+      class="h-[96%] left-[6%] top-[8%] w-[96%] absolute"
+    />
+    <div
+      class="z-50 flex flex-col items-center justify-center w-full h-full min-h-screen"
+    >
+      <div class="flex items-start justify-center p-6">
+        <TestimonialCard
+          v-for="(testimonial, index) in testimonials"
+          :key="testimonial.id"
+          :review-content="testimonial.authorReview"
+          :author-image="testimonial.authorImage"
+          :author-name="testimonial.authorName"
+          :author-designation="testimonial.authorCompany"
+          :class="!index ? 'mt-[20%] -mr-4 z-50' : ''"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.center--img {
+}
+</style>

app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue

@@ -0,0 +1,41 @@
+<script>
+export default {
+  props: {
+    reviewContent: {
+      type: String,
+      default: '',
+    },
+    authorImage: {
+      type: String,
+      default: '',
+    },
+    authorName: {
+      type: String,
+      default: '',
+    },
+    authorDesignation: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col items-start justify-center p-6 w-80 bg-n-background rounded-lg drop-shadow-md"
+  >
+    <p class="text-sm text-n-slate-12 tracking-normal">
+      {{ reviewContent }}
+    </p>
+    <div class="flex items-center mt-4 text-n-slate-12">
+      <div class="bg-white rounded-full p-1">
+        <img :src="authorImage" class="h-8 w-8 rounded-full" />
+      </div>
+      <div class="ml-2">
+        <div class="text-sm font-medium">{{ authorName }}</div>
+        <div class="text-xs">{{ authorDesignation }}</div>
+      </div>
+    </div>
+  </div>
+</template>