@bagelink/vue 0.0.25 → 0.0.32

package/src/components/formkit/Toggle.vue

@@ -0,0 +1,160 @@
+<template>
+	<div
+		class="bagel-input checkbox"
+		:class="{ check: context?.attrs.isCheckbox }"
+		:title="context?.help"
+	>
+		<label class="switch">
+			<input
+				@change="() => props.context?.node.input(inputVal)"
+				type="checkbox"
+				v-model="inputVal"
+				:id="context?.id"
+			>
+			<span class="slider round" />
+		</label>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue';
+
+const props = defineProps({
+	context: Object,
+});
+
+let inputVal = $ref(false);
+
+watch(
+	() => props.context?.value,
+	(newVal) => {
+		inputVal = newVal;
+	},
+	{ immediate: true },
+);
+</script>
+
+<style>
+.checkbox-label {
+	display: flex;
+	gap: 0.5rem;
+	flex-direction: row-reverse;
+	justify-content: flex-end;
+	align-items: center;
+	cursor: pointer;
+}
+</style>
+
+<style scoped>
+.no-edit {
+	pointer-events: none;
+}
+
+.radio-wrap p {
+	display: inline-block;
+	color: var(--input-bg);
+	font-size: var(--input-font-size);
+	margin-inline-end: 10px;
+}
+
+.radio-wrap label {
+	padding: 3px 5px;
+	display: inline-block;
+	border-radius: var(--input-border-radius);
+	font-size: var(--input-font-size);
+	background: var(--input-bg);
+	color: var(--bgl-black);
+	text-align: center;
+	margin: 8px 5px;
+	cursor: pointer;
+	user-select: none;
+}
+
+.bagel-input .radio-wrap label::after {
+	background: transparent;
+}
+
+.radio-wrap input {
+	display: none;
+}
+
+.radio-wrap input:checked:checked + label {
+	background: var(--bgl-blue);
+	color: var(--bgl-white);
+}
+
+.checkbox {
+	position: relative;
+}
+
+.switch {
+	position: relative;
+	display: inline-block;
+	height: calc(var(--input-height) / 2);
+	width: var(--input-height);
+	border-radius: var(--input-height);
+}
+
+.switch input {
+	opacity: 0;
+	width: 0;
+	height: 0;
+}
+.bagel-input.checkbox.check {
+	margin: 0;
+}
+.bagel-input.checkbox.check .switch {
+	width: calc(var(--input-height) / 2);
+	height: calc(var(--input-height) / 2);
+	transition: 0.2s;
+}
+.bagel-input.checkbox.check .slider:before {
+	position: absolute;
+	font-family: 'Material Symbols Outlined', serif;
+	content: '';
+	color: var(--bgl-white);
+	background: transparent;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.bagel-input.checkbox.check input:checked + .slider:before {
+	transform: none;
+	content: 'check';
+}
+
+.slider {
+	position: absolute;
+	cursor: pointer;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: var(--input-bg);
+	-webkit-transition: 0.4s;
+	transition: 0.4s;
+	border-radius: calc(var(--input-height) / 2);
+	box-shadow: inset 0 0 10px #00000020;
+}
+
+.slider:before {
+	position: absolute;
+	content: '';
+	height: calc(var(--input-height) / 2 - 4px);
+	width: calc(var(--input-height) / 2 - 4px);
+	left: 2px;
+	bottom: 2px;
+	border-radius: 50%;
+	background: var(--bgl-white);
+	-webkit-transition: 0.4s;
+	transition: 0.4s;
+}
+
+input:checked + .slider {
+	background: var(--bgl-blue);
+}
+
+input:checked + .slider:before {
+	transform: translateX(calc(var(--input-height) / 2));
+}
+</style>

package/src/components/formkit/index.ts

@@ -0,0 +1,29 @@
+import { createInput } from '@formkit/vue';
+import ContactArrayFormKit from '@/components/formkit/ContactArrayFormKit.vue';
+import AddressArray from './AddressArray.vue';
+import BankDetailsArray from './BankDetailsArray.vue';
+import MiscFieldsBtns from './MiscFields.vue';
+import Toggle from './Toggle.vue';
+import FileUploader from './FileUploader.vue';
+import TextVariableExamples from '@/components/whatsapp/form/TextVariableExamples.vue';
+import PPV from '../PersonPreviewFormkit.vue';
+
+const ContactArray = createInput(ContactArrayFormKit);
+const Address = createInput(AddressArray);
+const BankDetails = createInput(BankDetailsArray);
+const MiscFields = createInput(MiscFieldsBtns);
+const ToggleSwitch = createInput(Toggle);
+const FileUpload = createInput(FileUploader);
+const TextVariables = createInput(TextVariableExamples);
+const PersonPreview = createInput(PPV);
+
+export {
+	TextVariables,
+	ContactArray,
+	PersonPreview,
+	Address,
+	BankDetails,
+	MiscFields,
+	ToggleSwitch,
+	FileUpload,
+};

package/src/components/index.ts

@@ -0,0 +1,20 @@
+export * as RTXEditor from './RTXEditor.vue';
+export * as MaterialIcon from './MaterialIcon.vue';
+export * as BagelForm from './BagelForm.vue';
+export * as NavBar from './NavBar.vue';
+export * as Btn from './Btn.vue';
+export * as Modal from './Modal.vue';
+export * as BarChart from './charts/BarChart.vue';
+export * as DropDown from './DropDown.vue';
+export * as ListView from './ListView.vue';
+export * as ListItem from './ListItem.vue';
+export * as TabbedLayout from './TabbedLayout.vue';
+export * as Comments from './Comments.vue';
+export * as PageTitle from './PageTitle.vue';
+export * as ModalForm from './ModalForm.vue';
+export * as TextInput from './form/inputs/TextInput.vue';
+export * as DataPreview from './DataPreview.vue';
+export * as SubscriptionCharges from './SubscriptionCharges.vue';
+export * as FormSchema from './FormSchema.vue';
+export * as TableSchema from './TableSchema.vue';
+export * as TopBar from './TopBar.vue';

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

@@ -0,0 +1,220 @@
+<template>
+	<div class="main-content">
+		<PageTitle>Whatsapp Template</PageTitle>
+		<div class="view-wrapper card thin">
+			<div class="whatsapp-wrap">
+				<div class="create-template-form">
+					<FormSchema :schema="whatsappTemplateSchema()" v-model="localWhatsappData" @submit="upsertTemplate" />
+				</div>
+				<div class="whatsapp-preview" :class="{ whatsappHebrew: localWhatsappData?.language === 'he' }">
+					Preview
+					<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 { PageTitle, FormSchema } from '@/components';
+
+import {
+	BodyComponent,
+	HeaderComponent,
+	LocalTemplateData,
+	ServerTemplateData,
+	FooterComponent,
+} from '../interfaces';
+import { useBagel } from 'src/plugins/bagel';
+import type { FormKitSchemaDefinition } from '@formkit/core';
+import type { RouteLocationNormalizedLoaded, Router } from 'vue-router';
+
+const props = defineProps<{
+	whatsappTemplateSchema: () => FormKitSchemaDefinition;
+	router: Router;
+	route: RouteLocationNormalizedLoaded;
+}>()
+
+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);
+		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

