Add billing section in credit card selector suitecommerce

_.extend(OrderWizardModulePaymentMethodSelector.prototype, {

                    template: jj_order_wizard_paymentmethod_selector_module_tpl,

               

                    initialize: _.wrap(OrderWizardModulePaymentMethodSelector.prototype.initialize, function (fn, options) {

                        fn.apply(this, Array.prototype.slice.call(arguments, 1));

               

                        let profile = ProfileModel.getInstance();

                        let addresses = profile.get(‘addresses’);

               

                        if (!addresses || !(addresses instanceof Backbone.Collection)) {

                            profile.set(‘addresses’, new Backbone.Collection());

                        }

               

                       

                    }),

               

                    events: _.extend({}, OrderWizardModulePaymentMethodSelector.prototype.events, {

                        ‘click [data-action=”select”]’: ‘selectAddress’,

                        ‘click [data-action=”same-as”]’: ‘toggleSameAsShipping’,

                        ‘click [data-action=”edit-address”]’: ‘editAddressHandler’,

                    }),

                    editAddressHandler: function (e) {

                        e.preventDefault();

                   

                        const $target = jQuery(e.currentTarget);

                        const customTitle = $target.data(‘title’) || ‘Edit Address’;

                        // Store original methods before overriding

                            _.extend(AddressEditView.prototype, {

                                initialize: _.wrap(AddressEditView.prototype.initialize, function (fn, options) {

                                    fn.apply(this, Array.prototype.slice.call(arguments, 1));

                                    this.page_header = customTitle; // Set custom title dynamically

                                })

                            });

                       

                            // Open the modal

                            const modalInstance = this.options.application.getLayout().showInModal(new AddressEditView());

                       

                            // Restore original methods after modal closes

                            modalInstance.once(‘afterClose’, function () {

                                AddressEditView.prototype.initialize = originalInitialize;

                                console.log(‘Modal closed, AddressEditView restored’);

                            });

                       

                        // Extend AddressEditView dynamically

                       

                    },                  

                    selectAddress: function (e) {

                        // jQuery(‘.wizard-content .alert-error’).hide();

               

                        let addressId = jQuery(e.target).data(‘id’).toString();

                        this.setAddress(addressId);

               

                        this.render();

                        this.trigger(‘ready’, true);

                    },

               

                    setAddress: function (address_id) {

                        this.model.set(‘billaddress’, address_id);

                        this.addressId = address_id;

                        this.trigger(‘change:billaddress’, address_id);

                        this.render();

                        return this;

                    },

                    toggleSameAsShipping: function (e) {

                        const isChecked = jQuery(e.target).prop(‘checked’);

                   

                        const shippingAddressId = this.model.get(‘shipaddress’);

                        let billingAddressId = this.model.get(‘billaddress’);

                   

                        // Store the previous billing address if checkbox is checked

                        if (isChecked) {

                            this.model.set(‘previousBillingAddress’, billingAddressId);

                            this.model.set(‘billaddress’, shippingAddressId);

                        } else {

                            // Restore the previous billing address if checkbox is unchecked

                            const previousBillingAddress = this.model.get(‘previousBillingAddress’);

                            this.model.set(‘billaddress’, previousBillingAddress || );

                        }

                   

                        // Store the checkbox state properly

                        this.model.set(‘isSameAsChecked’, isChecked);

                        this.render();  // Rerender the view to reflect changes

                    }

                   

                    ,

               

                    getAddressesToShow: function () {

                        let profile = ProfileModel.getInstance();

                        let addresses = profile.get(‘addresses’) || new Backbone.Collection();

                        let selectedBillingAddressId = this.model.get(‘billaddress’);

               

                        let updatedAddresses = new Backbone.Collection(addresses.models || []);

                        let selectedBillingAddress = addresses.get(selectedBillingAddressId);

               

                        if (selectedBillingAddressId && selectedBillingAddress) {

                            let newBillingAddress = selectedBillingAddress.clone();

                            newBillingAddress.set({

                                ‘internalid’: “-1”,

                                ‘isNew’: true,

                            });

               

                            updatedAddresses.add(newBillingAddress, { at: updatedAddresses.length });

                        }

                        return updatedAddresses;

                    },

               

                    getAddressListOptions: function () {

                        let profile = ProfileModel.getInstance();

                        let isLoggedIn = profile.get(‘isLoggedIn’) === ‘T’;

               

                        return {

                            isBilling: true,

                            selectMessage: this.selectMessage || ,

                            hideDefaults: true,

                            selectedAddressId: this.model.get(‘billaddress’) || ,

                            isSelected: false,

                            showSelector: true,

                            manage: this.manage,

                            isNew: this.model.get(‘isNew’) || false,

                            isbill: true,

                            hideActions: !isLoggedIn,

                            isbillpopup: true,

                            title: “Update Your Billing Address”,

                            new: “Add New Billing Address”

                        };

                    },

               

                    childViews: _.extend({}, OrderWizardModulePaymentMethodSelector.prototype.childViews, {

                        ‘Billing.Address.List’: function () {

                            return new BackboneCollectionView({

                                collection: this.getAddressesToShow(),

                                viewsPerRow: this.itemsPerRow || (Utils.isDesktopDevice() ? 3 : Utils.isTabletDevice() ? 2 : 1),

                                rowTemplate: order_wizard_address_row_tpl,

                                cellTemplate: order_wizard_address_cell_tpl,

                                childView: AddressDetailsView,

                                childViewOptions: this.getAddressListOptions()

                            });

                        },

                        ‘Selected.Billing.Address’: function () {

                            let selectedAddressId = this.model.get(‘billaddress’) || ;

                            let addressList = this.getAddressesToShow();

               

                            if (selectedAddressId) {

                                addressList = addressList.find(item => item.id === selectedAddressId);

                            }

               

                            let profile = ProfileModel.getInstance();

                            let isLoggedIn = profile.get(‘isLoggedIn’) === ‘T’;

                            return new BackboneCollectionView({

                                collection: addressList,

                                viewsPerRow: this.itemsPerRow || (Utils.isDesktopDevice() ? 3 : Utils.isTabletDevice() ? 2 : 1),

                                rowTemplate: order_wizard_address_row_tpl,

                                cellTemplate: order_wizard_address_cell_tpl,

                                childView: AddressDetailsView,

                                childViewOptions: {

                                    model: this.model,

                                    isBilling: true,

                                    selectMessage: this.selectMessage || ,

                                    hideDefaults: true,

                                    selectedAddressId: this.model.get(‘billaddress’) || ,

                                    isSelected: false,

                                    showSelector: true,

                                    manage: this.manage,

                                    isbill: true,

                                    showActionButtons: false,

                                    hideRemoveButton: true,

                                    isbillpopup: true,

                                    isBillingaction: true,

                                    hideActions: !isLoggedIn,

                                    title: “Update Your Billing Address”

                                }

                            });

                        },

                    }),

               

                    getContext: _.wrap(OrderWizardModulePaymentMethodSelector.prototype.getContext, function (fn) {

                        let context = fn.apply(this, Array.prototype.slice.call(arguments, 1));

                        let addresses = this.getAddressesToShow();

                        let selectedBillingAddress = this.model.get(‘billaddress’) || ;

               

                        let billingAddress = selectedBillingAddress;

                        let shippingAddress = this.model.get(‘shipaddress’)|| ;

                   

                        let isSameAsSelected = !!(billingAddress && shippingAddress && billingAddress === shippingAddress);

                       

                        return _.extend(context, {

                            isSameAsSelected: isSameAsSelected,

                            isSameAsEnabled: true,

                             isSameAsCheckBoxDisable: false,

                            sameAsMessage:“Same as shipping address”,

                            selectedBillingAddress: selectedBillingAddress,

                            hasAddresses: addresses.length > 0

                        });

                    })

                });

Leave a comment

Your email address will not be published. Required fields are marked *