feat: enhance support page with dynamic branding information and contact details

This commit is contained in:
2026-05-16 09:37:03 +03:30
parent 42b8476b96
commit 4f76056ac0
5 changed files with 80 additions and 22 deletions
@@ -2,9 +2,9 @@
<section class="mx-auto max-w-3xl overflow-hidden rounded-2xl border border-surface-200 bg-white"> <section class="mx-auto max-w-3xl overflow-hidden rounded-2xl border border-surface-200 bg-white">
<div class="bg-gradient-to-l from-emerald-50 via-teal-50 to-cyan-50 p-5 md:p-7"> <div class="bg-gradient-to-l from-emerald-50 via-teal-50 to-cyan-50 p-5 md:p-7">
<p class="mb-2 inline-flex items-center rounded-full bg-white px-3 py-1 text-xs font-semibold text-emerald-700"> <p class="mb-2 inline-flex items-center rounded-full bg-white px-3 py-1 text-xs font-semibold text-emerald-700">
{{ brandingInfo.appTitle }} {{ brandingInfo.title }}
</p> </p>
<span class="block mb-4 text-xl font-bold text-surface-900 md:text-3xl">درباره نسخه تیس</span> <span class="block mb-4 text-xl font-bold text-surface-900 md:text-3xl">{{ brandingInfo.fullTitle }}</span>
<p class="mt-3 max-w-2xl text-sm leading-7 text-surface-700 md:text-base"> <p class="mt-3 max-w-2xl text-sm leading-7 text-surface-700 md:text-base">
این نسخه برای استفاده روزانه روی دستگاه های PSP بهینه شده است تا عملیات ثبت و صدور صورتحساب‌‌های مالیاتی با سرعت این نسخه برای استفاده روزانه روی دستگاه های PSP بهینه شده است تا عملیات ثبت و صدور صورتحساب‌‌های مالیاتی با سرعت
بالاتر، پایداری بیشتر و تجربه کاربری ساده تر انجام شود. بالاتر، پایداری بیشتر و تجربه کاربری ساده تر انجام شود.
@@ -40,7 +40,13 @@
نسخه برنامه: نسخه برنامه:
<span class="font-semibold text-surface-900">{{ appVersion() }}</span> <span class="font-semibold text-surface-900">{{ appVersion() }}</span>
</div> </div>
<button pButton type="button" [outlined]="!hasUpdate()" [disabled]="isCheckingUpdate()" (click)="onUpdateCtaClick()"> <button
pButton
type="button"
[outlined]="!hasUpdate()"
[disabled]="isCheckingUpdate()"
(click)="onUpdateCtaClick()"
>
{{ updateCtaLabel() }} {{ updateCtaLabel() }}
</button> </button>
</div> </div>
@@ -1,34 +1,36 @@
<div class="w-full min-h-[60svh] p-4 md:p-6"> <div class="w-full min-h-[60svh] p-4 md:p-6">
<section class="mx-auto max-w-3xl overflow-hidden rounded-2xl border border-surface-200 bg-white"> <section class="mx-auto max-w-3xl overflow-hidden rounded-2xl border border-surface-200 bg-white">
<div class="bg-gradient-to-l from-sky-50 via-cyan-50 to-teal-50 p-5 md:p-7"> <div class="bg-gradient-to-l from-sky-50 via-cyan-50 to-teal-50 p-5 md:p-7">
<h1 class="text-2xl font-bold text-surface-900 md:text-3xl">پشتیبانی تیس</h1> <span class="block mb-4 text-xl font-bold text-surface-900 md:text-3xl">پشتیبانی {{ brandingInfo.title }}</span>
<p class="mt-3 max-w-2xl text-sm leading-7 text-surface-700 md:text-base"> <p class="mt-3 max-w-2xl text-sm leading-7 text-surface-700 md:text-base">
در صورت بروز مشکل در ثبت سفارش، صدور صورتحساب یا تنظیمات دستگاه، تیم پشتیبانی آماده پاسخگویی است. لطفا هنگام در صورت بروز مشکل در ثبت سفارش، صدور صورتحساب یا تنظیمات دستگاه، تیم پشتیبانی آماده پاسخگویی است. لطفا هنگام
تماس، نام پایانه و شماره سریال دستگاه را همراه داشته باشید. تماس، نام پایانه و نام کاربری را همراه داشته باشید.
</p> </p>
</div> </div>
<div class="grid gap-3 p-4 md:grid-cols-2 md:gap-4 md:p-6"> <div class="grid gap-3 p-4 md:grid-cols-2 md:gap-4 md:p-6">
<article class="rounded-xl border border-surface-200 bg-surface-50 p-4"> <article class="rounded-xl border border-surface-200 bg-surface-50 p-4">
<h2 class="mb-3 text-sm font-bold text-surface-900">شماره های تماس مستقیم</h2> <span class="block mb-4 text-xl font-bold text-surface-900">شماره های تماس مستقیم</span>
@if (brandingInfo!.support.phones?.length) {
<ul class="space-y-2 text-sm text-surface-700"> <ul class="space-y-2 text-sm text-surface-700">
<li class="flex items-center justify-between gap-2"> @for (phone of brandingInfo.support.phones!; track $index) {
<span>واحد پشتیبانی 1</span> <li class="flex items-start justify-between gap-2">
<a class="font-semibold text-primary" href="tel:02191012345" dir="ltr">021-91012345</a> <span>{{ phone.title }}</span>
</li> <div class="flex flex-col gap-2">
<li class="flex items-center justify-between gap-2"> @for (item of phone.phones; track $index) {
<span>واحد پشتیبانی 2</span> <a class="font-semibold text-primary" href="tel:{{ item }}" dir="ltr">{{ item }}</a>
<a class="font-semibold text-primary" href="tel:02191012346" dir="ltr">021-91012346</a> }
</li> </div>
<li class="flex items-center justify-between gap-2">
<span>پاسخگویی اضطراری</span>
<a class="font-semibold text-primary" href="tel:09121234567" dir="ltr">0912-123-4567</a>
</li> </li>
}
</ul> </ul>
} @else {
<p class="text-sm text-surface-700">در حال حاضر شماره تماس مستقیمی برای پشتیبانی اعلام نشده است.</p>
}
</article> </article>
<article class="rounded-xl border border-surface-200 bg-surface-50 p-4"> <article class="rounded-xl border border-surface-200 bg-surface-50 p-4">
<h2 class="mb-3 text-sm font-bold text-surface-900">راهنمای سریع قبل از تماس</h2> <span class="block mb-4 text-xl font-bold text-surface-900">راهنمای سریع قبل از تماس</span>
<ul class="space-y-2 text-sm leading-6 text-surface-700"> <ul class="space-y-2 text-sm leading-6 text-surface-700">
<li>اتصال اینترنت دستگاه را بررسی کنید.</li> <li>اتصال اینترنت دستگاه را بررسی کنید.</li>
<li>یک بار برنامه را ببندید و دوباره اجرا کنید.</li> <li>یک بار برنامه را ببندید و دوباره اجرا کنید.</li>
@@ -1,7 +1,10 @@
import { brandingConfig } from '@/branding/branding.config';
import { Component } from '@angular/core'; import { Component } from '@angular/core';
@Component({ @Component({
selector: 'pos-support-page', selector: 'pos-support-page',
templateUrl: './root.component.html', templateUrl: './root.component.html',
}) })
export class PosSupportPageComponent {} export class PosSupportPageComponent {
brandingInfo = brandingConfig;
}
+28
View File
@@ -3,6 +3,15 @@ export interface BrandingConfig {
manifestPath: string; manifestPath: string;
themeColor: string; themeColor: string;
enableInstallPrompt?: boolean; enableInstallPrompt?: boolean;
title: string;
fullTitle: string;
support: {
phones?: {
title: string;
phones: string[];
}[];
workingHours?: string;
};
} }
export const brandingConfig: BrandingConfig = { export const brandingConfig: BrandingConfig = {
@@ -10,4 +19,23 @@ export const brandingConfig: BrandingConfig = {
manifestPath: '/favicon/site.webmanifest', manifestPath: '/favicon/site.webmanifest',
themeColor: '#ffffff', themeColor: '#ffffff',
enableInstallPrompt: false, enableInstallPrompt: false,
title: 'پنل مدیریت',
fullTitle: 'پنل مدیریت صورت‌حساب‌های مالیاتی',
support: {
phones: [
{
title: 'واحد پشتیبانی 1',
phones: ['021-91012345'],
},
{
title: 'واحد پشتیبانی 2',
phones: ['021-91012346'],
},
{
title: 'پاسخگویی اضطراری',
phones: ['0912-123-4567'],
},
],
workingHours: 'شنبه تا چهارشنبه: 8 صبح تا 5 عصر، پنجشنبه: 8 صبح تا 2 عصر',
},
}; };
+19
View File
@@ -5,4 +5,23 @@ export const brandingConfig: BrandingConfig = {
manifestPath: '/favicon/site.webmanifest', manifestPath: '/favicon/site.webmanifest',
themeColor: '#ffffff', themeColor: '#ffffff',
enableInstallPrompt: true, enableInstallPrompt: true,
title: 'تیس',
fullTitle: 'تیس - مدیریت صورت‌حساب‌های مالیاتی',
support: {
phones: [
{
title: 'واحد پشتیبانی 1',
phones: ['021-91012345'],
},
{
title: 'واحد پشتیبانی 2',
phones: ['021-91012346'],
},
{
title: 'پاسخگویی اضطراری',
phones: ['0912-123-4567'],
},
],
workingHours: 'شنبه تا چهارشنبه: 8 صبح تا 5 عصر، پنجشنبه: 8 صبح تا 2 عصر',
},
}; };