ouisys-component-library 3.0.80 → 3.0.81
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/PhoneEntryForm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__read as e}from"tslib";import n,{useState as t,useRef as o,useEffect as i}from"react";import{B as s}from"./Button-49938e73.js";import{M as l}from"./PhoneInput-a097fd14.js";import{T as a}from"./TermsAcceptanceCheck-30b2ee2c.js";import"classnames";import"awesome-phonenumber";import"./ExtraDisclaimers-b387e4f3.js";var c=function(c){var r=c.phoneInputRef,
|
|
1
|
+
import{__read as e}from"tslib";import n,{useState as t,useRef as o,useEffect as i}from"react";import{B as s}from"./Button-49938e73.js";import{M as l}from"./PhoneInput-a097fd14.js";import{T as a}from"./TermsAcceptanceCheck-30b2ee2c.js";import"classnames";import"awesome-phonenumber";import"./ExtraDisclaimers-b387e4f3.js";var c=function(c){var r=c.phoneInputRef,u=c.countryCode,m=c.msisdnPrefix,d=c.msisdn,p=c.locale,f=c.legals,h=c.setMsisdn,b=c.onChange,C=c.tracker;c.FormattedMessage;var v=c.toolTipLabel,k=c.renderTopContent,E=c.msisdnLabel,g=c.placeholder,M=c.buttonLabel,S=c.buttonLabel2,w=c.renderBottomContent,B=c.buttonDisabled,N=c.pageConfigs,x=c.msisdnLengthToValidate,T=void 0===x?5:x,F=c.onButtonClick,I=e(t(!1),2),y=I[0],D=I[1],L=e(n.useState(!1),2),P=L[0],j=L[1],V=e(t(!1),2),A=V[0],Y=V[1],R=e(t(!0),2),K=R[0],O=R[1],W=e(t(!1),2),q=W[0],z=W[1],G=e(t(d),2);G[0];var H=G[1],J=o(null),Q=e(t(!1),2),U=Q[0],X=Q[1],Z=e(t(!1),2),$=Z[0],_=Z[1];i((function(){d||h(m||""),d&&d.length>=T&&(D(!0),z(!0),Y(!A))}),[m]);return n.createElement("label",{htmlFor:"phone-input"},k,A&&!y?n.createElement("div",{className:"label-msisdn tooltip"},v):n.createElement(n.Fragment,null),K?n.createElement("div",{id:"label-msisdn",className:"label-msisdn"},E):null,n.createElement("div",{className:"msisdn-wrapper ".concat(P&&!y?null==N?void 0:N.inputFocusAnimation:""),"data-attr":"has-subscription-box",onClick:function(){window.innerWidth<=640&&(null==N?void 0:N.hasTooltip)&&(Y(!0),O(!1))}},n.createElement(l,{showFlag:!0,showMobileIcon:!0,showError:!1,tracker:C,inputElementRef:r||J,placeholder:g||"",msisdn:d,countryCode:u||"MY",onChange:function(e){h(e.msisdn),D(e.isValid),H(e.internationalNumber),null==b||b(e),e.isValid&&(null==N?void 0:N.isCheckConsentCheckBoxOnValid)&&_(!0)},onKeyPress:function(){!q&&d.length>=T&&z(!0)},onPaste:function(){q||z(!0),setTimeout((function(){null==C||C.customEvent("MSISDN-State","copypaste","MsisdnPasted",{msisdn:d})}),0)},onBlur:function(){!q&&d.length>=T&&(z(!0),null==C||C.customEvent("MSISDN-State","autofill","AutoFill",{msisdn:d}))},onFocus:function(){},onClickCheckMark:function(){},onClickErrorCheckMark:function(){}})),n.createElement(s,{id:"msisdn-submit-button",type:"submit",className:"btn",disabled:B||(null==N?void 0:N.isDisableButtonIfInvalid)&&!y,onClick:function(e){!function(e){if(!$&&(null==N?void 0:N.isShowConsentCheckBox))return e.preventDefault(),void X(!0);X(!1),j((function(e){return!e})),F&&y&&F(e)}(e)}},M,S&&n.createElement("p",{className:"msisdn-secondary-label"},S)),(null==N?void 0:N.isShowConsentCheckBox)&&n.createElement(a,{checked:$,locale:p||"en",legals:f,confirmText:"YES",className:"service-".concat(process.env.defaultService),showModal:U,onCheckedChange:function(){_(!$)},onClickYes:function(e){_(!0),X(!1),F(e)}}),w)};export{c as PhoneEntryForm};
|
|
2
2
|
//# sourceMappingURL=PhoneEntryForm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneEntryForm.js","sources":["../src/PhoneEntryForm/PhoneEntryForm.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Button } from '../Button/Button';\nimport PhoneInput from '../PhoneInput';\nimport { TermsAcceptanceCheck } from '../TermsAcceptanceCheck/TermsAcceptanceCheck';\nimport { IPhoneEntryFormProps } from './PhoneEntryForm.types';\n\nexport const PhoneEntryForm = (props: IPhoneEntryFormProps) => {\n const {\n phoneInputRef,\n countryCode,\n msisdnPrefix,\n msisdn,\n locale,\n legals,\n setMsisdn,\n onChange,\n tracker,\n FormattedMessage,\n toolTipLabel,\n renderTopContent,\n msisdnLabel,\n placeholder,\n buttonLabel,\n buttonLabel2,\n renderBottomContent,\n buttonDisabled,\n pageConfigs,\n msisdnLengthToValidate = 5,\n onButtonClick\n } = props;\n\n const [isValid, setIsValid] = useState(false);\n const [isFocused, setIsFocused] = React.useState(false);\n const [isTooltipVisible, setIsTooltipVisible] = useState(false);\n const [isLabelVisible, setIsLabelVisible] = useState(true);\n const [isMsisdnFilled, setIsMsisdnFilled] = useState(false);\n const [internationalNumber, setInternationalNumber] = useState<string>(msisdn);\n const defaultInputRef = useRef<HTMLInputElement>(null);\n const [showModal, setShowModal] = useState<boolean>(false);\n const [checked, setChecked] = useState<boolean>(false);\n\n useEffect(() => {\n if (!msisdn) {\n setMsisdn(msisdnPrefix || '');\n }\n if (msisdn && msisdn.length >= msisdnLengthToValidate) {\n setIsValid(true);\n setIsMsisdnFilled(true);\n setIsTooltipVisible(!isTooltipVisible);\n }\n }, [msisdnPrefix]);\n\n const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!checked && pageConfigs?.
|
|
1
|
+
{"version":3,"file":"PhoneEntryForm.js","sources":["../src/PhoneEntryForm/PhoneEntryForm.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Button } from '../Button/Button';\nimport PhoneInput from '../PhoneInput';\nimport { TermsAcceptanceCheck } from '../TermsAcceptanceCheck/TermsAcceptanceCheck';\nimport { IPhoneEntryFormProps } from './PhoneEntryForm.types';\n\nexport const PhoneEntryForm = (props: IPhoneEntryFormProps) => {\n const {\n phoneInputRef,\n countryCode,\n msisdnPrefix,\n msisdn,\n locale,\n legals,\n setMsisdn,\n onChange,\n tracker,\n FormattedMessage,\n toolTipLabel,\n renderTopContent,\n msisdnLabel,\n placeholder,\n buttonLabel,\n buttonLabel2,\n renderBottomContent,\n buttonDisabled,\n pageConfigs,\n msisdnLengthToValidate = 5,\n onButtonClick\n } = props;\n\n const [isValid, setIsValid] = useState(false);\n const [isFocused, setIsFocused] = React.useState(false);\n const [isTooltipVisible, setIsTooltipVisible] = useState(false);\n const [isLabelVisible, setIsLabelVisible] = useState(true);\n const [isMsisdnFilled, setIsMsisdnFilled] = useState(false);\n const [internationalNumber, setInternationalNumber] = useState<string>(msisdn);\n const defaultInputRef = useRef<HTMLInputElement>(null);\n const [showModal, setShowModal] = useState<boolean>(false);\n const [checked, setChecked] = useState<boolean>(false);\n\n useEffect(() => {\n if (!msisdn) {\n setMsisdn(msisdnPrefix || '');\n }\n if (msisdn && msisdn.length >= msisdnLengthToValidate) {\n setIsValid(true);\n setIsMsisdnFilled(true);\n setIsTooltipVisible(!isTooltipVisible);\n }\n }, [msisdnPrefix]);\n\n const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!checked && pageConfigs?.isShowConsentCheckBox) {\n e.preventDefault();\n setShowModal(true);\n return;\n }\n setShowModal(false);\n\n setIsFocused((prevState) => !prevState);\n if (onButtonClick && isValid) {\n onButtonClick(e);\n }\n };\n\n const handleTooltipVisibility = () => {\n if (window.innerWidth <= 640 && pageConfigs?.hasTooltip) {\n setIsTooltipVisible(true);\n setIsLabelVisible(false);\n }\n };\n\n return (\n <label htmlFor=\"phone-input\">\n {renderTopContent}\n {isTooltipVisible && !isValid ? <div className=\"label-msisdn tooltip\">{toolTipLabel}</div> : <></>}\n\n {isLabelVisible ? (\n <div id=\"label-msisdn\" className=\"label-msisdn\">\n {msisdnLabel}\n </div>\n ) : null}\n\n <div\n className={`msisdn-wrapper ${isFocused && !isValid ? pageConfigs?.inputFocusAnimation : ''}`}\n data-attr=\"has-subscription-box\"\n onClick={handleTooltipVisibility}\n >\n <PhoneInput\n showFlag\n showMobileIcon\n showError={false}\n tracker={tracker}\n inputElementRef={phoneInputRef || defaultInputRef}\n placeholder={placeholder || ''}\n msisdn={msisdn}\n countryCode={countryCode || 'MY'} // Assuming default country code is MY, can be made dynamic\n onChange={(ev: any) => {\n setMsisdn(ev.msisdn);\n setIsValid(ev.isValid);\n setInternationalNumber(ev.internationalNumber);\n onChange?.(ev);\n\n if (ev.isValid && pageConfigs?.isCheckConsentCheckBoxOnValid) {\n setChecked(true);\n }\n }}\n onKeyPress={() => {\n if (!isMsisdnFilled && msisdn.length >= msisdnLengthToValidate) {\n setIsMsisdnFilled(true);\n }\n }}\n onPaste={() => {\n if (!isMsisdnFilled) {\n setIsMsisdnFilled(true);\n }\n setTimeout(() => {\n tracker?.customEvent('MSISDN-State', 'copypaste', 'MsisdnPasted', {\n msisdn\n });\n }, 0);\n }}\n onBlur={() => {\n if (!isMsisdnFilled && msisdn.length >= msisdnLengthToValidate) {\n setIsMsisdnFilled(true);\n tracker?.customEvent('MSISDN-State', 'autofill', 'AutoFill', {\n msisdn\n });\n }\n }}\n onFocus={() => {\n // Handle focus event\n }}\n onClickCheckMark={() => {\n // Handle check mark click\n }}\n onClickErrorCheckMark={() => {\n // Handle error check mark click\n }}\n />\n </div>\n\n <Button\n id=\"msisdn-submit-button\"\n type=\"submit\"\n className=\"btn\"\n disabled={buttonDisabled || (pageConfigs?.isDisableButtonIfInvalid && !isValid)}\n onClick={(ev) => {\n handleButtonClick(ev);\n }}\n >\n {buttonLabel}\n {buttonLabel2 && <p className=\"msisdn-secondary-label\">{buttonLabel2}</p>}\n </Button>\n\n {pageConfigs?.isShowConsentCheckBox && (\n <TermsAcceptanceCheck\n checked={checked}\n locale={locale || 'en'}\n legals={legals}\n confirmText=\"YES\"\n className={`service-${process.env.defaultService}`}\n showModal={showModal}\n onCheckedChange={() => {\n setChecked(!checked);\n }}\n onClickYes={(e) => {\n setChecked(true);\n setShowModal(false);\n onButtonClick(e);\n }}\n />\n )}\n\n {renderBottomContent}\n </label>\n );\n};\n"],"names":["PhoneEntryForm","props","phoneInputRef","countryCode","msisdnPrefix","msisdn","locale","legals","setMsisdn","onChange","tracker","FormattedMessage","toolTipLabel","renderTopContent","msisdnLabel","placeholder","buttonLabel","buttonLabel2","renderBottomContent","buttonDisabled","pageConfigs","_a","msisdnLengthToValidate","onButtonClick","_b","__read","useState","isValid","setIsValid","_c","React","isFocused","setIsFocused","_d","isTooltipVisible","setIsTooltipVisible","_e","isLabelVisible","setIsLabelVisible","_f","isMsisdnFilled","setIsMsisdnFilled","_g","setInternationalNumber","defaultInputRef","useRef","_h","showModal","setShowModal","_j","checked","setChecked","useEffect","length","createElement","htmlFor","className","Fragment","id","concat","inputFocusAnimation","onClick","window","innerWidth","hasTooltip","PhoneInput","showFlag","showMobileIcon","showError","inputElementRef","ev","internationalNumber","isCheckConsentCheckBoxOnValid","onKeyPress","onPaste","setTimeout","customEvent","onBlur","onFocus","onClickCheckMark","onClickErrorCheckMark","Button","type","disabled","isDisableButtonIfInvalid","e","isShowConsentCheckBox","preventDefault","prevState","handleButtonClick","TermsAcceptanceCheck","confirmText","process","env","defaultService","onCheckedChange","onClickYes"],"mappings":"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"}
|
|
@@ -45,8 +45,8 @@ interface IPageConfigs {
|
|
|
45
45
|
isShowTestimonials?: boolean;
|
|
46
46
|
isShowRefundPolicy?: boolean;
|
|
47
47
|
isShowUnsubscription?: boolean;
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
isShowConsentCheckBox?: boolean;
|
|
49
|
+
isCheckConsentCheckBoxOnValid?: boolean;
|
|
50
50
|
isShowTermsAcceptance?: boolean;
|
|
51
51
|
isShowPaymentAcceptance?: boolean;
|
|
52
52
|
isShowAboutUs?: boolean;
|