WooCommerceEntriesTable.vue — Hostinger Reach – AI-Powered Email Marketing for WordPress 1.5.9

hostinger-reach / frontend / vue / components / WooCommerceEntriesTable.vue

hostinger-reach / frontend / vue / components Last commit date

Modals 1 month ago skeletons 5 months ago ActionButton.vue 5 months ago ActionButtonsSection.vue 5 months ago Banner.vue 3 months ago FAQ.vue 5 months ago FormItem.vue 2 months ago FormsSection.vue 11 months ago Hero.vue 1 month ago Integrations.vue 4 months ago Pagination.vue 10 months ago PluginEntriesTable.vue 4 months ago PluginEntry.vue 5 months ago PluginExpansion.vue 8 months ago SyncStatusLabel.vue 6 months ago Tabs.vue 9 months ago Toggle.vue 10 months ago UsageCard.vue 10 months ago UsageCardsRow.vue 1 year ago UsageCardsSection.vue 1 year ago WooCommerce.vue 5 months ago WooCommerceEntriesTable.vue 4 months ago

WooCommerceEntriesTable.vue

226 lines

1	<script setup lang="ts">
2	import { HHyperlink, HLabel } from '@hostinger/hcomponents';
3	import { computed } from 'vue';
4
5	import PluginEntrySkeleton from '@/components/skeletons/PluginEntrySkeleton.vue';
6	import Toggle from '@/components/Toggle.vue';
7	import { WOOCOMMERCE_ID } from '@/data/pluginData';
8	import { useIntegrationsStore } from '@/stores';
9	import type { Form } from '@/types/models';
10	import { translate } from '@/utils/translate';
11
12	const emit = defineEmits<{
13	goToPlugin: [id: string];
14	disconnectPlugin: [id: string];
15	toggleFormStatus: [form: Form, status: boolean];
16	}>();
17
18	const SKELETON_COUNT = 3;
19
20	const integrationsStore = useIntegrationsStore();
21	const integration = computed(() => integrationsStore?.activeIntegrations.find((i) => i.id === WOOCOMMERCE_ID));
22	const forms = computed(() => integration?.value?.forms \|\| []);
23	const canToggle = computed(() => Boolean(integration.value?.canToggleForms));
24
25	const formsData = {
26	woocommerce: {
27	title: translate('hostinger_reach_woocommerce_checkout_title'),
28	content: translate('hostinger_reach_woocommerce_checkout_description'),
29	learnMore: null
30	},
31	'order.purchased': {
32	title: translate('hostinger_reach_woocommerce_order_purchased_title'),
33	content: translate('hostinger_reach_woocommerce_order_purchased_description'),
34	learnMore: 'https://www.hostinger.com/support/how-to-set-up-post-purchase-email-automation-in-hostinger-reach/'
35	},
36	'cart.abandoned': {
37	title: translate('hostinger_reach_woocommerce_cart_abandoned_title'),
38	content: translate('hostinger_reach_woocommerce_cart_abandoned_description'),
39	learnMore:
40	'https://www.hostinger.com/support/how-to-set-up-abandoned-cart-email-automation-for-woocommerce-in-hostinger-reach/'
41	}
42	};
43
44	const isAutomation = (form: Form): boolean => form?.formId?.includes('.') ?? false;
45	</script>
46
47	<template>
48	<div class="woocommerce-entries-table">
49	<div class="woocommerce-entries-table__container">
50	<template v-if="forms?.length <= 0">
51	<PluginEntrySkeleton v-for="i in SKELETON_COUNT" :key="`skeleton-${i}`" />
52	</template>
53
54	<template v-else>
55	<div class="woocommerce-entries-table__forms-list">
56	<div class="woocommerce-entries-table__forms-list__row woocommerce-entries-table__forms-list__header">
57	<div
58	class="woocommerce-entries-table__cell woocommerce-entries-table__first-cell woocommerce-entries-table__header-cell"
59	>
60	{{ translate('hostinger_reach_woocommerce_events') }}
61	</div>
62	<div
63	class="woocommerce-entries-table__cell woocommerce-entries-table__second-cell woocommerce-entries-table__header-cell"
64	>
65	{{ translate('hostinger_reach_woocommerce__status') }}
66	</div>
67	</div>
68
69	<div
70	v-for="form in forms"
71	:key="form.formId ?? form.formTitle"
72	class="woocommerce-entries-table__forms-list__row"
73	>
74	<div
75	class="woocommerce-entries-table__cell woocommerce-entries-table__first-cell woocommerce-entries-table__forms-list__event"
76	>
77	<div class="woocommerce-entries-table__forms-list__event-title">
78	<strong class="woocommerce-entries-table__event-name">{{ formsData[form.formId]?.title }}</strong>
79	<HLabel v-if="isAutomation(form)" color="grayLight" variant="contain">
80	{{ translate('hostinger_reach_woocommerce_automation') }}
81	</HLabel>
82	</div>
83	<div
84	v-if="form.formId && formsData[form.formId]"
85	class="woocommerce-entries-table__forms-list__event-description"
86	>
87	{{ formsData[form.formId]?.content ?? '' }}
88	<HHyperlink
89	v-if="formsData[form.formId]?.learnMore"
90	:href="formsData[form.formId]?.learnMore"
91	variant="regular"
92	color="primary--400"
93	size="small"
94	target="_blank"
95	>
96	{{ translate('hostinger_reach_learn_more') }}
97	</HHyperlink>
98	</div>
99	</div>
100
101	<div
102	class="woocommerce-entries-table__cell woocommerce-entries-table__second-cell woocommerce-entries-table__forms-list__action"
103	>
104	<div class="woocommerce-entries-table__action-toggle">
105	<Toggle
106	:value="form.isActive"
107	:is-disabled="!canToggle \|\| form.isLoading"
108	@toggle="(status) => emit('toggleFormStatus', form, status)"
109	/>
110	</div>
111	</div>
112	</div>
113	</div>
114	</template>
115	</div>
116	</div>
117	</template>
118
119	<style scoped lang="scss">
120	.woocommerce-entries-table {
121	&__container {
122	background: var(--neutral--0);
123	border: 1px solid var(--neutral--200);
124	border-radius: 20px;
125	padding: 24px;
126	overflow: hidden;
127	}
128
129	&__forms-list {
130	display: flex;
131	flex-direction: column;
132	}
133
134	&__forms-list__row {
135	display: flex;
136	align-items: center;
137	gap: 24px;
138	padding: 18px 0;
139	}
140
141	&__forms-list__row:not(&__forms-list__header) {
142	border-top: 1px solid var(--neutral--200);
143	}
144
145	&__forms-list__header {
146	padding: 10px 0 18px;
147	border-top: none;
148	}
149
150	&__cell {
151	min-width: 0;
152	display: flex;
153	align-items: center;
154	}
155
156	&__first-cell {
157	flex: 1 1 auto;
158	}
159
160	&__second-cell {
161	flex: 0 0 200px;
162	justify-content: flex-start;
163	}
164
165	&__header-cell {
166	font-weight: 600;
167	color: var(--neutral--900);
168	}
169
170	&__forms-list__event {
171	flex-direction: column;
172	align-items: flex-start;
173	gap: 6px;
174	}
175
176	&__forms-list__event-title {
177	display: flex;
178	align-items: center;
179	gap: 12px;
180	}
181
182	&__event-name {
183	font-weight: 600;
184	color: var(--neutral--900);
185	}
186
187	&__forms-list__event-description {
188	color: var(--neutral--600);
189	line-height: 1.4;
190	font-size: 12px;
191	}
192
193	&__action-toggle {
194	display: flex;
195	align-items: center;
196	gap: 5px;
197	}
198
199	@media (max-width: 920px) {
200	&__forms-list__row {
201	flex-direction: column;
202	align-items: stretch;
203	gap: 12px;
204	}
205
206	&__second-cell {
207	flex: 0 0 auto;
208	justify-content: flex-start;
209	}
210	}
211
212	@media (max-width: 920px) {
213	&__forms-list__row {
214	flex-direction: column;
215	align-items: stretch;
216	gap: 12px;
217	}
218
219	&__second-cell {
220	flex: 0 0 auto;
221	justify-content: flex-start;
222	}
223	}
224	}
225	</style>
226