Untitled

mail@pastecode.io avatar
unknown
plain_text
19 days ago
39 kB
2
Indexable
Never
<template>

    <div class="errorDiv" lwc:dom="manual"></div>
    <div class="slds-modal__content slds-custom-modal__content" style="height:calc(100vh - 160px);overflow:auto;">
        <header class="slds-modal__header">
            <h2 class="slds-modal__title slds-hyphenate">Client Service Form</h2>
        </header>

        <div if:true={isDataLoaded} class="slds-p-around_medium">
            <!--This toast message will be visible only when we are using forms from callscript as Toast event doesnt ork when lwc is embedded inside VF --->
            <div data-id="redDiv">
            <c-custom-Toast message ={customToastMessage}  variant={customToastvariant} auto-close="true" ></c-custom-Toast>
            </div>
            <!-- ContactInformation Section --->
            <div class="slds-section slds-is-open" id="ContactInformation">
                <h3 class="slds-section__title" onclick={toggleSection}>
                    <button aria-controls="expando-unique-id" aria-expanded="true" class="slds-button slds-section__title-action slds-section-title" >
                        <lightning-icon icon-name="utility:switch" alternative-text="switch" size="x-small" class="slds-section__title-action-icon slds-button__icon_left"></lightning-icon>
                        <span class="slds-truncate" title="Contact Information">Contact Information</span>
                    </button>
                </h3>
                
                <div aria-hidden="false" class="slds-section__content slds-p-around_small">
                    <c-contact-information-section data-cmptype="primary" contact={serviceFormData.primaryContact} is-primary="true"></c-contact-information-section>
                </div>

                
            </div>  
            <!-- ContactInformation Section End--->

            <!-- Billing address Information Section --->
            <div class="slds-section slds-is-open" id="PrimaryIndividualBillingAddress">
                <h3 class="slds-section__title" onclick={toggleSection}>
                    <button aria-controls="expando-unique-id" aria-expanded="true" class="slds-button slds-section__title-action slds-section-title" >
                        <lightning-icon icon-name="utility:switch" alternative-text="switch" size="x-small" class="slds-section__title-action-icon slds-button__icon_left"></lightning-icon>
                        <span class="slds-truncate" title="Primary Individual Billing Address">Primary Individual Billing Address</span>
                    </button>
                </h3>
                
                <div aria-hidden="false" class="slds-section__content slds-p-around_small">
                    
                    <c-billing-information-section 
                        form-type="SERVICE_FORM" 
                        data-cmptype="primary" 
                        is-primary="true"
                        address-api-off={serviceFormData.api.isAddressApiUsageOff}
                        contact={serviceFormData.primaryContact} 
                        onuniquevalidation={validateContactAgainstEachOther}
                        formsource={source}>
                    </c-billing-information-section>
                </div>
            </div>  
            <!-- Billing address Information Section End--->


            <!-- Spouse Information Section --->
            <div if:true={isCoupleSubscription} class="slds-section slds-is-open spouse-information_section" id="SpouseInformation">
                <h3 class="slds-section__title" onclick={toggleSection}>
                    <button aria-controls="expando-unique-id" aria-expanded="true" class="slds-button slds-section__title-action slds-section-title" >
                        <lightning-icon icon-name="utility:switch" alternative-text="switch" size="x-small" class="slds-section__title-action-icon slds-button__icon_left"></lightning-icon>
                         <span class="slds-truncate" title="Family Member Information" style="width:100%;">Family Member Information
                            <a  if:true={isSpouseSearchButtonVisible} style="font-size: 16px;float:right;margin-right: 2rem;padding:2px 0px">
                                <lightning-button variant="brand" label="Search Family Member" title="Search Family Member" onclick={startSpouseSearchProcess}></lightning-button></a>
                        </span>
                    </button>
                </h3>
                
                <div aria-hidden="false" class="slds-section__content slds-p-around_small">   
                    <c-contact-information-section data-cmptype="spouse" contact={serviceFormData.spouseContact}></c-contact-information-section>

                    <c-billing-information-section 
                        form-type="SERVICE_FORM" 
                        data-cmptype="spouse"  
                        address-api-off={serviceFormData.api.isAddressApiUsageOff}
                        contact={serviceFormData.spouseContact} 
                        is-opportunity-active={isOpportunityActive}
                        oncopyingprimaryaddress={copyPrimaryaddressToSpouse} 
                        onmakingprimary={handleMakingPrimary}
                        ontransunionrequest={handleMakingTranunionRequest} 
                        onuniquevalidation={validateContactAgainstEachOther}
                        formsource={source}>
                    </c-billing-information-section>
                </div>
            </div> 
            <!-- Spouse Information Section End--->



            <!-- Package Information Section --->
            <div class="slds-section slds-is-open" id="PackageInformation">
                <h3 class="slds-section__title" onclick={toggleSection}>
                    <button aria-controls="expando-unique-id" aria-expanded="true" class="slds-button slds-section__title-action slds-section-title" >
                        <lightning-icon icon-name="utility:switch" alternative-text="switch" size="x-small" class="slds-section__title-action-icon slds-button__icon_left"></lightning-icon>
                        <span class="slds-truncate" title="Package Information">Package Information</span>
                    </button>
                </h3>
                
                <div aria-hidden="false" class="slds-section__content slds-p-around_small">   
                    <div class="slds-form__row">
                        <div class="slds-form__item" role="listitem">
                            <div class="slds-form-element_stacked slds-clearfix">
                                <label class="slds-form-element__label slds-float_left" >Is this for an individual or Family?</label>
                                <c-combobox label="Is this for an individual or Family?" variant="label-hidden" options={individualOrCoupleOptions} value={serviceFormData.selectedPackage.IndividualOrCouple} disabled="true"></c-combobox>
                            </div>
                        </div>
                        <div class="slds-form__item" role="listitem">
                            <div class="slds-form-element_stacked slds-clearfix">
                                <label class="slds-form-element__label slds-float_left">Original Enrolling Package</label>
                                <div class="slds-form-element__control">
                                    <input type="text" class="slds-input cancelDisable" value={serviceFormData.opp.Original_Credit_Pros_Service__r.Name} style="pointer-events: none;"/>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="slds-form__row">
                        <div class="slds-form__item" role="listitem">
                            <div class="slds-form-element_stacked slds-clearfix">
                                 <label class="slds-form-element__label slds-float_left">Downsell Packages</label>
                                <c-combobox data-type="downshell" disabled={isDownsellDisabled} label="Downsell Packages" variant="label-hidden" options={serviceFormData.downShellPackages} onchange={handleDownshellOptionChange}></c-combobox>
                            </div>
                        </div>
                        <div class="slds-form__item" role="listitem">
                            <div class="slds-form-element_stacked slds-clearfix">
                                <label class="slds-form-element__label slds-float_left">Upgrade</label>
                                <c-combobox data-type="upgrade" label="Upgrade" variant="label-hidden" options={serviceFormData.upgradedPackages} onchange={handleUpgradeOptionChange}></c-combobox>
                            </div>
                        </div>
                    </div>

                    <div class="slds-form__row">
                        <div class="slds-form__item" role="listitem">
                            <div class="slds-form-element_stacked slds-clearfix">
                                <label class="slds-form-element__label slds-float_left">Current Package</label>
                                <div class="slds-form-element__control">
                                    <input type="text" class="slds-input cancelDisable" value={serviceFormData.opp.ProductName__c} style="pointer-events: none;"/>
                                </div>
                            </div>
                        </div>

                        <div class="slds-form__item" role="listitem">
                            <div class="slds-form-element_stacked slds-clearfix">
                                <label class="slds-form-element__label slds-float_left">Updated Package</label>
                                <div class="slds-form-element__control">
                                    <input type="text" data-type="updatedPackage" class="slds-input"  style="pointer-events: none;"/>
                                </div>
                            </div>
                        </div>
                    </div>

                     <div class="slds-form__row">

                                <!--<div class="slds-form__item" role="listitem">
                                    <div class="slds-form-element_stacked slds-clearfix">
                                        <label class="slds-form-element__label slds-float_left slds-checkbox_toggle slds-grid">SPP Removed</label>
                                        <div class="slds-form-element__control">
                                            <label class="slds-checkbox_toggle slds-grid">
                                            <input type="checkbox" data-id="toggle1" name="checkbox-toggle-22" value={serviceFormData.primaryContact.SPP_Removed__c} aria-describedby="checkbox-toggle-22"  checked={chechBox}  onchange={changeToggle}/>
                                            <span id="checkbox-toggle-22" class="slds-checkbox_faux_container" aria-live="assertive">
                                            <span class="slds-checkbox_faux"></span>
                                            <span class="slds-checkbox_on">Enabled</span>
                                            <span class="slds-checkbox_off">Disabled</span>
                                            </span>
                                        </label>
                                        </div>
                                    </div>
                                </div>-->

                                <div class="slds-form__item" role="listitem">
                                    <div class="slds-form-element_stacked slds-clearfix">

                                        <div class="slds-form-element__control">

                                        </div>
                                    </div>
                                </div>
                            </div>


                    <div class="slds-m-top_medium" style="text-align:center;">
                        <template if:true={isCoupleSubscription}>
                            <button type="button" class="slds-button slds-button_brand slds-m-right_xx-small" data-actiontype="REMOVE_FAMILY_MEMBER" onclick={packageChangeConfirmation}>Remove Family Member</button>
                            <button if:false={isPackageTypePFR} type="button" class="slds-button slds-button_brand slds-m-right_xx-small" data-actiontype="ADD_FAMILY_PFR" onclick={packageChangeConfirmation}>Add Family PFR</button>
                        </template>

                        <template if:false={isCoupleSubscription}>
                            <button type="button" class="slds-button slds-button_brand slds-m-right_xx-small" data-actiontype="ADD_FAMILY_MEMBER" onclick={packageChangeConfirmation}>Family Add-On</button>
                        </template>

                        <button if:true={isPackageTypePFR} type="button" class="slds-button slds-button_brand slds-m-right_xx-small" data-actiontype="REMOVE_PFR" onclick={packageChangeConfirmation}>Remove PFR</button>
                    </div>
                </div>
            </div> 
            <!-- Package Information Section End--->



            <!----------- Billing Options section starts here -------------->
            <div class="slds-section slds-is-open BillingOptionsSection" id="BillingOptions">
                <h3 class="slds-section__title" onclick={toggleSection}>
                    <button aria-controls="expando-unique-id" aria-expanded="true" class="slds-button slds-section__title-action slds-section-title" >
                        <lightning-icon icon-name="utility:switch" alternative-text="switch" size="x-small" class="slds-section__title-action-icon slds-button__icon_left"></lightning-icon>
                        <span class="slds-truncate" title="Billing Options">Billing Options</span>
                    </button>
                </h3>
                <div aria-hidden="false" class="slds-section__content slds-p-around_small" id="BillingOptionsContent">
                    
                    <div class="slds-grid slds-wrap" style="font-weight:bold;font-size:16px;">
                        <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-1 slds-large-size_6-of-12" id="nextScheduledPaymentDiv">
                            Current Next Scheduled Payment: {serviceFormData.currentNextTransactionDate} 
                        </div>
                        <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-1 slds-large-size_3-of-12">
                           Enrollment Balance: <span style={enrollmentBalanceCss}>${serviceFormData.opp.enrollment_balance__c}</span>
                            
                        </div>
                        <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-1 slds-large-size_3-of-12">
                            Net Balance Due: <span style={netBalanceDueCss}>${serviceFormData.opp.Net_Balance_Due__c}</span>
                        </div>
                    </div>


                    <div class="slds-form-element slds-form-element_horizontal slds-m-top_small">
                         <div class="slds-form-element__control slds-subscription_ext extendedMaindiv" style="padding-left: 0%;font-size:16px;clear: left;">
                            Extend Next Subscription Date to [&nbsp; 
                            <select if:true={issubScriptionExtensionDisabled} class="slds-select" disabled>
                                <template for:each={subscriptionExtensionOptions} for:item="option">
                                    <option key={option.value} value={option.value}>{option.label}</option>
                                </template>
                            </select>
                            
                            <select if:false={issubScriptionExtensionDisabled} data-type="subscriptionExtension" value={serviceFormData.numberOfMonthsSubscriptionExtended} class="slds-select" onchange={handleSubscriptionExtension}>
                                <template for:each={subscriptionExtensionOptions} for:item="option">
                                    <option key={option.value} value={option.value}>{option.label}</option>
                                </template>
                            </select>
                            &nbsp;
                            ] "Months"( <span class="slds-forcasted_next-date">MM/DD/YYYY</span> )
                            <lightning-helptext content="The action will not forgive pre-existing amount due, use this when client calls ahead of schedule subscription and needs the upcoming payment(s) waived up to three months"></lightning-helptext>
                        </div>
                        <span style="color:red" class="slds-hide slds-has-error extendedDiv" id="form-error-01">ERROR:Cannot Waive transaction, there is already a waiver in this account. </span>
                    </div>

                    <div class="slds-form__row">
                        <div class="slds-form__item" role="listitem">
                            <div class="slds-form-element_stacked slds-clearfix">
                                <label class="slds-form-element__label slds-float_left" >One time future Subscription charge date</label>
                                <lightning-input if:true={isOneTimefutureSubscriptionDateDisabled} disabled type="date"  date-style="short" label="One time future Subscription charge date" variant="label-hidden"></lightning-input>
                                <lightning-input data-type="onetimefuturedate" if:false={isOneTimefutureSubscriptionDateDisabled} type="date"  date-style="short" label="One time future Subscription charge date" variant="label-hidden" onchange={handleOneTimeSubscriptionDate}></lightning-input>
                            </div>
                        </div>

                        <div class="slds-form__item" role="listitem">
                            <div class="slds-form-element_stacked slds-clearfix">
                                <label class="slds-form-element__label slds-float_left" >Recurring Charge Date</label>
                                <c-combobox data-type="chargedate" label="Recurring Charge Date" variant="label-hidden" options={recurringChargeDateOptions} value={serviceFormData.opp.Charge_Date__c} disabled={isOneTimefutureSubscriptionDateDisabled} onchange={handleRecurringChargeDateChange}></c-combobox>
                            </div>
                        </div>
                    </div>

                    <div class="slds-form__row">
                        <div class="slds-form__item" role="listitem">
                            <div class="slds-form-element_stacked slds-clearfix">
                                <label class="slds-form-element__label slds-float_left" >2nd Setup Fee Amount</label>
                                <lightning-input type="number" disabled formatter="currency" name="SetupFee2_Amount__c" label="2nd Setup Fee Amount" variant="label-hidden" value={serviceFormData.opp.SetupFee2_Amount__c}></lightning-input>
                            </div>
                        </div>

                        <div class="slds-form__item" role="listitem">
                            <div class="slds-form-element_stacked slds-clearfix">
                                <label class="slds-form-element__label slds-float_left" >2nd Setup Fee Date</label>
                                <lightning-input type="date" if:true={is2ndSetupFeeDateDisabled} disabled name="SetupFee2_Date__c"  date-style="short" label="2nd Setup Fee Date" variant="label-hidden" value={serviceFormData.opp.SetupFee2_Date__c} ></lightning-input>
                                <lightning-input type="date" if:false={is2ndSetupFeeDateDisabled} data-type="SetupFee2_Date__c"  date-style="short" name="SetupFee2_Date__c" label="2nd Setup Fee Date" variant="label-hidden" value={serviceFormData.opp.SetupFee2_Date__c} onchange={validate2ndSetupDate}></lightning-input>
                            </div>
                        </div>
                    </div>

                    <div class="slds-form__row">
                        <div class="slds-form__item" role="listitem">
                            <div class="slds-form-element_stacked slds-clearfix">
                                <label class="slds-form-element__label slds-float_left" >Debt Payment Amount</label>
                                <lightning-input if:true={isDebtPaymentDisabled} disabled={isDisable} disabled type="number" formatter="currency" name="Debt_Payment__c" label="Debt Payment Amount" variant="label-hidden" value={serviceFormData.opp.Debt_Payment__c} ></lightning-input>
                                <lightning-input if:false={isDebtPaymentDisabled}  disabled={isDisable} data-name="Debt_Payment__c" type="number" formatter="currency" step="0.01" name="Debt_Payment__c" label="Debt Payment Amount" variant="label-hidden" value={serviceFormData.opp.Debt_Payment__c} onchange={validateDebtPaymentAmount}></lightning-input>
                            </div>
                        </div>

                        <div class="slds-form__item" role="listitem">
                            <div class="slds-form-element_stacked slds-clearfix">
                                <label class="slds-form-element__label slds-float_left" >Debt Payment Date</label>
                                <lightning-input if:true={isDebtPaymentDisabled} disabled={isDisable} disabled type="date"  date-style="short" name="Debt_Payment_Date__c" label="Debt Payment Date" variant="label-hidden" value={serviceFormData.opp.Debt_Payment_Date__c}></lightning-input>
                                <lightning-input if:false={isDebtPaymentDisabled} disabled={isDisable} data-name="Debt_Payment_Date__c" type="date"  date-style="short" name="Debt_Payment_Date__c" label="Debt Payment Date" variant="label-hidden" value={serviceFormData.opp.Debt_Payment_Date__c} onchange={validateDebtPaymentDate}></lightning-input>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="slds-form__row">
                        <div class="slds-form__item" role="listitem">
                            <div class="slds-form-element_stacked slds-clearfix">
                                <c-lookup isdisabled={isDebtPaymentDisabled} objecttype="User" data-type="user"  searchagainst="Name" label="Debt Agent Owner" lookupicon="standard:user" max-results="5" onselection={handleDebtAgentOwnerSelection} ></c-lookup>
                            </div>
                        </div>
                        <div class="slds-form__item" role="listitem">
                            <div class="slds-form-element_stacked">
                            </div>
                        </div>
                    </div> -->
                    
                </div>
            </div>  
            <!----------- Billing Options section ends here -------------->




            <!----------- Credit Card Section section starts here -------------->
            <div class="slds-section slds-is-open" id="CreditCardInformationOptions">
                <h3 class="slds-section__title" onclick={toggleSection}>
                    <button aria-controls="expando-unique-id" aria-expanded="true" class="slds-button slds-section__title-action slds-section-title" >
                        <lightning-icon icon-name="utility:switch" alternative-text="switch" size="x-small" class="slds-section__title-action-icon slds-button__icon_left"></lightning-icon>
                        <span class="slds-truncate" title="Credit Card Information">Credit Card Information</span>
                    </button>
                </h3>
                <div aria-hidden="false" class="slds-section__content slds-p-around_small" id="CreditCardInformationContent">
                    <div class="slds-form">
                        <div class="slds-form__row">
                            <div class="slds-form__item" role="listitem">
                                <div class="slds-form-element_stacked slds-clearfix">
                                    <label class="slds-form-element__label slds-float_left" >Net Balance Due</label>
                                    <lightning-input disabled type="text" name="Net_Balance_Due__c" label="Net Balance Due" variant="label-hidden" value={serviceFormData.creditCardInfo.TotalNetBalanceDue}></lightning-input>
                                </div>
                            </div>
                            <div class="slds-form__item" role="listitem">
                                <div class="slds-form-element_stacked slds-clearfix">
                                     <label class="slds-form-element__label slds-float_left" >Charge Amount</label>
                                    <lightning-input data-name="ChargeAmount" disabled={isDisable} type="number" name="ChargeAmount" label="Charge Amount" variant="label-hidden" value={serviceFormData.creditCardInfo.ChargeAmount} formatter="currency" step="0.01" onchange={handleCreditCardFieldChange} disabled={isDebtPaymentDisabled}></lightning-input>
                                </div>
                            </div>
                        </div>
                        
                        <div class="slds-form__row">
                            <div class="slds-form__item" role="listitem">
                                <div class="slds-form-element_stacked slds-clearfix">
                                    <label class="slds-form-element__label slds-float_left" >Credit Amount</label>
                                    <lightning-input if:true={isDisableCreditCard} disabled data-name="CreditAmount" type="number" name="CreditAmount" label="Credit Amount" variant="label-hidden" value={serviceFormData.creditCardInfo.CreditAmount} formatter="currency" step="0.01" onchange={handleCreditCardFieldChange} field-level-help="Use to forgive full or partial amount due"></lightning-input>
                                    <lightning-input if:false={isDisableCreditCard} disabled={isDisable} data-name="CreditAmount" type="number" name="CreditAmount" label="Credit Amount" variant="label-hidden" value={serviceFormData.creditCardInfo.CreditAmount} formatter="currency" step="0.01" onchange={handleCreditCardFieldChange} field-level-help="Use to forgive full or partial amount due"></lightning-input>                                </div>
                            </div>
                            <div class="slds-form__item" role="listitem">
                                <div class="slds-form-element_stacked slds-clearfix">
                                    <label class="slds-form-element__label slds-float_left" >Selected Recurring Card</label>
                                    <c-combobox 
                                        label="Selected Recurring Card"
                                         variant="label-hidden"
                                        value={serviceFormData.creditCardInfo.selectedCreditCardId}
                                        options={serviceFormData.creditCardInfo.availableCreditCards} 
                                        onchange={handleRecurringCardChange}>
                                    </c-combobox>
                                </div>
                            </div>
                        </div>
                        
                        <fieldset class="slds-form-element slds-form-element_compound">
                            <div class="slds-form-element__control slds-clearfix">
                                <div class="slds-form-element__row">
                                    <div class="slds-size_3-of-12 slds-form-compound-padding">
                                        <label class="slds-form-element__label slds-float_left" >Card Number</label>
                                        <lightning-input if:true={isCreditcardDisabled} label="Card Number"  variant="label-hidden" type="text" data-type="Card" class="custom-disabled" max-length="16" value={serviceFormData.creditCardInfo.encryptedCardNumber}></lightning-input>
                                        <lightning-input if:false={isCreditcardDisabled} label="Card Number" variant="label-hidden" type="text" data-type="Card" onkeypress={stopTextEntry} max-length="16" value={serviceFormData.creditCardInfo.encryptedCardNumber} onblur={validateCreditCard}></lightning-input>
                                    </div>

                                    <div class="slds-size_3-of-12 slds-form-compound-padding">
                                        <div class="slds-form-element expirationMonthMainDiv">
                                            <label class="slds-form-element__label slds-float_left" >Expiration Month</label>
                                            <lightning-input if:true={isCreditcardDisabled} label="Expiration Month" variant="label-hidden" disabled type="text" data-type="Exp_Month" max-length="2" onkeypress={stopTextEntry}  value={serviceFormData.creditCardInfo.CardExpMonth} onchange={validateCreditCardMonth}></lightning-input>
                                            <lightning-input if:false={isCreditcardDisabled} label="Expiration Month" variant="label-hidden" type="text" data-type="Exp_Month" max-length="2" onkeypress={stopTextEntry} value={serviceFormData.creditCardInfo.CardExpMonth} onchange={validateCreditCardMonth} onblur={validateCreditCardMonth}></lightning-input>
                                        </div>
                                    </div>

                                    <div class="slds-size_3-of-12 slds-form-compound-padding">
                                        <div class="slds-form-element expirationYearMainDiv">
                                            <label class="slds-form-element__label slds-float_left" >Expiration Year</label>
                                            <lightning-input if:true={isCreditcardDisabled} label="Expiration Year" variant="label-hidden" disabled type="text" data-type="Exp_Year" max-length="4" onkeypress={stopTextEntry} value={serviceFormData.creditCardInfo.CardExpYear} onchange={validateCreditCardYear}></lightning-input>
                                            <lightning-input if:false={isCreditcardDisabled} label="Expiration Year" variant="label-hidden" type="text" data-type="Exp_Year" max-length="4" onkeypress={stopTextEntry} value={serviceFormData.creditCardInfo.CardExpYear} onblur={validateCreditCardYear}></lightning-input>
                                        </div>
                                    </div>

                                    <div class="slds-size_3-of-12 slds-form-compound-padding slds-clearfix">
                                        <div class="slds-form-element expirationCvvMainDiv">
                                        <label class="slds-form-element__label slds-float_left" >Card CVV</label>
                                        <lightning-input if:true={isCreditcardDisabled} label="Card CVV" variant="label-hidden" disabled type="text" data-type="CVV" max-length="4" onkeypress={stopTextEntry} value={serviceFormData.creditCardInfo.CardCVV} onblur={validateCreditCardCVV}></lightning-input>
                                        <lightning-input if:false={isCreditcardDisabled} label="Card CVV" variant="label-hidden" type="text" data-type="CVV" max-length="4" onkeypress={stopTextEntry} value={serviceFormData.creditCardInfo.CardCVV} onblur={validateCreditCardCVV}></lightning-input>
                                        </div>
                                    </div>
                                </div>
                                <div class="slds-form-element__row">
                                    <div class="slds-size_1-of-1 slds-form-compound-padding slds-clearfix">
                                        <label class="slds-form-element__label slds-float_left" >Payment Categories</label>
                                        <c-combobox data-type="paymentcategories" label="Selected Recurring Card" variant="label-hidden"
                                            value="" options={paymentCategoriesOptions}
                                            onchange={validatePaymentCategory}>
                                        </c-combobox>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>
            <!----------- Credit Card Section section ends here -------------->
        </div>

        <div if:true={isOpportunityCancelled}>
            <div class="slds-align_absolute-center" style="height:calc(100vh - 225px);font-size:17px;font-weight:500; text-align: center;">
                Opportunity is cancelled, with No Net Balance due.<br/>
                To use Service Form , client must be first re-enrolled through Re-enroll button.
            </div>  
        </div>

        <div if:true={isOpportunityWarmLead}>
            <div class="slds-align_absolute-center" style="height:calc(100vh - 225px);font-size:17px;font-weight:500; text-align:center;">
                Contact cannot be a warm lead.<br/>
                To use Service Form , client must be first enrolled through Intake Form.
            </div>  
        </div>
    </div>

    <footer if:true={isOpportunityActive} class="slds-modal__footer">
      <button if:true={isChargeAndUpdateButtonDisabled} disabled class="slds-button slds-button_brand slds-m-right_xx-small">Charge and Update</button>
      <button if:false={isChargeAndUpdateButtonDisabled} class="slds-button slds-button_brand slds-m-right_xx-small" data-actiontype="CHARGE_AND_UPDATE" onclick={validateBeforeUpdate}>Charge and Update</button>

      <button if:true={is2ndSetupFeeButtonDisabled} disabled class="slds-button slds-button_brand slds-m-right_xx-small">Charge 2nd Setup Fee</button>
      <button if:false={is2ndSetupFeeButtonDisabled} class="slds-button slds-button_brand slds-m-right_xx-small" data-actiontype="CHARGE_2NDSETUP_FEE" onclick={validateBeforeUpdate}>Charge 2nd Setup Fee</button>
      
      <button if:true={isUpdateOnlyButtonDisabled} disabled class="slds-button slds-button_brand slds-m-right_xx-small">Update Only</button>
      <button if:false={isUpdateOnlyButtonDisabled} class="slds-button slds-button_brand slds-m-right_xx-small" data-actiontype="UPDATE_ONLY" onclick={validateBeforeUpdate}>Update Only</button>
    </footer>

    <footer if:false={isOpportunityActive} class="slds-modal__footer">
        <button class="slds-button slds-button_brand slds-m-right_xx-small" onclick={closeServiceForm}>Done</button>
    </footer>

    <lightning-spinner if:true={isLoading} alternative-text="Loading" size="medium" variant="brand"></lightning-spinner>

    <!---------------------------------------------------- Family Add-On/Removal || PFR Add/Removal Modal Popup ------------------------------------------------>
    <c-modal-popup if:true={showPackageChangeConfirmationModal} oncancel={packageChangeConfirmation} onconfirmation={managePackageChangeConfirmation} formsource={source}>
        <span slot="header">{packageChangeModalHeader}</span>
        <span slot="body">Package option was changed. Please confirm change.</span>
    </c-modal-popup>
    
    

    <c-modal-popup  if:true={hasChargeAmountOnUpdateOnly} oncancel={cancelChargeAmountWarning} onconfirmation={confirmUpdateOnlyWithoutTransaction} formsource={source}>
        <span slot="header">Update Only</span>
        <span slot="body">Please know that no transactions will be created for the amount entered in charge or credit amount. Use Charge and Update to make transactions. Click confirm to continute without transactions.</span>
    </c-modal-popup>

    <c-modal-popup  if:true={showDoNotHonurModal}  oncancel={hideDoNotHonurModal} onconfirmation={resendAfterDoNotHonorResponse} formsource={source}>
        <span slot="header">Transaction Failed</span>
        <span slot="body">
            <span style="font-size: 1rem;color:red;font-weight: bold;">DO NOT HONOR! </span> <br/>
            <span style="font-size: 1rem;color:red;font-weight: bold;">
                "The gateway declined this attempt, however we are re attempting, await a few seconds before notifying client"
            </span> <br/>
        </span>
    </c-modal-popup>

    <c-modal-popup  if:true={showTransactionFailedModal} confirm-button-label="Agrees" oncancel={hideTransactionFailedModal} onconfirmation={agreesTransactionFailedModal} formsource={source}>
        <span slot="header">Transaction Failed <lightning-icon icon-name="utility:close" variant="error" size="small"></lightning-icon></span>
        <span slot="body">{transactionErrorMessage}</span>
    </c-modal-popup>


    <c-modal-popup  if:true={showBinBlockCardModal} confirm-button-label="Agrees" oncancel={redirectBackToParent} onconfirmation={submitNewCardAfterBlock} formsource={source}>
        <span slot="header"><lightning-icon icon-name="utility:warning" variant="error" size="small"></lightning-icon></span>
        <span slot="body">Unfortunately, we do not accept this card. Do you have another card we can use to get started?</span>
    </c-modal-popup>

    <c-modal-popup  if:true={showMakePrimaryconfirmation} oncancel={cancelMakePrimaryconfirmation} onconfirmation={confirmMakingPrimary} formsource={source}>
        <span slot="header">Make Primary?</span>
        <span slot="body">{makePrimaryConfirmationBody}</span>
    </c-modal-popup>
    
     <c-modal-popup  if:true={showDuplicateAttemptModal}  oncancel={hideDuplicateAttemptModal} onconfirmation={hideDuplicateAttemptModal} formsource={source}>
        <span slot="header">WARNING <lightning-icon icon-name="utility:warning" variant="error" size="small"></lightning-icon></span>
        <span slot="body">{multipleAttemptTransaction} </span>
    </c-modal-popup>


     <c-modal-popup  if:true={isSameTransactionMessageOpen} oncancel={cancelSameTransaction} onconfirmation={confirmSameTransaction} formsource={source} confirm-button-label="Yes" cancel-button-label="No">
        <span slot="header">Confirm Payment</span> 
        <span slot="body">There is a payment already processed on {lastTransactionDate}. Do you want to continue?</span>
    </c-modal-popup>
    
    <c-spouse-search if:true={showSpouseSeachComponent} oncancel={cancelSpouseSearchProcess} onspouseselection={handleSpouseSelection} formsource={source}></c-spouse-search>

    <c-cst-owner-selection if:true={showCstOwnerScreen} oncancel={cancelCSTSelection} onsubmission={submitCSTAndServiceForm} formsource={source}></c-cst-owner-selection>
    
    

</template>
Leave a Comment