ouisys-component-library 3.0.81 → 3.0.82

package/dist/PinEntryForm.js

@@ -1,2 +1,2 @@
-import{__read as e}from"tslib";import t,{useEffect as n}from"react";import{B as a}from"./Button-49938e73.js";import"classnames";var i=function(i){var o=i.onChange,l=i.pinMaxLength,r=void 0===l?6:l,m=i.pinMinLength,p=void 0===m?4:m,u=i.renderTopContent,c=i.pinEntryLabel,s=i.placeholder,d=i.buttonLabel,b=i.renderBottomContent,g=i.buttonDisabled,h=i.pageConfigs,v=i.disableButtonIfInvalidPin,f=i.onButtonClick,E=e(t.useState(""),2),C=E[0],L=E[1],N=e(t.useState(!1),2),x=N[0],B=N[1],y=C.length>=p&&C.length<=r;n((function(){o&&o(C)}),[C,o]);return t.createElement("label",{htmlFor:"pin-input"},u,t.createElement("p",{className:"pinEntryLabel"},c),t.createElement("div",{className:"pin-wrapper"},t.createElement("div",{className:"pin-input ".concat(x&&!y?null==h?void 0:h.inputFocusAnimation:"")},t.createElement("div",{className:"pin"}),t.createElement("input",{className:"text-input",type:"text",placeholder:s,value:C,pattern:"[0-9]*",inputMode:"numeric",maxLength:r,minLength:p,autoComplete:"one-time-code",onChange:function(e){return L(e.target.value)}})),t.createElement(a,{id:"pin-submit-button",type:"submit",className:"btn",disabled:g||v&&!y,onClick:function(e){B((function(e){return!e})),f&&y&&f(e)}},d)),b)};export{i as PinEntryForm};
+import{__read as t}from"tslib";import e,{useEffect as n}from"react";import{B as i}from"./Button-49938e73.js";import{F as o}from"./focus-b1f057f5.js";import"classnames";var r=new(function(){function t(){this.storage=window.localStorage}return t.prototype.setItem=function(t,e){this.storage.setItem(t,e)},t.prototype.getItem=function(t){return this.storage.getItem(t)},t.prototype.removeItem=function(t){this.storage.removeItem(t)},t.prototype.updatePinList=function(t){var e=this.getItem("pinList")?JSON.parse(this.getItem("pinList")||"[]"):[];e.includes(t)||(e.push(t),this.setItem("pinList",JSON.stringify(e)))},t.prototype.pinExists=function(t){return(this.getItem("pinList")?JSON.parse(this.getItem("pinList")||"[]"):[]).includes(t)},t.prototype.clearPinList=function(){this.removeItem("pinList")},t.prototype.clear=function(){this.storage.clear()},t}()),a=function(a){var s=a.rds,l=a.onChange,p=a.pinMaxLength,u=void 0===p?6:p,m=a.pinMinLength,c=void 0===m?4:m,d=a.renderTopContent,f=a.pinEntryLabel,g=a.placeholder,h=a.buttonLabel,v=a.renderBottomContent,I=a.buttonDisabled,y=a.pageConfigs,L=a.FormattedMessage,b=a.disableButtonIfInvalidPin,N=a.onButtonClick,E=t(e.useState(""),2),P=E[0],C=E[1],x=t(e.useState(""),2),S=x[0],M=x[1],w=t(e.useState(!1),2),B=w[0],F=w[1],k=S.length>=c&&S.length<=u;n((function(){l&&l(S)}),[S,l]),n((function(){var t;"InvalidPIN"===(null===(t=null==s?void 0:s.error)||void 0===t?void 0:t.errorType)&&r.updatePinList(S)}),[s]);return e.createElement("label",{htmlFor:"pin-input"},d,P?e.createElement("p",null,P," ",(null==L?void 0:L({id:"wrongPinMessage",defaultMessage:"PIN already used. Please enter a different PIN."}))||"PIN already used. Please enter a different PIN."):e.createElement("p",{className:"pinEntryLabel"},f),e.createElement("div",{className:"pin-wrapper"},e.createElement("div",{className:"pin-input ".concat(B&&!k?null==y?void 0:y.inputFocusAnimation:"")},e.createElement("div",{className:"pin"}),e.createElement("input",{className:"text-input",type:"text",placeholder:g,value:S,pattern:"[0-9]*",inputMode:"numeric",maxLength:u,minLength:c,autoComplete:"one-time-code",onChange:function(t){return M(t.target.value)}})),e.createElement(i,{id:"pin-submit-button",type:"submit",className:"btn",disabled:I||b&&!k,onClick:function(t){F((function(t){return!t})),(null==y?void 0:y.isCheckWrongPinReEntry)&&r.pinExists(S)&&(C(S),setTimeout((function(){o.triggerFocusArea()}),100),M(""),1)||N&&k&&N(t)}},h)),v)};export{a as PinEntryForm};
 //# sourceMappingURL=PinEntryForm.js.map

