@meetelise/chat 1.41.2 → 1.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meetelise/chat",
-  "version": "1.41.2",
+  "version": "1.42.0",
   "description": "",
   "keywords": [],
   "homepage": "https://github.com/MeetElise/chat-ui#readme",

package/public/dist/index.js

@@ -3560,6 +3560,33 @@ xmlns="http://www.w3.org/2000/svg"
     box-shadow: 0 0 10px 3px rgba(100, 105, 135, 0.4);
   }
 
+  .placeholder {
+    border-radius: 8px;
+    flex: 0 0 auto;
+    height: 4rem;
+    width: 4rem;
+    border: 1px solid #e2e8f0;
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    transition: all 0.2s ease-in-out;
+  }
+
+  .placeholder:hover {
+    border-color: #cbd5e1;
+    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+  }
+
+  .placeholder span {
+    font-size: 0.6rem;
+    color: #64748b;
+    text-align: center;
+    line-height: 1;
+    font-weight: 500;
+  }
+
   @media (max-width: 768px) {
     .floorplan-image-card {
       width: 100%;
@@ -3568,14 +3595,20 @@ xmlns="http://www.w3.org/2000/svg"
       margin-right: 8px;
     }
   }
-`;var cr=function(e,t,i,n){var o,r=arguments.length,a=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,n);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(r<3?o(a):r>3?o(t,i,a):o(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};let dr=class extends oe{constructor(){super(...arguments),this.unit={},this.onUnitSelect=null,this.selected=!1}get bedAndBathText(){return`${0===this.unit.numberOfBedrooms?"studio":`${this.unit.numberOfBedrooms}bd`} | ${this.unit.numberOfBathrooms}ba`}get priceRange(){return this.unit.startingPrice===this.unit.maxPrice?`$${this.unit.startingPrice}`:`$${this.unit.startingPrice} - $${this.unit.maxPrice}`}handleOnUnitSelect(){var e;this.selected||(this.selected=!this.selected,null===(e=this.onUnitSelect)||void 0===e||e.call(this,this.unit))}handleOnImgClick(e){const t=e.target;window.open(t.src,"_blank")}render(){var e;return R`
+`;var cr=function(e,t,i,n){var o,r=arguments.length,a=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,n);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(r<3?o(a):r>3?o(t,i,a):o(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};let dr=class extends oe{constructor(){super(...arguments),this.unit={},this.onUnitSelect=null,this.selected=!1}get bedAndBathText(){return`${0===this.unit.numberOfBedrooms?"studio":`${this.unit.numberOfBedrooms}bd`} | ${this.unit.numberOfBathrooms}ba`}get priceRange(){return this.unit.startingPrice===this.unit.maxPrice?`$${this.unit.startingPrice}`:`$${this.unit.startingPrice} - $${this.unit.maxPrice}`}handleOnUnitSelect(){var e;this.selected||(this.selected=!this.selected,null===(e=this.onUnitSelect)||void 0===e||e.call(this,this.unit))}handleOnImgClick(e){const t=e.target;window.open(t.src,"_blank")}render(){return R`
       <div class="floorplan-image-card ${this.selected?"selected":""}">
         <div class="section-left">
-          <img
-            @click=${this.handleOnImgClick}
-            src="${null!==(e=this.unit.floorplanUrl)&&void 0!==e?e:""}"
-            alt="${this.unit.floorplanName}"
-          />
+          ${this.unit.floorplanUrl?R`
+                <img
+                  @click=${this.handleOnImgClick}
+                  src="${this.unit.floorplanUrl}"
+                  alt="${this.unit.floorplanName}"
+                />
+              `:R`
+                <div class="placeholder">
+                  <span>No Image</span>
+                </div>
+              `}
         </div>
         <div class="section-right" @click=${this.handleOnUnitSelect}>
           <p class="image-card-title">
@@ -4607,7 +4640,7 @@ xmlns="http://www.w3.org/2000/svg"
           </p>
         </div>
       </div>
