Content Comparison

// Typescript React example
import { memo, ReactElement, useCallback, useState } from 'react';

import { 
  IdvLanguageAvailableLanguage, 
  load, 
  SdkMode, 
  version,
  SdkLoadResult,
  SdkOnSuccessResult,
  SdkOnFailureResult,
  SdkOnCloseResult } from '@ondato-public/idv-sdk';


export const AppNew = memo((): ReactElement => {
  const [onAgeSetupIdidvSetupId, setOnAgeSetupIdsetIdvSetupId] = useState('');

  const [idvId, setIdvId] = useState('');
  const [language, setLanguage] = useState('');

  const [sdkOnAgesdkIdv, setSdkOnAgesetSdkIdv] = useState<SdkLoadResult | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);

  const loadHandlerOnageloadHandler = useCallback(() => {
    try {
      const onAgeidv = load({
        mode: SdkMode.SandboxProduction,
      });

      setSdkOnAgesetSdkIdv(onAgeidv);
      setIsLoaded(true);
    } catch (error) {
      console.warn('OnageSdkLoadFailureIdvSdkLoadFailure', error);
      alert(`OnageSdkLoadFailure`IdvSdkLoadFailure, ${error}`);
    }
  }, []);

  const beginHandlerOnAgebeginHandler = useCallback(async () => {
    try {
      if (sdkOnAgesdkIdv?.onAgeidv.begin) {
 
         await sdkOnAgesdkIdv.onAgeidv.begin({
          onAgeSetupIdidvSetupId: onAgeSetupIdidvSetupId.trim(),
          idvId: idvId.trim(),
          language: language.trim() as IdvLanguageAvailableLanguage,
          onSuccess: (props: SdkOnSuccessResult) => {
            console.log('onSuccess', { idvId: props.id });
            alert(`onSuccess, OnAgeidvId: ${props.id}`);
          },
          onFailure: (props: SdkOnFailureResult) => {
            console.log('onFailure', {
props);             alert(`onFailure, OnAgeidvId: ${props}, reason: ${props}}.id,
              reason: props.reason,
            });
            alert(`onFailure, idvId: ${props.id}, reason: ${props.reason}}`);
          },
          onClose: (props: SdkOnCloseResult) => {
            console.log('onClose ', props.id);
          },
        });
      }
    } catch (error) {
      console.warn('OnAgeSdkBeginFailureIdvSdkBeginFailure', error);
      alert(`OnAgeSdkBeginFailure`IdvSdkBeginFailure, ${error}`);
    }
  }, [sdkOnAge?.onAgeidvId, onAgeSetupIdsdkIdv, idvSetupId, language]);

  const versionHandler = useCallback(() => {
    alert(version());
  }, []);

  const endHandlerOnAgeendHandler = useCallback(() => {
    sdkOnAgesdkIdv?.onAgeidv.end();
  }, [sdkOnAgesdkIdv]);

  return (
    <>
      <button type="button" disabled={isLoaded} onClick={loadHandlerOnageloadHandler}>
        Load OnAgeIDV
      </button>

      <button type="button" onClick={versionHandler}>
        SDK version
      </button>
      <button type="button" disabled={!isLoaded} onClick={beginHandlerOnAgebeginHandler}>
        Begin OnIDV
age       </button>

      <button
        type="button"
        className="end-action"
        onClick={endHandlerOnAgeendHandler}
        disabled={!isLoaded}
      >
        X
      </button>

     <button         type="button"<div className="input-group">
        className="end-action"<input
        onClick={endHandlerOnAge}  type="text"
      disabled={!isLoaded}    placeholder="IDV Setup Id"
>         X value={idvSetupId}
     </button>     onChange={(event)  <div className="input-group"=> setIdvSetupId(event.target.value)}
        />
        <input
          type="text"
          placeholder="OnAge setupIDV Id"
          value={onAgeSetupIdidvId}
          onChange={(event) => setOnAgeSetupIdsetIdvId(event.target.value)}
        />
        <input
          type="text"
          className="short-input"
          placeholder="en-GB (optional)"
          value={language}
          onChange={(event) => setLanguage(event.target.value)}
        />
      </div>
    </>
  );
});

export enum SdkMode {
IdvLanguage as AvailableLanguagesProduction }= from '@idv/utils/idvLanguage';

export { ThemeType as SdkThemeType } from '@idv/utils/common/common.enums';

export enum SdkMode {
  Production = 'Production',
  Sandbox = 'Sandbox',
}

export type 'Production',
  Sandbox = 'Sandbox',
}

export type BackgroundStyle = {
  /**
   * SDK backround opacity.
   * CSS property opacity.
   * Default is 0.9.
   */
  opacity?: number | null;

  /**
   * SDK backround blur.
   * The radius of the blur in px / rem / em / etc.
   * Default is 0.375rem.
   */
  blur?: string | null;
};

export type CustomiseStyleProps = {
  /**
   * SDK backround styles.
   */
  background?: BackgroundStyle | null;

  /**
   * SDK theme.
   * Theme values dark | light.
   * Default is light.
   */
  theme?: SdkThemeType;
};

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="Cache-control"
      content="no-cache, no-store, must-revalidate"
    />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <style>
      html {
        height: 100vh;
        background-color: #b7b7b7;
      }

      body {
        background-positionmargin: center0;
      }

 background-image: url(https://img.freepik.com/free-vector/quiz-background-with-flat-objects_23-2147593080.jpg);
      }        body {
        margin: 0;
      }

      #end-action {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10000001;
      }

      .input-group {
        display: grid;
        margin-top: 1rem;
        max-width: 30rem;
      }

      .input-group > * {
        margin: 1rem;
      }

   </style>   .input-group  <script>#idv-id ~ * {
       window.sdkTest = true; max-width: 7rem;
      }
    </style>
    <script>
      let onAgeSdkidvSdk = null;
      async function loadHandler() {
        try {
          onAgeSdkidvSdk = WebSdkEntry.load({
            mode: 'Sandbox',
          });

          document.getElementById('load-action').disabled = true;
          document.getElementById('begin-action').disabled = false;
          document.getElementById('customise-style-action').disabled = false;
          document.getElementById('end-action').disabled = false;
        } catch (error) {
          console.warn('OnageSdkLoadFailureIdvSdkLoadFailure', error);
          alert(`OnageSdkLoadFailure`IdvSdkLoadFailure, ${error}`);
        }
      }

      async function beginHandler() {
        try {
          if (onAgeSdkidvSdk?.onAgeidv.begin) {
            await onAgeSdkidvSdk.onAgeidv.begin({
              onAgeSetupIdidvSetupId: document.getElementById('idv-setup-id').value.trim(),
              idvId:  document.getElementById('on-ageidv-setup-id')
                .value.trim(),
              language: document.getElementById('onidv-age-language').value.trim(), // IdvLanguage,
              onSuccess: (props) => {
                console.log('onSuccess', { idvId: props.id });
                alert(`onSuccess, OnAgeidvId: ${JSON.stringify(props)props.id}`);
              },
              onFailure: (props) => { {
                console.log('onFailure', {
                  idvId: props.id,
                  reason: props.reason,
                });
                console.log('onFailure', props);alert(
                  alert(`onFailure, OnAgeidvId: ${JSON.stringify(props)}}`props.id}, reason: ${props.reason}}`,
                );
              },
              onClose: (props) => {
                console.log('onClose onAge', props.id);
              },
            });
          }
        } catch (error) {
          console.warn('OnAgeSdkBeginFailureIdvSdkBeginFailure', error);
          alert(`OnAgeSdkBeginFailure`IdvSdkBeginFailure, ${error}`);
        }
      }

      function customiseStyleHandler() {
        onAgeSdkidvSdk?.onAgeidv.customiseStyle({
          background: {
            opacity: 0.12,
       
    blur: '10px',          blur: }'10px',
          theme: 'dark'},
        });
      }

      function endHandler() {
        onAgeSdkidvSdk?.onAgeidv.end();
      }

      function versionHandler() {
        alert(WebSdkEntry.version());
      }
    </script>
  </head>
  <body>
    <button id="load-action" onclick="loadHandler()">Load On Age<IDV</button>
    <button onclick="versionHandler()">On Age SDK>SDK version</button>
    <button
      id="customise-style-action"
      onclick="customiseStyleHandler()"
      disabled
    >
      Customise Style
    </button>
    <button id="begin-action" onclick="beginHandler()" disabled>
      Begin On AgeIDV
    </button>
    <button id="end-action" onclick="endHandler()" disabled>X</button>
    <div class="input-group">
      <input
        id="onidv-age-setup-id"
        type="text"
        placeholder="OnIDV Age Setup Id"
        value=""
      />
      <input id="idv-id" type="text" placeholder="IDV Id" value="" />
      <input
        id="on-ageidv-language"
        type="text"
        placeholder="en-GB (optional)"
        value=""
      />
    </div>
    <script src="../../build/ondato-sdk.2.0.3.min.js"></script>
  </body>
</html>