package/dist/PinEntryForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PinEntryForm.js","sources":["../src/PinEntryForm/PinEntryForm.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Button } from '../Button/Button';\nimport { IPinEntryFormProps } from './PinEntryForm.types';\n\nexport const PinEntryForm = (props: IPinEntryFormProps) => {\n  const {\n    onChange,\n    pinMaxLength = 6,\n    pinMinLength = 4,\n    renderTopContent,\n    pinEntryLabel,\n    placeholder,\n    buttonLabel,\n    renderBottomContent,\n    buttonDisabled,\n    pageConfigs,\n    disableButtonIfInvalidPin,\n    onButtonClick\n  } = props;\n\n  const [pin, setPin] = React.useState('');\n  const [isFocused, setIsFocused] = React.useState(false);\n  const isValid = pin.length >= pinMinLength && pin.length <= pinMaxLength;\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(pin);\n    }\n  }, [pin, onChange]);\n\n  const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    setIsFocused((prevState) => !prevState);\n    if (onButtonClick && isValid) {\n      onButtonClick(e);\n    }\n  };\n\n  return (\n    <label htmlFor=\"pin-input\">\n      {renderTopContent}\n      <p className=\"pinEntryLabel\">{pinEntryLabel}</p>\n      <div className=\"pin-wrapper\">\n        <div className={`pin-input ${isFocused && !isValid ? pageConfigs?.inputFocusAnimation : ''}`}>\n          <div className=\"pin\" />\n          <input\n            className=\"text-input\"\n            type=\"text\"\n            placeholder={placeholder}\n            value={pin}\n            pattern=\"[0-9]*\"\n            inputMode=\"numeric\"\n            maxLength={pinMaxLength}\n            minLength={pinMinLength}\n            autoComplete=\"one-time-code\"\n            onChange={(ev) => setPin(ev.target.value)}\n          />\n        </div>\n\n        <Button\n          id=\"pin-submit-button\"\n          type=\"submit\"\n          className=\"btn\"\n          disabled={buttonDisabled || (disableButtonIfInvalidPin && !isValid)}\n          onClick={handleButtonClick}\n        >\n          {buttonLabel}\n        </Button>\n      </div>\n      {renderBottomContent}\n    </label>\n  );\n};\n"],"names":["PinEntryForm","props","onChange","_a","pinMaxLength","_b","pinMinLength","renderTopContent","pinEntryLabel","placeholder","buttonLabel","renderBottomContent","buttonDisabled","pageConfigs","disableButtonIfInvalidPin","onButtonClick","_c","__read","React","useState","pin","setPin","_d","isFocused","setIsFocused","isValid","length","useEffect","createElement","htmlFor","className","concat","inputFocusAnimation","type","value","pattern","inputMode","maxLength","minLength","autoComplete","ev","target","Button","id","disabled","onClick","e","prevState"],"mappings":"gIAIO,IAAMA,EAAe,SAACC,GAEzB,IAAAC,EAYED,EAAKC,SAXPC,EAWEF,EAAKG,aAXPA,OAAe,IAAAD,EAAA,IACfE,EAUEJ,EAAKK,aAVPA,OAAe,IAAAD,EAAA,IACfE,EASEN,EATcM,iBAChBC,EAQEP,EARWO,cACbC,EAOER,EAAKQ,YANPC,EAMET,EAAKS,YALPC,EAKEV,EALiBU,oBACnBC,EAIEX,EAJYW,eACdC,EAGEZ,EAAKY,YAFPC,EAEEb,EAAKa,0BADPC,EACEd,gBAEEe,EAAAC,EAAgBC,EAAMC,SAAS,IAAG,GAAjCC,EAAGJ,EAAA,GAAEK,OACNC,EAAAL,EAA4BC,EAAMC,UAAS,GAAM,GAAhDI,EAASD,EAAA,GAAEE,OACZC,EAAUL,EAAIM,QAAUpB,GAAgBc,EAAIM,QAAUtB,EAE5DuB,GAAU,WACJzB,GACFA,EAASkB,EAEb,GAAG,CAACA,EAAKlB,IAST,OACEgB,EAAAU,cAAA,QAAA,CAAOC,QAAQ,aACZtB,EACDW,EAAAU,cAAA,IAAA,CAAGE,UAAU,iBAAiBtB,GAC9BU,EAAKU,cAAA,MAAA,CAAAE,UAAU,eACbZ,EAAKU,cAAA,MAAA,CAAAE,UAAW,aAAaC,OAAAR,IAAcE,EAAUZ,eAAAA,EAAamB,oBAAsB,KACtFd,EAAKU,cAAA,MAAA,CAAAE,UAAU,QACfZ,EACEU,cAAA,QAAA,CAAAE,UAAU,aACVG,KAAK,OACLxB,YAAaA,EACbyB,MAAOd,EACPe,QAAQ,SACRC,UAAU,UACVC,UAAWjC,EACXkC,UAAWhC,EACXiC,aAAa,gBACbrC,SAAU,SAACsC,GAAO,OAAAnB,EAAOmB,EAAGC,OAAOP,MAAM,KAI7ChB,EAAAU,cAACc,EAAM,CACLC,GAAG,oBACHV,KAAK,SACLH,UAAU,MACVc,SAAUhC,GAAmBE,IAA8BW,EAC3DoB,QAjCkB,SAACC,GACzBtB,GAAa,SAACuB,GAAc,OAACA,CAAS,IAClChC,GAAiBU,GACnBV,EAAc+B,EAElB,GA8BSpC,IAGJC,EAGP"}
+{"version":3,"file":"PinEntryForm.js","sources":["../src/Services/storage.ts","../src/PinEntryForm/PinEntryForm.tsx"],"sourcesContent":["export class StorageService {\n  private storage: Storage;\n\n  constructor() {\n    this.storage = window.localStorage;\n  }\n\n  setItem(key: string, value: string) {\n    this.storage.setItem(key, value);\n  }\n\n  getItem(key: string): string | null {\n    return this.storage.getItem(key);\n  }\n\n  removeItem(key: string) {\n    this.storage.removeItem(key);\n  }\n\n  updatePinList(pin: string) {\n    const pinList = this.getItem('pinList') ? JSON.parse(this.getItem('pinList') || '[]') : [];\n    if (!pinList.includes(pin)) {\n      pinList.push(pin);\n      this.setItem('pinList', JSON.stringify(pinList));\n    }\n  }\n\n  pinExists(pin: string): boolean {\n    const pinList = this.getItem('pinList') ? JSON.parse(this.getItem('pinList') || '[]') : [];\n    return pinList.includes(pin);\n  }\n\n  clearPinList() {\n    this.removeItem('pinList');\n  }\n\n  clear() {\n    this.storage.clear();\n  }\n}\n\nexport const storageService = new StorageService();\n","import React, { useEffect } from 'react';\nimport { Button } from '../Button/Button';\nimport { FocusAreaService } from '../Services/focus';\nimport { storageService } from '../Services/storage';\nimport { IPinEntryFormProps } from './PinEntryForm.types';\n\nexport const PinEntryForm = (props: IPinEntryFormProps) => {\n  const {\n    rds,\n    onChange,\n    pinMaxLength = 6,\n    pinMinLength = 4,\n    renderTopContent,\n    pinEntryLabel,\n    placeholder,\n    buttonLabel,\n    renderBottomContent,\n    buttonDisabled,\n    pageConfigs,\n    FormattedMessage,\n    disableButtonIfInvalidPin,\n    onButtonClick\n  } = props;\n\n  const [wrongPin, setWrongPin] = React.useState('');\n  const [pin, setPin] = React.useState('');\n  const [isFocused, setIsFocused] = React.useState(false);\n  const isValid = pin.length >= pinMinLength && pin.length <= pinMaxLength;\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(pin);\n    }\n  }, [pin, onChange]);\n\n  useEffect(() => {\n    if (rds?.error?.errorType === 'InvalidPIN') {\n      storageService.updatePinList(pin);\n    }\n    //  else {\n    //   storageService.clearPinList();\n    // }\n  }, [rds]);\n\n  const isWrongPinReEntry = () => {\n    if (storageService.pinExists(pin)) {\n      setWrongPin(pin);\n      setTimeout(() => {\n        FocusAreaService.triggerFocusArea();\n      }, 100);\n      setPin('');\n      return true;\n    }\n    return false;\n  };\n\n  const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    setIsFocused((prevState) => !prevState);\n\n    if (pageConfigs?.isCheckWrongPinReEntry && isWrongPinReEntry()) {\n      return;\n    }\n\n    if (onButtonClick && isValid) {\n      onButtonClick(e);\n    }\n  };\n\n  return (\n    <label htmlFor=\"pin-input\">\n      {renderTopContent}\n      {wrongPin ? (\n        <p>\n          {wrongPin}{' '}\n          {FormattedMessage?.({\n            id: 'wrongPinMessage',\n            defaultMessage: `PIN already used. Please enter a different PIN.`\n          }) || `PIN already used. Please enter a different PIN.`}\n        </p>\n      ) : (\n        <p className=\"pinEntryLabel\">{pinEntryLabel}</p>\n      )}\n      <div className=\"pin-wrapper\">\n        <div className={`pin-input ${isFocused && !isValid ? pageConfigs?.inputFocusAnimation : ''}`}>\n          <div className=\"pin\" />\n          <input\n            className=\"text-input\"\n            type=\"text\"\n            placeholder={placeholder}\n            value={pin}\n            pattern=\"[0-9]*\"\n            inputMode=\"numeric\"\n            maxLength={pinMaxLength}\n            minLength={pinMinLength}\n            autoComplete=\"one-time-code\"\n            onChange={(ev) => setPin(ev.target.value)}\n          />\n        </div>\n\n        <Button\n          id=\"pin-submit-button\"\n          type=\"submit\"\n          className=\"btn\"\n          disabled={buttonDisabled || (disableButtonIfInvalidPin && !isValid)}\n          onClick={handleButtonClick}\n        >\n          {buttonLabel}\n        </Button>\n      </div>\n      {renderBottomContent}\n    </label>\n  );\n};\n"],"names":["storageService","StorageService","this","storage","window","localStorage","prototype","setItem","key","value","getItem","removeItem","updatePinList","pin","pinList","JSON","parse","includes","push","stringify","pinExists","clearPinList","clear","PinEntryForm","props","rds","onChange","_a","pinMaxLength","_b","pinMinLength","renderTopContent","pinEntryLabel","placeholder","buttonLabel","renderBottomContent","buttonDisabled","pageConfigs","FormattedMessage","disableButtonIfInvalidPin","onButtonClick","_c","__read","React","useState","wrongPin","setWrongPin","_d","setPin","_e","isFocused","setIsFocused","isValid","length","useEffect","error","errorType","createElement","htmlFor","id","defaultMessage","className","concat","inputFocusAnimation","type","pattern","inputMode","maxLength","minLength","autoComplete","ev","target","Button","disabled","onClick","e","prevState","isCheckWrongPinReEntry","setTimeout","FocusAreaService","triggerFocusArea"],"mappings":"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"}

