@ozdao/martyrs 0.2.505 → 0.2.507

package/src/modules/orders/components/blocks/CardCustomer.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="bg-light pos-relative pd-medium radius-medium">
+    <div class="mn-b-small flex">
+      <div class="mn-r-auto">
+        <h3 class="mn-b-thin">{{ customer.profile?.name || customer.email || customer.phone || 'Unnamed Customer' }}</h3>
+        <p class="t-transp">{{ customer.email || customer.phone }}</p>
+      </div>
+      <div class="flex-center">
+        <StatusBadge :value="{
+          text: customer.status,
+          color: customer.status === 'active' ? '#22c55e' : customer.status === 'inactive' ? '#f59e0b' : '#ef4444'
+        }" />
+      </div>
+    </div>
+
+    <div class="mn-b-small pd-small bg-white radius-small flex-nowrap flex"> 
+      <div class="w-100">
+        <p class="t-truncate">{{ customer.source || 'Unknown' }}</p> 
+        <small class="t-transp">Source</small>
+      </div>
+
+      <div class="w-100 t-right">
+        <p>{{ formatDate(customer.lastActivity || customer.updatedAt) }}</p>
+        <small class="t-transp">Last Activity</small>
+      </div>
+    </div>
+
+    <div class="pd-small bg-white radius-small">
+      <div class="flex mn-b-thin">
+        <div class="mn-r-auto">
+          <p>{{ customer.identity?.type || 'Visitor' }}</p>
+          <small class="t-transp">Type</small>
+        </div>
+        <div class="t-right">
+          <p>#{{ customer._id.slice(0, 4) + '...' + customer._id.slice(-4) }}</p>
+          <small class="t-transp">ID</small>
+        </div>
+      </div>
+
+      <div v-if="customer.tags && customer.tags.length > 0" class="flex flex-wrap gap-nano">
+        <span 
+          v-for="tag in customer.tags.slice(0, 3)" 
+          :key="tag"
+          class="bg-light pd-nano radius-small t-small"
+        >
+          {{ tag }}
+        </span>
+        <span 
+          v-if="customer.tags.length > 3"
+          class="bg-light-transp pd-nano radius-small t-small t-transp"
+        >
+          +{{ customer.tags.length - 3 }}
+        </span>
+      </div>
+
+      <div v-if="customer.referral?.code" class="mn-t-thin">
+        <p class="t-small">Referral: {{ customer.referral.code }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import StatusBadge from '@martyrs/src/components/Table/StatusBadge.vue';
+
+  defineProps({
+    customer: {
+      type: Object,
+      required: true
+    },
+    formatDate: {
+      type: Function,
+      required: true
+    }
+  });
+</script>
+
+<style scoped>
+  .bg-light {
+    background-color: var(--color-bg-light, #f8f9fa);
+  }
+  
+  .bg-light-transp {
+    background-color: var(--color-bg-light-transp, rgba(248, 249, 250, 0.7));
+  }
+  
+  .bg-light-transp-50 {
+    background-color: var(--color-bg-light-transp-50, rgba(248, 249, 250, 0.5));
+  }
+</style>

package/src/modules/orders/components/elements/FieldSubscribeNewsletter.vue

@@ -0,0 +1,199 @@
+<template>
+  <FieldBig 
+    :input="email" 
+    :typingSpeed="typingSpeed"
+    :loopTyping="loopTyping"
+    :enableTyping="enableTyping"
+    :placeholder="props.placeholder || t('orders.newsletter.placeholder')"
+    :action="props.action === false ? '' : props.action || t('orders.newsletter.action')"
+    :name="fieldName"
+    :id="fieldId"
+    @update:input="email = $event"
+    @action="sendApplication"
+    :showLoader="true"
+    :showSuccess="false"
+    :callbackDelay="100"
+    v-bind="$attrs"
+  >
+    <Popup
+      :isPopupOpen="isSuccessPopupOpen"
+      @close-popup="isSuccessPopupOpen = false"
+      align="center center"
+      class="bg-white t-black pd-big radius-big"
+    >
+      <div class="t-center">
+        <h3 class="mn-b-medium">{{ props.successTitle || t('orders.newsletter.success.title') }}</h3>
+        <p class="t-transp mn-b-medium">{{ props.successSubtitle || t('orders.newsletter.success.subtitle') }}</p>
+        
+        <div v-if="(props.socials || tm('orders.newsletter.socials')) && (props.socials || tm('orders.newsletter.socials')).length" class="flex flex-wrap flex-h-center gap-medium">
+          <a
+            v-for="social in (props.socials || tm('orders.newsletter.socials'))"
+            :key="social.name"
+            :href="social.url"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="hover-scale-1 bg-light radius-small pd-thin transition-all"
+          >
+            <component
+              :is="socialIcons[social.icon]"
+              class="i-semi"
+              :fill="'rgb(var(--dark))'"
+            />
+          </a>
+        </div>
+      </div>
+    </Popup>
+  </FieldBig>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import FieldBig from '@martyrs/src/components/FieldBig/FieldBig.vue'
+import Popup from '@martyrs/src/components/Popup/Popup.vue'
+
+import IconFacebook from '@martyrs/src/modules/icons/socials/facebook.vue'
+import IconInstagram from '@martyrs/src/modules/icons/socials/instagram.vue'
+import IconTelegram from '@martyrs/src/modules/icons/socials/telegram.vue'
+import IconTwitter from '@martyrs/src/modules/icons/socials/twitter.vue'
+import IconYoutube from '@martyrs/src/modules/icons/socials/youtube.vue'
+import IconLinkedin from '@martyrs/src/modules/icons/socials/linkedin.vue'
+import IconWhatsapp from '@martyrs/src/modules/icons/socials/whatsapp.vue'
+
+import * as globals from '@martyrs/src/modules/globals/views/store/globals.js'
+import applications from '@martyrs/src/modules/orders/store/applications.js'
+
+const props = defineProps({
+  // Тексты компонента
+  title: {
+    type: String,
+    default: null
+  },
+  subtitle: {
+    type: String,
+    default: null
+  },
+  placeholder: {
+    type: String,
+    default: null
+  },
+  action: {
+    type: String,
+    default: null
+  },
+  successTitle: {
+    type: String,
+    default: null
+  },
+  successSubtitle: {
+    type: String,
+    default: null
+  },
+  socials: {
+    type: Array,
+    default: null
+  },
+  // Настройки поля
+  typingSpeed: {
+    type: Number,
+    default: 75
+  },
+  loopTyping: {
+    type: Boolean,
+    default: false
+  },
+  enableTyping: {
+    type: Boolean,
+    default: false
+  },
+  fieldName: {
+    type: String,
+    default: 'newsletter-email'
+  },
+  fieldId: {
+    type: String,
+    default: null
+  }
+})
+
+// Используем только глобальную локализацию
+const { t, tm } = useI18n({
+  useScope: 'global'
+})
+
+let email = ref('')
+let isSuccessPopupOpen = ref(false)
+
+const socialIcons = {
+  facebook: IconFacebook,
+  instagram: IconInstagram,
+  telegram: IconTelegram,
+  twitter: IconTwitter,
+  youtube: IconYoutube,
+  linkedin: IconLinkedin,
+  whatsapp: IconWhatsapp
+}
+
+// Функция валидации email
+function validateEmail(email) {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(email)
+}
+
+function showSuccessPopup() {
+  isSuccessPopupOpen.value = true
+}
+
+async function sendApplication() {
+  // Валидация email перед отправкой
+  if (!email.value || !email.value.trim()) {
+    globals.setError({ message: t('validation.email.required') || 'Email is required' })
+    return Promise.reject(new Error('Email is required'))
+  }
+
+  if (!validateEmail(email.value.trim())) {
+    globals.setError({ message: t('validation.email.invalid') || 'Invalid email format' })
+    return Promise.reject(new Error('Invalid email format'))
+  }
+
+  gtag('event', 'subscribe_newsletter', {
+    'event_category': 'conversion',
+    'event_label': 'Subscribe Newsletter'
+  });
+
+  try {
+    let application = {
+      type: 'newsletter',
+      contacts: {
+        email: email.value.trim()
+      }
+    };
+
+    // Используем публичный API для создания заявки
+    const response = await fetch(`${process.env.API_URL}/api/applications/public`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(application)
+    });
+
+    if (!response.ok) {
+      throw new Error('Failed to create application');
+    }
+
+    const result = await response.json();
+
+    showSuccessPopup()
+    return Promise.resolve(result);
+  } catch (error) {
+    console.log(error)
+    globals.setError(error)
+    return Promise.reject(error);
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

package/src/modules/orders/components/forms/FormApplicationDetails.vue

@@ -0,0 +1,117 @@
+<template>
+  <Block :title="title" class="mn-b-thin">
+    <Field 
+      v-model:field="application.contacts.name"   
+      label="Name"  
+      placeholder="Enter name"  
+      class="bg-white pd-small radius-small mn-b-thin"
+    />
+    <Field 
+      v-model:field="application.contacts.email"   
+      label="Email"  
+      placeholder="Enter email"  
+      type="email"
+      class="bg-white pd-small radius-small mn-b-thin"
+    />
+    <Field 
+      v-model:field="application.contacts.phone"   
+      label="Phone"  
+      placeholder="Enter phone"  
+      type="tel"
+      class="bg-white pd-small radius-small mn-b-thin"
+    />
+    
+    <Select 
+      :select="typeSelected"
+      :options="[
+        {name: 'Newsletter', value: 'newsletter'}, 
+        {name: 'Support', value: 'support'}, 
+        {name: 'Inquiry', value: 'inquiry'},
+        {name: 'Feedback', value: 'feedback'},
+        {name: 'Other', value: 'other'}
+      ]"
+      @update:select="(option) => { application.type = option.value; typeSelected = option }"
+      placeholder="Type" 
+      class="bg-white pd-small radius-small mn-b-thin"
+    />
+
+    <Field 
+      v-model:field="application.text"   
+      label="Message"  
+      placeholder="Enter message"  
+      type="textarea"
+      class="bg-white pd-small radius-small mn-b-thin"
+    />
+
+    <Select 
+      :select="statusSelected"
+      :options="[
+        {name: 'Created', value: 'created'}, 
+        {name: 'In Progress', value: 'in_progress'}, 
+        {name: 'Completed', value: 'completed'},
+        {name: 'Cancelled', value: 'cancelled'}
+      ]"
+      @update:select="(option) => { application.status = option.value; statusSelected = option }"
+      placeholder="Status" 
+      class="bg-white pd-small radius-small mn-b-thin"
+    />
+
+    <div class="gap-thin flex mn-t-small">
+      <Button 
+        @click="handleSave"
+        class="w-100 pd-small radius-big bg-main t-black uppercase t-medium"
+      >
+        {{ createMode ? 'Create Application' : 'Save Changes' }}
+      </Button>
+      <Button 
+        @click="handleCancel"
+        class="w-100 pd-small radius-big bg-light t-black uppercase t-medium"
+      >
+        Cancel
+      </Button>
+    </div>
+  </Block>
+</template>
+
+<script setup>
+import { ref, watch } from "vue"
+import Block from '@martyrs/src/components/Block/Block.vue'
+import Field from '@martyrs/src/components/Field/Field.vue'
+import Select from '@martyrs/src/components/Select/Select.vue'
+import Button from '@martyrs/src/components/Button/Button.vue'
+
+const application = defineModel('application', { required: true })
+
+let typeSelected = ref({name: 'Newsletter', value: 'newsletter'})
+let statusSelected = ref({name: 'Created', value: 'created'})
+
+defineProps({
+  title: {
+    type: String,
+    default: 'Application Data'
+  }, 
+  createMode: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['save', 'cancel']);
+
+// Ensure nested objects exist
+watch(application, (newApplication) => {
+  if (newApplication) {
+    if (!newApplication.contacts) {
+      newApplication.contacts = { name: null, email: null, phone: null };
+    }
+  }
+}, { immediate: true, deep: true });
+
+const handleSave = () => {
+  emit('save');
+};
+
+const handleCancel = () => {
+  emit('cancel');
+};
+</script>

package/src/modules/orders/components/forms/FormCustomerDetails.vue

@@ -0,0 +1,165 @@
+<template>
+  <Block :title="title" class="mn-b-thin">
+    <Field 
+      v-model:field="customer.profile.name"   
+      label="Name"  
+      placeholder="Enter name"  
+      class="bg-white pd-small radius-small mn-b-thin"
+    />
+    <Field 
+      v-model:field="customer.email"   
+      label="Email"  
+      placeholder="Enter email"  
+      type="email"
+      class="bg-white pd-small radius-small mn-b-thin"
+    />
+    <FieldPhone
+      v-model="customer.number"  
+      @country="(country) => { customer.phone = country }"
+      :inputOptions="{
+        placeholder: 'Enter phone number',
+        type: 'tel',
+      }"
+      :defaultCountry="'TH'"
+      :validCharactersOnly="true"
+      :dropdownOptions="{
+        showDialCodeInSelection: true,
+        showFlags: true,
+        showDialCodeInList: true
+      }" 
+      mode="national"
+      class="w-100 bg-white pd-small mn-b-thin radius-small" 
+    />
+    
+    <Select 
+      :select="sourceSelected"
+      :options="[
+        {name: 'Web', value: 'web'}, 
+        {name: 'Mobile', value: 'mobile'}, 
+        {name: 'API', value: 'api'},
+        {name: 'Import', value: 'import'},
+        {name: 'Manual', value: 'manual'},
+        {name: 'Referral', value: 'referral'},
+        {name: 'Social', value: 'social'},
+        {name: 'Email', value: 'email'}
+      ]"
+      @update:select="(option) => { customer.source = option.value; sourceSelected = option }"
+      placeholder="Source" 
+      class="bg-white pd-small radius-small mn-b-thin"
+    />
+
+    <Field 
+      v-model:field="customer.referral.code"   
+      label="Referral Code"  
+      placeholder="Enter referral code"  
+      class="bg-white pd-small radius-small mn-b-thin"
+    />
+
+    <Field 
+      v-model:field="customer.notes"   
+      label="Notes"  
+      placeholder="Enter notes"  
+      type="textarea"
+      class="bg-white pd-small radius-small mn-b-thin"
+    />
+
+    <Select 
+      :select="statusSelected"
+      :options="[
+        {name: 'Active', value: 'active'}, 
+        {name: 'Inactive', value: 'inactive'}, 
+        {name: 'Blocked', value: 'blocked'}
+      ]"
+      @update:select="(option) => { customer.status = option.value; statusSelected = option }"
+      placeholder="Status" 
+      class="bg-white pd-small radius-small mn-b-thin"
+    />
+    
+    <div class="gap-thin flex-justify-between flex-nowrap flex">
+      <Select 
+        :select="messengerSelected"
+        :options="[
+          {name: 'Instagram', value: 'instagram'}, 
+          {name: 'Telegram', value: 'telegram'}, 
+          {name: 'WhatsApp', value: 'whatsapp'},
+        ]"
+        @update:select="(option) => messengerSelected = option"
+        placeholder="Messenger" 
+        size="small"
+        class="bg-white  pd-small radius-small"
+      />
+      <Field
+        v-model:field="customer.socials[messengerSelected.value]"     
+        label="@"  
+        placeholder="Enter username"
+        class="bg-white pd-small radius-small w-100"
+      />
+    </div>
+
+    <div class="gap-thin flex mn-t-small">
+      <Button 
+        @click="handleSave"
+        class="w-100 pd-small radius-big bg-main t-black uppercase t-medium"
+      >
+        {{ createMode ? 'Create Customer' : 'Save Changes' }}
+      </Button>
+      <Button 
+        @click="handleCancel"
+        class="w-100 pd-small radius-big bg-light t-black uppercase t-medium"
+      >
+        Cancel
+      </Button>
+    </div>
+  </Block>
+</template>
+
+<script setup>
+import { ref, watch } from "vue"
+import Block from '@martyrs/src/components/Block/Block.vue'
+import Field from '@martyrs/src/components/Field/Field.vue'
+import FieldPhone from '@martyrs/src/components/FieldPhone/FieldPhone.vue'
+import Select from '@martyrs/src/components/Select/Select.vue'
+import Button from '@martyrs/src/components/Button/Button.vue'
+
+const customer = defineModel('customer', { required: true })
+
+let messengerSelected = ref({name: 'WhatsApp', value: 'whatsapp'})
+let sourceSelected = ref({name: 'Web', value: 'web'})
+let statusSelected = ref({name: 'Active', value: 'active'})
+
+defineProps({
+  title: {
+    type: String,
+    default: 'Personal Data'
+  }, 
+  createMode: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['save', 'cancel']);
+
+// Ensure nested objects exist
+watch(customer, (newCustomer) => {
+  if (newCustomer) {
+    if (!newCustomer.profile) {
+      newCustomer.profile = { name: null, description: null, photo: null };
+    }
+    if (!newCustomer.referral) {
+      newCustomer.referral = { code: null, source: null };
+    }
+    if (!newCustomer.socials) {
+      newCustomer.socials = { instagram: null, telegram: null, whatsapp: null };
+    }
+  }
+}, { immediate: true, deep: true });
+
+const handleSave = () => {
+  emit('save');
+};
+
+const handleCancel = () => {
+  emit('cancel');
+};
+</script>