{"version":3,"sources":["webpack:///./src/services/AssetLabels/GetAssetLabels.js","webpack:///./src/store/usersStore.js","webpack:///./src/services/Users/GetUsers.js","webpack:///./src/views/v3/Clients/UpdateClientsNext.vue?6cca","webpack:///./src/assets/rumble-icon.png","webpack:///./src/views/v3/Clients/UpdateClientsNext.vue","webpack:///./src/views/v3/Clients/UpdateClientsNext.vue?0dcc","webpack:///./src/views/v3/Clients/UpdateClientsNext.vue?0568","webpack:///./src/assets/cs-loader.png","webpack:///./src/assets/kuashou-icon.png"],"names":["GetAssetLabels","async","data","HttpClient","get","params","UserId","id","Promise","resolve","err","reject","useUsersStore","defineStore","users","ref","email","firstName","lastName","userTypeId","isDistributor","googleSheetLink","partnerPercentage","sheetName","youtube","twitch","instagram","tiktok","facebook","twitter","douyin","kuaishou","rumble","others","profilePictureUrl","csCode","isAdmin","computed","value","isSuperAdmin","isUser","assetLabels","assetLabelDataTable","columns","label","field","rows","getUsers","payload","getUserById","then","response","setIsDistributor","GetUsers","getAssetLabels","setSelectedAssetLabels","setDropdownValues","assignedDashboard","selectedArray","newArray","map","item","selected","item2","find","i2","module","exports","useTitle","usersStore","storeToRefs","route","useRoute","userId","assetLabelModal","tableLoader","dataTableSearch","onMounted","axios","catch","error","toastObject","state","message","color","icon","handleSelectedRow","selectedModalArray","Set","clickDelete","filter","element","title","loadingSpinner","selectedAssetLabels","watch","newSelectedAssetLabels","split","tableHeaders","header","isUpdateBtnDisabled","submit","event","preventDefault","formData","getUserTypeId","assignedAssetLabels","put","status","dashboard","text","contentModal","toggleContentModal","newSocialMediaLinks","newVal","socialMediaLinks","selectedSocialMedia","1","2","3","4","5","6","7","8","9","10","userSocialLinks","socialMedia","iconStyle","marginRight","submitContent","input","avatarLetter","_usersStore$users","_usersStore$users$fir","charAt","toUpperCase","__exports__"],"mappings":"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","file":"js/chunk-9a92d60a.900e2b7e.js","sourcesContent":["import { HttpClient } from \"../HttpClient\";\r\n/**\r\n * * Get Asset Label\r\n */\r\nexport const GetAssetLabels = async (id) => {\r\n\ttry {\r\n\t\tconst { data } = await HttpClient.get(\"api/assetLabels/List\", {\r\n\t\t\tparams: {\r\n\t\t\t\tUserId: id,\r\n\t\t\t},\r\n\t\t});\r\n\t\treturn await Promise.resolve(data);\r\n\t} catch (err) {\r\n\t\treturn Promise.reject(err);\r\n\t}\r\n};\r\n","import { defineStore } from \"pinia\";\r\nimport { computed, ref } from \"vue\";\r\nimport { GetUsers } from \"../services/Users/GetUsers\";\r\nimport { GetAssetLabels } from \"../services/AssetLabels/GetAssetLabels\";\r\n\r\nexport const useUsersStore = defineStore(\"users\", () => {\r\n  const users = ref({\r\n    email: \"\",\r\n    firstName: \"\",\r\n    id: \"\",\r\n    lastName: \"\",\r\n    userTypeId: \"\",\r\n    isDistributor: false,\r\n    googleSheetLink: null,\r\n    partnerPercentage: \"\",\r\n    sheetName: null,\r\n    youtube: \"\",\r\n    twitch: \"\",\r\n    instagram: \"\",\r\n    tiktok: \"\",\r\n    facebook: \"\",\r\n    twitter: \"\",\r\n    douyin: \"\",\r\n    kuaishou: \"\",\r\n    rumble: \"\",\r\n    others: \"\",\r\n    profilePictureUrl: null,\r\n    csCode: \"\",\r\n  });\r\n  const isAdmin = computed(() => {\r\n    return users.value.userTypeId == 1;\r\n  });\r\n  const isSuperAdmin = computed(() => {\r\n    return users.value.userTypeId == 4;\r\n  });\r\n  const isUser = computed(() => {\r\n    return users.value.userTypeId == 2 || users.value.userTypeId == 3;\r\n  });\r\n  const assetLabels = ref([]);\r\n  const assetLabelDataTable = ref({\r\n    columns: [{ label: \"Name\", field: \"name\" }],\r\n    rows: [],\r\n  });\r\n  const getUsers = (payload) => {\r\n    getUserById(payload?.UserId).then((response) => {\r\n      users.value = response;\r\n      setIsDistributor(users.value.userTypeId);\r\n    });\r\n  };\r\n  const getUserById = async (id) => {\r\n    const response = await GetUsers(id);\r\n    return response;\r\n  };\r\n  const setIsDistributor = (id) => {\r\n    if (id == 3) users.value.isDistributor = true;\r\n  };\r\n  const getAssetLabels = (payload) => {\r\n    GetAssetLabels(payload?.UserId).then((response) => {\r\n      setSelectedAssetLabels(response.data);\r\n      setDropdownValues();\r\n    });\r\n  };\r\n  const assignedDashboard = ref(1);\r\n  const setSelectedAssetLabels = (selectedArray) => {\r\n    const newArray = selectedArray.map((item) => {\r\n      return {\r\n        ...item,\r\n        selected: true,\r\n        assignedDashboard:\r\n          item.assignedDashboard != null ? item.assignedDashboard : null,\r\n      };\r\n    });\r\n    assetLabels.value = newArray;\r\n  };\r\n\r\n  const setDropdownValues = () => {\r\n    assetLabelDataTable.value.rows = assetLabelDataTable.value.rows.map(\r\n      (item) => {\r\n        const item2 = assetLabels.value.find((i2) => {\r\n          if (i2.id == item.id) return i2;\r\n        });\r\n        return item2 ? { ...item, ...item2 } : item;\r\n      }\r\n    );\r\n  };\r\n  return {\r\n    getUsers,\r\n    getUserById,\r\n    users,\r\n    getAssetLabels,\r\n    assetLabels,\r\n    assignedDashboard,\r\n    setDropdownValues,\r\n    assetLabelDataTable,\r\n    isAdmin,\r\n    isUser,\r\n    isSuperAdmin,\r\n  };\r\n});\r\n","import { HttpClient } from \"../HttpClient\";\r\n/**\r\n * * Get Users\r\n */\r\nexport const GetUsers = async (id) => {\r\n\ttry {\r\n\t\tconst { data } = await HttpClient.get(`api/users/${id}`);\r\n\t\treturn await Promise.resolve(data);\r\n\t} catch (err) {\r\n\t\treturn Promise.reject(err);\r\n\t}\r\n};\r\n","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./UpdateClientsNext.vue?vue&type=style&index=0&id=7aed1eb0&lang=css\"","module.exports = __webpack_public_path__ + \"img/rumble-icon.18700788.png\";","<template>\r\n    <LayoutNext>\r\n        <template #page-title>\r\n            Update User Account\r\n        </template>\r\n        <nav aria-label=\"breadcrumb\" style=\"font-size: 13px;\">\r\n            <MDBBreadcrumb>\r\n                <MDBBreadcrumbItem><router-link to=\"/users\">Users</router-link>\r\n                </MDBBreadcrumbItem>\r\n                <MDBBreadcrumbItem active style=\"cursor: default;\">\r\n                    Update User Account\r\n                </MDBBreadcrumbItem>\r\n            </MDBBreadcrumb>\r\n        </nav>\r\n        <div class=\"backdrop\" v-if=\"loadingSpinner\">\r\n            <div class=\"image-container d-flex justify-content-center align-items-center\">\r\n                <div class=\"loader\"></div>\r\n                <img src=\"@/assets/cs-loader.png\" alt=\"Loading image\">\r\n            </div>\r\n        </div>\r\n        <div class=\"d-md-flex d-block gap-0 gap-md-3 my-auto\">\r\n            <MDBCard id=\"UserInformation\" class=\"shadow m-auto mb-md-0 mb-3 account-form\" tag=\"form\">\r\n                <MDBCardHeader class=\"py-3\">\r\n                    <h5 class=\"mb-0 fw-bold\">Account Information</h5>\r\n                </MDBCardHeader>\r\n                <MDBCardBody class=\"d-flex flex-column\" style=\"gap: 15px\">\r\n                    <div class=\"d-flex justify-content-center align-items-center mb-2\">\r\n                        <div class=\"default-avatar shadow-lg me-1\" v-if=\"!usersStore.users.profilePictureUrl\">\r\n                            <span class=\"avatar-letter\">{{ avatarLetter }}</span>\r\n                        </div>\r\n                        <img v-else :src=\"usersStore.users.profilePictureUrl\" alt=\"Profile Picture\"\r\n                            class=\"profile-avatar shadow-lg me-1\" />\r\n                    </div>\r\n                    <div class=\"d-flex gap-3\">\r\n                        <div class=\"d-block w-100\">\r\n                            <label for=\"firstName\">First Name:</label>\r\n                            <MDBInput id=\"firstName\" class=\"mt-1\" type=\"text\" placeholder=\"First Name\"\r\n                                v-model=\"usersStore.users.firstName\" />\r\n                        </div>\r\n                        <div class=\"d-block w-100\">\r\n                            <label for=\"lastName\">Last Name:</label>\r\n                            <MDBInput id=\"lastName\" class=\"mt-1\" type=\"text\" placeholder=\"Last Name\"\r\n                                v-model=\"usersStore.users.lastName\" />\r\n                        </div>\r\n                    </div>\r\n                    <div>\r\n                        Email:\r\n                        <MDBInput class=\"mt-1\" type=\"email\" placeholder=\"Email\" v-model=\"usersStore.users.email\" />\r\n                    </div>\r\n                    <div>\r\n                        Partner Percentage:\r\n                        <MDBInput class=\"mt-1\" type=\"number\" placeholder=\"Partner Percentage\"\r\n                            v-model=\"usersStore.users.partnerPercentage\" />\r\n                    </div>\r\n                    <div v-if=\"isUser\">\r\n                        CS Code:\r\n                        <MDBInput class=\"mt-1\" type=\"text\" placeholder=\"CS Code\" v-model=\"usersStore.users.csCode\" />\r\n                    </div>\r\n                    <div class=\"mt-1\">\r\n                        <MDBSwitch label=\"Is Distributor\" v-model=\"usersStore.users.isDistributor\" />\r\n                    </div>\r\n                    <div v-if=\"usersStore.users.isDistributor\">\r\n                        Google Sheet Info:\r\n                        <MDBInput label=\"Google Sheet Link\" type=\"text\" v-model=\"usersStore.users.googleSheetLink\"\r\n                            class=\"mt-4\" />\r\n                        <MDBInput label=\"Google Sheet's SheetName\" type=\"text\" v-model=\"usersStore.users.sheetName\"\r\n                            class=\"mt-4\" />\r\n                    </div>\r\n                    <div class=\"mt-2\">\r\n                        <MDBBtn class=\"fw-bold\" type=\"button\" color=\"primary\" aria-controls=\"assetLabelModal\"\r\n                            @click=\"assetLabelModal = true\" size=\"sm\">\r\n                            Select Asset Label/s\r\n                        </MDBBtn>\r\n                        <MDBTable hover class=\"mt-3\">\r\n                            <thead class=\"table-light align-middle\">\r\n                                <tr>\r\n                                    <th v-for=\"(item, i) in tableHeaders\" :key=\"i\" scope=\"col\" class=\"py-3 px-4\">\r\n                                        {{ item.header }}\r\n                                    </th>\r\n                                </tr>\r\n                            </thead>\r\n                            <tbody v-if=\"usersStore.assetLabels.length < 1\">\r\n                                <tr class=\"align-middle\">\r\n                                    <td colspan=\"3\">\r\n                                        No asset label selected.\r\n                                    </td>\r\n                                </tr>\r\n                            </tbody>\r\n                            <tbody v-else-if=\"usersStore.assetLabels.length > 0\">\r\n                                <tr v-for=\"(item, i) in usersStore.assetLabels\" :key=\"i\">\r\n                                    <td class=\"align-middle\">{{ item.name }}</td>\r\n                                    <td class=\"align-middle\" style=\"width: 45%;\">\r\n                                        <select v-model=\"item.assignedDashboard\" class=\"form-select\">\r\n                                            <option v-for=\"option in dashboard\" :key=\"option.value\"\r\n                                                :value=\"option.value\">\r\n                                                {{ option.text }}\r\n                                            </option>\r\n                                        </select>\r\n                                    </td>\r\n                                    <td class=\"d-flex justify-content-end text-right p-4\">\r\n                                        <MDBBtn color=\"danger\" floating @click.stop.prevent=\"clickDelete(item)\"\r\n                                            size=\"sm\">\r\n                                            <span class=\"far fa-trash-alt\" />\r\n                                        </MDBBtn>\r\n                                    </td>\r\n                                </tr>\r\n                            </tbody>\r\n                        </MDBTable>\r\n                    </div>\r\n                </MDBCardBody>\r\n                <MDBCardFooter class=\"py-3 d-flex justify-content-end\">\r\n                    <MDBBtn class=\"fw-bold\" type=\"submit\" @click=\"submit\" color=\"primary\"\r\n                        :disabled=\"isUpdateBtnDisabled\" size=\"sm\">\r\n                        Update Account\r\n                    </MDBBtn>\r\n                </MDBCardFooter>\r\n            </MDBCard>\r\n            <MDBCard class=\"shadow account-form\" v-if=\"isUser\">\r\n                <MDBCardHeader class=\"py-3\">\r\n                    <h5 class=\"mb-0 fw-bold text-center\">Protected Content</h5>\r\n                </MDBCardHeader>\r\n                <MDBCardBody>\r\n                    <MDBTable borderless style=\"table-layout: fixed;\">\r\n                        <tbody v-for=\"media in socialMedia\" :key=\"media.value\">\r\n                            <tr>\r\n                                <td class=\"py-3 ps-0 align-middle social-title\">\r\n                                    <div class=\"d-flex gap-2 align-items-center\">\r\n                                        <template v-if=\"media.value == 8\">\r\n                                            <img src=\"@/assets/kuashou-icon.png\" alt=\"Kuaishou\"\r\n                                                style=\"width: 16px; height: 16px;\" />\r\n                                        </template>\r\n                                        <template v-else-if=\"media.value == 9\">\r\n                                            <img src=\"@/assets/rumble-icon.png\" alt=\"Rumble\"\r\n                                                style=\"width: 16px; height: 16px;\" />\r\n                                        </template>\r\n                                        <MDBIcon v-else :icon=\"media.icon\" :iconStyle=\"media.iconStyle\"\r\n                                            class=\"fa-md pt-1\" style=\"width: 20px; height: 20px; text-align: center;\" />\r\n                                        <label :for=\"`${media.text}Link`\" class=\"fw-bold\">{{ media.text }}</label>\r\n                                    </div>\r\n                                </td>\r\n                                <td class=\"py-3 pe-0 align-middle social-link\">\r\n                                    <span class=\"text-truncate d-inline-block align-middle\"\r\n                                        v-if=\"socialMediaLinks[media.value]\"\r\n                                        style=\"max-width:100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;\">\r\n                                        <a :href=\"`//${socialMediaLinks[media.value]}`\"\r\n                                            :title=\"socialMediaLinks[media.value]\" target=\"_blank\">\r\n                                            {{ socialMediaLinks[media.value] || 'page url' }}\r\n                                        </a>\r\n                                    </span>\r\n                                    <span v-else>No link provided.</span>\r\n                                </td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </MDBTable>\r\n                </MDBCardBody>\r\n                <MDBCardFooter class=\"d-flex justify-content-center\">\r\n                    <MDBBtn class=\"fw-bold\" size=\"sm\" color=\"primary\" @click=\"toggleContentModal\">\r\n                        <MDBIcon iconStyle=\"fas\" icon=\"plus\" class=\"me-1\" />\r\n                        Add more content\r\n                    </MDBBtn>\r\n                </MDBCardFooter>\r\n            </MDBCard>\r\n        </div>\r\n        <MDBModal id=\"assetLabelModal\" tabindex=\"-1\" labelledby=\"assetLabelModalLabel\" v-model=\"assetLabelModal\"\r\n            scrollable :static-backdrop=\"true\">\r\n            <MDBModalHeader class=\"px-4\">\r\n                <MDBModalTitle class=\"fw-bold\" id=\"assetLabelModalLabel\"> Asset Labels </MDBModalTitle>\r\n            </MDBModalHeader>\r\n            <MDBModalBody class=\"pb-0\">\r\n                <div>\r\n                    <MDBInput label=\"Seach Asset Label\" class=\"mb-4\" v-model=\"dataTableSearch\" />\r\n                    <MDBDatatable :dataset=\"usersStore.assetLabelDataTable\" selectable multi :search=\"dataTableSearch\"\r\n                        @selected-rows=\"handleSelectedRow($event)\" hover />\r\n                </div>\r\n            </MDBModalBody>\r\n            <MDBModalFooter class=\"gap-2 py-3 px-4\">\r\n                <MDBBtn class=\"fw-bold\" size=\"sm\" @click=\"assetLabelModal = false\"> Close </MDBBtn>\r\n                <MDBBtn class=\"fw-bold\" size=\"sm\" color=\"primary\" @click=\"assetLabelModal = false\">\r\n                    Select Asset Labels\r\n                </MDBBtn>\r\n            </MDBModalFooter>\r\n        </MDBModal>\r\n        <MDBModal id=\"contentModal\" tabindex=\"-1\" labelledby=\"contentModalLabel\" v-model=\"contentModal\" scrollable\r\n            size=\"lg\" :static-backdrop=\"true\">\r\n            <MDBModalHeader class=\"px-4 py-3\">\r\n                <MDBModalTitle class=\"fw-bold\" id=\"contentModalLabel\"> Add Protected Content </MDBModalTitle>\r\n            </MDBModalHeader>\r\n            <MDBModalBody class=\"px-4 py-3 pb-2\">\r\n                <div v-for=\"media in socialMedia\" :key=\"media.value\"\r\n                    :class=\"['input-group w-100 mb-3', { 'align-items-start': media.value === 10 }]\">\r\n                    <MDBBtn color=\"tertiary\" size=\"sm\" class=\"pb-2 button-title\"\r\n                        @click=\"selectedSocialMedia = media.value\">\r\n                        <template v-if=\"media.value == 8\">\r\n                            <img src=\"@/assets/kuashou-icon.png\" alt=\"Kuaishou\"\r\n                                style=\"width: 16px; height: 16px; margin-right:12px;\" />\r\n                        </template>\r\n                        <template v-else-if=\"media.value == 9\">\r\n                            <img src=\"@/assets/rumble-icon.png\" alt=\"Rumble\"\r\n                                style=\"width: 16px; height: 16px; margin-right:12px;\" />\r\n                        </template>\r\n                        <MDBIcon v-else :icon=\"media.icon\" :iconStyle=\"media.iconStyle\" :style=\"media.marginRight\"\r\n                            class=\"fa-md pt-1\" style=\"width: 20px; height: 20px; text-align: center;\" />\r\n                        <label :for=\"media.text\" class=\"fw-bold\" style=\"padding-bottom: 1px\">{{ media.text }}</label>\r\n                    </MDBBtn>\r\n                    <template v-if=\"media.value == 10\">\r\n                        <textarea name=\"rumble\" id=\"rumble\" class=\"form-control\" v-model=\"socialMediaLinks[10]\"\r\n                            placeholder=\"(Add links to Google Drive, OneDrive, DropBox, etc.)\"\r\n                            style=\"height: 100px;margin-left: 1px;margin-top: 1px\" />\r\n                    </template>\r\n                    <input v-else type=\"text\" class=\"form-control\" v-model=\"socialMediaLinks[media.value]\"\r\n                        :placeholder=\"`Enter ${media.text} URL`\" style=\"margin-left: 1px;margin-top: 1px\" />\r\n                </div>\r\n            </MDBModalBody>\r\n            <MDBModalFooter class=\"d-flex gap-2 px-4 py-3\">\r\n                <MDBBtn class=\"fw-bold\" size=\"sm\" @click=\"toggleContentModal\"> Close </MDBBtn>\r\n                <MDBBtn class=\"fw-bold\" size=\"sm\" color=\"primary\" @click=\"submitContent\">\r\n                    Update\r\n                </MDBBtn>\r\n            </MDBModalFooter>\r\n        </MDBModal>\r\n        <MDBToast v-model=\"toastObject.state\" :delay=\"2000\" autohide position=\"top-right\" appendToBody stacking\r\n            width=\"350px\" :color=\"toastObject.color\" text=\"white\" :icon=\"toastObject.icon\">\r\n            <template #title>\r\n                {{ toastObject.title }}\r\n            </template>\r\n            {{ toastObject.message }}\r\n        </MDBToast>\r\n    </LayoutNext>\r\n</template>\r\n\r\n<script setup>\r\nimport { MDBBtn, MDBCard, MDBCardHeader, MDBCardBody, MDBCardFooter, MDBModal, MDBModalHeader, MDBModalBody, MDBModalTitle, MDBModalFooter, MDBDatatable, MDBInput, MDBSwitch, MDBTable, MDBBreadcrumb, MDBBreadcrumbItem, MDBIcon, MDBToast } from \"mdb-vue-ui-kit\";\r\nimport LayoutNext from \"@/views/v3/LayoutNext.vue\";\r\nimport { onMounted, ref, watch, computed } from \"vue\";\r\nimport axios from \"axios\";\r\nimport { useUsersStore } from \"@/store/usersStore\";\r\nimport { useRoute } from \"vue-router\";\r\nimport { useTitle } from \"@vueuse/core\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nuseTitle(\"Update User Account | Creator Shield\");\r\n\r\nconst usersStore = useUsersStore();\r\nconst { isUser } = storeToRefs(usersStore);\r\nconst route = useRoute();\r\nconst userId = route.params.id;\r\nconst assetLabelModal = ref(false);\r\n\r\nconst tableLoader = ref(false);\r\nconst dataTableSearch = ref(\"\");\r\n\r\nonMounted(async () => {\r\n    tableLoader.value = true;\r\n    await axios\r\n        .get(\"api/assetLabels/Dropdown\")\r\n        .then(function (data) {\r\n            usersStore.assetLabelDataTable.rows = data.data;\r\n            usersStore.getUsers({ UserId: userId });\r\n            usersStore.getAssetLabels({ UserId: userId });\r\n            tableLoader.value = false;\r\n        })\r\n        .catch(function (error) {\r\n            toastObject.value.state = true;\r\n            toastObject.value.message = \"An error occurred during request\" + error;\r\n            toastObject.value.color = \"danger\";\r\n            toastObject.value.icon = \"fas fa-exclamation-circle fa-lg me-2\";\r\n        });\r\n});\r\n\r\nconst handleSelectedRow = (selectedModalArray) => {\r\n    const newArray = [\r\n        ...new Set([...usersStore.assetLabels, ...selectedModalArray]),\r\n    ];\r\n    usersStore.assetLabels = newArray;\r\n};\r\n\r\nconst clickDelete = (item) => {\r\n    const newArray = usersStore.assetLabels.filter(\r\n        (element) => element.id != item.id\r\n    );\r\n    usersStore.assetLabels = newArray;\r\n};\r\n\r\nconst toastObject = ref({\r\n    state: false,\r\n    message: \"\",\r\n    color: \"\",\r\n    icon: \"\",\r\n    title: \"\",\r\n});\r\n\r\nlet loadingSpinner = ref(false);\r\n\r\nconst selectedAssetLabels = ref(\"\");\r\nwatch([selectedAssetLabels], ([newSelectedAssetLabels]) => {\r\n    usersStore.assetLabels = newSelectedAssetLabels.split(\",\");\r\n});\r\n\r\nconst tableHeaders = computed(() => [\r\n    {\r\n        header: \"Name\",\r\n    },\r\n    {\r\n        header: \"Dashboard\",\r\n    },\r\n    {},\r\n]);\r\n\r\nconst isUpdateBtnDisabled = computed(() => usersStore.users.email == \"\");\r\n\r\nconst submit = () => {\r\n    event.preventDefault();\r\n    const formData = {\r\n        firstName: usersStore.users.firstName,\r\n        lastName: usersStore.users.lastName,\r\n        email: usersStore.users.email,\r\n        userTypeId: getUserTypeId.value,\r\n        googleSheetLink: usersStore.users.isDistributor ? usersStore.users.googleSheetLink : null,\r\n        assignedAssetLabels: usersStore.assetLabels.map(label => ({\r\n            ...label,\r\n            assignedDashboard: label.assignedDashboard\r\n        })),\r\n        partnerPercentage: usersStore.users.partnerPercentage,\r\n        id: usersStore.users.id,\r\n        sheetName: usersStore.users.isDistributor ? usersStore.users.sheetName : null,\r\n        csCode: usersStore.users.csCode,\r\n    };\r\n\r\n    loadingSpinner.value = true;\r\n    axios\r\n        .put(\"api/users\", formData)\r\n        .then(function (response) {\r\n            if (response.status == 200 || response.status == 201) {\r\n                toastObject.value.title = \"Success!\";\r\n                toastObject.value.state = true;\r\n                toastObject.value.message = \"Account information updated successfully!\";\r\n                toastObject.value.color = \"success\";\r\n                toastObject.value.icon = \"fas fa-check fa-lg me-2\";\r\n                loadingSpinner.value = false;\r\n            } else {\r\n                toastObject.value.title = \"Error!\";\r\n                toastObject.value.state = true;\r\n                toastObject.value.message = \"An error occurred during request.\";\r\n                toastObject.value.color = \"danger\";\r\n                toastObject.value.icon = \"fas fa-exclamation-circle fa-lg me-2\";\r\n                loadingSpinner.value = false;\r\n            }\r\n        })\r\n        .catch(function (error) {\r\n            toastObject.value.title = \"Error!\";\r\n            toastObject.value.state = true;\r\n            toastObject.value.message = \"An error occurred during request: \" + error;\r\n            toastObject.value.color = \"danger\";\r\n            toastObject.value.icon = \"fas fa-exclamation-circle fa-lg me-2\";\r\n            loadingSpinner.value = false;\r\n        });\r\n};\r\n\r\n// const getUserTypeId = computed(() => (usersStore.users.isDistributor ? 3 : 2));\r\nconst getUserTypeId = computed(() => {\r\n    if (usersStore.users.userTypeId == 4) {\r\n        return 4;\r\n    } else if (usersStore.users.userTypeId == 1) {\r\n        return 1;\r\n    } else {\r\n        return usersStore.users.isDistributor ? 3 : 2;\r\n    }\r\n});\r\n\r\nconst dashboard = ref([\r\n    { text: 'Creator Shield & Very Viral Videos', value: 1 },\r\n    { text: 'Creator Shield', value: 2 },\r\n    { text: 'Very Viral Videos', value: 3 },\r\n]);\r\n\r\nconst contentModal = ref(false);\r\nconst toggleContentModal = () => {\r\n    contentModal.value = !contentModal.value;\r\n};\r\n\r\nconst newSocialMediaLinks = ref({});\r\nwatch(contentModal, (newVal) => {\r\n    if (newVal) {\r\n        newSocialMediaLinks.value = socialMediaLinks.value;\r\n    }\r\n});\r\n\r\nconst selectedSocialMedia = ref(1);\r\nconst socialMediaLinks = ref({\r\n    1: usersStore.users.youtube,\r\n    2: usersStore.users.twitch,\r\n    3: usersStore.users.instagram,\r\n    4: usersStore.users.tiktok,\r\n    5: usersStore.users.facebook,\r\n    6: usersStore.users.twitter,\r\n    7: usersStore.users.douyin,\r\n    8: usersStore.users.kuaishou,\r\n    9: usersStore.users.rumble,\r\n    10: usersStore.users.others,\r\n});\r\n\r\nwatch(() => usersStore.users, (userSocialLinks) => {\r\n    if (userSocialLinks) {\r\n        socialMediaLinks.value = {\r\n            1: userSocialLinks.youtube,\r\n            2: userSocialLinks.twitch,\r\n            3: userSocialLinks.instagram,\r\n            4: userSocialLinks.tiktok,\r\n            5: userSocialLinks.facebook,\r\n            6: userSocialLinks.twitter,\r\n            7: userSocialLinks.douyin,\r\n            8: userSocialLinks.kuaishou,\r\n            9: userSocialLinks.rumble,\r\n            10: userSocialLinks.others,\r\n        };\r\n    }\r\n});\r\n\r\nconst socialMedia = ref([\r\n    { text: \"YouTube\", value: 1, icon: \"youtube\", iconStyle: \"fab\", marginRight: 'margin-right: 8px' },\r\n    { text: \"Twitch TV\", value: 2, icon: \"twitch\", iconStyle: \"fab\", marginRight: 'margin-right: 8px' },\r\n    { text: \"Instagram\", value: 3, icon: \"instagram\", iconStyle: \"fab\", marginRight: 'margin-right: 15px' },\r\n    { text: \"TikTok\", value: 4, icon: \"tiktok\", iconStyle: \"fab\", marginRight: 'margin-right: 8px' },\r\n    { text: \"Facebook\", value: 5, icon: \"facebook\", iconStyle: \"fab\", marginRight: 'margin-right: 13px' },\r\n    { text: \"Twitter/X\", value: 6, icon: \"x-twitter\", iconStyle: \"fa-brands\", marginRight: 'margin-right: 8px' },\r\n    { text: \"Douyin\", value: 7, icon: \"tiktok\", iconStyle: \"fab\", marginRight: 'margin-right: 8px' },\r\n    { text: \"Kuaishou\", value: 8, icon: \"youtube\", iconStyle: \"fab\", marginRight: 'margin-right: 12px' },\r\n    { text: \"Rumble\", value: 9, icon: \"play\", iconStyle: \"fas\", marginRight: 'margin-right: 12px' },\r\n    { text: \"Others\", value: 10, icon: \"globe\", iconStyle: \"fas\", marginRight: 'margin-right: 8px' },\r\n]);\r\n\r\nconst submitContent = async () => {\r\n    const input = {\r\n        userId: userId,\r\n        youtube: newSocialMediaLinks.value[1],\r\n        twitch: newSocialMediaLinks.value[2],\r\n        instagram: newSocialMediaLinks.value[3],\r\n        tiktok: newSocialMediaLinks.value[4],\r\n        facebook: newSocialMediaLinks.value[5],\r\n        twitter: newSocialMediaLinks.value[6],\r\n        douyin: newSocialMediaLinks.value[7],\r\n        kuaishou: newSocialMediaLinks.value[8],\r\n        rumble: newSocialMediaLinks.value[9],\r\n        others: newSocialMediaLinks.value[10],\r\n    };\r\n\r\n    loadingSpinner.value = true;\r\n\r\n    try {\r\n        const response = await axios.put('/api/UserSocialMediaPages', input);\r\n\r\n        if (response.status == 200 || response.status == 201) {\r\n            toastObject.value = {\r\n                title: \"Success!\",\r\n                state: true,\r\n                message: \"Social media links updated successfully!\",\r\n                color: \"success\",\r\n                icon: \"fas fa-check fa-lg me-2\"\r\n            };\r\n            loadingSpinner.value = false;\r\n            contentModal.value = false;\r\n            usersStore.getUsers({ UserId: userId });\r\n        } else {\r\n            toastObject.value = {\r\n                title: \"Error!\",\r\n                state: true,\r\n                message: \"Failed to update social media links.\",\r\n                color: \"danger\",\r\n                icon: \"fas fa-exclamation-circle fa-lg me-2\"\r\n            };\r\n            loadingSpinner.value = false;\r\n        }\r\n    } catch (error) {\r\n        toastObject.value = {\r\n            title: \"Error!\",\r\n            state: true,\r\n            message: \"An error occurred: \" + error.message,\r\n            color: \"danger\",\r\n            icon: \"fas fa-exclamation-circle fa-lg me-2\"\r\n        };\r\n        loadingSpinner.value = false;\r\n    }\r\n};\r\n\r\nconst avatarLetter = computed(() => {\r\n    return usersStore.users?.firstName?.charAt(0).toUpperCase() || '';\r\n});\r\n</script>\r\n\r\n<style>\r\n:root {\r\n    --white: #ffffff;\r\n    --primary: #fc5818;\r\n    --secondary: #e2e6ef;\r\n    --accent: #02061b;\r\n}\r\n</style>\r\n\r\n<style scoped>\r\n.btn-primary {\r\n    background-color: var(--primary);\r\n}\r\n\r\n.btn-tertiary {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    color: var(--accent);\r\n    border-color: var(--accent);\r\n}\r\n\r\n.card,\r\n.card-body {\r\n    overflow-y: auto;\r\n}\r\n\r\n.image-container {\r\n    position: relative;\r\n    display: inline-block;\r\n}\r\n\r\n.image-container .loader {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    margin: auto;\r\n    width: 50px;\r\n    height: 50px;\r\n    border: 3px solid rgba(0, 0, 0, 0.1);\r\n    border-top-color: rgb(153, 153, 153);\r\n    border-radius: 50%;\r\n    animation: BorderSpin 1s linear infinite;\r\n}\r\n\r\n.image-container img {\r\n    display: block;\r\n    width: 50px;\r\n    height: 50px;\r\n    border-radius: 50%;\r\n}\r\n\r\n@keyframes BorderSpin {\r\n    0% {\r\n        transform: rotate(0deg);\r\n    }\r\n\r\n    100% {\r\n        transform: rotate(360deg);\r\n    }\r\n}\r\n\r\n.backdrop {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100vw;\r\n    height: 100vh;\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n    z-index: 9999;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n\r\n.account-form {\r\n    width: 50%\r\n}\r\n\r\n.button-title {\r\n    width: 17%;\r\n}\r\n\r\n.social-title {\r\n    width: 25%;\r\n}\r\n\r\n.social-link {\r\n    width: 75%;\r\n}\r\n\r\n@media screen and (max-width: 767px) {\r\n    .button-title {\r\n        width: fit-content;\r\n    }\r\n\r\n    .account-form {\r\n        width: 100%\r\n    }\r\n\r\n    .social-title {\r\n        width: 45%;\r\n    }\r\n\r\n    .social-link {\r\n        width: 55%;\r\n    }\r\n}\r\n\r\n.default-avatar {\r\n    width: 60px;\r\n    height: 60px;\r\n    background-color: var(--primary);\r\n    color: white;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    border-radius: 50%;\r\n    font-size: 30px;\r\n    font-weight: bold;\r\n}\r\n\r\n.profile-avatar {\r\n    width: 60px;\r\n    height: 60px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n}\r\n\r\n.avatar-letter {\r\n    text-transform: uppercase;\r\n}\r\n</style>\r\n","import script from \"./UpdateClientsNext.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./UpdateClientsNext.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./UpdateClientsNext.vue?vue&type=style&index=0&id=7aed1eb0&lang=css\"\nimport \"./UpdateClientsNext.vue?vue&type=style&index=1&id=7aed1eb0&scoped=true&lang=css\"\n\nimport exportComponent from \"D:\\\\a\\\\1\\\\s\\\\CSD.SPA\\\\ClientApp\\\\node_modules\\\\vue-loader-v16\\\\dist\\\\exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-7aed1eb0\"]])\n\nexport default __exports__","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./UpdateClientsNext.vue?vue&type=style&index=1&id=7aed1eb0&scoped=true&lang=css\"","module.exports = __webpack_public_path__ + \"img/cs-loader.6cc976da.png\";","module.exports = __webpack_public_path__ + \"img/kuashou-icon.40d4feeb.png\";"],"sourceRoot":""}