package/dist/RootWrapper.js

@@ -1,2 +1,2 @@
-import e,{useCallback as a,useEffect as t}from"react";import{P as o}from"./PageConfig-605aa807.js";import"tslib";var n=function(n){var l=n.children,i=n.tracker,r=n.pageConfigs,s=n.focusAreaIds,c=n.setPageConfigs,u=a((function(e){if(console.log("FocusArea divFocus called with id:",e),null==i||i.customEvent(e,"click","form-focus"),"undefined"!=typeof window){var a=document.querySelector("#phone-input"),t=document.querySelector("#pin-input"),o=document.querySelector("#overlay");o&&(o.className="".concat(o.className," show")),a?a.focus():t&&t.focus(),"vibrate"in navigator&&navigator.vibrate([100,30,100,30,100])}}),[i]);return t((function(){var e=new Map;return null==s||s.forEach((function(a){var t=document.querySelector("#".concat(a));if(t){var o=function(){console.log("FocusArea trigger clicked:",a),u(a)};e.set(a,o),t.addEventListener("click",o)}})),function(){null==s||s.forEach((function(a){var t=document.querySelector("#".concat(a)),o=e.get(a);t&&o&&t.removeEventListener("click",o)}))}}),[s,u]),e.createElement("div",{className:"main overlay",id:"overlay","data-strategy":(null==r?void 0:r.strategy)||"pin","data-theme":(null==r?void 0:r.cssTheme)||"zip-folder-theme","data-has-persuasive-area":(null==r?void 0:r.hasPersuasiveArea)||"false","data-has-creative-area":(null==r?void 0:r.hasProductArea)||"true","data-is-centered":(null==r?void 0:r.isSubscriptionAreaCentered)||"false","data-order":(null==r?void 0:r.persuasiveAreaOrder)||"title-subtitle-image","data-subscription-box":(null==r?void 0:r.hasSubscriptionBox)||"false","data-country-code":(null==r?void 0:r.hasCountryCode)||"false","data-country-flag":(null==r?void 0:r.hasCountryFlag)||"false","data-has-content":(null==r?void 0:r.hasContent)||"false","data-legals-bottom":(null==r?void 0:r.hasLegalsBottom)||"false","data-has-mo-button":(null==r?void 0:r.hasMoButton)||"false","data-focused-delay":(null==r?void 0:r.focusedDelay)||"0","data-step-type":(null==r?void 0:r.stepsType)?"vertical":(null==r?void 0:r.stepsType)?"horizontal":"vertical"},e.createElement("div",{style:{display:"flex",flexDirection:"row",height:"100%"}},e.createElement("div",{style:{flex:1}},l),(null==r?void 0:r.showPageConfig)&&e.createElement(o,{pageConfigs:r||{},setPageConfigs:c||function(){console.warn("setPageConfigs function is not provided")}})))};export{n as RootWrapper};
+import e,{useCallback as a,useEffect as t}from"react";import{P as o}from"./PageConfig-605aa807.js";import{F as l}from"./focus-b1f057f5.js";import"tslib";var n=function(n){var i=n.children,r=n.tracker,s=n.pageConfigs,c=n.focusAreaIds,u=n.setPageConfigs,d=a((function(e){console.log("FocusArea divFocus called with id:",e),null==r||r.customEvent(e,"click","form-focus"),l.triggerFocusArea()}),[r]);return t((function(){var e=new Map;return null==c||c.forEach((function(a){var t=document.querySelector("#".concat(a));if(t){var o=function(){console.log("FocusArea trigger clicked:",a),d(a)};e.set(a,o),t.addEventListener("click",o)}})),function(){null==c||c.forEach((function(a){var t=document.querySelector("#".concat(a)),o=e.get(a);t&&o&&t.removeEventListener("click",o)}))}}),[c,d]),e.createElement("div",{className:"main overlay",id:"overlay","data-strategy":(null==s?void 0:s.strategy)||"pin","data-theme":(null==s?void 0:s.cssTheme)||"zip-folder-theme","data-has-persuasive-area":(null==s?void 0:s.hasPersuasiveArea)||"false","data-has-creative-area":(null==s?void 0:s.hasProductArea)||"true","data-is-centered":(null==s?void 0:s.isSubscriptionAreaCentered)||"false","data-order":(null==s?void 0:s.persuasiveAreaOrder)||"title-subtitle-image","data-subscription-box":(null==s?void 0:s.hasSubscriptionBox)||"false","data-country-code":(null==s?void 0:s.hasCountryCode)||"false","data-country-flag":(null==s?void 0:s.hasCountryFlag)||"false","data-has-content":(null==s?void 0:s.hasContent)||"false","data-legals-bottom":(null==s?void 0:s.hasLegalsBottom)||"false","data-has-mo-button":(null==s?void 0:s.hasMoButton)||"false","data-focused-delay":(null==s?void 0:s.focusedDelay)||"0","data-step-type":(null==s?void 0:s.stepsType)?"vertical":(null==s?void 0:s.stepsType)?"horizontal":"vertical"},e.createElement("div",{style:{display:"flex",flexDirection:"row",height:"100%"}},e.createElement("div",{style:{flex:1}},i),(null==s?void 0:s.showPageConfig)&&e.createElement(o,{pageConfigs:s||{},setPageConfigs:u||function(){console.warn("setPageConfigs function is not provided")}})))};export{n as RootWrapper};
 //# sourceMappingURL=RootWrapper.js.map