-    `:R``}};Jr.styles=Xr,Zr([le({type:Object})],Jr.prototype,"incentive",void 0),Jr=Zr([ae("incentive-banner")],Jr);var ea=function(e,t,i,n){var o,r=arguments.length,a=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,n);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(r<3?o(a):r>3?o(t,i,a):o(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};let ta=class extends oe{constructor(){super(...arguments),this.buildingSlug="",this.orgSlug="",this.primaryColor=Ie,this.backgroundColor=De,this.onCloseClicked=null,this.onClickEmailOption=null,this.onClickPhoneOption=null,this.onClickSSTOption=null,this.onClickTextUsOption=null,this.isFirstCalculation=!0,this.isCalculatingQuote=!1,this.isExporting=!1,this.selectedLayoutIds=[ir],this.selectedUnit=null,this.desiredAddons=[],this.desiredRentableItems=[],this.moveInDateString=fi.toISOString().split("T")[0],this.leaseTerm=12,this.buildingWebchatView=null,this.incentives=[],this.quote=null,this.groupedFees={[Ko.OneTime]:[],[Ko.Monthly]:[],[Ko.Quarterly]:[],[Ko.Annually]:[],[Ko.PerOccurrence]:[]},this.rentableItems=[],this.units=[],this.isLoadingUnits=!1,this.quoteAbortController=null,this.quoteDebounceTimer=null,this.startQuoteApiCall=async()=>{var e;null===(e=this.quoteAbortController)||void 0===e||e.abort(),this.quoteAbortController=new AbortController,this.isCalculatingQuote=!0,await this.performQuoteCalculation(this.quoteAbortController.signal)},this.firstUpdated=async()=>{this.style.setProperty("--primary-color",this.primaryColor),this.style.setProperty("--background-color",this.backgroundColor),await this.setupCalculator(),await this.fetchUnits()},this.setupCalculator=async()=>{if(!this.buildingSlug||!this.orgSlug)return;const[e,t]=await Promise.all([Un(this.orgSlug,this.buildingSlug),tr(this.buildingSlug)]);e&&t&&(this.buildingWebchatView=e,this.groupedFees=this.groupFees(t.fees),this.rentableItems=t.rentableItems)},this.requestQuoteCalculation=()=>{if(this.quoteDebounceTimer&&(clearTimeout(this.quoteDebounceTimer),this.quoteDebounceTimer=null),!this.selectedUnit||!this.moveInDateString)return this.quote=null,void(this.isCalculatingQuote=!1);this.quoteDebounceTimer=window.setTimeout((()=>{this.startQuoteApiCall(),this.quoteDebounceTimer=null}),1e3)},this.handleUnitSelect=e=>{const t=!this.selectedUnit;if(this.isFirstCalculation=!0,this.selectedUnit=e,t)return this.quoteDebounceTimer&&(clearTimeout(this.quoteDebounceTimer),this.quoteDebounceTimer=null),this.isCalculatingQuote=!0,void this.startQuoteApiCall();this.requestQuoteCalculation()},this.handleMoveInDateChange=async e=>{this.moveInDateString=e,await this.fetchUnits(),this.selectedUnit&&this.requestQuoteCalculation()},this.handleLeaseTermChange=async e=>{this.leaseTerm=e,await this.fetchUnits(),this.selectedUnit&&this.requestQuoteCalculation()},this.handleAddonSelect=e=>{const t=this.desiredAddons.some((t=>t.id===e.id));t&&e.quantities.every((e=>0===e.quantity))?this.desiredAddons=this.desiredAddons.filter((t=>t.id!==e.id)):t?this.desiredAddons=this.desiredAddons.map((t=>t.id===e.id?{...t,quantities:e.quantities}:t)):this.desiredAddons.push(e),this.requestQuoteCalculation()},this.handleRentableItemSelect=e=>{this.desiredRentableItems.some((t=>t.id===e.id))?this.desiredRentableItems=this.desiredRentableItems.filter((t=>t.id!==e.id)):this.desiredRentableItems.push(e),this.requestQuoteCalculation()},this.groupFees=e=>e.reduce(((e,t)=>{const i=t.frequency||Ko.OneTime;return e[i]=[...e[i]||[],t],e}),{}),this.handleClickEmailOption=e=>{this.handleClose(),this.onClickEmailOption&&this.onClickEmailOption(e)},this.handleClickPhoneOption=e=>{this.handleClose(),this.onClickPhoneOption&&this.onClickPhoneOption(e)},this.handleClickSSTOption=e=>{this.handleClose(),this.onClickSSTOption&&this.onClickSSTOption(e)},this.handleClickTextUsOption=e=>{this.handleClose(),this.onClickTextUsOption&&this.onClickTextUsOption(e)},this.handleClose=()=>{var e;null===(e=this.onCloseClicked)||void 0===e||e.call(this)},this.handleSelectLayout=async e=>{this.selectedLayoutIds=e,await this.fetchUnits()},this.handleShare=async()=>{if(this.selectedUnit&&this.moveInDateString){this.isExporting=!0;try{const e=hi(Ni(this.moveInDateString),Ni(this.selectedUnit.earliestAvailable))?this.selectedUnit.earliestAvailable:this.moveInDateString;await(async({buildingSlug:e,unitId:i,unitNumber:n,addons:o,rentableItems:r,leaseTerm:a,moveInDate:s})=>{try{const l=await t().post(`https://app.meetelise.com/platformApi/webchat/${e}/fees/calculate/download`,mi({unitId:i,addons:o,rentableItems:r,leaseTerm:a,moveInDate:s}),{responseType:"blob"}),u=new Blob([l.data],{type:"application/pdf"}),c=URL.createObjectURL(u),d=document.createElement("a");d.href=c,d.download=`estimate-${n}.pdf`,document.body.appendChild(d),d.click(),document.body.removeChild(d),URL.revokeObjectURL(c)}catch(t){An({logType:xn.error,buildingSlug:e,logTitle:"[ERROR_DOWNLOADING_QUOTE_PDF]",logData:{error:t}})}})({buildingSlug:this.buildingSlug,unitId:this.selectedUnit.id,unitNumber:this.selectedUnit.unitNumber,addons:this.desiredAddons,rentableItems:this.desiredRentableItems,leaseTerm:this.leaseTerm,moveInDate:e})}finally{this.isExporting=!1}}},this.fetchUnits=async()=>{let e;this.isLoadingUnits=!0,this.selectedLayoutIds.includes(ir)||(e=this.selectedLayoutIds.map((e=>{return 0===(t=e)?0:Math.floor(t/10);var t})));try{const i=await(async({buildingSlug:e,numBedrooms:i,moveInDateEarliestString:n,moveInDateLatest:o,leaseTermMin:r})=>{try{const a=o?o.toISOString().split("T")[0]:void 0,s=new Zo;s.addArray("num_bedrooms",null==i?void 0:i.map((e=>e.toString()))).addSingle("move_in_date_earliest",n).addSingle("move_in_date_latest",a).addSingle("lease_term_min",null==r?void 0:r.toString());const l=s.build(),u=await t().get(`https://app.meetelise.com/platformApi/webchat/${e}/units${l}`);if(u.data)return gi(u.data).map((e=>({...e,id:parseInt(e.id.toString().substring(1))})))}catch(t){An({logType:xn.error,buildingSlug:e,logTitle:"[ERROR_GETTING_UNITS]",logData:{error:t,params:{numBedrooms:i,moveInDateEarliestString:n,moveInDateLatest:o}}})}return[]})({buildingSlug:this.buildingSlug,moveInDateEarliestString:this.moveInDateString,...e?{numBedrooms:e}:{},leaseTermMin:this.leaseTerm});this.units=i.filter((e=>!!e.floorplanUrl)),this.selectedUnit&&(this.units.some((e=>{var t;return e.id===(null===(t=this.selectedUnit)||void 0===t?void 0:t.id)}))||(this.selectedUnit=null,this.quote=null))}finally{this.isLoadingUnits=!1}}}async performQuoteCalculation(e){if(!this.selectedUnit||!this.moveInDateString)return this.quote=null,void(this.isCalculatingQuote=!1);const i=hi(Ni(this.moveInDateString),Ni(this.selectedUnit.earliestAvailable))?this.selectedUnit.earliestAvailable:this.moveInDateString;try{const n=await(async({buildingSlug:e,unitId:i,addons:n,rentableItems:o,leaseTerm:r,moveInDate:a},s)=>{try{const l=await t().post(`https://app.meetelise.com/platformApi/webchat/${e}/fees/v2/calculate`,mi({unitId:i,addons:n,rentableItems:o,leaseTerm:r,moveInDate:a}),{signal:s});if(l.data)return gi(l.data)}catch(t){"ERR_CANCELED"!==t.code&&An({logType:xn.error,buildingSlug:e,logTitle:"[ERROR_CALCULATING_QUOTE]",logData:{error:t}})}return{quote:{}}})({buildingSlug:this.buildingSlug,unitId:this.selectedUnit.id,addons:this.desiredAddons,rentableItems:this.desiredRentableItems,leaseTerm:this.leaseTerm,moveInDate:i},e);this.quote=n.quote}catch(e){"AbortError"!==(null==e?void 0:e.name)&&(this.quote=null,this.isCalculatingQuote=!1,An({logType:xn.error,buildingSlug:this.buildingSlug,logTitle:"[ERROR_CALCULATING_QUOTE]",logData:{error:e}}))}finally{e.aborted||(this.isCalculatingQuote=!1,this.isFirstCalculation=!1)}}get layouts(){var e,t;return null!==(t=null===(e=this.buildingWebchatView)||void 0===e?void 0:e.layoutOptions)&&void 0!==t?t:[]}updated(e){(e.has("primaryColor")||e.has("backgroundColor"))&&(this.style.setProperty("--primary-color",this.primaryColor),this.style.setProperty("--background-color",this.backgroundColor))}disconnectedCallback(){var e;super.disconnectedCallback(),this.quoteDebounceTimer&&(clearTimeout(this.quoteDebounceTimer),this.quoteDebounceTimer=null),null===(e=this.quoteAbortController)||void 0===e||e.abort(),this.quoteAbortController=null}render(){var e,t;const i=this.isCalculatingQuote&&!this.isExporting&&!this.isFirstCalculation,n=this.isExporting||this.isCalculatingQuote||!this.selectedUnit||!this.moveInDateString;return R`
+    `:R``}};Jr.styles=Xr,Zr([le({type:Object})],Jr.prototype,"incentive",void 0),Jr=Zr([ae("incentive-banner")],Jr);var ea=function(e,t,i,n){var o,r=arguments.length,a=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,n);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(r<3?o(a):r>3?o(t,i,a):o(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};let ta=class extends oe{constructor(){super(...arguments),this.buildingSlug="",this.orgSlug="",this.primaryColor=Ie,this.backgroundColor=De,this.onCloseClicked=null,this.onClickEmailOption=null,this.onClickPhoneOption=null,this.onClickSSTOption=null,this.onClickTextUsOption=null,this.isFirstCalculation=!0,this.isCalculatingQuote=!1,this.isExporting=!1,this.selectedLayoutIds=[ir],this.selectedUnit=null,this.desiredAddons=[],this.desiredRentableItems=[],this.moveInDateString=fi.toISOString().split("T")[0],this.leaseTerm=12,this.buildingWebchatView=null,this.incentives=[],this.quote=null,this.groupedFees={[Ko.OneTime]:[],[Ko.Monthly]:[],[Ko.Quarterly]:[],[Ko.Annually]:[],[Ko.PerOccurrence]:[]},this.rentableItems=[],this.units=[],this.isLoadingUnits=!1,this.quoteAbortController=null,this.quoteDebounceTimer=null,this.startQuoteApiCall=async()=>{var e;null===(e=this.quoteAbortController)||void 0===e||e.abort(),this.quoteAbortController=new AbortController,this.isCalculatingQuote=!0,await this.performQuoteCalculation(this.quoteAbortController.signal)},this.firstUpdated=async()=>{this.style.setProperty("--primary-color",this.primaryColor),this.style.setProperty("--background-color",this.backgroundColor),await this.setupCalculator(),await this.fetchUnits()},this.setupCalculator=async()=>{if(!this.buildingSlug||!this.orgSlug)return;const[e,t]=await Promise.all([Un(this.orgSlug,this.buildingSlug),tr(this.buildingSlug)]);e&&t&&(this.buildingWebchatView=e,this.groupedFees=this.groupFees(t.fees),this.rentableItems=t.rentableItems)},this.requestQuoteCalculation=()=>{if(this.quoteDebounceTimer&&(clearTimeout(this.quoteDebounceTimer),this.quoteDebounceTimer=null),!this.selectedUnit||!this.moveInDateString)return this.quote=null,void(this.isCalculatingQuote=!1);this.quoteDebounceTimer=window.setTimeout((()=>{this.startQuoteApiCall(),this.quoteDebounceTimer=null}),1e3)},this.handleUnitSelect=e=>{const t=!this.selectedUnit;if(this.isFirstCalculation=!0,this.selectedUnit=e,t)return this.quoteDebounceTimer&&(clearTimeout(this.quoteDebounceTimer),this.quoteDebounceTimer=null),this.isCalculatingQuote=!0,void this.startQuoteApiCall();this.requestQuoteCalculation()},this.handleMoveInDateChange=async e=>{this.moveInDateString=e,await this.fetchUnits(),this.selectedUnit&&this.requestQuoteCalculation()},this.handleLeaseTermChange=async e=>{this.leaseTerm=e,await this.fetchUnits(),this.selectedUnit&&this.requestQuoteCalculation()},this.handleAddonSelect=e=>{const t=this.desiredAddons.some((t=>t.id===e.id));t&&e.quantities.every((e=>0===e.quantity))?this.desiredAddons=this.desiredAddons.filter((t=>t.id!==e.id)):t?this.desiredAddons=this.desiredAddons.map((t=>t.id===e.id?{...t,quantities:e.quantities}:t)):this.desiredAddons.push(e),this.requestQuoteCalculation()},this.handleRentableItemSelect=e=>{this.desiredRentableItems.some((t=>t.id===e.id))?this.desiredRentableItems=this.desiredRentableItems.filter((t=>t.id!==e.id)):this.desiredRentableItems.push(e),this.requestQuoteCalculation()},this.groupFees=e=>e.reduce(((e,t)=>{const i=t.frequency||Ko.OneTime;return e[i]=[...e[i]||[],t],e}),{}),this.handleClickEmailOption=e=>{this.handleClose(),this.onClickEmailOption&&this.onClickEmailOption(e)},this.handleClickPhoneOption=e=>{this.handleClose(),this.onClickPhoneOption&&this.onClickPhoneOption(e)},this.handleClickSSTOption=e=>{this.handleClose(),this.onClickSSTOption&&this.onClickSSTOption(e)},this.handleClickTextUsOption=e=>{this.handleClose(),this.onClickTextUsOption&&this.onClickTextUsOption(e)},this.handleClose=()=>{var e;null===(e=this.onCloseClicked)||void 0===e||e.call(this)},this.handleSelectLayout=async e=>{this.selectedLayoutIds=e,await this.fetchUnits()},this.handleShare=async()=>{if(this.selectedUnit&&this.moveInDateString){this.isExporting=!0;try{const e=hi(Ni(this.moveInDateString),Ni(this.selectedUnit.earliestAvailable))?this.selectedUnit.earliestAvailable:this.moveInDateString;await(async({buildingSlug:e,unitId:i,unitNumber:n,addons:o,rentableItems:r,leaseTerm:a,moveInDate:s})=>{try{const l=await t().post(`https://app.meetelise.com/platformApi/webchat/${e}/fees/calculate/download`,mi({unitId:i,addons:o,rentableItems:r,leaseTerm:a,moveInDate:s}),{responseType:"blob"}),u=new Blob([l.data],{type:"application/pdf"}),c=URL.createObjectURL(u),d=document.createElement("a");d.href=c,d.download=`estimate-${n}.pdf`,document.body.appendChild(d),d.click(),document.body.removeChild(d),URL.revokeObjectURL(c)}catch(t){An({logType:xn.error,buildingSlug:e,logTitle:"[ERROR_DOWNLOADING_QUOTE_PDF]",logData:{error:t}})}})({buildingSlug:this.buildingSlug,unitId:this.selectedUnit.id,unitNumber:this.selectedUnit.unitNumber,addons:this.desiredAddons,rentableItems:this.desiredRentableItems,leaseTerm:this.leaseTerm,moveInDate:e})}finally{this.isExporting=!1}}},this.fetchUnits=async()=>{let e;this.isLoadingUnits=!0,this.selectedLayoutIds.includes(ir)||(e=this.selectedLayoutIds.map((e=>{return 0===(t=e)?0:Math.floor(t/10);var t})));try{this.units=await(async({buildingSlug:e,numBedrooms:i,moveInDateEarliestString:n,moveInDateLatest:o,leaseTermMin:r})=>{try{const a=o?o.toISOString().split("T")[0]:void 0,s=new Zo;s.addArray("num_bedrooms",null==i?void 0:i.map((e=>e.toString()))).addSingle("move_in_date_earliest",n).addSingle("move_in_date_latest",a).addSingle("lease_term_min",null==r?void 0:r.toString());const l=s.build(),u=await t().get(`https://app.meetelise.com/platformApi/webchat/${e}/units${l}`);if(u.data)return gi(u.data).map((e=>({...e,id:parseInt(e.id.toString().substring(1))})))}catch(t){An({logType:xn.error,buildingSlug:e,logTitle:"[ERROR_GETTING_UNITS]",logData:{error:t,params:{numBedrooms:i,moveInDateEarliestString:n,moveInDateLatest:o}}})}return[]})({buildingSlug:this.buildingSlug,moveInDateEarliestString:this.moveInDateString,...e?{numBedrooms:e}:{},leaseTermMin:this.leaseTerm}),this.selectedUnit&&(this.units.some((e=>{var t;return e.id===(null===(t=this.selectedUnit)||void 0===t?void 0:t.id)}))||(this.selectedUnit=null,this.quote=null))}finally{this.isLoadingUnits=!1}}}async performQuoteCalculation(e){if(!this.selectedUnit||!this.moveInDateString)return this.quote=null,void(this.isCalculatingQuote=!1);const i=hi(Ni(this.moveInDateString),Ni(this.selectedUnit.earliestAvailable))?this.selectedUnit.earliestAvailable:this.moveInDateString;try{const n=await(async({buildingSlug:e,unitId:i,addons:n,rentableItems:o,leaseTerm:r,moveInDate:a},s)=>{try{const l=await t().post(`https://app.meetelise.com/platformApi/webchat/${e}/fees/v2/calculate`,mi({unitId:i,addons:n,rentableItems:o,leaseTerm:r,moveInDate:a}),{signal:s});if(l.data)return gi(l.data)}catch(t){"ERR_CANCELED"!==t.code&&An({logType:xn.error,buildingSlug:e,logTitle:"[ERROR_CALCULATING_QUOTE]",logData:{error:t}})}return{quote:{}}})({buildingSlug:this.buildingSlug,unitId:this.selectedUnit.id,addons:this.desiredAddons,rentableItems:this.desiredRentableItems,leaseTerm:this.leaseTerm,moveInDate:i},e);this.quote=n.quote}catch(e){"AbortError"!==(null==e?void 0:e.name)&&(this.quote=null,this.isCalculatingQuote=!1,An({logType:xn.error,buildingSlug:this.buildingSlug,logTitle:"[ERROR_CALCULATING_QUOTE]",logData:{error:e}}))}finally{e.aborted||(this.isCalculatingQuote=!1,this.isFirstCalculation=!1)}}get layouts(){var e,t;return null!==(t=null===(e=this.buildingWebchatView)||void 0===e?void 0:e.layoutOptions)&&void 0!==t?t:[]}updated(e){(e.has("primaryColor")||e.has("backgroundColor"))&&(this.style.setProperty("--primary-color",this.primaryColor),this.style.setProperty("--background-color",this.backgroundColor))}disconnectedCallback(){var e;super.disconnectedCallback(),this.quoteDebounceTimer&&(clearTimeout(this.quoteDebounceTimer),this.quoteDebounceTimer=null),null===(e=this.quoteAbortController)||void 0===e||e.abort(),this.quoteAbortController=null}render(){var e,t;const i=this.isCalculatingQuote&&!this.isExporting&&!this.isFirstCalculation,n=this.isExporting||this.isCalculatingQuote||!this.selectedUnit||!this.moveInDateString;return R`
       <div
         class="fee-calculator-container"
         @keydown=${e=>e.stopPropagation()}

