mirror of
https://github.com/lingble/chatwoot.git
synced 2025-10-31 02:57:57 +00:00
d9900e50a0
# Pull Request Template ## Description Fixes [CW-4620](https://linear.app/chatwoot/issue/CW-4620/rethinking-custom-domains-in-chatwoot) <img width="642" height="187" alt="Screenshot 2025-07-29 at 8 17 44 PM" src="https://github.com/user-attachments/assets/ad2f5dac-4b27-4dce-93ca-6cbba74443fb" /> ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com> Co-authored-by: Pranav <pranavrajs@gmail.com> Co-authored-by: Pranav <pranav@chatwoot.com>
98 lines
2.2 KiB
Vue
98 lines
2.2 KiB
Vue
<script setup>
|
|
import { ref, reactive, watch } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useVuelidate } from '@vuelidate/core';
|
|
import { helpers } from '@vuelidate/validators';
|
|
import { isValidDomain } from '@chatwoot/utils';
|
|
|
|
import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
|
|
import Input from 'dashboard/components-next/input/Input.vue';
|
|
|
|
const props = defineProps({
|
|
mode: {
|
|
type: String,
|
|
default: 'add',
|
|
},
|
|
customDomain: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['addCustomDomain']);
|
|
|
|
const { t } = useI18n();
|
|
|
|
const dialogRef = ref(null);
|
|
|
|
const formState = reactive({
|
|
customDomain: props.customDomain,
|
|
});
|
|
|
|
const rules = {
|
|
customDomain: {
|
|
isValidDomain: helpers.withMessage(
|
|
() =>
|
|
t(
|
|
'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.FORMAT_ERROR'
|
|
),
|
|
isValidDomain
|
|
),
|
|
},
|
|
};
|
|
|
|
const v$ = useVuelidate(rules, formState);
|
|
|
|
watch(
|
|
() => props.customDomain,
|
|
newVal => {
|
|
formState.customDomain = newVal;
|
|
}
|
|
);
|
|
|
|
const handleDialogConfirm = async () => {
|
|
const isFormCorrect = await v$.value.$validate();
|
|
if (!isFormCorrect) return;
|
|
|
|
emit('addCustomDomain', formState.customDomain);
|
|
};
|
|
|
|
defineExpose({ dialogRef });
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog
|
|
ref="dialogRef"
|
|
:title="
|
|
t(
|
|
`HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.${props.mode.toUpperCase()}_HEADER`
|
|
)
|
|
"
|
|
:confirm-button-label="
|
|
t(
|
|
`HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.${props.mode.toUpperCase()}_CONFIRM_BUTTON_LABEL`
|
|
)
|
|
"
|
|
@confirm="handleDialogConfirm"
|
|
>
|
|
<Input
|
|
v-model="formState.customDomain"
|
|
:label="
|
|
t(
|
|
'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.LABEL'
|
|
)
|
|
"
|
|
:placeholder="
|
|
t(
|
|
'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.PLACEHOLDER'
|
|
)
|
|
"
|
|
:message="
|
|
v$.customDomain.$error ? v$.customDomain.$errors[0].$message : ''
|
|
"
|
|
:message-type="v$.customDomain.$error ? 'error' : 'info'"
|
|
@blur="v$.customDomain.$touch()"
|
|
/>
|
|
</Dialog>
|
|
</template>
|