@sunrise-upc/mobile-prod-card 12.1.6 → 12.1.7
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e,{useState as t,useRef as l,useCallback as a,useEffect as n}from"react";import i from"./PriceCalculationSticky.module.scss.js";import{Container as r}from"react-bootstrap";import c from"../FalconButtonV2/FalconButtonV2.js";import{countZero as o,replacePlaceholder as m}from"../../utils/utils.js";const d=({totalOnetimeAmount:d=0,totalRecurring:s=0,onContinue:u,cartData:v,content:p,flow:E})=>{var N,P,f;const[I,x]=t(!1),g=l(null),b=!!E,h=I,T=a(e=>{e.stopPropagation(),null==u||u()},[u]),D=a(()=>{x(!1)},[]);n(()=>{if(!I)return;const e=e=>{g.current&&!g.current.contains(e.target)&&x(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[h,D]);const y=null===(N=null==v?void 0:v.map(e=>(null==e?void 0:e.itemName)||""))||void 0===N?void 0:N.join(", "),L=!!(null===(P=null==v?void 0:v.some)||void 0===P?void 0:P.call(v,e=>Number(null==e?void 0:e.flexUpgradePrice)>0));return e.createElement("div",{className:i.stickyContainer,ref:g},e.createElement(r,null,e.createElement("div",{className:i.collapsedView,onClick:()=>x(!I)},e.createElement("div",{className:i.priceInfo},e.createElement("div",{className:i.priceWrapper},
|
|
1
|
+
import e,{useState as t,useRef as l,useCallback as a,useEffect as n}from"react";import i from"./PriceCalculationSticky.module.scss.js";import{Container as r}from"react-bootstrap";import c from"../FalconButtonV2/FalconButtonV2.js";import{countZero as o,replacePlaceholder as m}from"../../utils/utils.js";const d=({totalOnetimeAmount:d=0,totalRecurring:s=0,onContinue:u,cartData:v,content:p,flow:E})=>{var N,P,f;const[I,x]=t(!1),g=l(null),b=!!E,h=I,T=a(e=>{e.stopPropagation(),null==u||u()},[u]),D=a(()=>{x(!1)},[]);n(()=>{if(!I)return;const e=e=>{g.current&&!g.current.contains(e.target)&&x(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[h,D]);const y=null===(N=null==v?void 0:v.map(e=>(null==e?void 0:e.itemName)||""))||void 0===N?void 0:N.join(", "),L=!!(null===(P=null==v?void 0:v.some)||void 0===P?void 0:P.call(v,e=>Number(null==e?void 0:e.flexUpgradePrice)>0));return e.createElement("div",{className:i.stickyContainer,ref:g},e.createElement(r,null,e.createElement("div",{className:i.collapsedView,onClick:()=>x(!I)},e.createElement("div",{className:i.priceInfo},e.createElement("div",{className:i.priceWrapper},e.createElement("div",{className:i.price},o(s),e.createElement("span",{className:i.period},null==p?void 0:p.monthlyText)),0!==d&&e.createElement("div",{className:i.totalSection},e.createElement("div",null,(null==p?void 0:p.oneTime)||""," "),e.createElement("div",{className:i.price},null==p?void 0:p.recurringText," ",o(d)))),y&&e.createElement("div",{className:i.productName},y),L&&(null==p?void 0:p.flexUpgradeDescription)&&e.createElement("div",{className:i.flexUpgradeNote},null==p?void 0:p.flexUpgradeDescription)),e.createElement(c,{content:null===(f=null==p?void 0:p.continueBtn)||void 0===f?void 0:f[0],eventAction:"text",metadata:{},disabled:b,"aria-disabled":b,onClick:T})),I&&e.createElement("div",{className:i.expandedView},e.createElement("hr",null),e.createElement("div",{className:i.productsList},(null==p?void 0:p.title)&&e.createElement("h6",{className:i.pricingOverview},null==p?void 0:p.title),null==v?void 0:v.map((t,l)=>{const a="MOBILEPOSTPAID_RATEPLAN"===(null==t?void 0:t.itemType)?(e=>e&&"0"!==e?m(null==p?void 0:p.contractDuration,[e]):null==p?void 0:p.noMinContractDuration)((null==t?void 0:t.contractDuration)||(null==t?void 0:t.contractTerm)):"",n=Number(null==t?void 0:t.flexUpgradePrice),r=n>0,c=null==p?void 0:p.flexUpgradeLabel,d=r?o(t.flexUpgradePrice):"",s=e=>{if(!r||null==e||""===e)return o(e);const t=parseFloat(e)-n;return Number.isFinite(t)&&t>=0?o(t.toFixed(2)):o(e)},u=s(null==t?void 0:t.itemDiscountedPrice),v=s(null==t?void 0:t.itemDerivedPrice);return e.createElement(e.Fragment,{key:t.productName||String(l)},e.createElement("div",{className:i.productItem},e.createElement("div",{className:i.productItemInfo},(null==t?void 0:t.itemName)&&e.createElement("div",{className:i.productItemName},null==t?void 0:t.itemName),"HOME_SECURITY"===(null==t?void 0:t.itemType)&&e.createElement("div",{className:i.hardwarePayment},(null==p?void 0:p.hsDevicesLabel)&&e.createElement("span",null,null==p?void 0:p.hsDevicesLabel)," ",(null==t?void 0:t.accessoryCount)>0&&(null==p?void 0:p.hsAdditionalAccLabel)&&m(null==p?void 0:p.hsAdditionalAccLabel,[null==t?void 0:t.accessoryCount]))),e.createElement("div",{className:i.productItemPriceWrapper},(null==t?void 0:t.itemOneTimePrice)>0?e.createElement("div",{className:i.productItemPrice},e.createElement("div",{className:i.derivedPrice},o(null==t?void 0:t.itemOneTimePrice),e.createElement("span",null,"/-"))):(null==t?void 0:t.itemDerivedPrice)?e.createElement("div",{className:i.productItemPrice},e.createElement("div",{className:i.derivedPrice,"aria-label":`Price: ${v} per month`},v,e.createElement("span",null,null==p?void 0:p.monthlyText)),e.createElement("span",{className:i.recurringPrice},u)):e.createElement("div",{className:i.productItemPrice},e.createElement("div",{className:i.derivedPrice,"aria-label":`Price: ${u} per month`},u,e.createElement("span",null,null==p?void 0:p.monthlyText))),a&&e.createElement("div",{className:i.productItemDuration},a))),r&&e.createElement("div",{className:i.productItem},e.createElement("div",{className:i.productItemInfo},e.createElement("div",{className:i.productItemName},c)),e.createElement("div",{className:i.productItemPriceWrapper},e.createElement("div",{className:i.productItemPrice},e.createElement("div",{className:i.derivedPrice,"aria-label":`${c}: ${d} per month`},d,e.createElement("span",null,null==p?void 0:p.monthlyText))))))})))))};export{d as default};
|
|
2
2
|
//# sourceMappingURL=PriceCalculationSticky.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PriceCalculationSticky.js","sources":["../../../../src/components/PriceCalculationSticky/PriceCalculationSticky.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from 'react';\r\nimport { PriceCalculationStickyProps } from './PriceCalculationSticky.types';\r\nimport styles from './PriceCalculationSticky.module.scss';\r\nimport { Container } from 'react-bootstrap';\r\nimport FalconButtonV2 from '../FalconButtonV2/FalconButtonV2';\r\nimport { countZero, replacePlaceholder} from '../../utils/utils';\r\n\r\nconst PriceCalculationSticky: React.FC<PriceCalculationStickyProps> = ({\r\n totalOnetimeAmount = 0,\r\n totalRecurring=0,\r\n onContinue,\r\n cartData,\r\n content,\r\n flow\r\n}) => {\r\n const [internalExpanded, setInternalExpanded] = useState(false);\r\n const stickyContainerRef = useRef<HTMLDivElement>(null);\r\n // Use controlled state if provided, otherwise use internal state\r\n const isButtonDisabled = flow ? true : false;\r\n const isExpanded =internalExpanded;\r\n // Memoized handlers\r\n const handleButtonClick = useCallback(\r\n (e: React.MouseEvent) => {\r\n e.stopPropagation(); // Prevent toggle when clicking the button\r\n onContinue?.();\r\n },\r\n [onContinue]\r\n );\r\n\r\n const handleCollapse = useCallback(() => {\r\n setInternalExpanded(false);\r\n }, []);\r\n\r\n // Handle click outside to collapse\r\n useEffect(() => {\r\n if (!internalExpanded) return;\r\n\r\n const handleClickOutside = (event: MouseEvent) => {\r\n if (\r\n stickyContainerRef.current &&\r\n !stickyContainerRef.current.contains(event.target as Node)\r\n ) {\r\n setInternalExpanded(false);\r\n }\r\n };\r\n\r\n document.addEventListener('mousedown', handleClickOutside);\r\n return () => document.removeEventListener('mousedown', handleClickOutside);\r\n }, [isExpanded, handleCollapse]);\r\n\r\n const getContractDuration = (contractDuration:string) => {\r\n return contractDuration && contractDuration !== '0' ? replacePlaceholder(content?.contractDuration, [contractDuration]) : content?.noMinContractDuration;\r\n };\r\n\r\n const productsNamesList = cartData?.map(\r\n (item:any) =>\r\n item?.itemName || ''\r\n )?.join(', ');\r\n const hasAnyFlexUpgrade = !!cartData?.some?.((item: any) => Number(item?.flexUpgradePrice) > 0);\r\n return (\r\n <div className={styles.stickyContainer} ref={stickyContainerRef}>\r\n {/* Collapsed View - Always Visible */}\r\n <Container>\r\n <div\r\n className={styles.collapsedView}\r\n onClick={() => setInternalExpanded(!internalExpanded)}\r\n >\r\n <div className={styles.priceInfo}>\r\n <div className={styles.priceWrapper}>\r\n {totalRecurring !== 0 && (\r\n <div className={styles.price}>\r\n {countZero(totalRecurring)}\r\n <span className={styles.period}>{content?.monthlyText}</span>\r\n </div>\r\n \r\n )}\r\n {totalOnetimeAmount !== 0 && (\r\n <div className={styles.totalSection}><div>{content?.oneTime || ''} \r\n </div>\r\n <div className={styles.price}>\r\n {content?.recurringText} {countZero(totalOnetimeAmount)}\r\n </div></div>\r\n )}\r\n </div>\r\n {/* {productsName && <div className={styles.productName}>{productsName}</div>} */}\r\n {productsNamesList && <div className={styles.productName}>{productsNamesList}</div>}\r\n {hasAnyFlexUpgrade && content?.flexUpgradeDescription && (\r\n <div className={styles.flexUpgradeNote}>\r\n {content?.flexUpgradeDescription}\r\n </div>\r\n )}\r\n </div>\r\n <FalconButtonV2\r\n content={content?.continueBtn?.[0]}\r\n eventAction='text'\r\n metadata={{}}\r\n disabled={isButtonDisabled}\r\n aria-disabled={isButtonDisabled}\r\n onClick={handleButtonClick}\r\n />\r\n </div>\r\n\r\n {/* Expanded View - Toggleable Content */}\r\n {internalExpanded && (\r\n <div className={styles.expandedView}>\r\n <hr />\r\n\r\n <div className={styles.productsList}>\r\n {content?.title && <h6 className={styles.pricingOverview}>{content?.title}</h6>}\r\n {cartData?.map((product:any, index:Number) => {\r\n const contractDuration =product?.itemType === 'MOBILEPOSTPAID_RATEPLAN' ? getContractDuration(product?.contractDuration || product?.contractTerm) : '';\r\n const flexUpgradePrice = Number(product?.flexUpgradePrice);\r\n const hasFlexUpgrade = flexUpgradePrice > 0;\r\n const flexUpgradeLabel = content?.flexUpgradeLabel;\r\n const flexUpgradePriceLabel = hasFlexUpgrade ? countZero(product.flexUpgradePrice) : '';\r\n\r\n // Parent row must show device-only price (Flex Upgrade is rendered as its own sub-row).\r\n // Falls back to the original value when the deduction is missing, NaN, or negative.\r\n const withFlexDeducted = (raw: any): string => {\r\n if (!hasFlexUpgrade || raw == null || raw === '') return countZero(raw);\r\n const adjusted = parseFloat(raw) - flexUpgradePrice;\r\n return Number.isFinite(adjusted) && adjusted >= 0\r\n ? countZero(adjusted.toFixed(2))\r\n : countZero(raw);\r\n };\r\n const displayDiscounted = withFlexDeducted(product?.itemDiscountedPrice);\r\n const displayDerived = withFlexDeducted(product?.itemDerivedPrice);\r\n\r\n return (\r\n <React.Fragment key={product.productName || String(index)}>\r\n <div className={styles.productItem}>\r\n <div className={styles.productItemInfo}>\r\n {product?.itemName && (\r\n <div className={styles.productItemName}>{product?.itemName}</div>\r\n )}\r\n {product?.itemType === 'HOME_SECURITY' && (\r\n <div className={styles.hardwarePayment}>\r\n {content?.hsDevicesLabel && <span>{content?.hsDevicesLabel}</span>}{' '}\r\n {product?.accessoryCount > 0 &&\r\n content?.hsAdditionalAccLabel &&\r\n replacePlaceholder(content?.hsAdditionalAccLabel, [\r\n product?.accessoryCount\r\n ])}\r\n </div>\r\n )}\r\n </div>\r\n <div className={styles.productItemPriceWrapper}>\r\n {product?.itemOneTimePrice > 0 ? \r\n <div className={styles.productItemPrice}>\r\n <div className={styles.derivedPrice}>\r\n {countZero(product?.itemOneTimePrice)}\r\n <span>/-</span>\r\n </div>\r\n </div> : product?.itemDerivedPrice ? (\r\n <div className={styles.productItemPrice}>\r\n <div\r\n className={styles.derivedPrice}\r\n aria-label={`Price: ${displayDerived} per month`}\r\n >\r\n {displayDerived}\r\n <span>{content?.monthlyText}</span>\r\n </div>\r\n <span className={styles.recurringPrice}>{displayDiscounted}</span>\r\n </div>\r\n ) : (\r\n <div className={styles.productItemPrice}>\r\n <div\r\n className={styles.derivedPrice}\r\n aria-label={`Price: ${displayDiscounted} per month`}\r\n >\r\n {displayDiscounted}\r\n <span>{content?.monthlyText}</span>\r\n </div>\r\n </div>\r\n )}\r\n {contractDuration && (\r\n <div className={styles.productItemDuration}>{contractDuration}</div>\r\n )}\r\n </div>\r\n </div>\r\n {hasFlexUpgrade && (\r\n <div className={styles.productItem}>\r\n <div className={styles.productItemInfo}>\r\n <div className={styles.productItemName}>{flexUpgradeLabel}</div>\r\n </div>\r\n <div className={styles.productItemPriceWrapper}>\r\n <div className={styles.productItemPrice}>\r\n <div\r\n className={styles.derivedPrice}\r\n aria-label={`${flexUpgradeLabel}: ${flexUpgradePriceLabel} per month`}\r\n >\r\n {flexUpgradePriceLabel}\r\n <span>{content?.monthlyText}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </React.Fragment>\r\n );\r\n })}\r\n </div>\r\n </div>\r\n )}\r\n </Container>\r\n </div>\r\n );\r\n};\r\n\r\nexport default PriceCalculationSticky;\r\n"],"names":["PriceCalculationSticky","totalOnetimeAmount","totalRecurring","onContinue","cartData","content","flow","internalExpanded","setInternalExpanded","useState","stickyContainerRef","useRef","isButtonDisabled","isExpanded","handleButtonClick","useCallback","e","stopPropagation","handleCollapse","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","productsNamesList","_a","map","item","itemName","join","hasAnyFlexUpgrade","_b","some","Number","flexUpgradePrice","React","createElement","className","styles","stickyContainer","ref","Container","collapsedView","onClick","priceInfo","priceWrapper","price","countZero","period","monthlyText","totalSection","oneTime","recurringText","productName","flexUpgradeDescription","flexUpgradeNote","FalconButtonV2","continueBtn","_c","eventAction","metadata","disabled","expandedView","productsList","title","pricingOverview","product","index","contractDuration","itemType","replacePlaceholder","noMinContractDuration","getContractDuration","contractTerm","hasFlexUpgrade","flexUpgradeLabel","flexUpgradePriceLabel","withFlexDeducted","raw","adjusted","parseFloat","isFinite","toFixed","displayDiscounted","itemDiscountedPrice","displayDerived","itemDerivedPrice","Fragment","key","String","productItem","productItemInfo","productItemName","hardwarePayment","hsDevicesLabel","accessoryCount","hsAdditionalAccLabel","productItemPriceWrapper","itemOneTimePrice","productItemPrice","derivedPrice","recurringPrice","productItemDuration"],"mappings":"+SAOA,MAAMA,EAAgE,EACpEC,qBAAqB,EACrBC,iBAAe,EACfC,aACAC,WACAC,UACAC,qBAEA,MAAOC,EAAkBC,GAAuBC,GAAS,GACnDC,EAAqBC,EAAuB,MAE5CC,IAAmBN,EACnBO,EAAYN,EAEZO,EAAoBC,EACvBC,IACCA,EAAEC,kBACFd,SAAAA,KAEF,CAACA,IAGGe,EAAiBH,EAAY,KACjCP,GAAoB,IACnB,IAGHW,EAAU,KACR,IAAKZ,EAAkB,OAEvB,MAAMa,EAAsBC,IAExBX,EAAmBY,UAClBZ,EAAmBY,QAAQC,SAASF,EAAMG,SAE3ChB,GAAoB,IAKxB,OADAiB,SAASC,iBAAiB,YAAaN,GAChC,IAAMK,SAASE,oBAAoB,YAAaP,IACtD,CAACP,EAAYK,IAEhB,MAIMU,EAGL,QAHyBC,EAAAzB,aAAQ,EAARA,EAAU0B,IACjCC,IACCA,aAAI,EAAJA,EAAMC,WAAY,WACrB,IAAAH,OAAA,EAAAA,EAAEI,KAAK,MACFC,aAAsBC,EAAA/B,aAAQ,EAARA,EAAUgC,kCAAQL,GAAcM,OAAON,aAAI,EAAJA,EAAMO,kBAAoB,IAC7F,OACEC,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAOC,gBAAiBC,IAAKlC,GAE3C6B,EAAAC,cAACK,EAAS,KACRN,EAAAC,cAAA,MAAA,CACEC,UAAWC,EAAOI,cAClBC,QAAS,IAAMvC,GAAqBD,IAEpCgC,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAOM,WACrBT,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAOO,cACD,IAAnB/C,GACFqC,uBAAKE,UAAWC,EAAOQ,OACnBC,EAAUjD,GACXqC,EAAAC,cAAA,OAAA,CAAMC,UAAWC,EAAOU,QAAS/C,eAAAA,EAASgD,cAItB,IAAvBpD,GACCsC,uBAAKE,UAAWC,EAAOY,cAAcf,EAAAC,cAAA,MAAA,MAAMnC,aAAO,EAAPA,EAASkD,UAAW,GACzD,KACFhB,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAOQ,OACpB7C,aAAO,EAAPA,EAASmD,kBAAgBL,EAAUlD,MAK3C2B,GAAqBW,uBAAKE,UAAWC,EAAOe,aAAc7B,GAC1DM,IAAqB7B,aAAO,EAAPA,EAASqD,yBAC7BnB,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAOiB,iBACpBtD,aAAO,EAAPA,EAASqD,yBAIhBnB,EAAAC,cAACoB,EAAc,CACbvD,QAA6B,UAApBA,aAAO,EAAPA,EAASwD,mBAAW,IAAAC,OAAA,EAAAA,EAAG,GAChCC,YAAY,OACZC,SAAU,CAAA,EACVC,SAAUrD,EAAgB,gBACXA,EACfmC,QAASjC,KAKZP,GACCgC,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAOwB,cACrB3B,EAAAC,cAAA,KAAA,MAEAD,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAOyB,eACpB9D,aAAO,EAAPA,EAAS+D,QAAS7B,EAAAC,cAAA,KAAA,CAAIC,UAAWC,EAAO2B,iBAAkBhE,aAAO,EAAPA,EAAS+D,OACnEhE,aAAQ,EAARA,EAAU0B,IAAI,CAACwC,EAAaC,KAC3B,MAAMC,EAAwC,6BAAtBF,aAAO,EAAPA,EAASG,UA5DnB,CAACD,GACpBA,GAAyC,MAArBA,EAA2BE,EAAmBrE,eAAAA,EAASmE,iBAAkB,CAACA,IAAqBnE,aAAO,EAAPA,EAASsE,sBA2D7CC,EAAoBN,eAAAA,EAASE,oBAAoBF,aAAO,EAAPA,EAASO,eAAgB,GAC9IvC,EAAmBD,OAAOiC,aAAO,EAAPA,EAAShC,kBACnCwC,EAAiBxC,EAAmB,EACpCyC,EAAmB1E,aAAO,EAAPA,EAAS0E,iBAC5BC,EAAwBF,EAAiB3B,EAAUmB,EAAQhC,kBAAoB,GAI/E2C,EAAoBC,IACxB,IAAKJ,GAAyB,MAAPI,GAAuB,KAARA,EAAY,OAAO/B,EAAU+B,GACnE,MAAMC,EAAWC,WAAWF,GAAO5C,EACnC,OAAOD,OAAOgD,SAASF,IAAaA,GAAY,EAC5ChC,EAAUgC,EAASG,QAAQ,IAC3BnC,EAAU+B,IAEVK,EAAoBN,EAAiBX,aAAO,EAAPA,EAASkB,qBAC9CC,EAAiBR,EAAiBX,aAAO,EAAPA,EAASoB,kBAEjD,OACEnD,EAAAC,cAACD,EAAMoD,SAAQ,CAACC,IAAKtB,EAAQb,aAAeoC,OAAOtB,IACnDhC,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAOoD,aACrBvD,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAOqD,kBACpBzB,aAAO,EAAPA,EAAStC,WACRO,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAOsD,iBAAkB1B,eAAAA,EAAStC,UAE7B,mBAAtBsC,aAAO,EAAPA,EAASG,WACRlC,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAOuD,kBACpB5F,aAAO,EAAPA,EAAS6F,iBAAkB3D,EAAAC,cAAA,OAAA,KAAOnC,aAAO,EAAPA,EAAS6F,gBAAwB,KACnE5B,aAAO,EAAPA,EAAS6B,gBAAiB,IACzB9F,aAAO,EAAPA,EAAS+F,uBACT1B,EAAmBrE,eAAAA,EAAS+F,qBAAsB,CAChD9B,aAAO,EAAPA,EAAS6B,mBAKnB5D,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAO2D,0BACpB/B,aAAO,EAAPA,EAASgC,kBAAmB,EAC5B/D,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAO6D,kBACpBhE,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAO8D,cACpBrD,EAAUmB,eAAAA,EAASgC,kBACpB/D,EAAAC,cAAA,OAAA,KAAA,SAEK8B,aAAO,EAAPA,EAASoB,kBAClBnD,uBAAKE,UAAWC,EAAO6D,kBACrBhE,EAAAC,cAAA,MAAA,CACEC,UAAWC,EAAO8D,aAAY,aAClB,UAAUf,eAErBA,EACDlD,EAAAC,cAAA,OAAA,KAAOnC,aAAO,EAAPA,EAASgD,cAElBd,EAAAC,cAAA,OAAA,CAAMC,UAAWC,EAAO+D,gBAAiBlB,IAG3ChD,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAO6D,kBACrBhE,EAAAC,cAAA,MAAA,CACEC,UAAWC,EAAO8D,aAAY,aAClB,UAAUjB,eAErBA,EACDhD,EAAAC,cAAA,OAAA,KAAOnC,aAAO,EAAPA,EAASgD,eAIrBmB,GACCjC,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAOgE,qBAAsBlC,KAIlDM,GACCvC,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAOoD,aACrBvD,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAOqD,iBACrBxD,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAOsD,iBAAkBjB,IAE3CxC,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAO2D,yBACrB9D,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAO6D,kBACrBhE,EAAAC,cAAA,MAAA,CACEC,UAAWC,EAAO8D,0BACN,GAAGzB,MAAqBC,eAEnCA,EACDzC,EAAAC,cAAA,OAAA,KAAOnC,aAAO,EAAPA,EAASgD"}
|
|
1
|
+
{"version":3,"file":"PriceCalculationSticky.js","sources":["../../../../src/components/PriceCalculationSticky/PriceCalculationSticky.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from 'react';\r\nimport { PriceCalculationStickyProps } from './PriceCalculationSticky.types';\r\nimport styles from './PriceCalculationSticky.module.scss';\r\nimport { Container } from 'react-bootstrap';\r\nimport FalconButtonV2 from '../FalconButtonV2/FalconButtonV2';\r\nimport { countZero, replacePlaceholder} from '../../utils/utils';\r\n\r\nconst PriceCalculationSticky: React.FC<PriceCalculationStickyProps> = ({\r\n totalOnetimeAmount = 0,\r\n totalRecurring=0,\r\n onContinue,\r\n cartData,\r\n content,\r\n flow\r\n}) => {\r\n const [internalExpanded, setInternalExpanded] = useState(false);\r\n const stickyContainerRef = useRef<HTMLDivElement>(null);\r\n // Use controlled state if provided, otherwise use internal state\r\n const isButtonDisabled = flow ? true : false;\r\n const isExpanded =internalExpanded;\r\n // Memoized handlers\r\n const handleButtonClick = useCallback(\r\n (e: React.MouseEvent) => {\r\n e.stopPropagation(); // Prevent toggle when clicking the button\r\n onContinue?.();\r\n },\r\n [onContinue]\r\n );\r\n\r\n const handleCollapse = useCallback(() => {\r\n setInternalExpanded(false);\r\n }, []);\r\n\r\n // Handle click outside to collapse\r\n useEffect(() => {\r\n if (!internalExpanded) return;\r\n\r\n const handleClickOutside = (event: MouseEvent) => {\r\n if (\r\n stickyContainerRef.current &&\r\n !stickyContainerRef.current.contains(event.target as Node)\r\n ) {\r\n setInternalExpanded(false);\r\n }\r\n };\r\n\r\n document.addEventListener('mousedown', handleClickOutside);\r\n return () => document.removeEventListener('mousedown', handleClickOutside);\r\n }, [isExpanded, handleCollapse]);\r\n\r\n const getContractDuration = (contractDuration:string) => {\r\n return contractDuration && contractDuration !== '0' ? replacePlaceholder(content?.contractDuration, [contractDuration]) : content?.noMinContractDuration;\r\n };\r\n\r\n const productsNamesList = cartData?.map(\r\n (item:any) =>\r\n item?.itemName || ''\r\n )?.join(', ');\r\n const hasAnyFlexUpgrade = !!cartData?.some?.((item: any) => Number(item?.flexUpgradePrice) > 0);\r\n return (\r\n <div className={styles.stickyContainer} ref={stickyContainerRef}>\r\n {/* Collapsed View - Always Visible */}\r\n <Container>\r\n <div\r\n className={styles.collapsedView}\r\n onClick={() => setInternalExpanded(!internalExpanded)}\r\n >\r\n <div className={styles.priceInfo}>\r\n <div className={styles.priceWrapper}>\r\n {/* commented */}\r\n {/* {totalRecurring !== 0 && ( */}\r\n <div className={styles.price}>\r\n {countZero(totalRecurring)}\r\n <span className={styles.period}>{content?.monthlyText}</span>\r\n </div>\r\n \r\n {/* )} */}\r\n {totalOnetimeAmount !== 0 && (\r\n <div className={styles.totalSection}><div>{content?.oneTime || ''} \r\n </div>\r\n <div className={styles.price}>\r\n {content?.recurringText} {countZero(totalOnetimeAmount)}\r\n </div></div>\r\n )}\r\n </div>\r\n {/* {productsName && <div className={styles.productName}>{productsName}</div>} */}\r\n {productsNamesList && <div className={styles.productName}>{productsNamesList}</div>}\r\n {hasAnyFlexUpgrade && content?.flexUpgradeDescription && (\r\n <div className={styles.flexUpgradeNote}>\r\n {content?.flexUpgradeDescription}\r\n </div>\r\n )}\r\n </div>\r\n <FalconButtonV2\r\n content={content?.continueBtn?.[0]}\r\n eventAction='text'\r\n metadata={{}}\r\n disabled={isButtonDisabled}\r\n aria-disabled={isButtonDisabled}\r\n onClick={handleButtonClick}\r\n />\r\n </div>\r\n\r\n {/* Expanded View - Toggleable Content */}\r\n {internalExpanded && (\r\n <div className={styles.expandedView}>\r\n <hr />\r\n\r\n <div className={styles.productsList}>\r\n {content?.title && <h6 className={styles.pricingOverview}>{content?.title}</h6>}\r\n {cartData?.map((product:any, index:Number) => {\r\n const contractDuration =product?.itemType === 'MOBILEPOSTPAID_RATEPLAN' ? getContractDuration(product?.contractDuration || product?.contractTerm) : '';\r\n const flexUpgradePrice = Number(product?.flexUpgradePrice);\r\n const hasFlexUpgrade = flexUpgradePrice > 0;\r\n const flexUpgradeLabel = content?.flexUpgradeLabel;\r\n const flexUpgradePriceLabel = hasFlexUpgrade ? countZero(product.flexUpgradePrice) : '';\r\n\r\n // Parent row must show device-only price (Flex Upgrade is rendered as its own sub-row).\r\n // Falls back to the original value when the deduction is missing, NaN, or negative.\r\n const withFlexDeducted = (raw: any): string => {\r\n if (!hasFlexUpgrade || raw == null || raw === '') return countZero(raw);\r\n const adjusted = parseFloat(raw) - flexUpgradePrice;\r\n return Number.isFinite(adjusted) && adjusted >= 0\r\n ? countZero(adjusted.toFixed(2))\r\n : countZero(raw);\r\n };\r\n const displayDiscounted = withFlexDeducted(product?.itemDiscountedPrice);\r\n const displayDerived = withFlexDeducted(product?.itemDerivedPrice);\r\n\r\n return (\r\n <React.Fragment key={product.productName || String(index)}>\r\n <div className={styles.productItem}>\r\n <div className={styles.productItemInfo}>\r\n {product?.itemName && (\r\n <div className={styles.productItemName}>{product?.itemName}</div>\r\n )}\r\n {product?.itemType === 'HOME_SECURITY' && (\r\n <div className={styles.hardwarePayment}>\r\n {content?.hsDevicesLabel && <span>{content?.hsDevicesLabel}</span>}{' '}\r\n {product?.accessoryCount > 0 &&\r\n content?.hsAdditionalAccLabel &&\r\n replacePlaceholder(content?.hsAdditionalAccLabel, [\r\n product?.accessoryCount\r\n ])}\r\n </div>\r\n )}\r\n </div>\r\n <div className={styles.productItemPriceWrapper}>\r\n {product?.itemOneTimePrice > 0 ? \r\n <div className={styles.productItemPrice}>\r\n <div className={styles.derivedPrice}>\r\n {countZero(product?.itemOneTimePrice)}\r\n <span>/-</span>\r\n </div>\r\n </div> : product?.itemDerivedPrice ? (\r\n <div className={styles.productItemPrice}>\r\n <div\r\n className={styles.derivedPrice}\r\n aria-label={`Price: ${displayDerived} per month`}\r\n >\r\n {displayDerived}\r\n <span>{content?.monthlyText}</span>\r\n </div>\r\n <span className={styles.recurringPrice}>{displayDiscounted}</span>\r\n </div>\r\n ) : (\r\n <div className={styles.productItemPrice}>\r\n <div\r\n className={styles.derivedPrice}\r\n aria-label={`Price: ${displayDiscounted} per month`}\r\n >\r\n {displayDiscounted}\r\n <span>{content?.monthlyText}</span>\r\n </div>\r\n </div>\r\n )}\r\n {contractDuration && (\r\n <div className={styles.productItemDuration}>{contractDuration}</div>\r\n )}\r\n </div>\r\n </div>\r\n {hasFlexUpgrade && (\r\n <div className={styles.productItem}>\r\n <div className={styles.productItemInfo}>\r\n <div className={styles.productItemName}>{flexUpgradeLabel}</div>\r\n </div>\r\n <div className={styles.productItemPriceWrapper}>\r\n <div className={styles.productItemPrice}>\r\n <div\r\n className={styles.derivedPrice}\r\n aria-label={`${flexUpgradeLabel}: ${flexUpgradePriceLabel} per month`}\r\n >\r\n {flexUpgradePriceLabel}\r\n <span>{content?.monthlyText}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </React.Fragment>\r\n );\r\n })}\r\n </div>\r\n </div>\r\n )}\r\n </Container>\r\n </div>\r\n );\r\n};\r\n\r\nexport default PriceCalculationSticky;\r\n"],"names":["PriceCalculationSticky","totalOnetimeAmount","totalRecurring","onContinue","cartData","content","flow","internalExpanded","setInternalExpanded","useState","stickyContainerRef","useRef","isButtonDisabled","isExpanded","handleButtonClick","useCallback","e","stopPropagation","handleCollapse","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","productsNamesList","_a","map","item","itemName","join","hasAnyFlexUpgrade","_b","some","Number","flexUpgradePrice","React","createElement","className","styles","stickyContainer","ref","Container","collapsedView","onClick","priceInfo","priceWrapper","price","countZero","period","monthlyText","totalSection","oneTime","recurringText","productName","flexUpgradeDescription","flexUpgradeNote","FalconButtonV2","continueBtn","_c","eventAction","metadata","disabled","expandedView","productsList","title","pricingOverview","product","index","contractDuration","itemType","replacePlaceholder","noMinContractDuration","getContractDuration","contractTerm","hasFlexUpgrade","flexUpgradeLabel","flexUpgradePriceLabel","withFlexDeducted","raw","adjusted","parseFloat","isFinite","toFixed","displayDiscounted","itemDiscountedPrice","displayDerived","itemDerivedPrice","Fragment","key","String","productItem","productItemInfo","productItemName","hardwarePayment","hsDevicesLabel","accessoryCount","hsAdditionalAccLabel","productItemPriceWrapper","itemOneTimePrice","productItemPrice","derivedPrice","recurringPrice","productItemDuration"],"mappings":"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"}
|