@zauru-sdk/components 1.0.13 → 1.0.14

package/src/Form/TimePicker/index.tsx

@@ -0,0 +1,127 @@
+import { ClockIconSVG, CloseSvgIcon, IdeaIconSVG } from "@zauru-sdk/icons";
+import { useAppSelector } from "@zauru-sdk/redux";
+import React, { useEffect, useState } from "react";
+
+type Props = {
+  id?: string;
+  name: string;
+  formName?: string;
+  title?: string;
+  hint?: string;
+  helpText?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  tabIndex?: number;
+  error?: string;
+  disabled?: boolean;
+};
+
+export const FormTimePickerWithoutValidation = (props: Props) => {
+  const {
+    id,
+    name,
+    title,
+    defaultValue = "",
+    hint,
+    helpText,
+    onChange,
+    tabIndex,
+    error,
+    disabled = false,
+  } = props;
+
+  const [value, setValue] = useState<string>(defaultValue);
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
+
+  const color = error ? "red" : "gray";
+
+  const isReadOnly = disabled;
+  const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
+  const textColor = isReadOnly ? "text-gray-500" : `text-${color}-500`;
+  const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
+
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  const clearValue = () => {
+    setValue("");
+    onChange && onChange("");
+  };
+
+  return (
+    <>
+      {title && (
+        <label
+          htmlFor={error ? `${name}-error` : `${name}-success`}
+          className={`block text-sm font-medium ${textColor}`}
+        >
+          {title}
+        </label>
+      )}
+      <div className="flex relative items-center">
+        <div className="absolute left-0 flex items-center pl-3 pointer-events-none">
+          <ClockIconSVG />
+        </div>
+        <input
+          id={id}
+          name={name}
+          tabIndex={tabIndex}
+          type="time"
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setValue(e.target.value);
+            onChange && onChange(e.target.value);
+          }}
+          value={value}
+          pattern="\d{2}:\d{2}"
+          className={`${bgColor} ${borderColor} ${textColor} text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5`}
+        />
+        {value && (
+          <button
+            type="button"
+            onClick={clearValue}
+            className="absolute right-0 mr-10"
+          >
+            <CloseSvgIcon />
+          </button>
+        )}
+        {helpText && (
+          <div className="flex items-center relative ml-3">
+            <div
+              className="relative cursor-pointer"
+              onMouseEnter={() => setShowTooltip(true)}
+              onMouseLeave={() => setShowTooltip(false)}
+            >
+              <IdeaIconSVG />
+              {showTooltip && (
+                <div className="absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black">
+                  {helpText}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+      {error && (
+        <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>
+          <span className="font-medium">Oops!</span> {error}
+        </p>
+      )}
+      {!error && hint && (
+        <p
+          className={`mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`}
+        >
+          {hint}
+        </p>
+      )}
+    </>
+  );
+};
+
+export const FormTimePicker = (props: Props) => {
+  const { formValidations } = useAppSelector((state) => state.formValidation);
+  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+  props = { ...props, error };
+
+  return <FormTimePickerWithoutValidation {...props} />;
+};

package/src/Form/YesNo/index.tsx

@@ -0,0 +1,79 @@
+import { useAppSelector } from "@zauru-sdk/redux";
+import { useState } from "react";
+
+type Props = {
+  id?: string;
+  name: string;
+  formName?: string;
+  title?: string;
+  defaultValue?: boolean;
+  helpText?: string;
+  onChange?: (value: boolean) => void;
+  disabled?: boolean;
+};
+
+const YesNo = (props: Props) => {
+  const {
+    id,
+    name,
+    title,
+    defaultValue = false,
+    helpText,
+    onChange,
+    disabled,
+  } = props;
+
+  const { formValidations } = useAppSelector((state) => state.formValidation);
+  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+
+  const [value, setValue] = useState(defaultValue);
+
+  const color = error ? "red" : "gray";
+
+  const handleOnChange = () => {
+    if (disabled) return; // No hacer nada si está deshabilitado
+    const newValue = !value;
+    setValue(newValue);
+    onChange && onChange(newValue);
+  };
+
+  return (
+    <>
+      <label
+        className={`relative inline-flex items-center cursor-pointer ${
+          disabled ? "opacity-50" : ""
+        }`}
+      >
+        <input
+          type="checkbox"
+          id={id ?? name}
+          name={name}
+          checked={value}
+          value={value.toString()}
+          className="sr-only peer"
+          onChange={handleOnChange}
+          disabled={disabled}
+        />
+        {value.toString() === "false" && (
+          <input type="hidden" name={name} value="false" />
+        )}
+        <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+        <span className="ml-3 text-sm font-medium text-gray-900">{title}</span>
+      </label>
+      {error && (
+        <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>
+          <span className="font-medium">Oops!</span> {error}
+        </p>
+      )}
+      {!error && helpText && (
+        <p
+          className={`mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`}
+        >
+          {helpText}
+        </p>
+      )}
+    </>
+  );
+};
+
+export default YesNo;

package/src/Form/index.ts

@@ -0,0 +1,13 @@
+export * from "./Checkbox";
+export * from "./Checklist";
+export * from "./DatePicker";
+export * from "./DynamicBaculoForm";
+export * from "./FieldContainer";
+export * from "./FileUpload";
+export * from "./FormButtons";
+export * from "./FormLayout";
+export * from "./SelectField";
+export * from "./TextArea";
+export * from "./TextField";
+export * from "./TimePicker";
+export * from "./YesNo";

package/src/Zendesk/Chat.tsx

@@ -0,0 +1,85 @@
+import { useEffect } from "react";
+
+const canUseDOM = (): boolean => {
+  if (
+    typeof window === "undefined" ||
+    !window.document ||
+    !window.document.createElement
+  ) {
+    return false;
+  }
+  return true;
+};
+
+export const logoutFromZendesk = () => {
+  if (canUseDOM() && (window as any).zE) {
+    (window as any).zE("messenger", "logoutUser");
+  } else {
+    console.warn("Zendesk is not initialized yet");
+  }
+};
+
+export const ZendeskAPI = (...args: any[]) => {
+  if (canUseDOM() && (window as any).zE) {
+    (window as any).zE.apply(null, args);
+  } else {
+    console.warn("Zendesk is not initialized yet");
+  }
+};
+
+interface ZendeskProps {
+  defer?: boolean;
+  onLoaded?: () => void;
+  token: string;
+  configuration: {
+    zendeskChatKey: string;
+  };
+  [key: string]: any; // Para propiedades adicionales que se pasen y se asignen a window.zESettings
+}
+
+const Zendesk: React.FC<ZendeskProps> = (props: ZendeskProps) => {
+  const { defer, configuration, token, ...other } = props;
+
+  useEffect(() => {
+    const insertScript = () => {
+      const zendeskScript = document.createElement("script");
+      if (defer) {
+        zendeskScript.defer = true;
+      } else {
+        zendeskScript.async = true;
+      }
+      zendeskScript.id = "ze-snippet";
+      zendeskScript.src = `https://static.zdassets.com/ekr/snippet.js?key=${configuration.zendeskChatKey}`;
+      zendeskScript.addEventListener("load", () => {
+        if (props.onLoaded) {
+          props.onLoaded();
+        }
+
+        (window as any).zE("messenger", "loginUser", function (callback: any) {
+          callback(token);
+        });
+      });
+      document.body.appendChild(zendeskScript);
+
+      return zendeskScript; // Devolvemos la referencia del script
+    };
+
+    let script: HTMLScriptElement | undefined; // Guardamos la referencia del script aquí
+
+    if (canUseDOM() && !(window as any).zE) {
+      script = insertScript();
+      (window as any).zESettings = other;
+    }
+
+    return () => {
+      if (script) {
+        // Si el script existe, lo eliminamos del DOM
+        script.remove();
+      }
+    };
+  }, [props, defer, other, configuration, token]);
+
+  return null;
+};
+
+export default Zendesk;

package/src/Zendesk/index.ts

@@ -0,0 +1,2 @@
+export * from "./Chat";
+export * from "./zendesk.config";

package/src/Zendesk/zendesk.config.ts

@@ -0,0 +1,40 @@
+import jwt from "jsonwebtoken";
+
+export function zendeskJwt(
+  current_user: {
+    selected_entity_id: number;
+    id: number;
+    email: string;
+    name: string;
+  },
+  configuration: {
+    zendeskJWTSecret: string;
+    zendeskJWTKey: string;
+  }
+) {
+  // get the INFO
+  const jwtSecret = configuration.zendeskJWTSecret;
+  const jwtKey = configuration.zendeskJWTKey;
+  const expiresIn = Math.floor(Date.now() / 1000) + 60 * 60 * 24; // Expires in 1 day
+
+  // create the payload
+  const payload = {
+    external_id:
+      "z" +
+      current_user.selected_entity_id.toString() +
+      "-" +
+      current_user.id.toString(),
+    email: current_user.email,
+    name: current_user.name,
+    organization_id: current_user.selected_entity_id.toString(),
+    scope: "user",
+    exp: expiresIn,
+  };
+
+  const jwtHeader: jwt.JwtHeader = { kid: jwtKey, typ: "JWT", alg: "HS256" };
+
+  return jwt.sign(payload, jwtSecret, {
+    algorithm: "HS256",
+    header: jwtHeader,
+  });
+}

package/src/index.ts

@@ -2,9 +2,11 @@ export * from "./Alerts";
 export * from "./BlockUI";
 export * from "./Buttons";
 export * from "./Card";
-//export * from "./Chat";
+export * from "./ConnectionState";
+export * from "./Chat";
 export * from "./Containers";
 export * from "./Footer";
+export * from "./Form";
 export * from "./Labels";
 export * from "./Layouts";
 export * from "./LineSeparator";
@@ -18,4 +20,4 @@ export * from "./Titles";
 export * from "./Tooltip";
 export * from "./WithTooltip";
 export * from "./Wizards";
-//export * from "./Zendesk";
+export * from "./Zendesk";