@bagelink/vue 0.0.439 → 0.0.447

package/src/components/whatsapp/form/MsgTemplate.vue

@@ -1,224 +0,0 @@
-<template>
-	<div class="main-content">
-		<PageTitle>Whatsapp Template</PageTitle>
-		<div class="view-wrapper bgl_card thin">
-			<div class="whatsapp-wrap">
-				<div class="create-template-form">
-					<BagelForm :schema="whatsappTemplateSchema" v-model="localWhatsappData" @submit="upsertTemplate" />
-				</div>
-				<div class="whatsapp-preview" :class="{ whatsappHebrew: localWhatsappData?.language === 'he' }">
-					{{ previewLabel }}
-					<div class="whatsapp-msg">
-						<b>{{
-							localWhatsappData?.headerText?.replace(regex, replaceHeader)
-						}}</b>
-						<p class="whatsapp-body">
-							{{ localWhatsappData?.bodyText?.replace(regex, replaceBody) }}
-						</p>
-						<p class="whatsapp-footer">
-							{{ localWhatsappData?.footerText }}
-						</p>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { onMounted } from 'vue';
-
-import type { RouteLocationNormalizedLoaded, Router } from 'vue-router';
-import {
-	useBagel, PageTitle, BagelForm, BglFormSchemaT,
-} from '@bagelink/vue';
-import {
-	BodyComponent,
-	HeaderComponent,
-	LocalTemplateData,
-	ServerTemplateData,
-	FooterComponent,
-} from '../interfaces';
-
-const props = withDefaults(
-	defineProps<{
-		whatsappTemplateSchema: BglFormSchemaT<LocalTemplateData>;
-		router: Router;
-		route: RouteLocationNormalizedLoaded;
-		previewLabel?: string;
-	}>(),
-	{ previewLabel: 'Preview' },
-);
-
-const bagel = useBagel();
-
-const regex = /\{\{(\d+)}}/g;
-let localWhatsappData = $ref<LocalTemplateData>();
-
-const serverToLocal = (data: ServerTemplateData): LocalTemplateData => ({
-	id: data.id,
-	status: data.status,
-	name: data.name,
-	language: data.language,
-	headerText: data.components.find(
-		(c): c is HeaderComponent => c.type === 'HEADER',
-	)?.text,
-	bodyText: data.components.find((c): c is BodyComponent => c.type === 'BODY')
-		?.text,
-	bodyExamples: data.components.find(
-		(c): c is BodyComponent => c.type === 'BODY',
-	)?.example?.body_text[0],
-	footerText: data.components.find(
-		(c): c is FooterComponent => c.type === 'FOOTER',
-	)?.text,
-	category: data.category,
-});
-
-const localToServer = (data: LocalTemplateData) => {
-	const obj: any = {};
-	obj.language = data.language;
-	if (data.id) obj.id = data.id;
-	obj.name = data.name;
-	obj.components = [];
-	obj.category = data.category;
-	if (data.headerText) {
-		obj.components.push({
-			type: 'HEADER',
-			format: 'TEXT',
-			text: data.headerText,
-		});
-	}
-	if (data.bodyText) {
-		const bodyComponent: BodyComponent = { type: 'BODY', text: data.bodyText };
-		if (data.bodyExamples) { bodyComponent.example = { body_text: [data.bodyExamples] }; }
-		obj.components.push(bodyComponent);
-	}
-	if (data.footerText) { obj.components.push({ type: 'FOOTER', text: data.footerText }); }
-	return obj;
-};
-
-const loadTemplateData = async () => {
-	const template_name = props.route.params.id;
-	if (template_name) {
-		const res = await bagel.get(
-			`communication/whatsapp/get_template_by_name/${template_name}`,
-		);
-		localWhatsappData = serverToLocal(res.data[0]);
-	}
-};
-
-const replaceHeader = (match: any) => {
-	const index = +match[2];
-	const example = localWhatsappData?.headerExamples?.[index - 1];
-	return example || match;
-};
-
-const replaceBody = (match: any) => {
-	const index = +match[2];
-	const example = localWhatsappData?.bodyExamples?.[index - 1];
-	return example || match;
-};
-
-const upsertTemplate = async () => {
-	if (!localWhatsappData) return;
-	const payload = localToServer(localWhatsappData);
-	console.log(payload);
-	if (payload.id) {
-		await bagel.put(
-			`communication/whatsapp/update_template/${payload.id}`,
-			payload,
-		);
-	} else {
-		await bagel.post('communication/whatsapp/create_template', payload);
-		void props.router.push(`/whatsapp/template/${payload.name}`);
-	}
-};
-
-onMounted(loadTemplateData);
-</script>
-
-<style scoped>
-.btn-end {
-	text-align: end;
-}
-
-.whatsapp-preview {
-	direction: ltr;
-	width: 400px;
-	padding: 1rem;
-	height: auto;
-	margin-top: 1rem;
-	/* border-left: 1px solid var(--border-color); */
-	margin-left: 20px;
-	position: sticky;
-	top: 15px;
-	flex: 1 1 40%;
-}
-
-.whatsapp-wrap {
-	display: flex;
-	gap: 1rem;
-	max-width: 1200px;
-	overflow: auto;
-	height: 100%;
-}
-
-.create-template-form {
-	flex: 1 0 50%;
-	min-width: 300px;
-}
-
-.whatsapp-msg {
-	background: var(--whatsapp-green);
-	border-radius: 0.5rem;
-	border-start-start-radius: 0px;
-	padding: 10px;
-	line-height: 1.5;
-	margin-top: 1rem;
-	filter: drop-shadow(0 0px 2px var(--bgl-shadow));
-	position: relative;
-	min-height: 30px;
-}
-
-.whatsapp-msg::after {
-	content: '';
-	inset-inline-start: -5px;
-	border-radius: 0.1rem;
-	transform: skew(45deg);
-	top: 0;
-	height: 8px;
-	width: 8px;
-	background: var(--whatsapp-green);
-	position: absolute;
-}
-
-.whatsapp-body {
-	margin: 2px 0;
-}
-
-.whatsapp-footer {
-	margin: 0;
-	opacity: 0.6;
-	font-size: 0.8rem;
-}
-
-.whatsappHebrew {
-	direction: rtl;
-}
-
-.whatsappHebrew .whatsapp-msg::after {
-	transform: skew(-45deg);
-}
-
-@media screen and (max-width: 1200px) {
-	.whatsapp-preview {
-		width: 300px;
-	}
-}
-
-@media screen and (max-width: 910px) {
-	.whatsapp-preview {
-		display: none;
-	}
-}
-</style>

