https://tinywow.com/v3/js/stripe/profile/profile_v2.js

1(function ($) {
2    let ajaxWork = false;
3
4    initTabsProfile();
5
6    $('body').on('click', '.js-choose-subscription', function (e) {
7        e.preventDefault();
8        const currentSubscriptionData = JSON.parse(window.stripe.current);
9        if (currentSubscriptionData) {
10            window.openCancelSubscriptionModal(currentSubscriptionData.id);
11        }
12    });
13
14    $('body').on('click', '.js-show-profile-info', function (e) {
15        e.preventDefault();
16        openProfileModal($(this).data('card-id'), $(this).data('expire-date'));
17    });
18    $('body').on('click', '.js-submit-profile-form', function (e) {
19        e.preventDefault();
20        $("#profileForm").submit();
21    });
22
23
24    // Subscriptions --- start ---
25    $('body').on('click', '.js-upgrade-subscription', async function (e) {
26        e.preventDefault();
27        let switchedSubscriptionId = $(this).data('subscription-id');
28        (await window.stripeV2Wait()).switchSubscription(switchedSubscriptionId);
29    });
30    $('body').on('click', '.js-create-subscription', async function (e) {
31        e.preventDefault();
32        let switchedSubscriptionId = $(this).data('subscription-id');
33        (await window.stripeV2Wait()).createSessionEmbed(switchedSubscriptionId);
34    });
35
36    $('body').on('click', '.js-switch-subscription', function (e) {
37        e.preventDefault();
38        let switchedSubscriptionId = $(this).find("span").data('subscription-id');
39        openAttemptModal(switchedSubscriptionId);
40    });
41
42    $('body').on('click', '.js-agree-switch-subscription', async function (e) {
43        e.preventDefault();
44        let switchedSubscriptionId = $(this).data('switched-subscription-id');
45        (await window.stripeV2Wait()).switchSubscription(switchedSubscriptionId);
46    });
47    // Subscriptions --- finish ---
48
49    $('body').on('change', '#avatar', function (e) {
50        e.preventDefault();
51        uploadAvatar();
52    });
53    $('body').on('click', '.js-remove-avatar', function (e) {
54        e.preventDefault();
55        removeAvatar();
56    });
57
58    $('body').on('click', '.tab-navs__item', function (e) {
59        e.preventDefault();
60        let activeTabId = $(this).data("tab-id");
61        $(".tab-navs__item").removeClass("tab-navs__item_is-active");
62        $(".tab-navs__item[data-tab-id=" + activeTabId + "]").addClass("tab-navs__item_is-active");
63        setActiveTabContent();
64    });
65
66    $('body').on('change', '#mainAvatar', function (e) {
67        e.preventDefault();
68        uploadAvatar(true);
69    });
70
71    function initTabsProfile() {
72        let hash = window.location.hash.substring(1);
73        if (hash.trim() == '') {
74            hash = 'billing';
75        }
76        $(".tab-navs__item").removeClass("tab-navs__item_is-active");
77        $(".tab-navs__item[data-tab-id=" + hash + "]").addClass("tab-navs__item_is-active");
78        setActiveTabContent();
79    }
80
81    function setActiveTabContent() {
82        $(".user-settings__body").hide();
83        let activeTabId = $(".tab-navs__item.tab-navs__item_is-active").data("tab-id");
84        $(".user-settings__body#" + activeTabId + "TabContent").show();
85    }
86
87    async function openAttemptModal(switchedSubscriptionId, ) {
88        const currentSubscriptionData = JSON.parse(window.stripe.current);
89
90        if (currentSubscriptionData) {
91            let needShow = null;
92            const subscriptionPrices = JSON.parse(window.stripe.prices);
93            for (const [subscriptionId, subscriptionPrice] of Object.entries(subscriptionPrices)) {
94                if ((subscriptionId == switchedSubscriptionId)) {
95                    if (subscriptionPrice > parseFloat(currentSubscriptionData.price)) {
96                        // needShow = 'expensive'; // I'm not sure about this attempt
97                    } else {
98                        needShow = 'cheaper';
99                    }
100                }
101            }
102            if (needShow) { // need show warning modal with message about recalculating of money
103                let $modal = $('#modal-switch-subscription');
104
105                $modal.find('.js-agree-switch-subscription').data('switched-subscription-id', switchedSubscriptionId);

106                $modal.find('.modal-text-attempts').hide();
107                $modal.find('.modal-text-' + needShow).show();
108
109                $('.modal').modal('hide') // closes all active popups.
110                $('.modal-backdrop').remove() // removes the grey overlay.
111
112                $modal.modal('show');
113            } else {// go to switch action
114                (await window.stripeV2Wait()).switchSubscription(switchedSubscriptionId);
115            }
116        } else { // user haven't active real subscription - need to subscribe (not switch)
117            (await window.stripeV2Wait()).createSessionEmbed(parseInt(switchedSubscriptionId));
118        }
119
120    }
121
122    function openProfileModal() {
123        let $modal = $('#modal-edit-profile');
124
125        $('.modal').modal('hide') // closes all active popups.
126        $('.modal-backdrop').remove() // removes the grey overlay.
127
128        $modal.modal('show');
129    }
130
131    function uploadAvatar(isMainAvatar) {
132        let $mainDom = null;
133        let avatarId;
134
135        if (isMainAvatar) {
136            $mainDom = $('.user-summary__header');
137            avatarId = '#mainAvatar';
138        } else {
139            $mainDom = $('#modal-edit-profile');
140            avatarId = '#avatar';
141        }
142
143        if (typeof $mainDom.find(avatarId).prop('files') === "undefined") {
144            return;
145        }
146        if (ajaxWork) {
147            return;
148        }
149        ajaxWork = true;
150
151        let fileData = $mainDom.find(avatarId).prop('files')[0];
152        let formData = new FormData();
153        formData.append('avatar', fileData);
154
155        $.ajax({
156            beforeSend : function (request) {
157                request.setRequestHeader("X-CSRF-TOKEN", $('meta[name="csrf-token"]').attr('content'));
158            },
159            type       : 'POST',
160            url        : window.ajaxUrls.uploadAvatar,
161            contentType: false,
162            processData: false,
163            data       : formData,
164            success    : function (data) {
165                ajaxWork = false;
166                $(".user-avatar-default").hide();
167                $(".user-avatar").show();
168                $("#userMainAvatar").attr('src', data.url);
169                $("#userAvatar").attr('src', data.url);
170                $("#userAvatarSidebar").attr('src', data.url);
171                $("#userAvatarHeader").attr('src', data.url);
172            },
173            error      : function (data) {
174                ajaxWork = false;
175                let errors = $.parseJSON(data.responseText);
176                if (typeof errors.message !== "undefined" && errors.message != "") {
177                    showAlertModal('Error message', errors.message);
178                }
179            }
180        });
181    }
182
183    function removeAvatar() {
184        if (ajaxWork) {
185            return;
186        }
187        ajaxWork = true;
188
189        $.ajax({
190            beforeSend : function (request) {
191                request.setRequestHeader("X-CSRF-TOKEN", $('meta[name="csrf-token"]').attr('content'));
192            },
193            type       : 'POST',
194            url        : window.ajaxUrls.removeAvatar,
195            contentType: false,
196            processData: false,
197            success    : function (data) {
198                ajaxWork = false;
199                $(".user-avatar-default").show();
200                $(".user-avatar").hide();
201                $("#userMainAvatar").attr('src', '');
202                $("#userAvatar").attr('src', '');
203                $("#userAvatarSidebar").attr('src', '');
204                $("#userAvatarHeader").attr('src', '');
205            },
206            error      : function (data) {
207                ajaxWork = false;
208                let errors = $.parseJSON(data.responseText);
209                if (typeof errors.message !== "undefined" && errors.message != "") {
210                    showAlertModal('Error message', errors.message);
211                }
212            }
213        });
214    }
215
216})(jQuery);