@qite/tide-booking-component 1.4.92 → 1.4.93

package/src/content/image-with-text-section/card.tsx

@@ -1,58 +1,58 @@
-import React from 'react';
-import { ImageWithTextCardProps } from './types';
-
-const ImageWithTextCard: React.FC<ImageWithTextCardProps> = ({
-  noCard,
-  fullImage,
-  reverse,
-  imageSrc,
-  imageAlt,
-  title,
-  section1Title,
-  section1Text,
-  section2Title,
-  section2Text,
-  buttonText,
-  onButtonClick
-}) => {
-  let cardClassName = 'image-with-text__card';
-  if (noCard) {
-    cardClassName += ' image-with-text__card--no-card';
-  }
-  if (fullImage) {
-    cardClassName += ' image-with-text__card--full-img';
-  }
-  if (reverse) {
-    cardClassName += ' image-with-text__card--reverse';
-  }
-
-  return (
-    <div className={cardClassName}>
-      <div className="image-with-text__card__image__wrapper">
-        <img src={imageSrc} alt={imageAlt} className="image-with-text__card__image" />
-      </div>
-
-      <div className="image-with-text__card__content">
-        <h3 className="image-with-text__card__title">{title}</h3>
-
-        <div className="image-with-text__card__description">
-          <h5 className="image-with-text__card__description__title">{section1Title}</h5>
-          <p className="image-with-text__card__description__text">{section1Text}</p>
-        </div>
-
-        <div className="image-with-text__card__description">
-          <h5 className="image-with-text__card__description__title">{section2Title}</h5>
-          <p className="image-with-text__card__description__text">{section2Text}</p>
-        </div>
-
-        <div className="image-with-text__card__btn">
-          <button type="button" className="cta cta--select" onClick={onButtonClick}>
-            {buttonText}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ImageWithTextCard;
+import React from 'react';
+import { ImageWithTextCardProps } from './types';
+
+const ImageWithTextCard: React.FC<ImageWithTextCardProps> = ({
+  noCard,
+  fullImage,
+  reverse,
+  imageSrc,
+  imageAlt,
+  title,
+  section1Title,
+  section1Text,
+  section2Title,
+  section2Text,
+  buttonText,
+  onButtonClick
+}) => {
+  let cardClassName = 'image-with-text__card';
+  if (noCard) {
+    cardClassName += ' image-with-text__card--no-card';
+  }
+  if (fullImage) {
+    cardClassName += ' image-with-text__card--full-img';
+  }
+  if (reverse) {
+    cardClassName += ' image-with-text__card--reverse';
+  }
+
+  return (
+    <div className={cardClassName}>
+      <div className="image-with-text__card__image__wrapper">
+        <img src={imageSrc} alt={imageAlt} className="image-with-text__card__image" />
+      </div>
+
+      <div className="image-with-text__card__content">
+        <h3 className="image-with-text__card__title">{title}</h3>
+
+        <div className="image-with-text__card__description">
+          <h5 className="image-with-text__card__description__title">{section1Title}</h5>
+          <p className="image-with-text__card__description__text">{section1Text}</p>
+        </div>
+
+        <div className="image-with-text__card__description">
+          <h5 className="image-with-text__card__description__title">{section2Title}</h5>
+          <p className="image-with-text__card__description__text">{section2Text}</p>
+        </div>
+
+        <div className="image-with-text__card__btn">
+          <button type="button" className="cta cta--select" onClick={onButtonClick}>
+            {buttonText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImageWithTextCard;

package/src/content/image-with-text-section/index.tsx

@@ -1,22 +1,22 @@
-import React from 'react';
-import { ImageWithTextSectionProps } from './types';
-import ImageWithTextCard from './card';
-import { isEmpty } from 'lodash';
-
-const ImageWithTextSection: React.FC<ImageWithTextSectionProps> = ({ title, hasBackground, cards }) => {
-  const className = `image-with-text ${hasBackground ? 'image-with-text--background' : ''}`;
-
-  return (
-    <div className={className}>
-      <div className="image-with-text__container">
-        <div className="image-with-text__title__row">
-          <h2 className="image-with-text__title">{title}</h2>
-        </div>
-
-        <div className="image-with-text__card__wrapper">{!isEmpty(cards) && cards.map((card, index) => <ImageWithTextCard key={index} {...card} />)}</div>
-      </div>
-    </div>
-  );
-};
-
-export default ImageWithTextSection;
+import React from 'react';
+import { ImageWithTextSectionProps } from './types';
+import ImageWithTextCard from './card';
+import { isEmpty } from 'lodash';
+
+const ImageWithTextSection: React.FC<ImageWithTextSectionProps> = ({ title, hasBackground, cards }) => {
+  const className = `image-with-text ${hasBackground ? 'image-with-text--background' : ''}`;
+
+  return (
+    <div className={className}>
+      <div className="image-with-text__container">
+        <div className="image-with-text__title__row">
+          <h2 className="image-with-text__title">{title}</h2>
+        </div>
+
+        <div className="image-with-text__card__wrapper">{!isEmpty(cards) && cards.map((card, index) => <ImageWithTextCard key={index} {...card} />)}</div>
+      </div>
+    </div>
+  );
+};
+
+export default ImageWithTextSection;

package/src/content/image-with-text-section/types.ts

@@ -1,20 +1,20 @@
-export interface ImageWithTextSectionProps {
-  title: string;
-  hasBackground?: boolean;
-  cards: ImageWithTextCardProps[];
-}
-
-export interface ImageWithTextCardProps {
-  imageSrc: string;
-  imageAlt: string;
-  title: string;
-  section1Title: string;
-  section1Text: string;
-  section2Title: string;
-  section2Text: string;
-  buttonText: string;
-  onButtonClick?: () => void;
-  noCard?: boolean;
-  fullImage?: boolean;
-  reverse?: boolean;
-}
+export interface ImageWithTextSectionProps {
+  title: string;
+  hasBackground?: boolean;
+  cards: ImageWithTextCardProps[];
+}
+
+export interface ImageWithTextCardProps {
+  imageSrc: string;
+  imageAlt: string;
+  title: string;
+  section1Title: string;
+  section1Text: string;
+  section2Title: string;
+  section2Text: string;
+  buttonText: string;
+  onButtonClick?: () => void;
+  noCard?: boolean;
+  fullImage?: boolean;
+  reverse?: boolean;
+}

package/src/content/login/confirm-component.tsx

@@ -1,149 +1,149 @@
-import React, { useEffect, useState } from 'react';
-import { LoginComponentProps } from './types';
-import { getTranslations } from '../../shared/utils/localization-util';
-import { confirmMember } from './login-services';
-
-interface TouchedFields {
-  password?: boolean;
-  repeatPassword?: boolean;
-}
-
-interface FormFields {
-  password: string;
-  repeatPassword: string;
-}
-
-const ConfirmComponent: React.FC<LoginComponentProps> = ({ tideClientConfig, languageCode, handleBackToLogin }) => {
-  const [isConfirmed, setIsConfirmed] = useState<boolean>(false);
-  const [touched, setTouched] = useState<TouchedFields>();
-  const [formValues, setFormValues] = useState<FormFields>({
-    password: '',
-    repeatPassword: ''
-  });
-  const [errors, setErrors] = useState({} as any);
-  const [token, setToken] = useState<string | null>(null);
-
-  const translations = getTranslations(languageCode ?? 'en-GB');
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      setToken(new URLSearchParams(window.location.search).get('token'));
-    }
-  }, []);
-
-  const handleBlur = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (!touched) {
-      setTouched({ password: false, repeatPassword: false });
-    }
-    setTouched({
-      ...touched,
-      [event.target.name]: true
-    });
-
-    validate();
-  };
-
-  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setFormValues({ ...formValues, [event.target.name]: event.target.value });
-
-    validate();
-  };
-
-  const validate = () => {
-    let validationErrors = {} as any;
-    if (formValues) {
-      if (!formValues.password || formValues.password.length === 0) {
-        validationErrors.password = true;
-      }
-      if (!formValues.repeatPassword || formValues.repeatPassword.length === 0) {
-        validationErrors.repeatPassword = true;
-      } else if (formValues.password !== formValues.repeatPassword) {
-        validationErrors.passwordMatch = true;
-      }
-      if (!token || token.length === 0) {
-        validationErrors.token = true;
-      }
-    }
-
-    setErrors(validationErrors);
-    return Object.keys(validationErrors).length === 0;
-  };
-
-  const handleConfirmation = async () => {
-    setTouched({ password: true, repeatPassword: true });
-    const isValid = validate();
-    if (!isValid) return;
-
-    if (token) {
-      try {
-        const response = await confirmMember(token, formValues.password, true, tideClientConfig);
-        if (response.ok) {
-          setIsConfirmed(true);
-        }
-      } catch {
-        // Optional: handle unexpected API issues
-      }
-    }
-  };
-
-  useEffect(() => {
-    validate();
-  }, [formValues, token]);
-
-  return (
-    <>
-      {!isConfirmed && (
-        <>
-          <h4 className="login__card__title">{translations.LOGIN.RESET_PASSWORD_TITLE}</h4>
-
-          <form className="login__form" onSubmit={(e) => e.preventDefault()} noValidate>
-            <div className="login__form__group">
-              <label htmlFor="password">{translations.LOGIN.RESET_PASSWORD_LABEL}</label>
-              <input type="password" id="password" name="password" value={formValues.password} onChange={onChange} onBlur={handleBlur} required />
-              {(touched?.password || touched?.repeatPassword) && errors.password && (
-                <div id="username-error" className="login__error">
-                  {translations.LOGIN.PASSWORD_REQUIRED}
-                </div>
-              )}
-            </div>
-
-            <div className="login__form__group">
-              <label htmlFor="repeatPassword">{translations.LOGIN.RESET_REPEAT_PASSWORD_LABEL}</label>
-              <input
-                type="password"
-                id="repeatPassword"
-                name="repeatPassword"
-                value={formValues.repeatPassword}
-                onChange={onChange}
-                onBlur={handleBlur}
-                required
-              />
-              {(touched?.repeatPassword || touched?.password) && (errors.repeatPassword || errors.passwordMatch) && (
-                <div id="username-error" className="login__error">
-                  {errors.repeatPassword === 'required' && translations.LOGIN.REPEAT_PASSWORD_REQUIRED}
-                  {errors.passwordMatch === 'mismatch' && translations.LOGIN.PASSWORDS_DO_NOT_MATCH}
-                </div>
-              )}
-            </div>
-
-            <button type="button" className="cta cta--primary" onClick={handleConfirmation}>
-              {translations.LOGIN.RESET_PASSWORD_SUBMIT_LABEL}
-            </button>
-          </form>
-        </>
-      )}
-
-      {isConfirmed && (
-        <div className="login__welcome">
-          <h3 className="login__card__title">{translations.LOGIN.RECEIVED_REQUEST}</h3>
-          <p>{translations.LOGIN.ACCOUNT_ACTIVATED_LOGIN}</p>
-          <button className="cta cta--primary" onClick={handleBackToLogin}>
-            {translations.LOGIN.BACK_TO_LOGIN}
-          </button>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default ConfirmComponent;
+import React, { useEffect, useState } from 'react';
+import { LoginComponentProps } from './types';
+import { getTranslations } from '../../shared/utils/localization-util';
+import { confirmMember } from './login-services';
+
+interface TouchedFields {
+  password?: boolean;
+  repeatPassword?: boolean;
+}
+
+interface FormFields {
+  password: string;
+  repeatPassword: string;
+}
+
+const ConfirmComponent: React.FC<LoginComponentProps> = ({ tideClientConfig, languageCode, handleBackToLogin }) => {
+  const [isConfirmed, setIsConfirmed] = useState<boolean>(false);
+  const [touched, setTouched] = useState<TouchedFields>();
+  const [formValues, setFormValues] = useState<FormFields>({
+    password: '',
+    repeatPassword: ''
+  });
+  const [errors, setErrors] = useState({} as any);
+  const [token, setToken] = useState<string | null>(null);
+
+  const translations = getTranslations(languageCode ?? 'en-GB');
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setToken(new URLSearchParams(window.location.search).get('token'));
+    }
+  }, []);
+
+  const handleBlur = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!touched) {
+      setTouched({ password: false, repeatPassword: false });
+    }
+    setTouched({
+      ...touched,
+      [event.target.name]: true
+    });
+
+    validate();
+  };
+
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setFormValues({ ...formValues, [event.target.name]: event.target.value });
+
+    validate();
+  };
+
+  const validate = () => {
+    let validationErrors = {} as any;
+    if (formValues) {
+      if (!formValues.password || formValues.password.length === 0) {
+        validationErrors.password = true;
+      }
+      if (!formValues.repeatPassword || formValues.repeatPassword.length === 0) {
+        validationErrors.repeatPassword = true;
+      } else if (formValues.password !== formValues.repeatPassword) {
+        validationErrors.passwordMatch = true;
+      }
+      if (!token || token.length === 0) {
+        validationErrors.token = true;
+      }
+    }
+
+    setErrors(validationErrors);
+    return Object.keys(validationErrors).length === 0;
+  };
+
+  const handleConfirmation = async () => {
+    setTouched({ password: true, repeatPassword: true });
+    const isValid = validate();
+    if (!isValid) return;
+
+    if (token) {
+      try {
+        const response = await confirmMember(token, formValues.password, true, tideClientConfig);
+        if (response.ok) {
+          setIsConfirmed(true);
+        }
+      } catch {
+        // Optional: handle unexpected API issues
+      }
+    }
+  };
+
+  useEffect(() => {
+    validate();
+  }, [formValues, token]);
+
+  return (
+    <>
+      {!isConfirmed && (
+        <>
+          <h4 className="login__card__title">{translations.LOGIN.RESET_PASSWORD_TITLE}</h4>
+
+          <form className="login__form" onSubmit={(e) => e.preventDefault()} noValidate>
+            <div className="login__form__group">
+              <label htmlFor="password">{translations.LOGIN.RESET_PASSWORD_LABEL}</label>
+              <input type="password" id="password" name="password" value={formValues.password} onChange={onChange} onBlur={handleBlur} required />
+              {(touched?.password || touched?.repeatPassword) && errors.password && (
+                <div id="username-error" className="login__error">
+                  {translations.LOGIN.PASSWORD_REQUIRED}
+                </div>
+              )}
+            </div>
+
+            <div className="login__form__group">
+              <label htmlFor="repeatPassword">{translations.LOGIN.RESET_REPEAT_PASSWORD_LABEL}</label>
+              <input
+                type="password"
+                id="repeatPassword"
+                name="repeatPassword"
+                value={formValues.repeatPassword}
+                onChange={onChange}
+                onBlur={handleBlur}
+                required
+              />
+              {(touched?.repeatPassword || touched?.password) && (errors.repeatPassword || errors.passwordMatch) && (
+                <div id="username-error" className="login__error">
+                  {errors.repeatPassword === 'required' && translations.LOGIN.REPEAT_PASSWORD_REQUIRED}
+                  {errors.passwordMatch === 'mismatch' && translations.LOGIN.PASSWORDS_DO_NOT_MATCH}
+                </div>
+              )}
+            </div>
+
+            <button type="button" className="cta cta--primary" onClick={handleConfirmation}>
+              {translations.LOGIN.RESET_PASSWORD_SUBMIT_LABEL}
+            </button>
+          </form>
+        </>
+      )}
+
+      {isConfirmed && (
+        <div className="login__welcome">
+          <h3 className="login__card__title">{translations.LOGIN.RECEIVED_REQUEST}</h3>
+          <p>{translations.LOGIN.ACCOUNT_ACTIVATED_LOGIN}</p>
+          <button className="cta cta--primary" onClick={handleBackToLogin}>
+            {translations.LOGIN.BACK_TO_LOGIN}
+          </button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ConfirmComponent;

package/src/content/login/index.tsx

@@ -1,70 +1,70 @@
-import React from 'react';
-import { LoginProps } from './types';
-import LoginComponent from './login-component';
-import ResetPasswordComponent from './reset-password-component';
-import ConfirmComponent from './confirm-component';
-
-const Login: React.FC<LoginProps> = ({
-  tideClientConfig,
-  portalId,
-  languageCode,
-  imageSrc,
-  logo,
-  isMemberConfirmation,
-  isLoginPage,
-  isResetPassword,
-  member,
-  setMember,
-  handleBackToHome,
-  handleBackToLogin
-}) => {
-  return (
-    <div className="login">
-      <div className="login__img__wrapper">
-        <img className="login__img" src={imageSrc ? imageSrc : 'https://cdn.pixabay.com/photo/2022/04/08/06/36/rock-7118843_1280.jpg'} alt="Login" />
-      </div>
-
-      <div className="login__container">
-        <div className="login__card">
-          {logo && <div className="login__logo">{logo}</div>}
-
-          {isLoginPage && (
-            <LoginComponent
-              tideClientConfig={tideClientConfig}
-              portalId={portalId}
-              languageCode={languageCode}
-              member={member}
-              setMember={setMember}
-              handleBackToHome={handleBackToHome}
-              handleBackToLogin={handleBackToLogin}
-            />
-          )}
-          {isResetPassword && (
-            <ResetPasswordComponent
-              tideClientConfig={tideClientConfig}
-              portalId={portalId}
-              languageCode={languageCode}
-              member={member}
-              setMember={setMember}
-              handleBackToHome={handleBackToHome}
-              handleBackToLogin={handleBackToLogin}
-            />
-          )}
-          {isMemberConfirmation && (
-            <ConfirmComponent
-              tideClientConfig={tideClientConfig}
-              portalId={portalId}
-              languageCode={languageCode}
-              member={member}
-              setMember={setMember}
-              handleBackToHome={handleBackToHome}
-              handleBackToLogin={handleBackToLogin}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Login;
+import React from 'react';
+import { LoginProps } from './types';
+import LoginComponent from './login-component';
+import ResetPasswordComponent from './reset-password-component';
+import ConfirmComponent from './confirm-component';
+
+const Login: React.FC<LoginProps> = ({
+  tideClientConfig,
+  portalId,
+  languageCode,
+  imageSrc,
+  logo,
+  isMemberConfirmation,
+  isLoginPage,
+  isResetPassword,
+  member,
+  setMember,
+  handleBackToHome,
+  handleBackToLogin
+}) => {
+  return (
+    <div className="login">
+      <div className="login__img__wrapper">
+        <img className="login__img" src={imageSrc ? imageSrc : 'https://cdn.pixabay.com/photo/2022/04/08/06/36/rock-7118843_1280.jpg'} alt="Login" />
+      </div>
+
+      <div className="login__container">
+        <div className="login__card">
+          {logo && <div className="login__logo">{logo}</div>}
+
+          {isLoginPage && (
+            <LoginComponent
+              tideClientConfig={tideClientConfig}
+              portalId={portalId}
+              languageCode={languageCode}
+              member={member}
+              setMember={setMember}
+              handleBackToHome={handleBackToHome}
+              handleBackToLogin={handleBackToLogin}
+            />
+          )}
+          {isResetPassword && (
+            <ResetPasswordComponent
+              tideClientConfig={tideClientConfig}
+              portalId={portalId}
+              languageCode={languageCode}
+              member={member}
+              setMember={setMember}
+              handleBackToHome={handleBackToHome}
+              handleBackToLogin={handleBackToLogin}
+            />
+          )}
+          {isMemberConfirmation && (
+            <ConfirmComponent
+              tideClientConfig={tideClientConfig}
+              portalId={portalId}
+              languageCode={languageCode}
+              member={member}
+              setMember={setMember}
+              handleBackToHome={handleBackToHome}
+              handleBackToLogin={handleBackToLogin}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;