package/src/components/whatsapp/form/TextVariableExamples.vue

@@ -1,79 +0,0 @@
-<template>
-	<div ref="exampleEl">
-		<TextInput
-			v-for="v in variables"
-			:key="v"
-			:placeholder="`Variable ${v}`"
-			:modelValue="val?.[v - 1]"
-			@update:modelValue="($event: string) => handleUpdate($event, v)"
-		/>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, watch } from 'vue';
-import { FormKitNode } from '@formkit/core';
-import { TextInput } from '@bagelink/vue';
-
-const props = defineProps({
-	context: Object,
-});
-
-const exampleEl = $ref<HTMLElement>();
-let boundValue = $ref<any>();
-let boundNode = $ref<FormKitNode>();
-let val = $ref<any[]>([]);
-
-const handleUpdate = (value: string, index: number) => {
-	if (!boundValue) return;
-	if (index > val?.length) val = [...val, ...Array(index - val.length).fill(''), value];
-	else val?.splice(index - 1, 1, value);
-	props.context?.node.input(val);
-};
-
-const extractVariables = (text: string): number[] => {
-	const matches = text?.match(/{{(\d+)}}/g) || [];
-	return matches.map((match: any) => +match.match(/\d+/)[0]);
-};
-
-const txtType = $computed(() => (props.context?.id === 'bodyExamples' ? 'bodyText' : 'headerText'));
-
-const variables = $computed(() => {
-	let vars = extractVariables(boundValue);
-	if (txtType === 'headerText') vars.slice(0, 1);
-	const nonSequentialDigits = vars?.reduce((acc: number[], currDigit: number, i: number) => {
-		const prevDigit = i > 0 ? vars[i - 1] : 0;
-		if (currDigit - prevDigit !== 1) {
-			acc.push(currDigit);
-		}
-		return acc;
-	}, []);
-
-	if (nonSequentialDigits?.length) {
-		const regex = new RegExp(nonSequentialDigits.map((d: number) => `\\{\\{${d}\\}\\}`).join('|'), 'g');
-		const newVal = `${boundValue}`.replace(regex, '');
-		void boundNode?.input(newVal); // TODO: Nati - should be awaited?
-		vars = extractVariables(boundValue);
-	}
-	const parentEl = exampleEl?.closest('.formkit-outer');
-	if (!vars.length && parentEl) {
-		parentEl.classList.add('hide');
-	} else if (parentEl) {
-		parentEl.classList.remove('hide');
-	}
-	return vars;
-});
-
-const setupListners = (node?: FormKitNode) => {
-	node?.on('input', (v: any) => {
-		boundValue = v.payload;
-	});
-};
-
-onMounted(() => {
-	boundNode = props.context?.node.parent.children.find((c: any) => c.name === txtType);
-	setupListners(boundNode);
-});
-
-watch(() => props.context?.value, (v: any) => val = v, { immediate: true });
-</script>

package/src/components/whatsapp/index.ts

@@ -1,2 +0,0 @@
-// export { default as MsgTemplate } from './form/MsgTemplate.vue';
-// export { default as TextVariableExamples } from './form/TextVariableExamples.vue';

package/src/components/whatsapp/interfaces.ts

@@ -1,58 +0,0 @@
-export interface HeaderComponent {
-	type: 'HEADER';
-	text: string;
-	example_header?: string[];
-}
-
-interface Example {
-	body_text: string[][];
-}
-
-export interface BodyComponent {
-	type: 'BODY';
-	text: string;
-	example?: Example
-	add_security_recommendation?: boolean;
-}
-
-export interface FooterComponent {
-	type: 'FOOTER';
-	text: string;
-	code_expiration_minutes?: number;
-}
-
-interface Button {
-	type: 'OTP' | 'CATALOG' | 'MPM' | 'QUICK_REPLY' | 'PHONE_NUMBER' | 'URL';
-	text: string;
-	// Additional properties specific to each button type
-	// Add them here based on the possible button types
-}
-
-interface ButtonsComponent {
-	type: 'BUTTONS';
-	buttons: Button[];
-}
-
-export type Component = BodyComponent | FooterComponent | HeaderComponent | ButtonsComponent
-
-export interface ServerTemplateData {
-	id: string;
-	name: string;
-	status: string;
-	language: string;
-	category: string;
-	components: readonly Component[];
-}
-
-export interface LocalTemplateData {
-	id: string;
-	name: string;
-	language: string;
-	status: string;
-	category: string;
-	headerText?: string;
-	headerExamples?: string[];
-	bodyText?: string;
-	bodyExamples?: string[];
-	footerText?: string;
-}