update 837494574248735

portal/api/sdk/js/afssdk.js

@@ -2407,10 +2407,11 @@
 
         function _getSubscriptions(props,cb,self){
             callme5({
+                // TODO_1: stripe send to correct url
                 get_prices: true,
                 data: JSON.stringify(self.directPaymentInstance.directPayment)
             },function(obj){
-                console.log(obj);
+                // console.log(obj);
                 self.subscription_data = obj;
                 cb(obj);
             });
@@ -3883,153 +3884,186 @@
     }
 
     // rrrrr
-    function buildStripeCheckout(options,checkCb,successCb,errCb){
+    function buildStripeCheckout(options,setupCb,checkCb,successCb,errCb){
         let direct_payments_obj = sessionStorage.getItem('afs_direct_payment');
         if(direct_payments_obj==undefined){
             window.location.href = "/";
             console.log("error - no direct payment");
         }
         direct_payments_obj = JSON.parse(direct_payments_obj);
-        // console.log(direct_payments_obj);
+        let stripeManager = new StripeManager(direct_payments_obj,options);
 
-        let client_id = direct_payments_obj._processor.json.client_id;
-        // console.log(client_id);
+        setupCb(stripeManager);
+        RegisterStripeEvents(stripeManager);
 
-        // const stripe = Stripe('pk_test_51S30kTJTsOSWtcD79lohqmoR82oCRRMoaLXt5Mp3w4IjY8aWe8DryZD9Jn0vjewY9LkrXpSl30WucTAv4Znknr1w00X4vLzqQT');
-        const stripe = Stripe(client_id);
-        const appearance = {
-            rules: {
-                '.Tab': {
-                border: '1px solid #E0E6EB',
-                boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)',
-                },
+        
 
-                '.Tab:hover': {
-                color: 'var(--colorText)',
-                },
-
-                '.Tab--selected': {
-                borderColor: '#E0E6EB',
-                boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)',
-                },
-
-                '.Input--invalid': {
-                boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorDanger)',
-                },
-
-                // See all supported class names and selector syntax below
-            }
-        };
-
-
-        const stripeOptions = {
-            hidePostalCode: true,
-            layout: {
-                type: 'accordion',
-                defaultCollapsed: true,
-            },
-            defaultValues: {
-                billingDetails: {
-                name: '',
-                email: ''
-                }
-            }
-        };
-        const elements = stripe.elements({
-            fonts: [
-                {
-                    cssSrc: 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'
-                }
-            ]
-        });
-
-        // const elements = stripe.elements({appearance});
-
-        const cardNumber = elements.create('cardNumber', {
-            style: {
-                base: {
-                    color: '#555',
-                    fontFamily: 'Montserrat, sans-serif'
-                }
-            }
-        });
-        cardNumber.mount('#card-number-element');
-
-        const cardExpiry = elements.create('cardExpiry', {
-            style: {
-                base: {
-                    color: '#555',
-                    fontFamily: 'Montserrat, sans-serif'
-                }
-            }
-        });
-        cardExpiry.mount('#card-expiry-element');
-
-        const cardCvc = elements.create('cardCvc', {
-            style: {
-                base: {
-                    color: '#555',
-                    fontFamily: 'Montserrat, sans-serif'
-                }
-            }
-        });
-        cardCvc.mount('#card-cvc-element');
-
-
-        const addressElement = elements.create('address',{
-            mode: 'billing',
-            defaultValues: {},
-            fields: {
-                // name: 'never',
-            },
-            // style: {
-            //     base: {
-            //         color: '#555',
-            //         fontFamily: 'Montserrat, sans-serif'
-            //     }
-            // }
-        });
-        addressElement.mount('#card-address-element');
-
-
-        // const cardZip = elements.create('postalCode', {
-        //     style: {
-        //         base: {
-        //             color: '#555',
-        //             fontFamily: 'Montserrat, sans-serif'
-        //         }
-        //     }
-        // });
-        // cardZip.mount('#card-zip-element');
-
-        // Payment info collection and confirmation
-        // When the submit button is pressed, attempt to confirm the payment intent
-        // with the information input into the card element form.
-        // - handle payment errors by displaying an alert. The customer can update
-        //   the payment information and try again
-        // - Stripe Elements automatically handles next actions like 3DSecure that are required for SCA
-        // - Complete the subscription flow when the payment succeeds
 
         $(options.submit_id).on("click", async function(e){
             e.preventDefault();
-            let action = checkCb(direct_payments_obj);
-            if(action==false){return;}
+            let action = checkCb(stripeManager);
+            if(action.pass==false){return;}
+            const stripe = stripeManager.getStripe();
+            let elements = stripeManager.elements.elements;
+            let cardNumber = stripeManager.elements.cardNumber;
+            // let elemcardCvcents = stripeManager.elements.cardCvc;
 
+            // elements,cardNumber,cardCvc,cardExpiry
             let coupon = sessionStorage.getItem('mystripe_coupon_object');
             console.log(coupon);
             if(coupon!=undefined && coupon!=null){
                 coupon = JSON.parse(coupon);
-                _stripeWithCoupon(coupon,cardNumber,elements,stripe,direct_payments_obj,action,errCb,successCb);
+                _stripeWithCoupon(coupon,cardNumber,elements,stripe,direct_payments_obj,action,errCb,successCb,stripeManager);
             }else{
-                _stripeWithoutCoupon(elements,cardNumber,stripe,direct_payments_obj,action,errCb,successCb);
+                _stripeWithoutCoupon(elements,cardNumber,stripe,direct_payments_obj,action,errCb,successCb,stripeManager);
             }
         });
