tee3apps-cms-sdk-react 0.0.9 → 0.0.11

package/src/PageFormComponents/Styles/TermsAndCondition.css

@@ -0,0 +1,170 @@
+.terms-and-condition {
+  margin-bottom: 1.5rem;
+}
+
+.terms-and-condition__container {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.terms-and-condition__checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  height: 1.25rem;
+  margin-top: 0.125rem;
+}
+
+.terms-and-condition__checkbox {
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid #d1d5db; /* gray-300 */
+  border-radius: 0.25rem;
+  accent-color: #2563eb; /* blue-600 */
+  cursor: pointer;
+}
+
+.terms-and-condition__content {
+  flex: 1;
+}
+
+.terms-and-condition__label {
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: #374151; /* gray-700 */
+  display: block;
+  line-height: 1.5;
+}
+
+.terms-and-condition__terms-link {
+  color: #2563eb; /* blue-600 */
+  text-decoration: underline;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.terms-and-condition__terms-link:hover {
+  color: #1d4ed8; /* blue-700 */
+}
+
+.terms-and-condition__terms-link p {
+  margin: 0;
+  display: inline;
+}
+
+.terms-and-condition__required {
+  color: #ef4444; /* red-500 */
+  margin-left: 0.25rem;
+}
+
+.terms-and-condition__helper-text {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #6b7280; /* gray-500 */
+}
+
+/* Modal Styles */
+.terms-and-condition__modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+
+.terms-and-condition__modal {
+  background-color: #ffffff;
+  border-radius: 0.5rem;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  max-width: 600px;
+  width: 100%;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.terms-and-condition__modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid #e5e7eb; /* gray-200 */
+}
+
+.terms-and-condition__modal-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #111827; /* gray-900 */
+  margin: 0;
+}
+
+.terms-and-condition__modal-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  color: #6b7280; /* gray-500 */
+  transition: color 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.terms-and-condition__modal-close:hover {
+  color: #374151; /* gray-700 */
+}
+
+.terms-and-condition__modal-body {
+  padding: 1.5rem;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.terms-and-condition__modal-content {
+  font-size: 0.875rem;
+  color: #374151; /* gray-700 */
+  line-height: 1.6;
+}
+
+.terms-and-condition__modal-content p {
+  margin: 0 0 1rem 0;
+}
+
+.terms-and-condition__modal-content p:last-child {
+  margin-bottom: 0;
+}
+
+.terms-and-condition__modal-footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid #e5e7eb; /* gray-200 */
+  display: flex;
+  justify-content: flex-end;
+}
+
+.terms-and-condition__modal-button {
+  background-color: #2563eb; /* blue-600 */
+  color: #ffffff;
+  border: none;
+  border-radius: 0.375rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.terms-and-condition__modal-button:hover {
+  background-color: #1d4ed8; /* blue-700 */
+}
+
+.terms-and-condition__modal-button:active {
+  background-color: #1e40af; /* blue-800 */
+}
+

package/src/PageFormComponents/TermsAndCondition.tsx

@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import type { ComponentProps } from '../types';
+import './Styles/TermsAndCondition.css';
+
+interface TermsAndConditionProps {
+  props: ComponentProps & {
+    conditionText?: { all?: string };
+    termsText?: { all?: string };
+    isRequired?: boolean;
+    checked?: boolean;
+  };
+  value?: boolean;
+  onChange?: (code: string, value: boolean) => void;
+}
+
+const TermsAndCondition: React.FC<TermsAndConditionProps> = ({ 
+  props, 
+  value = false, 
+  onChange 
+}) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      const code = props.code || `termsandcondition_${props.name?.all || 'field'}`;
+      onChange(code, e.target.checked);
+    }
+  };
+
+  const handleTermsClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleModalBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget) {
+      closeModal();
+    }
+  };
+
+  const termsText = props.termsText?.all || '';
+  const conditionText = props.conditionText?.all || '';
+  const isRequired = props.isRequired || props.required || false;
+  // Use value if it's defined (even if false), otherwise fall back to props.checked, then false
+  const checked = value !== undefined && value !== null ? value : (props.checked ?? false);
+
+  // Parse HTML content safely
+  const createMarkup = (html: string) => {
+    return { __html: html };
+  };
+
+  return (
+    <div className="terms-and-condition">
+      <div className="terms-and-condition__container">
+        <div className="terms-and-condition__checkbox-wrapper">
+          <input
+            type="checkbox"
+            checked={checked}
+            onChange={handleCheckboxChange}
+            className="terms-and-condition__checkbox"
+            required={isRequired}
+          />
+        </div>
+        <div className="terms-and-condition__content">
+          <label className="terms-and-condition__label">
+            {termsText && (
+              <span 
+                className="terms-and-condition__terms-link"
+                onClick={handleTermsClick}
+                dangerouslySetInnerHTML={createMarkup(termsText)}
+              />
+            )}
+            {isRequired && <span className="terms-and-condition__required">*</span>}
+          </label>
+
+          {props.helperText && (
+            <p className="terms-and-condition__helper-text">{props.helperText}</p>
+          )}
+        </div>
+      </div>
+
+      {/* Modal for Conditions */}
+      {isModalOpen && (
+        <div 
+          className="terms-and-condition__modal-overlay"
+          onClick={handleModalBackdropClick}
+        >
+          <div className="terms-and-condition__modal">
+            <div className="terms-and-condition__modal-header">
+              <h2 className="terms-and-condition__modal-title">Terms and Conditions</h2>
+              <button
+                className="terms-and-condition__modal-close"
+                onClick={closeModal}
+                aria-label="Close"
+              >
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+              </button>
+            </div>
+            <div className="terms-and-condition__modal-body">
+              {conditionText && (
+                <div 
+                  className="terms-and-condition__modal-content"
+                  dangerouslySetInnerHTML={createMarkup(conditionText)}
+                />
+              )}
+            </div>
+            <div className="terms-and-condition__modal-footer">
+              <button
+                className="terms-and-condition__modal-button"
+                onClick={closeModal}
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TermsAndCondition;
+

package/src/types.ts

@@ -154,6 +154,13 @@ export type ComponentProps = {
   disabled?: boolean;
   bgColor?: string;
   radius?: string;
+  // TermsAndCondition component props
+  conditionText?: { all?: string };
+  termsText?: { all?: string };
+  isRequired?: boolean;
+  checked?: boolean;
+  // Button component props
+  buttonType?: 'submit' | 'reset' | 'cancel';
 };
 
 export type Component = {