@@ -0,0 +1,74 @@
+<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 '@/components';
+
+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, '');
+		boundNode?.input(newVal);
+		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/interfaces.ts

@@ -0,0 +1,58 @@
+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;
+}

package/src/index.ts

@@ -1,26 +1 @@
-import { inject } from 'vue';
-import type { InjectionKey, Plugin } from 'vue';
-import { Bagel } from '@bagelink/sdk';
-
-export const bagelInjectionKey = Symbol('bagel') as InjectionKey<Bagel>;
-
-export function useBagel() {
-  const bagel = inject(bagelInjectionKey);
-  if (!bagel)
-    throw new Error('No bagel provided');
-
-  return bagel;
-}
-
-export interface BagelOptions {
-  host: string
-  onError?: (err: Error) => void
-}
-
-export const BagelVue: Plugin = {
-  install: (app, options: BagelOptions) => {
-    const bagel = new Bagel({ host: options.host, onError: options.onError });
-    app.config.globalProperties.$bagel = bagel;
-    app.provide(bagelInjectionKey, bagel);
-  },
-};
+export { BagelVue } from './plugins/bagel';

package/src/plugins/bagel.ts

@@ -0,0 +1,26 @@
+import { inject } from 'vue';
+import type { InjectionKey, Plugin } from 'vue';
+import { Bagel } from '@bagelink/sdk';
+
+export const bagelInjectionKey = Symbol('bagel') as InjectionKey<Bagel>;
+
+export function useBagel() {
+	const bagel = inject(bagelInjectionKey);
+	if (!bagel) throw new Error('No bagel provided');
+
+	return bagel;
+}
+
+export interface BagelOptions {
+  host: string
+  // eslint-disable-next-line no-unused-vars
+  onError?: (err: Error) => void
+}
+
+export const BagelVue: Plugin = {
+	install: (app, options: BagelOptions) => {
+		const bagel = new Bagel({ host: options.host, onError: options.onError });
+		app.config.globalProperties.$bagel = bagel;
+		app.provide(bagelInjectionKey, bagel);
+	},
+};

package/src/styles/modal.css

@@ -0,0 +1,90 @@
+.bg-dark {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+    opacity: 0;
+    transition: all ease-in-out 0.3s;
+}
+
+.modal {
+    width: 96%;
+    max-width: 680px;
+    transform: scale(0.5);
+    opacity: 0;
+    transition: all ease-in-out 0.15s;
+    overflow: auto;
+    max-height: 96vh;
+}
+
+.small-modal .modal {
+    max-width: 300px;
+    text-align: center;
+}
+
+.tool-bar {
+    margin: -2rem -1rem 1rem;
+    display: flex;
+    justify-content: space-between;
+    position: sticky;
+    padding-top: 1rem;
+    top: -2rem;
+    z-index: 3;
+    background: var(--bgl-white);
+}
+
+.modal-size {
+    cursor: pointer;
+}
+
+.is-side .modal {
+    inset-inline-end: -600px;
+    transform: scale(1);
+    opacity: 1;
+    position: fixed;
+    top: 20px;
+    bottom: 20px;
+    max-width: 600px;
+    width: 90%;
+}
+
+.is-active .modal {
+    transform: scale(1);
+    opacity: 1;
+    box-shadow: 6px 6px 20px 20px #0000001c;
+}
+
+.is-active.is-side .modal {
+    inset-inline-end: 20px;
+}
+
+.bg-dark.is-active {
+    opacity: 1;
+    pointer-events: all;
+}
+
+.is-side.bg-dark.is-active {
+    opacity: 1;
+}
+
+.is-side.is-active .modal {
+    pointer-events: all;
+}
+
+@media screen and (max-width: 910px) {
+    .tool-bar {
+        margin: -2rem 0 1rem;
+        align-items: center;
+    }
+
+    .is-active.is-side .modal {
+        inset-inline-end: 5%;
+    }
+}