+
+    }
+
+    function RegisterStripeEvents(stripeManager){
+        document.addEventListener("display:card",function(e){
+            let data = e.detail;
+            if(data.resultsCallback!=undefined){
+                data.resultsCallback();
+            }
+        });
+        document.addEventListener("update:tax",function(e){
+            _stripeEventUpdateTax(stripeManager,e.detail);
+        });
     }
 
-    function _stripeWithCoupon(coupon,cardNumber,elements,stripe,direct_payments_obj,action,errCb,successCb){
+    function _stripeEventUpdateTax(stripeManager,data){
+        if(stripeManager._saved_postal_code.trim()==data.data.address.postal_code.trim()){
+            return;
+        }
+
+        console.log(data);
+
+        stripeManager._saved_postal_code = data.data.address.postal_code.trim();
+        // console.log(data);
+
+            const stripe = stripeManager.getStripe(); //Stripe(client_id);
+            const appearance = {
+                rules: {
+                    '.Tab': {
+                    border: '1px solid #E0E6EB',
+                    boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)',
+                    },
+
+                    '.Tab:hover': {
+                    color: 'var(--colorText)',
+                    },
+
+                    '.Tab--selected': {
+                    borderColor: '#E0E6EB',
+                    boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)',
+                    },
+
+                    '.Input--invalid': {
+                    boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorDanger)',
+                    },
+
+                    // See all supported class names and selector syntax below
+                }
+            };
+            const stripeOptions = {
+                // hidePostalCode: true,
+                layout: {
+                    type: 'accordion',
+                    defaultCollapsed: true,
+                },
+                defaultValues: {
+                    billingDetails: {
+                        name: '',
+                        email: ''
+                    }
+                }
+            };
+            const elements = stripe.elements({
+                fonts: [
+                    {
+                        cssSrc: 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'
+                    }
+                ]
+            });
+
+            // const elements = stripe.elements({appearance});
+
+            const cardNumber = elements.create('cardNumber', {
+                // hidePostalCode: true,
+                style: {
+                    base: {
+                        color: '#555',
+                        fontFamily: 'Montserrat, sans-serif'
+                    }
+                }
+            });
+            
+            const cardExpiry = elements.create('cardExpiry', {
+                style: {
+                    base: {
+                        color: '#555',
+                        fontFamily: 'Montserrat, sans-serif'
+                    }
+                }
+            });
+
+            const cardCvc = elements.create('cardCvc', {
+                style: {
+                    base: {
+                        color: '#555',
+                        fontFamily: 'Montserrat, sans-serif'
+                    }
+                }
+            });
+
+            const addressElement = elements.create("address", {
+                mode: "billing", // or "shipping"
+                defaultValues:{
+                    name: "James Mitchell",// data.data.name,
+                    address: data.data.address
+                }
+            });
+
+            
+            const cardZip = elements.create('postalCode', {
+                style: {
+                    base: {
+                        color: '#555',
+                        fontFamily: 'Montserrat, sans-serif'
+                    }
+                }
+            });
+
+        stripeManager.getTax(data.data,function(results){
+            // console.log("mounting");
+            // console.log(data.data);
+            // console.log(results);
+  
+
+            addressElement.mount("#address_no_mount");
+            cardNumber.mount(stripeManager.getOptions().card.cardNumber);
+            cardExpiry.mount(stripeManager.getOptions().card.cardExpiry);
+            cardCvc.mount(stripeManager.getOptions().card.cardCVC);
+
+            if(data.resultsCallback!=undefined){
+                data.resultsCallback(results);
+            }
+            stripeManager.elements = {
+                elements,cardNumber,cardCvc,cardExpiry,addressElement
+            };
+        });
+
+
+
+    }
+
+    function _stripeWithCoupon(coupon,cardNumber,elements,stripe,direct_payments_obj,action,errCb,successCb,stripeManager){
         
         var addressElement = elements.getElement('address');
         addressElement.getValue().then(function(addr_result) {
+            console.log(addr_result);
             if (addr_result.complete) {
 
                 // console.log(addr_result);
@@ -4090,9 +4124,10 @@
             }
         });
     }
