Merge pull request #167 from placetopay-org/feature/Payments-link-sec…

…tion

Feature/ add docs payments link section

src/components/Benefitspaymentlink.jsx

@@ -0,0 +1,120 @@
+import { BrushTwoToneIcon } from '@/components/iconsax/BrushTwoToneIcon'
+import { MonitorMobileTwoToneIcon } from '@/components/iconsax/MonitorMobileTwoToneIcon'
+import { MoneyReceiveTwoToneIcon } from '@/components/iconsax/MoneyReceiveTwoToneIcon'
+import { WalletTwoToneIcon } from '@/components/iconsax/WalletTwoToneIcon'
+import { SecuritySafeTwoToneIcon } from '@/components/iconsax/SecuritySafeTwoToneIcon'
+import { LampChargeTwoToneIcon } from '@/components/iconsax/LampChargeTwoToneIcon'
+import { useLocale } from './LocaleProvider'
+import { ResourceCard } from './ResourceCard'
+
+const resources = [
+  {
+    name: {
+      es: 'Diseño personalizado',
+      en: 'Custom design',
+    },
+    description: {
+      es: 'Personaliza la apariencia de Checkout con logotipos y colores de tu empresa. Crea una experiencia de pago única y coherente con tu marca.',
+      en: 'Personalize the appearance of Checkout with your company logos and colors. Create a unique and consistent payment experience with your brand.',
+    },
+    icon: BrushTwoToneIcon,
+    pattern: {
+      y: 16,
+      squares: [
+        [0, 1],
+        [1, 3],
+      ],
+    },
+  },
+  {
+    name: {
+      es: 'Múltiples idiomas y monedas',
+      en: 'Multiple languages and currencies',
+    },
+    description: {
+      es: 'Acepta pagos en diferentes idiomas y monedas para atraer a clientes de todo el mundo. Amplía tu alcance y aumenta tus oportunidades de venta.',
+      en: 'Accept payments in different languages and currencies to attract customers from all over the world. Expand your reach and increase your sales opportunities.',
+    },
+    icon: MoneyReceiveTwoToneIcon,
+    pattern: {
+      y: -6,
+      squares: [
+        [-1, 2],
+        [1, 3],
+      ],
+    },
+  },
+  {
+    name: {
+      es: 'Seguimiento y control de transacciones',
+      en: 'Tracking and control of transactions',
+    },
+    description: {
+      es: 'Resumen del estado de los pagos en el historial del link creado. Funcionalidad de filtros para búsquedas específicas en el histórico. Registro de pagos relacionados con detalles básicos y posibilidad de consultar más información desde el panel administrativo.',
+      en: 'Summary of payment status in the history of the link created. Filter functionality for specific searches in the history. Record of related payments with basic details and possibility to consult more information from the administrative panel.',
+    },
+    icon: MonitorMobileTwoToneIcon,
+    pattern: {
+      y: 32,
+      squares: [
+        [0, 2],
+        [1, 4],
+      ],
+    },
+  },
+  {
+    name: { es: 'Flexibilidad al momento de compartir a los usuarios', en: 'Flexibility when sharing to users' },
+    description: {
+      es: 'Los links de pago se pueden compartir de diversas formas, como URL, correo electrónico, código QR o WhatsApp, adaptándose a las necesidades de cada usuario o comercio.',
+      en: 'Payment links can be shared in a variety of ways, such as URL, email, QR code or WhatsApp, adapting to the needs of each user or merchant.',
+    },
+    icon: WalletTwoToneIcon,
+    pattern: {
+      y: 22,
+      squares: [[0, 1]],
+    },
+  },
+  {
+    name: { es: 'Eficiencia en el flujo de pagos', en: 'Efficiency in the payment flow' },
+    description: {
+      es: 'El sistema permite configurar tiempos de expiración personalizados y límites de pagos aprobados, optimizando el control y seguridad de las transacciones.',
+      en: 'The system allows the configuration of customized expiration times and approved payment limits, optimizing the control and security of transactions.',
+    },
+    icon: SecuritySafeTwoToneIcon,
+    pattern: {
+      y: 22,
+      squares: [[0, 1]],
+    },
+  },
+  {
+    name: { es: 'Gestión centralizada', en: 'Centralized management' },
+    description: {
+      es: 'Incluye herramientas como el historial de links, la posibilidad de reenvío, y la consulta de pagos relacionados, lo que facilita el monitoreo y la administración desde un solo panel.',
+      en: 'It includes tools such as link history, forwarding capabilities, and related payment queries, making it easy to monitor and manage from a single dashboard.',
+    },
+    icon: LampChargeTwoToneIcon,
+    pattern: {
+      y: 22,
+      squares: [[0, 1]],
+    },
+  },
+]
+
+export function Benefitspaymentlink() {
+  const { locale } = useLocale()
+  return (
+    <div className="xl:max-w-none">
+      <div className="not-prose mt-4 grid grid-cols-1 gap-8 dark:border-white/5 sm:grid-cols-2 xl:grid-cols-3">
+        {resources.map((resource, index) => (
+          <ResourceCard
+            key={index}
+            pattern={resource.pattern}
+            icon={resource.icon}
+            name={resource.name[locale]}
+            description={resource.description[locale]}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/CenteredContainer.jsx

@@ -0,0 +1,9 @@
+export function CenteredContainer({ children, className = "" }) {
+  return (
+<div className={`flex justify-center ${className}`}>
+<div className="w-full sm:w-1/2 lg:w-1/2 sm:ml-10 sm:mr-6">
+        {children}
+</div>
+</div>
+  );
+}

src/components/ImageZoom.jsx

@@ -0,0 +1,43 @@
+/* eslint-disable @next/next/no-img-element */
+import { createContext, useContext, useState } from "react"
+
+const ImageZoomContext = createContext()
+
+export function ImageZoomProvider(props) {
+  // Estado para manejar el zoom y la imagen activa
+  const [isZoomed, setIsZoomed] = useState(false)
+  const [activeImage, setActiveImage] = useState(null)
+
+  // Función para alternar el zoom y establecer la imagen activa
+  const toggleZoom = (imageSrc) => {
+    setIsZoomed(!isZoomed)
+    setActiveImage(imageSrc || null) // Si no hay imagen, limpiamos el estado
+  }
+
+  return (
+    <ImageZoomContext.Provider value={{ isZoomed, activeImage, toggleZoom }}>
+      {isZoomed && activeImage && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-55 backdrop-blur-md"
+
+          onClick={() => toggleZoom(null)}
+        >
+          <div className="flex items-center justify-center w-full h-full p-4">
+            <img
+              src={activeImage}
+              alt="Zoomed view"
+              className="max-h-[90vh] max-w-full rounded-md shadow-lg sm:max-h-[80vh] sm:max-w-[90%] md:max-h-[75vh] md:max-w-[85%] lg:max-h-[70vh] lg:max-w-[80%]"
+            />
+          </div>
+        </div>
+      )}
+      {props.children}
+    </ImageZoomContext.Provider>
+  )
+}
+
+export function ImageZoom(props) {
+  const { toggleZoom } = useContext(ImageZoomContext)
+
+  return <img alt="image with zoom" {...props} tabIndex={0} onClick={() => toggleZoom(props.src)} />
+}

src/components/Note.jsx

@@ -0,0 +1,66 @@
+import { twJoin } from "tailwind-merge"
+
+const NoteType = {
+  default: {
+    icon: InfoIcon,
+    container:
+      'border-primary-500/20 bg-primary-50/50 text-primary-900 dark:border-primary-500/30 dark:bg-primary-500/5 dark:text-primary-200 dark:[--tw-prose-links-hover:theme(colors.primary.300)] dark:[--tw-prose-links:theme(colors.white)]',
+    iconClasses:
+      'fill-primary-500 stroke-white dark:fill-primary-200/20 dark:stroke-primary-200',
+  },
+  warning: {
+    icon: WarningIcon,
+    container:
+      'border-orange-500/20 bg-orange-50/50 text-orange-900/80 dark:border-orange-500/30 dark:bg-orange-500/5 dark:text-orange-200 dark:[--tw-prose-links-hover:theme(colors.orange.300)] dark:[--tw-prose-links:theme(colors.white)]',
+    iconClasses: 'fill-white stroke-white text-orange-500/60',
+  },
+}
+
+function InfoIcon(props) {
+  return (
+    <svg viewBox="0 0 16 16" aria-hidden="true" {...props}>
+      <circle cx="8" cy="8" r="8" strokeWidth="0" />
+      <path
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M6.75 7.75h1.5v3.5"
+      />
+      <circle cx="8" cy="4" r=".5" fill="none" />
+    </svg>
+  )
+}
+
+function WarningIcon(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="m19.51 5.85-5.94-3.43c-.97-.56-2.17-.56-3.15 0L4.49 5.85a3.15 3.15 0 0 0-1.57 2.73v6.84c0 1.12.6 2.16 1.57 2.73l5.94 3.43c.97.56 2.17.56 3.15 0l5.94-3.43a3.15 3.15 0 0 0 1.57-2.73V8.58a3.192 3.192 0 0 0-1.58-2.73Zm-8.26 1.9c0-.41.34-.75.75-.75s.75.34.75.75V13c0 .41-.34.75-.75.75s-.75-.34-.75-.75V7.75Zm1.67 8.88c-.05.12-.12.23-.21.33a.99.99 0 0 1-1.09.21c-.13-.05-.23-.12-.33-.21-.09-.1-.16-.21-.22-.33a.986.986 0 0 1-.07-.38c0-.26.1-.52.29-.71.1-.09.2-.16.33-.21.37-.16.81-.07 1.09.21.09.1.16.2.21.33.05.12.08.25.08.38s-.03.26-.08.38Z"
+      />
+    </svg>
+  )
+}
+
+export function Note({ children, type = 'default' }) {
+  const { icon: Icon, container, iconClasses } = NoteType[type]
+  return (
+    <div
+      className={twJoin(
+        'my-6 flex gap-2.5 rounded-2xl border p-4 leading-6',
+        container
+      )}
+    >
+      <Icon className={twJoin('mt-1 h-4 w-4 flex-none', iconClasses)} />
+      <div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
+        {children}
+      </div>
+    </div>
+  )
+}