package/src/WebComponent/FeeCalculator/components/floorplan-image-card/floorplan-image-card-styles.ts

@@ -69,6 +69,33 @@ const floorplanImageCardStyles = css`
     box-shadow: 0 0 10px 3px rgba(100, 105, 135, 0.4);
   }
 
+  .placeholder {
+    border-radius: 8px;
+    flex: 0 0 auto;
+    height: 4rem;
+    width: 4rem;
+    border: 1px solid #e2e8f0;
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    transition: all 0.2s ease-in-out;
+  }
+
+  .placeholder:hover {
+    border-color: #cbd5e1;
+    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+  }
+
+  .placeholder span {
+    font-size: 0.6rem;
+    color: #64748b;
+    text-align: center;
+    line-height: 1;
+    font-weight: 500;
+  }
+
   @media (max-width: 768px) {
     .floorplan-image-card {
       width: 100%;

package/src/WebComponent/FeeCalculator/components/floorplan-image-card/floorplan-image-card.ts

@@ -49,11 +49,19 @@ export class FloorplanImageCard extends LitElement {
     return html`
       <div class="floorplan-image-card ${this.selected ? "selected" : ""}">
         <div class="section-left">
-          <img
-            @click=${this.handleOnImgClick}
-            src="${this.unit.floorplanUrl ?? ""}"
-            alt="${this.unit.floorplanName}"
-          />
+          ${this.unit.floorplanUrl
+            ? html`
+                <img
+                  @click=${this.handleOnImgClick}
+                  src="${this.unit.floorplanUrl}"
+                  alt="${this.unit.floorplanName}"
+                />
+              `
+            : html`
+                <div class="placeholder">
+                  <span>No Image</span>
+                </div>
+              `}
         </div>
         <div class="section-right" @click=${this.handleOnUnitSelect}>
           <p class="image-card-title">

package/src/WebComponent/FeeCalculator/fee-calculator.ts

@@ -420,13 +420,12 @@ export class FeeCalculator extends LitElement {
     }
 
     try {
-      const units = await fetchBuildingUnits({
+      this.units = await fetchBuildingUnits({
         buildingSlug: this.buildingSlug,
         moveInDateEarliestString: this.moveInDateString,
         ...(numBedrooms ? { numBedrooms } : {}),
         leaseTermMin: this.leaseTerm,
       });
-      this.units = units.filter((unit) => !!unit.floorplanUrl);
 
       if (this.selectedUnit) {
         const isUnitStillAvailable = this.units.some(