-    function _stripeWithoutCoupon(elements,cardNumber,stripe,direct_payments_obj,action,errCb,successCb){
+    function _stripeWithoutCoupon(elements,cardNumber,stripe,direct_payments_obj,action,errCb,successCb,stripeManager){
         var addressElement = elements.getElement('address');
         addressElement.getValue().then(function(addr_result) {
+            // console.log(addr_result);
             if (addr_result.complete) {
 
                 // console.log(addr_result);
@@ -4105,24 +4140,34 @@
                 var _line2 = addr_result.value.address.line2;
                 var postalCode = addr_result.value.address.postal_code;
 
+                
+                console.log(stripeManager);
+
+                let _path1 = "/create_customer";
+                if(stripeManager.getCustomerId()!=null){
+                    _path1 = "/update_customer";
+                }
+
                 callStripe({
-                        path: "/create_customer",
+                        path: _path1,
                         create_customer: true,
                         data: JSON.stringify({
                             direct_payment: direct_payments_obj,
                             email: action.email,
                             address: addr_result.value.address,
-                            name: _name
+                            name: _name,
+                            customer: { id: stripeManager.getCustomerId() }
                         })
                     },function(data1){
-                        // console.log(data1);
+                        console.log(data1);
                         callStripe({
                             path: "/create_subscription",
                             create_subscription: true,
                             data: JSON.stringify({
                                 customer: data1.customer.id,
                                 price_id: action.price_id,
-                                direct_payment: direct_payments_obj
+                                direct_payment: direct_payments_obj,
+                                tax_calculation_id: stripeManager.getTaxCalculationId() 
                             })
                         },function(data2){
                             console.log(data2);
@@ -4163,7 +4208,7 @@
                     });
 
             } else {
-                console.log('Address not complete or valid:', result);
+                console.log('Address not complete or valid:');
             }
         });
     }
@@ -4176,10 +4221,136 @@
         sessionStorage.removeItem('mystripe_price');
     }
 
-    class StripeManager {
-
+    class StripeEvents {
+        #customEvent_display_card;
+        #customEvent_update_tax;
         constructor(){}
 
+        trigger(event,data = {}){
+            if(event=="display:card"){
+                this.#customEvent_display_card = new CustomEvent("display:card",{
+                    detail:data
+                });
+                document.dispatchEvent(this.#customEvent_display_card);
+            }else if(event=="display:postal"){
+                // document.dispatchEvent(this.#customEvent);
+            }else if(event=="update:tax"){
+                this.#customEvent_update_tax = new CustomEvent("update:tax",{
+                    detail:data
+                });
+                document.dispatchEvent(this.#customEvent_update_tax);
+            }
+            
+        }
+
+
+    }
+
+    class StripeManager {
+
+        events;
+        #stripe;
+        #direct_payment;
+        #customer_id;
+        #payment_intent_id;
+        #payment_method_id;
+        #product_id;
+        #tax_calculation_id;
+        _is_initialized = false;
+        _saved_postal_code = "";
+        #options;
+        constructor(direct_payment,options){
+            this.events = new StripeEvents();
+            let client_id = direct_payment._processor.json.client_id;
+            this.#stripe = Stripe(client_id);
+            this.#direct_payment = direct_payment;
+            this.#customer_id = null;
+            this.#payment_intent_id = null;
+            this.#payment_method_id = null;
+            this.#product_id = null;
+            this.#tax_calculation_id = null;
+            this.#options = options;
+        }
+
+        /**
+         * Get the Stripe object 
+         * @returns {object}
+         */
+        getStripe(){return this.#stripe;}
+
+        /**
+         * Get the direct payment object
+         * @returns {object}
+         */
+        getDirectPayment(){return this.#direct_payment;}
+
+        /**
+         * 
+         * @returns Get the options that was passed to buildStripeCheckout
+         */
+        getOptions(){return this.#options;}
+
+        getProductId(){return this.#product_id;}
+
+        setProductId(id){ this.#product_id = id; } 
+
+        /**
+         * Returns the stripe customer id or null if not set.
+         * @returns {string|null}
+         */
+        getCustomerId(){return this.#customer_id;}
+
+        getTaxCalculationId(){return this.#tax_calculation_id;}
+
+
+        getTax(opts,cb){
+            const self = this;
+            let isCustomerCreated = false;
+            if(this.#customer_id!=null){isCustomerCreated = true;}
+            
+            let isPaymentIntentCreated = false;
+            if(this.#payment_intent_id!=null){isPaymentIntentCreated = true;}
+            
+            let isPaymentMethodCreated = false;
+            if(this.#payment_method_id!=null){isPaymentMethodCreated = true;}
+            let data = {
+                direct_payment: this.#direct_payment,
+                customer_created: isCustomerCreated,
+                payment_intent_created: isPaymentIntentCreated,
+                payment_method_created: isPaymentMethodCreated,
+
+                customer_id: this.#customer_id,
+                payment_intent_id: this.#payment_intent_id,
+                payment_method_id: this.#payment_method_id,
+                product_id: this.#product_id,
+                amount: this.#options.amount,
+                address: opts.address
+            }
+            callStripe({
+                path: "/get_tax",
+                "data": JSON.stringify(data)
+            },function(resp){
+                console.log(resp);
+
+                if(resp.error!=undefined){
+                    console.log("Error with get get_tax");
+                    return;
+                }
+
+                self.#customer_id = resp.customer.id;
+                // self.#payment_intent_id = resp.payment_intent.id
+                self.tax_obj = resp;
+                self.#tax_calculation_id = resp.calculation.id;
+
+                if(cb) cb({
+                    // TODO_2: 1011 - Change returning object
+                    resp: resp,
+                    new_amount: resp.calculation.amount_total,
+                    tax_amount: resp.calculation.tax_breakdown[0].amount,
+                    percent: resp.calculation.tax_breakdown[0].tax_rate_details.percentage_decimal
+                });
+            });
+        }
  
         chargePayment(customer_id,payment_method_id,amount,direct_payment,cb){
 
@@ -4195,6 +4366,9 @@
             },function(resp){
                 // console.log(resp);
                 if(cb) cb(resp);
+
+                // calculation.tax_breakdown[0].tax_rate_details.percentage_decimal
+                // calculation.amount_total
             });
 
         }
@@ -4264,8 +4438,8 @@
 
 
         }
-        createPaymentElement(direct_payment,processor){
-            let client_id = processor.json.client_id;
+        createPaymentElement(){
+            let client_id = this.getDirectPayment().processor.json.client_id;
             const stripe = Stripe(client_id);
             const appearance = {};
             const stripeOptions = {
@@ -4346,11 +4520,25 @@
             });
             cardZip.mount('#card-zip-element');
 
-
+            return elements;
 
         }
 
 
+        createCustomer(opts,cb){
+            callStripe({
+                path: "/create_customer",
+                data: JSON.stringify({
+                    direct_payment: opts.direct_payment,
+                    email: opts.email,
+                    address: opts.address,
+                    name: opts.name,
+                })
+            },function(data1){
+                // console.log(data1);
+                if(cb) cb(data1);
+            });
+        }
     }