package/dist/RootWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"RootWrapper.js","sources":["../src/RootWrapper/RootWrapper.tsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react';\nimport { PageConfig } from '../PageConfig/PageConfig';\nimport { IRootWrapperProps } from './RootWrapper.types';\n\nexport const RootWrapper = ({ children, tracker, pageConfigs, focusAreaIds, setPageConfigs }: IRootWrapperProps) => {\n  const divFocus = useCallback(\n    (id: string) => {\n      // eslint-disable-next-line no-console\n      console.log('FocusArea divFocus called with id:', id);\n\n      tracker?.customEvent(id, 'click', 'form-focus');\n\n      if (typeof window !== 'undefined') {\n        const phoneInput = document.querySelector('#phone-input') as HTMLInputElement;\n        const pinInput = document.querySelector('#pin-input') as HTMLInputElement;\n\n        const overlay = document.querySelector('#overlay') as HTMLElement;\n        if (overlay) {\n          overlay.className = `${overlay.className} show`;\n        }\n\n        if (phoneInput) {\n          phoneInput.focus();\n        } else if (pinInput) {\n          pinInput.focus();\n        }\n        // Vibrate if available\n        if ('vibrate' in navigator) {\n          navigator.vibrate([100, 30, 100, 30, 100]);\n        }\n      }\n    },\n    [tracker]\n  );\n\n  useEffect(() => {\n    const eventHandlers = new Map<string, () => void>();\n\n    focusAreaIds?.forEach((trigger) => {\n      const element = document.querySelector(`#${trigger}`);\n\n      if (element) {\n        const handler = () => {\n          // eslint-disable-next-line no-console\n          console.log('FocusArea trigger clicked:', trigger);\n          divFocus(trigger);\n        };\n        eventHandlers.set(trigger, handler);\n        element.addEventListener('click', handler);\n      }\n    });\n\n    return () => {\n      focusAreaIds?.forEach((trigger) => {\n        const element = document.querySelector(`#${trigger}`);\n        const handler = eventHandlers.get(trigger);\n        if (element && handler) {\n          element.removeEventListener('click', handler);\n        }\n      });\n    };\n  }, [focusAreaIds, divFocus]);\n\n  return (\n    <div\n      className=\"main overlay\"\n      id=\"overlay\"\n      data-strategy={pageConfigs?.strategy || 'pin'}\n      data-theme={pageConfigs?.cssTheme || 'zip-folder-theme'}\n      data-has-persuasive-area={pageConfigs?.hasPersuasiveArea || 'false'}\n      data-has-creative-area={pageConfigs?.hasProductArea || 'true'}\n      data-is-centered={pageConfigs?.isSubscriptionAreaCentered || 'false'}\n      data-order={pageConfigs?.persuasiveAreaOrder || 'title-subtitle-image'}\n      data-subscription-box={pageConfigs?.hasSubscriptionBox || 'false'}\n      data-country-code={pageConfigs?.hasCountryCode || 'false'}\n      data-country-flag={pageConfigs?.hasCountryFlag || 'false'}\n      data-has-content={pageConfigs?.hasContent || 'false'}\n      data-legals-bottom={pageConfigs?.hasLegalsBottom || 'false'}\n      data-has-mo-button={pageConfigs?.hasMoButton || 'false'}\n      data-focused-delay={pageConfigs?.focusedDelay || '0'}\n      data-step-type={pageConfigs?.stepsType ? 'vertical' : pageConfigs?.stepsType ? 'horizontal' : 'vertical'}\n    >\n      <div style={{ display: 'flex', flexDirection: 'row', height: '100%' }}>\n        <div style={{ flex: 1 }}>{children}</div>\n        {pageConfigs?.showPageConfig && (\n          <PageConfig\n            pageConfigs={pageConfigs || {}}\n            setPageConfigs={\n              setPageConfigs ||\n              (() => {\n                // eslint-disable-next-line no-console\n                console.warn('setPageConfigs function is not provided');\n              })\n            }\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["RootWrapper","_a","children","tracker","pageConfigs","focusAreaIds","setPageConfigs","divFocus","useCallback","id","console","log","customEvent","window","phoneInput","document","querySelector","pinInput","overlay","className","concat","focus","navigator","vibrate","useEffect","eventHandlers","Map","forEach","trigger","element","handler","set","addEventListener","get","removeEventListener","React","createElement","strategy","cssTheme","hasPersuasiveArea","hasProductArea","isSubscriptionAreaCentered","persuasiveAreaOrder","hasSubscriptionBox","hasCountryCode","hasCountryFlag","hasContent","hasLegalsBottom","hasMoButton","focusedDelay","stepsType","style","display","flexDirection","height","flex","showPageConfig","PageConfig","warn"],"mappings":"iHAIO,IAAMA,EAAc,SAACC,GAAE,IAAAC,EAAQD,EAAAC,SAAEC,EAAOF,EAAAE,QAAEC,EAAWH,EAAAG,YAAEC,EAAYJ,EAAAI,aAAEC,EAAcL,EAAAK,eAClFC,EAAWC,GACf,SAACC,GAMC,GAJAC,QAAQC,IAAI,qCAAsCF,GAElDN,SAAAA,EAASS,YAAYH,EAAI,QAAS,cAEZ,oBAAXI,OAAwB,CACjC,IAAMC,EAAaC,SAASC,cAAc,gBACpCC,EAAWF,SAASC,cAAc,cAElCE,EAAUH,SAASC,cAAc,YACnCE,IACFA,EAAQC,UAAY,GAAAC,OAAGF,EAAQC,oBAG7BL,EACFA,EAAWO,QACFJ,GACTA,EAASI,QAGP,YAAaC,WACfA,UAAUC,QAAQ,CAAC,IAAK,GAAI,IAAK,GAAI,KAExC,CACH,GACA,CAACpB,IA+BH,OA5BAqB,GAAU,WACR,IAAMC,EAAgB,IAAIC,IAgB1B,OAdArB,SAAAA,EAAcsB,SAAQ,SAACC,GACrB,IAAMC,EAAUd,SAASC,cAAc,IAAII,OAAAQ,IAE3C,GAAIC,EAAS,CACX,IAAMC,EAAU,WAEdpB,QAAQC,IAAI,6BAA8BiB,GAC1CrB,EAASqB,EACX,EACAH,EAAcM,IAAIH,EAASE,GAC3BD,EAAQG,iBAAiB,QAASF,EACnC,CACH,IAEO,WACLzB,SAAAA,EAAcsB,SAAQ,SAACC,GACrB,IAAMC,EAAUd,SAASC,cAAc,IAAII,OAAAQ,IACrCE,EAAUL,EAAcQ,IAAIL,GAC9BC,GAAWC,GACbD,EAAQK,oBAAoB,QAASJ,EAEzC,GACF,CACF,GAAG,CAACzB,EAAcE,IAGhB4B,EACEC,cAAA,MAAA,CAAAjB,UAAU,eACVV,GAAG,2BACYL,aAAW,EAAXA,EAAaiC,WAAY,MAAK,cACjCjC,aAAW,EAAXA,EAAakC,WAAY,mBAAkB,4BAC7BlC,aAAA,EAAAA,EAAamC,oBAAqB,QACpC,0BAAAnC,aAAA,EAAAA,EAAaoC,iBAAkB,OACrC,oBAAApC,eAAAA,EAAaqC,6BAA8B,sBACjDrC,aAAW,EAAXA,EAAasC,sBAAuB,uBAAsB,yBAC/CtC,aAAA,EAAAA,EAAauC,qBAAsB,QACvC,qBAAAvC,aAAA,EAAAA,EAAawC,iBAAkB,QAC/B,qBAAAxC,eAAAA,EAAayC,iBAAkB,4BAChCzC,aAAW,EAAXA,EAAa0C,aAAc,QAAO,sBAChC1C,aAAA,EAAAA,EAAa2C,kBAAmB,QAChC,sBAAA3C,eAAAA,EAAa4C,cAAe,QAC5B,sBAAA5C,eAAAA,EAAa6C,eAAgB,sBACjC7C,aAAW,EAAXA,EAAa8C,WAAY,YAAa9C,aAAW,EAAXA,EAAa8C,WAAY,aAAe,YAE9Ff,EAAAC,cAAA,MAAA,CAAKe,MAAO,CAAEC,QAAS,OAAQC,cAAe,MAAOC,OAAQ,SAC3DnB,EAAKC,cAAA,MAAA,CAAAe,MAAO,CAAEI,KAAM,IAAMrD,IACzBE,aAAW,EAAXA,EAAaoD,iBACZrB,EAAAC,cAACqB,EACC,CAAArD,YAAaA,GAAe,CAAA,EAC5BE,eACEA,cAGEI,QAAQgD,KAAK,0CACd,KAOf"}
+{"version":3,"file":"RootWrapper.js","sources":["../src/RootWrapper/RootWrapper.tsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react';\nimport { PageConfig } from '../PageConfig/PageConfig';\nimport { FocusAreaService } from '../Services/focus';\nimport { IRootWrapperProps } from './RootWrapper.types';\n\nexport const RootWrapper = ({ children, tracker, pageConfigs, focusAreaIds, setPageConfigs }: IRootWrapperProps) => {\n  const divFocus = useCallback(\n    (id: string) => {\n      // eslint-disable-next-line no-console\n      console.log('FocusArea divFocus called with id:', id);\n\n      tracker?.customEvent(id, 'click', 'form-focus');\n\n      FocusAreaService.triggerFocusArea();\n    },\n    [tracker]\n  );\n\n  useEffect(() => {\n    const eventHandlers = new Map<string, () => void>();\n\n    focusAreaIds?.forEach((trigger) => {\n      const element = document.querySelector(`#${trigger}`);\n\n      if (element) {\n        const handler = () => {\n          // eslint-disable-next-line no-console\n          console.log('FocusArea trigger clicked:', trigger);\n          divFocus(trigger);\n        };\n        eventHandlers.set(trigger, handler);\n        element.addEventListener('click', handler);\n      }\n    });\n\n    return () => {\n      focusAreaIds?.forEach((trigger) => {\n        const element = document.querySelector(`#${trigger}`);\n        const handler = eventHandlers.get(trigger);\n        if (element && handler) {\n          element.removeEventListener('click', handler);\n        }\n      });\n    };\n  }, [focusAreaIds, divFocus]);\n\n  return (\n    <div\n      className=\"main overlay\"\n      id=\"overlay\"\n      data-strategy={pageConfigs?.strategy || 'pin'}\n      data-theme={pageConfigs?.cssTheme || 'zip-folder-theme'}\n      data-has-persuasive-area={pageConfigs?.hasPersuasiveArea || 'false'}\n      data-has-creative-area={pageConfigs?.hasProductArea || 'true'}\n      data-is-centered={pageConfigs?.isSubscriptionAreaCentered || 'false'}\n      data-order={pageConfigs?.persuasiveAreaOrder || 'title-subtitle-image'}\n      data-subscription-box={pageConfigs?.hasSubscriptionBox || 'false'}\n      data-country-code={pageConfigs?.hasCountryCode || 'false'}\n      data-country-flag={pageConfigs?.hasCountryFlag || 'false'}\n      data-has-content={pageConfigs?.hasContent || 'false'}\n      data-legals-bottom={pageConfigs?.hasLegalsBottom || 'false'}\n      data-has-mo-button={pageConfigs?.hasMoButton || 'false'}\n      data-focused-delay={pageConfigs?.focusedDelay || '0'}\n      data-step-type={pageConfigs?.stepsType ? 'vertical' : pageConfigs?.stepsType ? 'horizontal' : 'vertical'}\n    >\n      <div style={{ display: 'flex', flexDirection: 'row', height: '100%' }}>\n        <div style={{ flex: 1 }}>{children}</div>\n        {pageConfigs?.showPageConfig && (\n          <PageConfig\n            pageConfigs={pageConfigs || {}}\n            setPageConfigs={\n              setPageConfigs ||\n              (() => {\n                // eslint-disable-next-line no-console\n                console.warn('setPageConfigs function is not provided');\n              })\n            }\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["RootWrapper","_a","children","tracker","pageConfigs","focusAreaIds","setPageConfigs","divFocus","useCallback","id","console","log","customEvent","FocusAreaService","triggerFocusArea","useEffect","eventHandlers","Map","forEach","trigger","element","document","querySelector","concat","handler","set","addEventListener","get","removeEventListener","React","createElement","className","strategy","cssTheme","hasPersuasiveArea","hasProductArea","isSubscriptionAreaCentered","persuasiveAreaOrder","hasSubscriptionBox","hasCountryCode","hasCountryFlag","hasContent","hasLegalsBottom","hasMoButton","focusedDelay","stepsType","style","display","flexDirection","height","flex","showPageConfig","PageConfig","warn"],"mappings":"yJAKO,IAAMA,EAAc,SAACC,GAAE,IAAAC,EAAQD,EAAAC,SAAEC,EAAOF,EAAAE,QAAEC,EAAWH,EAAAG,YAAEC,EAAYJ,EAAAI,aAAEC,EAAcL,EAAAK,eAClFC,EAAWC,GACf,SAACC,GAECC,QAAQC,IAAI,qCAAsCF,GAElDN,SAAAA,EAASS,YAAYH,EAAI,QAAS,cAElCI,EAAiBC,kBACnB,GACA,CAACX,IA+BH,OA5BAY,GAAU,WACR,IAAMC,EAAgB,IAAIC,IAgB1B,OAdAZ,SAAAA,EAAca,SAAQ,SAACC,GACrB,IAAMC,EAAUC,SAASC,cAAc,IAAIC,OAAAJ,IAE3C,GAAIC,EAAS,CACX,IAAMI,EAAU,WAEdd,QAAQC,IAAI,6BAA8BQ,GAC1CZ,EAASY,EACX,EACAH,EAAcS,IAAIN,EAASK,GAC3BJ,EAAQM,iBAAiB,QAASF,EACnC,CACH,IAEO,WACLnB,SAAAA,EAAca,SAAQ,SAACC,GACrB,IAAMC,EAAUC,SAASC,cAAc,IAAIC,OAAAJ,IACrCK,EAAUR,EAAcW,IAAIR,GAC9BC,GAAWI,GACbJ,EAAQQ,oBAAoB,QAASJ,EAEzC,GACF,CACF,GAAG,CAACnB,EAAcE,IAGhBsB,EACEC,cAAA,MAAA,CAAAC,UAAU,eACVtB,GAAG,2BACYL,aAAW,EAAXA,EAAa4B,WAAY,MAAK,cACjC5B,aAAW,EAAXA,EAAa6B,WAAY,mBAAkB,4BAC7B7B,aAAA,EAAAA,EAAa8B,oBAAqB,QACpC,0BAAA9B,aAAA,EAAAA,EAAa+B,iBAAkB,OACrC,oBAAA/B,eAAAA,EAAagC,6BAA8B,sBACjDhC,aAAW,EAAXA,EAAaiC,sBAAuB,uBAAsB,yBAC/CjC,aAAA,EAAAA,EAAakC,qBAAsB,QACvC,qBAAAlC,aAAA,EAAAA,EAAamC,iBAAkB,QAC/B,qBAAAnC,eAAAA,EAAaoC,iBAAkB,4BAChCpC,aAAW,EAAXA,EAAaqC,aAAc,QAAO,sBAChCrC,aAAA,EAAAA,EAAasC,kBAAmB,QAChC,sBAAAtC,eAAAA,EAAauC,cAAe,QAC5B,sBAAAvC,eAAAA,EAAawC,eAAgB,sBACjCxC,aAAW,EAAXA,EAAayC,WAAY,YAAazC,aAAW,EAAXA,EAAayC,WAAY,aAAe,YAE9FhB,EAAAC,cAAA,MAAA,CAAKgB,MAAO,CAAEC,QAAS,OAAQC,cAAe,MAAOC,OAAQ,SAC3DpB,EAAKC,cAAA,MAAA,CAAAgB,MAAO,CAAEI,KAAM,IAAMhD,IACzBE,aAAW,EAAXA,EAAa+C,iBACZtB,EAAAC,cAACsB,EACC,CAAAhD,YAAaA,GAAe,CAAA,EAC5BE,eACEA,cAGEI,QAAQ2C,KAAK,0CACd,KAOf"}

package/dist/focus-b1f057f5.js

@@ -0,0 +1,2 @@
+var e=function(){function e(){}return e.triggerFocusArea=function(){if("undefined"!=typeof window){var e=document.querySelector("#phone-input"),n=document.querySelector("#pin-input"),o=document.querySelector("#overlay");o&&(o.className="".concat(o.className," show")),e?e.focus():n&&n.focus(),"vibrate"in navigator&&navigator.vibrate([100,30,100,30,100])}},e}();export{e as F};
+//# sourceMappingURL=focus-b1f057f5.js.map

package/dist/focus-b1f057f5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-b1f057f5.js","sources":["../src/Services/focus.ts"],"sourcesContent":["export class FocusAreaService {\n  public static triggerFocusArea(): void {\n    if (typeof window !== 'undefined') {\n      const phoneInput = document.querySelector('#phone-input') as HTMLInputElement;\n      const pinInput = document.querySelector('#pin-input') as HTMLInputElement;\n\n      const overlay = document.querySelector('#overlay') as HTMLElement;\n      if (overlay) {\n        overlay.className = `${overlay.className} show`;\n      }\n\n      if (phoneInput) {\n        phoneInput.focus();\n      } else if (pinInput) {\n        pinInput.focus();\n      }\n      // Vibrate if available\n      if ('vibrate' in navigator) {\n        navigator.vibrate([100, 30, 100, 30, 100]);\n      }\n    }\n  }\n}\n"],"names":["FocusAreaService","triggerFocusArea","window","phoneInput","document","querySelector","pinInput","overlay","className","concat","focus","navigator","vibrate"],"mappings":"AAAA,IAAAA,EAAA,WAAA,SAAAA,IAsBC,CAAD,OArBgBA,EAAAC,iBAAd,WACE,GAAsB,oBAAXC,OAAwB,CACjC,IAAMC,EAAaC,SAASC,cAAc,gBACpCC,EAAWF,SAASC,cAAc,cAElCE,EAAUH,SAASC,cAAc,YACnCE,IACFA,EAAQC,UAAY,GAAAC,OAAGF,EAAQC,oBAG7BL,EACFA,EAAWO,QACFJ,GACTA,EAASI,QAGP,YAAaC,WACfA,UAAUC,QAAQ,CAAC,IAAK,GAAI,IAAK,GAAI,KAExC,GAEJZ,CAAD"}

package/dist/types/PinEntryForm/PinEntryForm.types.d.ts

@@ -1,6 +1,6 @@
-import { ITracker, IPageConfigs } from '../custom-types.js';
+import { ICommonModel, ITracker } from '../custom-types.js';
 
-interface IPinEntryFormProps {
+interface IPinEntryFormProps extends ICommonModel {
     locale?: string;
     pinMaxLength?: number;
     pinMinLength?: number;
@@ -8,7 +8,6 @@ interface IPinEntryFormProps {
     buttonLabel: string;
     placeholder?: string;
     tracker?: ITracker;
-    pageConfigs?: IPageConfigs;
     buttonDisabled?: boolean;
     disableButtonIfInvalidPin?: boolean;
     renderTopContent?: React.ReactNode;

package/dist/types/custom-types.d.ts

@@ -53,6 +53,7 @@ interface IPageConfigs {
     isShowConsentCookie?: boolean;
     isShowLanguageSwitcher?: boolean;
     isDisableButtonIfInvalid?: boolean;
+    isCheckWrongPinReEntry?: boolean;
     isShowMenu?: boolean;
     forceLocale?: string;
     cssTheme?: string;
@@ -80,6 +81,7 @@ interface ICommonModel {
     locale?: string;
     legals?: ILegals[];
     className?: string;
+    rds?: any;
     FormattedMessage?: (props: {
         id: string;
         defaultMessage: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ouisys-component-library",
-  "version": "3.0.81",
+  "version": "3.0.82",
   "description": "Ouisys Components",
   "main": "dist/index.js",
   "directories": "dist dev-tools",