@rededor/site-front-end-lib 20.0.26 → 20.0.27

package/components/whatsapp/whatsapp.component.scss

@@ -0,0 +1,113 @@
+@use '../../styles/_breakpoints.scss' as breakpoints;
+
+$dora-size: 88px;
+$animation-width: 448px;
+
+:host {
+  display: flex;
+  justify-content: flex-end;
+  width: calc($animation-width + $dora-size);
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+  pointer-events: none;
+
+  * {
+    font-family: var(--font-family);
+  }
+
+  a.rdsite-whatsapp {
+    box-sizing: content-box;
+    display: block;
+    position: relative;
+    width: $dora-size;
+    height: $dora-size;
+    transition: background-color 0.25s linear !important;
+    pointer-events: all;
+    background-color: var(--bg-color);
+
+    .image {
+      position: absolute;
+      right: 0px;
+      bottom: 0px;
+      width: $dora-size;
+      height: $dora-size;
+      background-size: cover;
+      background-position: 50%;
+    }
+
+    .icon {
+      width: 24px;
+      height: 24px;
+      background-color: var(--bg-button);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      bottom: 8px;
+      right: 8px;
+
+      &.active {
+        display: none;
+      }
+    }
+  }
+
+  .rdsite-whatsapp-animation {
+    background-color: var(--bg-button);
+    width: 0px;
+    height: $dora-size;
+    position: absolute;
+    bottom: 0px;
+    right: $dora-size;
+    transition:
+      width 0.5s ease-out,
+      background-color 0.25s linear;
+    overflow: hidden;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    color: var(--color-button);
+
+    cura-icon {
+      --color: var(--color-button) !important;
+    }
+
+    span {
+      text-wrap: nowrap;
+    }
+
+    &.active {
+      width: calc(100vw - $dora-size);
+      pointer-events: all;
+    }
+
+    &:hover {
+      background-color: var(--bg-button-hover);
+      color: var(--color-button-hover);
+
+      cura-icon {
+        --color: var(--color-button-hover) !important;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: breakpoints.$breakpoint-medium) {
+  :host {
+    a.rdsite-whatsapp {
+      &.border-top {
+        border-top: 4px solid var(--border-top-color);
+      }
+
+      .rdsite-whatsapp-animation {
+        &.active {
+          width: $animation-width;
+        }
+      }
+    }
+  }
+}

package/components/whatsapp/whatsapp.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WhatsappComponent } from './whatsapp.component';
+
+describe('WhatsappComponent', () => {
+  let component: WhatsappComponent;
+  let fixture: ComponentFixture<WhatsappComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [WhatsappComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(WhatsappComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/components/whatsapp/whatsapp.component.ts

@@ -0,0 +1,40 @@
+import { Component, HostBinding, input, output, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RdsiteLinkDirective } from '@rededor/site-front-end-lib/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
+
+@Component({
+  selector: 'rdsite-whatsapp',
+  imports: [CommonModule, RdsiteLinkDirective, CuraIconComponent],
+  templateUrl: './whatsapp.component.html',
+  styleUrl: './whatsapp.component.scss',
+})
+export class WhatsappComponent {
+  private curaApiService = inject(CuraApiService);
+
+  readonly link = input<string>('');
+  readonly imgUrl = input<string>('');
+  readonly text = input<string>('Agende por Whatsapp');
+  readonly bgColor = input<string>('#1DCD52');
+  readonly bgHover = input<string>('#016720');
+  readonly borderTop = input<boolean>(false);
+
+  readonly whatsappClick = output<Event>();
+
+  active: boolean = false;
+
+  @HostBinding('style') style = {
+    '--font-family': this.curaApiService.theme.fonts.getFamily(''),
+    '--border-top-color': this.curaApiService.theme.colors.getColor('primary-light'),
+    '--bg-color': this.curaApiService.theme.colors.getColor('primary-darker'),
+    '--bg-button': this.bgColor(),
+    '--bg-button-hover': this.bgHover(),
+    '--color-button': this.curaApiService.theme.colors.getColor('neutral-black'),
+    '--color-button-hover': this.curaApiService.theme.colors.getColor('neutral-white'),
+  };
+
+  whatsappClicked(event: Event) {
+    this.whatsappClick.emit(event);
+  }
+}

package/core/directives/rdsite-link/rdsite-link.directive.spec.ts

@@ -0,0 +1,8 @@
+import { RdsiteLinkDirective } from './rdsite-link.directive';
+
+describe('RdsiteLinkDirective', () => {
+  it('should create an instance', () => {
+    const directive = new RdsiteLinkDirective();
+    expect(directive).toBeTruthy();
+  });
+});

package/core/directives/rdsite-link/rdsite-link.directive.ts

@@ -0,0 +1,200 @@
+import { isPlatformBrowser } from '@angular/common';
+import { Directive, ElementRef, HostListener, Inject, Input, PLATFORM_ID, TemplateRef, DOCUMENT, input, inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { LIB_CONFIG, LibConfig } from '../../tokens/LibConfig';
+import { PhoneService } from '../../services/phone/phone.service';
+import { RdsitePhoneModalDirective } from '../rdsite-phone-modal/rdsite-phone-modal.directive';
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[rdsitelink]',
+  providers: [RdsitePhoneModalDirective],
+})
+export class RdsiteLinkDirective {
+  private router = inject(Router);
+  private platformId = inject(PLATFORM_ID);
+  private document = inject(DOCUMENT);
+  private libConfig = inject<LibConfig>(LIB_CONFIG);
+  private element = inject(ElementRef<any>);
+  private phoneService = inject(PhoneService);
+  private rdsitePhoneModalDirective = inject(RdsitePhoneModalDirective);
+  private deviceDetectorService = inject(DeviceDetectorService);
+
+  anchorAdjustment = input<number | null>(null);
+  anchorExtraAdjustment = input<number | null>(null);
+  phonemodal = input<TemplateRef<HTMLElement> | null>(null);
+
+  private externalRegex = /^http:|https:|tel:|www\.|mailto:/;
+  private telRegex = /tel:/;
+  private mailRegex = /mailto:/;
+  private siteUrlList = ['rededorsaoluiz', 'rededorlabs'];
+  private allowedTags = ['A', 'CURA-BUTTON', 'CURA-BUTTON-OUTLINE', 'CURA-BUTTON-TRANSPARENT'];
+
+  @HostListener('click', ['$event'])
+  public onClick(event: Event) {
+    event.preventDefault();
+    if (!isPlatformBrowser(this.platformId) || !this.allowedTags.includes(this.element?.nativeElement?.tagName)) return;
+    let href = this.element?.nativeElement?.getAttribute('href') ?? '';
+    if (!href) return;
+
+    href = this.verifyUtm(href);
+
+    if (this.isPhone(href)) {
+      this.phoneClicked({
+        href,
+        event,
+        element: this.element,
+        phonemodal: this.phonemodal(),
+      });
+      return;
+    }
+
+    const isMobile = this.deviceDetectorService.isMobile();
+    const deviceInfo = this.deviceDetectorService.getDeviceInfo();
+
+    if (this.isMail(href)) {
+      const target = isMobile || deviceInfo.browser !== 'Chrome' ? '_self' : '_blank';
+      window.open(href, target);
+      return;
+    }
+
+    if (this.isExternalUrl(href)) {
+      const target = this.isSiteUrl(href) ? '_self' : '_blank';
+      window.open(href, target);
+      return;
+    }
+
+    if (this.isAnchor(href)) {
+      this.scrollToAnchor(href);
+      return;
+    }
+
+    this.navigateTo(href);
+  }
+
+  private verifyUtm(href: string): string {
+    if (!href.includes('/paciente')) return href;
+    if (isPlatformBrowser(this.platformId) && typeof window !== 'undefined') {
+      const currentUrl = new URL(window.location.href);
+      const utmParams = Array.from(currentUrl.searchParams.entries()).filter(([key]) => key.startsWith('utm_'));
+
+      if (utmParams.length === 0) return href;
+
+      const targetUrl = new URL(href);
+      utmParams.forEach(([key, value]) => targetUrl.searchParams.set(key, value));
+
+      return targetUrl.toString();
+    } else {
+      return href;
+    }
+  }
+
+  private isPhone(href: string) {
+    return this.telRegex.test(href);
+  }
+
+  private isMail(href: string) {
+    return this.mailRegex.test(href);
+  }
+
+  private phoneClicked(value: { href: string; event: Event; element: ElementRef<any>; phonemodal: TemplateRef<HTMLElement> | null }) {
+    const { href, event, element, phonemodal } = value;
+    if (this.phoneService.isPhoneModal(href)) {
+      this.setPhoneModal(element, phonemodal);
+      this.rdsitePhoneModalDirective.openPhoneModal(event, href);
+    } else {
+      window.open(href, '_self');
+    }
+  }
+
+  private setPhoneModal(element: ElementRef<any>, phonemodal: TemplateRef<HTMLElement> | null) {
+    if (!this.phonemodal()) return;
+    if (!this.libConfig?.customPhoneModalCondition) {
+      this.rdsitePhoneModalDirective.rdsitephonemodal.set(phonemodal);
+      return;
+    }
+    if (this.libConfig?.customPhoneModalCondition(element)) {
+      this.rdsitePhoneModalDirective.rdsitephonemodal.set(phonemodal);
+    }
+  }
+
+  private isExternalUrl(href: string) {
+    return this.externalRegex.test(href);
+  }
+
+  private isSiteUrl(href: string) {
+    const exception = '/paciente';
+    return this.siteUrlList.find((url) => href.includes(url) && !href.includes(exception));
+  }
+
+  private isAnchor(href: string) {
+    return href.includes('#');
+  }
+
+  private getAnchor(url: string): string {
+    const hashIndex = url.indexOf('#');
+    return hashIndex !== -1 ? url.substring(hashIndex) : '';
+  }
+
+  private scrollToAnchor(href: string) {
+    if (href === '#') return;
+
+    const anchor = this.getAnchor(href);
+
+    if (isPlatformBrowser(this.platformId)) {
+      const docElement = this.document.documentElement;
+      let adjustment = 0;
+
+      if (this.libConfig.customAnchorAdjustment) {
+        adjustment = this.libConfig.customAnchorAdjustment(this.document);
+      }
+
+      if (this.anchorAdjustment()) {
+        adjustment = this.anchorAdjustment()!;
+      }
+
+      if (this.anchorExtraAdjustment()) {
+        adjustment += this.anchorExtraAdjustment()!;
+      }
+
+      const bodyTop = this.document?.body?.getBoundingClientRect()?.top ?? 0;
+      const hrefTop = this.document?.querySelector<HTMLElement>(anchor)?.getBoundingClientRect()?.top ?? 0;
+      const scrollTop = bodyTop * -1 + hrefTop - adjustment;
+      docElement.scrollTo({ top: scrollTop, behavior: 'smooth' });
+    }
+  }
+
+  private navigateTo(href: string) {
+    const siteBasePath = this.libConfig.siteSufix ?? '';
+    const siteBasePathNoSlash = siteBasePath.replace(/\//g, '');
+    let noBaseHref = href;
+    if (!this.libConfig?.skipDuplicationSufixRule) {
+      if (href.startsWith(siteBasePathNoSlash)) {
+        noBaseHref = href.replace(siteBasePathNoSlash, '');
+      } else if (href.startsWith(siteBasePath)) {
+        noBaseHref = href.replace(siteBasePath, '');
+      }
+    }
+    if (this.libConfig?.customInternalLinkNavigation && this.libConfig.customInternalLinkNavigation(noBaseHref)) {
+      return;
+    }
+
+    const [path, query] = noBaseHref.split('?');
+    const queryParams: Record<string, any> = {};
+    if (query) {
+      const queryArray = query.split('&');
+      queryArray.forEach((q) => {
+        const arr = q.split('=');
+        queryParams[arr[0]] = arr[1];
+      });
+    }
+    // Força reload da pagina
+    if (this.libConfig?.forcePageReload) {
+      const fullUrl = path + (query ? '?' + query : '');
+      window.location.href = fullUrl;
+      return;
+    }
+
+    this.router.navigate([path], { queryParams: queryParams });
+  }
+}

package/core/directives/rdsite-phone-modal/rdsite-phone-modal.directive.spec.ts

@@ -0,0 +1,8 @@
+import { RdsitePhoneModalDirective } from './rdsite-phone-modal.directive';
+
+describe('RdsitePhoneModalDirective', () => {
+  it('should create an instance', () => {
+    const directive = new RdsitePhoneModalDirective();
+    expect(directive).toBeTruthy();
+  });
+});

package/core/directives/rdsite-phone-modal/rdsite-phone-modal.directive.ts

@@ -0,0 +1,41 @@
+import { isPlatformBrowser } from '@angular/common';
+import { Directive, ElementRef, HostListener, inject, model, PLATFORM_ID, TemplateRef } from '@angular/core';
+import { PhoneService } from '../../services/phone/phone.service';
+import { ModalService } from '../../services/modal/modal.service';
+import { RdsiteModalComponentStyle } from '../../enums/RdsiteModalComponentStyle.enum';
+import { formatPhone } from '../../helpers/formatPhone.func';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[rdsitephonemodal]',
+})
+export class RdsitePhoneModalDirective {
+  private modalService = inject(ModalService);
+  private platformId = inject(PLATFORM_ID);
+  private element = inject(ElementRef<Element>);
+  private phoneService = inject(PhoneService);
+
+  rdsitephonemodal = model<TemplateRef<HTMLElement> | null>(null);
+
+  private allowedTags = ['A', 'CURA-BUTTON', 'CURA-BUTTON-OUTLINE', 'CURA-BUTTON-TRANSPARENT'];
+
+  // Intercepta cliques em telefones e aplica comportamentos diferentes em tamanho desktop.
+  @HostListener('click', ['$event'])
+  public onClick(event: Event) {
+    if (!isPlatformBrowser(this.platformId) || !this.allowedTags.includes(this.element?.nativeElement?.tagName) || !this.phoneService.phoneModalIsAllowed)
+      return;
+
+    const href = this.element?.nativeElement?.getAttribute('href') ?? '';
+    if (this.phoneService.isPhoneModal(href)) {
+      this.openPhoneModal(event, href);
+    }
+  }
+
+  public openPhoneModal(event: Event, href: string) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.modalService.setContent(this.rdsitephonemodal() || this.modalService.defaultPhoneModal, { phone: formatPhone(href) });
+    this.modalService.setStyle(RdsiteModalComponentStyle.DEFAULT);
+    this.modalService.open();
+  }
+}

package/core/enums/RdsiteModalComponentStyle.enum.ts

@@ -0,0 +1,13 @@
+export enum RdsiteModalComponentStyle {
+  DEFAULT = 'default',
+  ALERT = 'alert',
+  LIGHT = 'light',
+  DOCTORCARD = 'doctor-card',
+  HOMESLIDE = 'home-slide',
+  BASIC = 'basic',
+  SHARING = 'sharing',
+  FORMFALLBACK = 'form-fallback',
+  FILTER = 'filter',
+  FILTERDOENCAS = 'filter-doencas',
+  PHOTOGALLERY = 'photo-gallery',
+}

package/core/enums/RdsiteModalDrawerComponentStyle.enum.ts

@@ -0,0 +1,7 @@
+export enum RdsiteModalDrawerComponentStyle {
+  DEFAULT = 'default',
+  DRAWERDOCTOR = 'doctor-card',
+  FORMFALLBACK = 'form-fallback',
+  FILTERDOENCAS = 'filter-doencas',
+  PHOTOGALLERY = 'photo-gallery',
+}

package/core/helpers/check-safari-agent.func.ts

@@ -0,0 +1,6 @@
+const checkSafariAgent = (): boolean => {
+  const safariAgent = navigator.userAgent.includes('Safari');
+  const chromeAgent = navigator.userAgent.includes('Chrome');
+  return !chromeAgent && safariAgent;
+};
+export { checkSafariAgent };

package/core/helpers/djb2Hash.func.ts

@@ -0,0 +1,18 @@
+/**
+ * Função de hash djb2 para gerar chaves numéricas únicas
+ *
+ * @param str - String para gerar hash
+ * @returns Número hash único e positivo
+ */
+export const djb2Hash = (str: string): number => {
+  let hash = 5381; // Valor inicial do djb2 original
+  if (str.length === 0) return hash;
+
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) + hash + char; // hash * 33 + char
+    hash = hash & hash; // Converte para 32bit integer
+  }
+
+  return Math.abs(hash);
+};

package/core/helpers/executeWithRetry.func.ts

@@ -0,0 +1,25 @@
+/**
+ * Executa uma função recursivamente até que uma condição seja atendida ou atinja o máximo de tentativas
+ * @param fn - Função a ser executada quando a condição for atendida
+ * @param condition - Função que retorna true quando a condição for satisfeita
+ * @param maxTries - Número máximo de tentativas (padrão: 10)
+ * @param delay - Delay entre tentativas em ms (padrão: 200)
+ * @param currentTry - Contador interno de tentativas (padrão: 0)
+ * @param args - Argumentos que serão passados para a função fn
+ */
+export function executeWithRetry<T extends any[]>(
+  fn: (...args: T) => void,
+  condition: () => boolean,
+  maxTries: number = 10,
+  delay: number = 200,
+  currentTry: number = 0,
+  ...args: T
+): void {
+  if (!condition() && currentTry < maxTries) {
+    setTimeout(() => {
+      executeWithRetry(fn, condition, maxTries, delay, currentTry + 1, ...args);
+    }, delay);
+  } else {
+    fn(...args);
+  }
+}

package/core/helpers/formatPhone.func.ts

@@ -0,0 +1,22 @@
+export const formatPhone = (phone: string): string => {
+  if (!phone) return '';
+
+  const cleanPhone = phone.replace(/[^0-9]/gi, '');
+  let formatedPhone = '';
+  if (cleanPhone.length === 12) {
+    formatedPhone = cleanPhone.replace(/(\d{3})?(\d{5})?(\d{4})/, '($1) $2-$3');
+  } else if (cleanPhone.length === 11) {
+    formatedPhone = cleanPhone.replace(/(\d{2})?(\d{5})?(\d{4})/, '($1) $2-$3');
+  } else if (cleanPhone.length === 10) {
+    formatedPhone = cleanPhone.replace(/(\d{2})?(\d{4})?(\d{4})/, '($1) $2-$3');
+  } else if (cleanPhone.length === 9) {
+    formatedPhone = cleanPhone.replace(/(\d{5})?(\d{4})/, '$1-$2');
+  } else if (cleanPhone.length === 8) {
+    formatedPhone = cleanPhone.replace(/(\d{4})?(\d{4})/, '$1-$2');
+  } else if (cleanPhone.length === 7) {
+    formatedPhone = cleanPhone.replace(/(\d{3})?(\d{4})/, '$1-$2');
+  } else {
+    formatedPhone = cleanPhone;
+  }
+  return formatedPhone;
+};

package/core/helpers/getCircularReplacer.func.ts

@@ -0,0 +1,45 @@
+/**
+ * Função que retorna um replacer personalizado para o JSON.stringify que resolve problemas de estruturas circulares durante a serialização.
+ */
+export function getCircularReplacer(customOptions?: {
+  ignoreKeys?: string[]; // Chaves específicas a serem sempre ignoradas (ex: ['_request', 'parent'])
+  maxDepth?: number; // Profundidade máxima de objetos aninhados (opcional)
+}) {
+  const seen = new WeakSet();
+  const options = {
+    ignoreKeys: customOptions?.ignoreKeys || [],
+    maxDepth: customOptions?.maxDepth || 100,
+  };
+
+  let depth = 0;
+
+  return (key: string, value: any) => {
+    // Ignora chaves específicas configuradas
+    if (options.ignoreKeys.includes(key)) {
+      return undefined;
+    }
+
+    // Controle de profundidade (opcional)
+    if (key === '') {
+      depth = 0; // Reinicia a profundidade na raiz
+    } else {
+      depth += 1; // Incrementa apenas quando descer na hierarquia
+    }
+
+    if (depth > options.maxDepth) {
+      return typeof value === 'object' ? '[Object]' : value;
+    }
+
+    // Lida com referências circulares
+    if (typeof value === 'object' && value !== null) {
+      // Se já vimos este objeto, é uma referência circular
+      if (seen.has(value)) {
+        return undefined; // Exclui valores circulares
+      }
+      // Adiciona o objeto ao conjunto de objetos vistos
+      seen.add(value);
+    }
+
+    return value;
+  };
+}

package/core/helpers/getSiteUrl.func.ts

@@ -0,0 +1,7 @@
+const getSiteUrl = (siteUrl: string = '', siteSufix: string = ''): string => {
+  const baseUrl = siteUrl.endsWith('/') ? siteUrl.substring(0, siteUrl.length - 1) : siteUrl;
+  const baseSufix = siteSufix.endsWith('/') ? siteSufix.substring(0, siteSufix.length - 1) : siteSufix;
+  return `${baseUrl}${baseSufix}`;
+};
+
+export { getSiteUrl };

package/core/helpers/removeHtmlTags.func.ts

@@ -0,0 +1,6 @@
+function removeHtmlTags(content: string): string {
+  content = content.replace(/<.*?>/g, '');
+  return content;
+}
+
+export { removeHtmlTags };

package/core/helpers/toQueryParams.func.ts

@@ -0,0 +1,11 @@
+/**
+ * Converte JSON para query string.
+ * @param params JSON
+ */
+export function toQueryParams(params: any): string {
+  return params
+    ? `?${Object.keys(params)
+        .map((key) => key + '=' + params[key])
+        .join('&')}`
+    : '';
+}

package/core/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/core/interceptors/error.interceptor.ts

@@ -0,0 +1,39 @@
+import { inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import { Observable, catchError, throwError } from 'rxjs';
+import { isPlatformBrowser } from '@angular/common';
+import { LogService } from '../services/log/log.service';
+import { SiteBackendService } from '../services/site-back-end/site-back-end.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ErrorInterceptor implements HttpInterceptor {
+  private logService = inject(LogService);
+  private siteBackendService = inject(SiteBackendService);
+  private platformId = inject(PLATFORM_ID);
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    const queryParams = req.params.keys().length ? `?${req.params.toString()}` : '';
+    const requestUrl = `${req.url}${queryParams}`;
+    return next.handle(req).pipe(
+      catchError((error) => {
+        this.logService.logMsg(`REQUEST ERROR => ${req.method} ${requestUrl}`, 'ERROR_INTERCEPTOR');
+
+        if (isPlatformBrowser(this.platformId) && !req.url.includes('/log/error')) {
+          const errorMessage = typeof error === 'string' ? error : error instanceof Error ? error.message : JSON.stringify(error);
+
+          this.siteBackendService
+            .post('log/error', {
+              error: errorMessage,
+              origin: window.location.href,
+              url: req.urlWithParams,
+            })
+            .subscribe();
+        }
+
+        return throwError(() => error);
+      }),
+    );
+  }
+}