\n
\n ) : (\n props.children\n )}\n \n 
\n {show &&
\n );\n};\n\n// HoC to wrap Inputs, providing them form-related styling and functionality\nconst wrapInput = (Component) => {\n const InputWrapper = ({ className, ...props }) => {\n if (!props.label) {\n return {props.helperTextMsg}
}\n \n
\n );\n };\n return InputWrapper;\n};\n\nconst Input = wrapInput(_Input);\nconst Upload = wrapInput(_Upload);\nconst Select = wrapInput(_Select);\nconst ImageUpload = wrapInput(_ImageUpload);\nconst Textarea = wrapInput(_Textarea);\nconst Phone = wrapInput(_Phone);\nconst Checkbox = wrapInput(_Checkbox);\nconst Radio = wrapInput(_Radio);\nconst Searchable = wrapInput(_Searchable);\nconst CheckboxGroup = wrapInput(_CheckboxGroup);\nconst DateRangePicker = wrapInput(_DateRangePicker);\nconst SingleDatePicker = wrapInput(_SingleDatePicker);\nconst MultiLevelCheckbox = wrapInput(_MultiLevelCheckbox);\nconst MultiSelect = wrapInput(_MultiSelect);\nconst MultiTextInput = wrapInput(_MultiTextInput);\nconst Toggle = wrapInput(_Toggle);\nconst SelectSearch = wrapInput(_SelectSearch);\nconst ProductSearch = wrapInput(_ProductSearch);\nconst BrandSearch = wrapInput(_BrandSearch);\nconst CustomerTagSearch = wrapInput(_CustomerTagSearch);\nconst DateTime = wrapInput(_DateTime);\nconst CategorySearch = wrapInput(_CategorySearch);\nconst TimePicker = wrapInput(_TimePicker);\nconst RichTextEditorQuill = wrapInput(_RichTextEditorQuill);\n\nexport {\n BaseForm,\n VALIDATION_TYPES,\n Input,\n Select,\n Upload,\n ImageUpload,\n Textarea,\n Phone,\n Checkbox,\n Radio,\n Searchable,\n CheckboxGroup,\n DateRangePicker,\n SingleDatePicker,\n MultiLevelCheckbox,\n MultiSelect,\n MultiTextInput,\n Toggle,\n SelectSearch,\n ProductSearch,\n BrandSearch,\n DateTime,\n CategorySearch,\n CustomerTagSearch,\n TimePicker,\n RichTextEditorQuill,\n HelperText,\n};\n","import { getMessage } from \"../translator\";\nimport moment from \"moment\";\n\n// takes Date-time as \"2018-11-08 11:05:35\" and returns as 8 Nov 2018, 11:05 AM\n// if only date is passed ex. 2018-11-08, return it as 8 Nov 2018, 00:00 AM\nfunction getPrintableTime(time) {\n if (!time) {\n return \"\";\n }\n time = time.trim();\n\n let dateString;\n\n if (time.includes(\" \")) {\n dateString = moment(time, \"YYYY-MM-DD HH:mm:ss\");\n dateString = dateString.format(\"DD MMM YYYY, hh:mm A\");\n } else {\n dateString = moment(time, \"YYYY-MM-DD\");\n dateString = dateString.format(\"DD MMM YYYY\");\n }\n\n return dateString;\n}\n\n// gets time and date in utc and return local time\nfunction utcToLocalTime(time) {\n const t = new Date(time.replace(/ /g, \"T\")).getTime();\n const offset = new Date().getTimezoneOffset() * -60 * 1000;\n let final = new Date(t + offset);\n return final;\n}\n\nfunction localTimeToUtc(time) {\n const t = new Date(time.replace(/ /g, \"T\")).getTime();\n const offset = new Date().getTimezoneOffset() * -60 * 1000;\n let final = new Date(t - offset);\n return final;\n}\n\n// accepts 2 args, date time converter function and date time in \"YYYY-MM-DD HH-MM-SS\" and return in standrad format \"YYYY-MM-DD HH-MM-SS\"\nfunction getStandradDateTime(dateTimeConverter, dateTime) {\n if (dateTime.includes(\"T\")) {\n const newDate = dateTime.split(/[TZ]/);\n dateTime = `${newDate[0]} ${newDate[1]}`;\n }\n return moment(dateTimeConverter(dateTime), \"YYYY-MM-DD HH:mm:ss\").format(\n \"YYYY-MM-DD HH:mm:ss\"\n );\n}\n\n// accepts 2 args, time in \"YYYY-MM-DD HH-MM-SS\" and return in Hours\nfunction getDifferenceInHours(start, end) {\n const startTime = new Date(start).getTime();\n const endTime = new Date(end).getTime();\n const diff = Math.floor(Math.abs(startTime - endTime) / 3600000);\n return `${diff} Hours`;\n}\n\nfunction formatSlotTime(date, time) {\n if (!time || !date) {\n return null;\n }\n const t1 = new Date(`${date} ${time}`).getTime();\n const offset = new Date().getTimezoneOffset() * -60 * 1000;\n let final = new Date(t1 + offset).toTimeString();\n time = final.split(\" \")[0];\n let parts = time.split(\":\");\n if (parts[0] === \"00\") {\n return `12:${parts[1]} AM`;\n }\n if (parts[0] === \"12\") {\n return `${Number(parts[0])}:${parts[1]} PM`;\n }\n if (parts[0] > 12) {\n return `${String(Number(parts[0]) - 12)}:${parts[1]} PM`;\n }\n return `${Number(parts[0])}:${parts[1]} AM`;\n}\n\nconst convertToMilitaryTime = (time, meridian) => {\n if (!time || !meridian) {\n return null;\n }\n return moment(`${time} ${meridian}`, [\"h:mm A\"]).format(\"HH:mm:ss\");\n};\n\nfunction slotTimes() {\n let timeStrings = [];\n for (let i = 0; i <= 23; i++) {\n if (i < 10) {\n timeStrings.push(`0${i}:00:00`);\n timeStrings.push(`0${i}:30:00`);\n } else {\n timeStrings.push(`${i}:00:00`);\n timeStrings.push(`${i}:30:00`);\n }\n }\n return timeStrings;\n}\n\n//gets the date and time and return the boolean depends on current time\nfunction timeRangeDisable(date, time) {\n if (date) {\n if (`${date} ${time}` < `${moment().format(\"YYYY-MM-DD HH:mm:ss\")}`) {\n return true;\n }\n }\n return false;\n}\n\n// gets date in YYYY-MM-DD and return in format 20th Nov 2017\nfunction formatDate(dateString) {\n if (!dateString) {\n return null;\n }\n let monthNames = [\n \"Jan\",\n \"Feb\",\n \"Mar\",\n \"Apr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Aug\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dec\",\n ];\n let parts = dateString.split(\"-\");\n let suffix = \"\";\n switch (parts[2]) {\n case \"01\":\n case \"21\":\n case \"31\":\n suffix = \"st\";\n break;\n case \"03\":\n case \"23\":\n suffix = \"rd\";\n break;\n case \"02\":\n case \"22\":\n suffix = \"nd\";\n break;\n default:\n suffix = \"th\";\n }\n return `${parts[2].replace(/^0+/, \"\")}${suffix} ${monthNames[parts[1] - 1]} ${\n parts[0]\n }`;\n}\n// take time in 23:59:59 format and return 11:59 PM\nfunction formatTime(time) {\n if (!time) {\n return null;\n }\n let parts = time.split(\":\");\n if (parts[0] === \"00\") {\n return `12:${parts[1]} AM`;\n }\n if (parts[0] === \"12\") {\n return `${Number(parts[0])}:${parts[1]} PM`;\n }\n if (parts[0] > 12) {\n return `${String(Number(parts[0]) - 12)}:${parts[1]} PM`;\n }\n return `${Number(parts[0])}:${parts[1]} AM`;\n}\n\nfunction getOrdinal(n) {\n let s = [\"th\", \"st\", \"nd\", \"rd\"];\n let v = n % 100;\n return n + (s[(v - 20) % 10] || s[v] || s[0]);\n}\n\n// Returns day of a week when a valid date is provided\nfunction getPrintableDay(date) {\n const days = [\n \"Sunday\",\n \"Monday\",\n \"Tuesday\",\n \"Wednesday\",\n \"Thursday\",\n \"Friday\",\n \"Saturday\",\n ];\n date = new Date(date);\n return days[date.getDay()];\n}\n\n// Returns an array with current months first and end dates\nfunction getMonthStartEnd(date = false) {\n date = date ? new Date(date) : new Date();\n return [\n getDateInSQL(new Date(date.getFullYear(), date.getMonth(), 1)),\n getDateInSQL(new Date(date.getFullYear(), date.getMonth() + 1, 0)),\n ];\n}\n\n// Returns date in the form of YYYY-MM-DD for a given valid date\nfunction getDateInSQL(date) {\n date = new Date(date);\n let month = \"\" + (date.getMonth() + 1);\n let day = \"\" + date.getDate();\n let year = date.getFullYear();\n\n if (month.length < 2) month = \"0\" + month;\n if (day.length < 2) day = \"0\" + day;\n\n return [year, month, day].join(\"-\");\n}\n\n// Returns previous month from a given date\nfunction getPrevMonth(date) {\n return new Date(date.setMonth(date.getMonth() - 1));\n}\n\n// Returns next month from a given date\nfunction getNextMonth(date) {\n return new Date(date.setMonth(date.getMonth() + 1));\n}\n\nfunction getDaysOfWeek({ full = false }) {\n return [\n {\n text: full ? getMessage(\"Monday.all\") : getMessage(\"Monday\"),\n value: \"Monday\",\n },\n {\n text: full ? getMessage(\"Tuesday.all\") : getMessage(\"Tuesday\"),\n value: \"Tuesday\",\n },\n {\n text: full ? getMessage(\"Wednesday.all\") : getMessage(\"Wednesday\"),\n value: \"Wednesday\",\n },\n {\n text: full ? getMessage(\"Thursday.all\") : getMessage(\"Thursday\"),\n value: \"Thursday\",\n },\n {\n text: full ? getMessage(\"Friday.all\") : getMessage(\"Friday\"),\n value: \"Friday\",\n },\n {\n text: full ? getMessage(\"Saturday.all\") : getMessage(\"Saturday\"),\n value: \"Saturday\",\n },\n {\n text: full ? getMessage(\"Sunday.all\") : getMessage(\"Sunday\"),\n value: \"Sunday\",\n },\n ];\n}\n\n// 02:00:00 to 120 mins\nfunction getMinutes(his) {\n if (!his) {\n return null;\n }\n var a = his.split(\":\");\n return +a[0] * 60 + +a[1];\n}\n\n// 2018-09-10T12:31:40Z to 12:31:40 and converts it to local time\nfunction formatIsoTime(dateTime) {\n if (!dateTime) {\n return null;\n }\n return formatTime(moment(dateTime).format(\"HH:mm:ss\"));\n}\n\nfunction convertIsoToHHmmss(dateTime) {\n if (!dateTime) {\n return null;\n }\n return moment(dateTime).format(\"HH:mm:ss\");\n}\n\nfunction formatIsoDate(dateTime) {\n if (!dateTime) {\n return null;\n }\n let date = moment(dateTime);\n return formatDate(date.format(\"YYYY-MM-DD\"));\n}\n\n// Gets time difference in hrs plus minutes betn 2 times\n// 16:00:00 and 22:00:00 gives 6h 00 mins\nfunction getRemainingTime(startTime, endTime) {\n if (!startTime || !endTime) {\n return null;\n }\n try {\n let start = moment.utc(startTime, \"HH:mm:ss\");\n let end = moment.utc(endTime, \"HH:mm:ss\");\n if (end.isBefore(start)) {\n end.add(1, \"day\");\n }\n let diff = moment.duration(end.diff(start));\n diff = moment.utc(+diff).format(\"HH:mm\").split(\":\");\n diff[0] = Number(diff[0]);\n diff[1] = Number(diff[1]);\n diff = diff.join(\" h \").concat(\" m\");\n return diff;\n } catch (error) {\n console.error(error);\n return null;\n }\n}\n\nfunction getTimes() {\n let times = [];\n for (let i = 0; i <= 23; i++) {\n if (i < 10) {\n times.push({ text: `0${i}:00`, value: `0${i}:00:00` });\n times.push({ text: `0${i}:30`, value: `0${i}:30:00` });\n } else {\n times.push({ text: `${i}:00`, value: `${i}:00:00` });\n times.push({ text: `${i}:30`, value: `${i}:30:00` });\n }\n }\n return times;\n}\n\nexport {\n getPrintableTime,\n formatDate,\n formatTime,\n getOrdinal,\n getMonthStartEnd,\n getPrintableDay,\n getDateInSQL,\n getPrevMonth,\n getNextMonth,\n getDaysOfWeek,\n getMinutes,\n formatIsoTime,\n convertIsoToHHmmss,\n formatIsoDate,\n getRemainingTime,\n getTimes,\n utcToLocalTime,\n localTimeToUtc,\n getStandradDateTime,\n convertToMilitaryTime,\n formatSlotTime,\n slotTimes,\n getDifferenceInHours,\n timeRangeDisable,\n};\n","// Features:\n// 1. accept token\n// 2. save token to storage\n// 3. auto-load token from storage\n\nconst saveSession = function (sessionData) {\n for (let key in sessionData) {\n if (sessionData[key]) {\n if (key === \"user\") {\n savePermissions(sessionData[key].endpointPermissions);\n delete sessionData[key].endpointPermissions;\n }\n window.localStorage.setItem(\n key,\n typeof sessionData[key] === \"object\"\n ? JSON.stringify(sessionData[key])\n : sessionData[key]\n );\n }\n }\n};\n\n// Checks if user has permissions to make a request to server\n// For endpoint like order-service/order-log with method PUT\n// service = order, endpoint = orrder-log, method = put/PUT\nconst hasPermissions = (service, endpoint, method) => {\n if (!service || !endpoint || !method) {\n return false;\n }\n let permissions = JSON.parse(\n window.localStorage.getItem(\"formattedPermissions\")\n );\n if (!permissions) {\n permissions = getAllPermissions();\n window.localStorage.setItem(\n \"formattedPermissions\",\n JSON.stringify(permissions)\n );\n }\n let key = `${service}-service/${endpoint}`;\n return permissions[key] && permissions[key][method.toUpperCase()];\n};\n\nconst savePermissions = function (permissions = []) {\n let formatted = Object.assign(\n {},\n ...permissions.map((permission) => {\n return {\n [permission.url]: permission,\n };\n })\n );\n window.localStorage.setItem(\"permissions\", JSON.stringify(formatted));\n let formattedPermissions = getAllPermissions();\n window.localStorage.setItem(\n \"formattedPermissions\",\n JSON.stringify(formattedPermissions)\n );\n};\n\nconst getPermissions = function (endpoints = []) {\n let permissions = window.localStorage.getItem(\"permissions\");\n if (!permissions) {\n return false;\n }\n permissions = JSON.parse(permissions);\n return Object.assign(\n {},\n ...endpoints.map((endpoint) => {\n if (endpoint in permissions) {\n return {\n [endpoint]: permissions[endpoint].allowedMethods,\n };\n } else {\n return {\n [endpoint]: false,\n };\n }\n })\n );\n};\n\nconst getAllPermissions = function () {\n let permissions = JSON.parse(window.localStorage.getItem(\"permissions\"));\n\n // if permissions is null or undefiend return empty object\n if (!permissions) {\n return {};\n }\n\n return Object.assign(\n {},\n ...Object.keys(permissions).map((endpoint) => ({\n [endpoint]: permissions[endpoint][\"allowedMethods\"],\n }))\n );\n};\n\n// get permission for endpoint like order-service/order-log\n// service = order-service, endpoint = order-log\nconst getPermissionObject = (service, endpoint) => {\n const permissions = JSON.parse(window.localStorage.getItem(\"permissions\"));\n return permissions[`${service}/${endpoint}`];\n};\n\nconst getAuthToken = function () {\n let token = window.localStorage.getItem(\"token\");\n return token;\n};\n\nconst getSession = function () {\n return {\n organization: JSON.parse(window.localStorage.getItem(\"organization\")),\n user: JSON.parse(window.localStorage.getItem(\"user\")),\n };\n};\n\nconst getStores = () => {\n return JSON.parse(window.localStorage.getItem(\"stores\"));\n};\n\nconst sortStores = (storesArr) => {\n return storesArr.sort((a, b) => {\n if (a.text > b.text) {\n return 1;\n } else if (b.text > a.text) {\n return -1;\n } else {\n return 0;\n }\n });\n};\n\nconst setStores = (stores) => {\n return window.localStorage.setItem(\"stores\", JSON.stringify(stores));\n};\n\nconst clearSession = function () {\n let organizationName = window.localStorage.getItem(\"organization-name\");\n let language = window.localStorage.getItem(\"language\");\n window.localStorage.clear();\n if (organizationName && organizationName !== \"null\") {\n window.localStorage.setItem(\"organization-name\", organizationName);\n }\n window.localStorage.setItem(\"language\", language);\n};\n\nconst isLoggedIn = function () {\n return Boolean(getAuthToken());\n};\n\nconst isAccountVerified = function () {\n let session = getSession();\n return session.user.verified;\n};\n\nconst verifyAccount = function () {\n let session = getSession();\n session.user.verified = true;\n saveSession(session);\n};\n\nconst isExtensionEnabled = function (slugOrId) {\n let organization = JSON.parse(window.localStorage.getItem(\"organization\"));\n if (!organization) {\n return false;\n }\n let enabled;\n if (typeof slugOrId === \"string\") {\n let slug = slugOrId;\n enabled =\n (organization.extension || []).findIndex((ext) => ext.slug === slug) > -1;\n } else {\n let id = slugOrId;\n enabled =\n (organization.extension || []).findIndex((ext) => ext.id === id) > -1;\n }\n return enabled;\n};\n\nconst disableExtension = function (extension) {\n let organization = JSON.parse(window.localStorage.getItem(\"organization\"));\n if (!organization.extension) {\n organization.extension = [];\n }\n organization.extension = organization.extension.filter(\n (ext) => ext.id !== extension.id\n );\n window.localStorage.setItem(\"organization\", JSON.stringify(organization));\n};\n\nconst enableExtension = function (extension) {\n let organization = JSON.parse(window.localStorage.getItem(\"organization\"));\n if (!organization.extension) {\n organization.extension = [];\n }\n organization.extension.push(extension);\n window.localStorage.setItem(\"organization\", JSON.stringify(organization));\n};\n\nconst isEnterprise = () => {\n let userInfo = getSession();\n return Boolean(userInfo.organization && userInfo.organization.isEnterprise);\n};\nexport const isERCOrComplete = () => {\n const userObject = getSession()?.user;\n if (!userObject?.isOwner) {\n const { roles } = userObject?.designation || userObject;\n const DFR_COMPLETE = [\"ERC ORDER\", \"COMPLETE ORDER\"];\n const hasDFRCompleteRole = roles?.some((role) =>\n DFR_COMPLETE.includes(role?.name)\n );\n return hasDFRCompleteRole;\n }\n return false;\n};\n\nexport const canAccessReports = (name) => {\n if (!isERCOrComplete()) return true;\n\n const { permissions = {} } =\n getPermissionObject(\"report-service\", \"reports\")?.metaData || {};\n\n const reportAccessMap = {\n \"DFR Report\": \"canAccessDFRReport\",\n \"Order Sales Report\": \"canAccessOrderSalesReport\",\n \"Item Sales Report\": \"canAccessItemSalesReport\",\n \"Payment Raw Data Report\": \"canAccessPaymentRawDataReport\",\n };\n\n if (name) {\n return permissions[reportAccessMap[name]] ?? false;\n }\n\n return Object.values(reportAccessMap).some((key) => permissions[key]);\n};\n\nconst modifyMenuForEnterprise = (menu) => {\n let newMenu = { ...menu };\n if (!isExtensionEnabled(\"Marketing\")) {\n delete newMenu.marketing;\n }\n if (!canAccessReports()) {\n newMenu.analytics = menu?.analytics?.filter(\n (item) => !item.includes(\"reports\")\n );\n if (!newMenu?.analytics?.length) delete newMenu.analytics;\n }\n newMenu.operations = menu.operations?.filter(\n (item) => !item.includes(\"click-collect-orders\")\n ); // remove click and collect order from menu\n newMenu.user = menu.user?.filter((item) => item !== \"account-balance\"); // remove account balance from menu\n return newMenu;\n};\n// TODO: Get this from API response\n// const configureableExtensions = [\n// 'MultiUserSupport',\n// 'MultiStoreSupport',\n// 'InStoreProcessing',\n// 'LogisticsSupport',\n// 'DeliveryAreaSupport',\n// 'Analytics',\n// 'TawkToLiveChat',\n// 'Seo',\n// 'OnlinePaymentSupport',\n// 'EntityMetaData',\n// 'DeliverySlots',\n// 'CustomerTags',\n// 'StockOverride',\n// 'SearchOverride'\n// ]\n\nconst getConfigureableExtensions = () => {\n let extensions = [];\n if (hasPermissions(\"account\", \"store\", \"get\")) {\n extensions.push(\"MultiStoreSupport\");\n }\n if (hasPermissions(\"account\", \"user\", \"get\")) {\n extensions.push(\"MultiUserSupport\");\n }\n if (hasPermissions(\"account\", \"extension\", \"get\")) {\n extensions.push(\"InStoreProcessing\");\n }\n if (hasPermissions(\"logistics\", \"delivery-area\", \"get\")) {\n extensions.push(\"DeliveryAreaSupport\");\n }\n if (hasPermissions(\"account\", \"config\", \"get\")) {\n extensions.push(\"LogisticsSupport\");\n }\n if (hasPermissions(\"account\", \"config\", \"get\")) {\n extensions.push(\"Analytics\");\n }\n if (hasPermissions(\"account\", \"extension\", \"get\")) {\n extensions.push(\"TawkToLiveChat\");\n }\n if (hasPermissions(\"account\", \"seo\", \"get\")) {\n extensions.push(\"Seo\");\n }\n if (hasPermissions(\"config\", \"meta-data\", \"get\")) {\n extensions.push(\"EntityMetaData\");\n }\n if (\n hasPermissions(\"account\", \"extension\", \"get\") &&\n hasPermissions(\"order\", \"slot\", \"get\")\n ) {\n extensions.push(\"DeliverySlots\");\n }\n if (hasPermissions(\"customer\", \"tag\", \"get\")) {\n extensions.push(\"CustomerTags\");\n }\n if (hasPermissions(\"catalogue\", \"stock-override\", \"get\")) {\n extensions.push(\"StockOverride\");\n }\n if (hasPermissions(\"catalogue\", \"product-ranking\", \"get\")) {\n extensions.push(\"SearchOverride\");\n }\n if (hasPermissions(\"logistics\", \"courier\", \"get\")) {\n extensions.push(\"ShipRocket\");\n }\n if (hasPermissions(\"catalogue\", \"product-restriction\", \"get\")) {\n extensions.push(\"ProductRestrictions\");\n }\n if (hasPermissions(\"account\", \"store-history\", \"get\")) {\n extensions.push(\"UserLogs\");\n }\n return extensions;\n};\n\nconst slugs = {\n MultiUserSupport: \"users\",\n MultiStoreSupport: \"stores\",\n InStoreProcessing: \"instore\",\n DeliveryAreaSupport: \"delivery-area\",\n Analytics: \"analytics\",\n TawkToLiveChat: \"tawk\",\n Seo: \"seo\",\n OnlinePaymentSupport: \"payment-configuration\",\n EntityMetaData: \"metadata\",\n DeliverySlots: \"slots\",\n LogisticsSupport: \"logistics-configuration\",\n CustomerTags: \"customer-tags\",\n StockOverride: \"store-configuration\",\n SearchOverride: \"search-configuration\",\n ShipRocket: \"courier-support\",\n RefferalManagement: \"referral-management\",\n GoogleMerchantCenter: \"google-merchant-center\",\n MultiVariantSupport: \"product-variant-support\",\n ProductRestrictions: \"product-restrictions\",\n UserLogs: \"user-activity-logs\",\n};\n\nlet firstSubmenu = \"\";\n\nconst modifyEnterprisePermissions = () => {\n let extensions =\n getSession().organization && getSession().organization.extension;\n let configureableExtensions = getConfigureableExtensions();\n let menu = extensions\n .map((extension, index) => {\n if (configureableExtensions.indexOf(extension.slug) > -1) {\n if (firstSubmenu === \"\") {\n firstSubmenu = slugs[extension.slug];\n }\n return {\n slug: slugs[extension.slug],\n extensions: [extension.slug],\n };\n }\n return null;\n })\n .filter(Boolean);\n\n if (\n getSession().organization.domain &&\n hasPermissions(\"account\", \"theme\", \"get\") &&\n hasPermissions(\"website\", \"layout\", \"get\")\n ) {\n menu.push({\n slug: \"themes\",\n });\n }\n if (hasPermissions(\"config\", \"config\", \"GET\")) {\n menu.push({\n slug: \"communication-configuration\",\n });\n }\n if (hasPermissions(\"order\", \"package\", \"get\")) {\n menu.push({\n slug: \"order-package-config\",\n });\n }\n if (\n hasPermissions(\"account\", \"config\", \"get\") &&\n hasPermissions(\"config\", \"config\", \"get\")\n ) {\n menu.push({\n slug: \"order-config\",\n });\n }\n return menu;\n};\nconst getExtensionDetails = (slug) => {\n let organization = JSON.parse(window.localStorage.getItem(\"organization\"));\n if (!organization) {\n return null;\n }\n let index;\n index = (organization.extension || []).findIndex((ext) => ext.slug === slug);\n if (index > -1) {\n return organization.extension[index];\n }\n return null;\n};\n\nconst saveEntityMetaData = (entityMetaDataConfig) => {\n window.localStorage.setItem(\n \"entityMetaDataConfig\",\n JSON.stringify(entityMetaDataConfig)\n );\n};\n\nconst getEntityMetaData = () => {\n return JSON.parse(window.localStorage.getItem(\"entityMetaDataConfig\"));\n};\n\nconst getStoreSelect = () => {\n let stores = getStores();\n let data =\n stores &&\n stores.map((store) => {\n return {\n text: store.name,\n value: store.id,\n };\n });\n return data;\n};\n\nconst getStoreIds = () => {\n let stores = getStores();\n let data = stores && stores.map((store) => store.id);\n return data;\n};\n\nconst extensionRoutes = {\n OnlinePaymentSupport: \"/settings/payment-configuration\",\n Seo: \"/settings/seo\",\n DeliveryAreaSupport: \"/settings/delivery-area\",\n MultiStoreSupport: \"/settings/stores\",\n MultiUserSupport: \"/settings/users\",\n DeliverySlots: \"/settings/slots\",\n LogisticsSupport: \"/settings/logistics-configuration\",\n CustomerTags: \"/settings/customer-tags\",\n StockOverride: \"/settings/store-configuration\",\n SearchOverride: \"/settings/search-configuration\",\n MultipleAndPartialOrderPicking: \"/settings/picking-configuration\",\n Wallet: \"/settings/wallet-configuration\",\n ShipRocket: \"/settings/courier-support\",\n ReferralManagement: \"/settings/referral-management\",\n GoogleMerchantCenter: \"/settings/google-merchant-center\",\n MultiVariantSupport: \"/settings/product-variant-support\",\n ProductRestrictions: \"/settings/product-restrictions\",\n};\n\nexport {\n clearSession,\n disableExtension,\n enableExtension,\n getAllPermissions,\n getAuthToken,\n getPermissions,\n getSession,\n isExtensionEnabled,\n isLoggedIn,\n isAccountVerified,\n saveSession,\n verifyAccount,\n isEnterprise,\n modifyMenuForEnterprise,\n saveEntityMetaData,\n getEntityMetaData,\n getExtensionDetails,\n extensionRoutes,\n modifyEnterprisePermissions,\n firstSubmenu,\n getStores,\n setStores,\n hasPermissions,\n getStoreSelect,\n getStoreIds,\n sortStores,\n getPermissionObject,\n};\n","import { getAuthToken, isExtensionEnabled, getSession } from \"../auth\";\nimport checkHttpResponseCode from \"../../utils/isApiCallSuccessfull\";\nimport { GO_HOST } from \"../../config/app.js\";\nimport { get, set } from \"../storage\";\nimport axios from \"axios\";\n\nconst ServiceHostMapping = {\n \"account-service\": GO_HOST,\n \"billing-service\": GO_HOST,\n \"blog-service\": GO_HOST,\n \"recipe-service\": GO_HOST,\n \"catalogue-service\": GO_HOST,\n \"communication-service\": GO_HOST,\n \"customer-service\": GO_HOST,\n \"logistics-service\": GO_HOST,\n \"media-service\": GO_HOST,\n \"order-service\": GO_HOST,\n \"promo-service\": GO_HOST,\n \"ticket-service\": GO_HOST,\n \"website-service\": GO_HOST,\n \"public-service\": GO_HOST,\n \"offer-service\": GO_HOST,\n \"inventory-service\": GO_HOST,\n \"config-service\": GO_HOST,\n \"analytics-service\": GO_HOST,\n \"report-service\": GO_HOST,\n};\n\n/**\n * @description\n * Checking redirect form internal dashboard or not\n */\nexport const isInternal = () => {\n return get(\"redirectedFrom\") === \"internal_dashboard\";\n};\n\n/**\n * @description\n * adding organizationId to every request when login throw internal dashboard\n */\nconst getParams = (params, api) => {\n let organization = getSession().organization;\n const organizationId =\n new URL(window.location).searchParams.get(\"organizationId\") ||\n (organization && organization.id);\n if (api.includes(\"/account-service/user\")) {\n params.isOwner = 1;\n }\n params.organizationId = organizationId + \"\";\n let parameters = { ...params };\n return parameters;\n};\n\n// const possibleExceptions = ['validation exception', 'auth exception', 'model exception', 'resource not found', 'invalid request', 'server error']\nclass API {\n constructor({ url }) {\n this.signal = axios.CancelToken.source();\n this.guid = new URL(window.location).searchParams.get(\"guid\");\n if (url && url[0] === \"/\") {\n // Get the host based on the service\n const service = url.split(\"/\")[1];\n const api = ServiceHostMapping[service];\n this.url = api + url;\n } else {\n this.url = url;\n }\n }\n get(params = {}, headers = {}) {\n if (this.guid) {\n params.guid = this.guid;\n }\n return call(this.url, \"GET\", params, this.signal.token, headers);\n }\n post(params = {}, headers = {}) {\n return call(this.url, \"POST\", params, this.signal.token, headers);\n }\n put(params = {}, headers = {}) {\n return call(this.url, \"PUT\", params, this.signal.token, headers);\n }\n delete(params = {}, headers = {}) {\n return call(this.url, \"DELETE\", params, this.signal.token, headers);\n }\n cancel() {\n return this.signal.cancel(\"API call cancelling\");\n }\n}\n\nfunction call(api, method, params, signal, headers) {\n if (isInternal() && !(params instanceof FormData)) {\n params = { ...params, ...getParams(params, api) };\n }\n let options = {\n method: method,\n headers: {},\n };\n if (\n isExtensionEnabled(\"MultiLingualSupport\") &&\n api &&\n api.includes(\"/catalogue-service/\")\n ) {\n options.headers[\"Accept-Language\"] = get(\"dataLang\") || \"en\";\n }\n if (\n isExtensionEnabled(\"MultiLingualSupport\") &&\n api &&\n api.includes(\"/account-service/store\")\n ) {\n options.headers[\"Accept-Language\"] = get(\"dataLang\") || \"en\";\n }\n if (\n isExtensionEnabled(\"MultiLingualSupport\") &&\n api &&\n api.includes(\"/recipe-service/\")\n ) {\n options.headers[\"Accept-Language\"] = get(\"dataLang\") || \"en\";\n }\n options.headers = { ...options.headers, ...headers };\n\n switch (method) {\n case \"GET\":\n let querystring = \"\";\n if (params) {\n for (let key in params) {\n if (params[key]) {\n querystring +=\n (querystring.length ? \"&\" : \"\") +\n key +\n \"=\" +\n encodeURIComponent(params[key]);\n }\n }\n }\n options.headers[\"Content-Type\"] =\n \"application/x-www-form-urlencoded;charset=UTF-8\";\n api = api + (querystring ? \"?\" + querystring : \"\");\n break;\n case \"PUT\":\n options.headers[\"Content-Type\"] = \"application/json\";\n options.body = JSON.stringify(params);\n break;\n case \"POST\":\n options.headers[\"Content-Type\"] = \"application/json\";\n options.body = JSON.stringify(params);\n if (params instanceof FormData) {\n delete options.headers[\"Content-Type\"];\n options.body = params;\n }\n break;\n case \"DELETE\":\n options.headers[\"Content-Type\"] = \"application/json\";\n options.body = JSON.stringify(params);\n break;\n default:\n break;\n }\n\n let host = api.split(\"/\", 3).join(\"/\") + \"/api\";\n let sendAccessToken = host === GO_HOST;\n let accessToken = getAuthToken();\n\n if (api.includes(\"/logistics-service/delivery-area\")) {\n options.headers[\"X-API-VERSION\"] = 2;\n }\n\n if (params?.guid) {\n options.headers[\"Authorization\"] = \"Bearer \" + params.guid;\n set(\"token\", params.guid);\n } else if (sendAccessToken && accessToken) {\n options.headers[\"Authorization\"] = \"Bearer \" + accessToken;\n }\n\n return axios({\n url: api,\n method: method.toLowerCase(),\n headers: options.headers,\n data: options.body,\n validateStatus: (status) => {\n return checkHttpResponseCode(status);\n },\n responseType: \"json\",\n cancelToken: signal,\n })\n .then((response) => {\n return Promise.resolve(response.data);\n })\n .catch((error) => {\n if (axios.isCancel(error)) {\n return Promise.reject({\n message: \"cancelled\",\n });\n }\n return Promise.reject({\n code: error.response && error.response.data && error.response.data.code,\n message:\n error.response && error.response.data && error.response.data.message,\n url: api,\n method: method,\n });\n });\n}\n\nexport default API;\n","import React, { Component } from \"react\";\nimport \"./style.css\";\n\nimport HELLIP from \"./horizontal-ellipsis.svg\";\nimport VELLIP from \"./vertical-ellipsis.svg\";\n\nclass DropDown extends Component {\n constructor(props) {\n super(props);\n this.state = {\n expanded: false,\n };\n this.toggle = this.toggle.bind(this);\n this.handleClick = this.handleClick.bind(this);\n }\n toggle(e) {\n e && e.preventDefault();\n this.setState({\n expanded: !this.state.expanded,\n });\n }\n hide(e) {\n e && e.preventDefault();\n this.setState({\n expanded: false,\n });\n }\n handleClick(e) {\n if (this.dropdownRef.contains(e.target)) {\n if (this.toggleRef.contains(e.target)) {\n // The toggle handle was clicked\n this.toggle();\n } else if (e.target.classList.contains(\"dropdown-item\")) {\n // An item was clicked\n this.hide();\n }\n } else if (this.state.expanded) {\n // Click was outside the dropdown. Close the menu if it was open\n this.hide();\n }\n }\n componentDidMount() {\n window.addEventListener(\"click\", this.handleClick);\n }\n componentWillUnmount() {\n window.removeEventListener(\"click\", this.handleClick);\n }\n render() {\n const { dropdownHeading, children } = this.props;\n let icon = (\n \n \n {label && (\n \n {label}\n {props.required && {\" *\"}}\n \n )}\n {props.secondaryLabel && props.secondaryLabel()}\n \n {props.helperTextMsg &&
\n {props.children}
}\n {children}
\n \n \n );\n }\n}\n\nfunction DropDownItem(props) {\n const additionalClassName = props.className ? props.className : \"\";\n return (\n \n \n
\n );\n};\n\nLoader.propTypes = {\n size: PropTypes.oneOf([\"sm\", \"md\", \"lg\"]),\n};\n\nexport default Loader;\n","import moment from \"moment\";\nimport { getMessage } from \"../translator\";\nimport { isExtensionEnabled, getStores } from \"../auth\";\nimport { getStandradDateTime, utcToLocalTime } from \"../datetime\";\nimport isEmpty from \"lodash.isempty\";\nimport { getPrintableTime } from \"../datetime\";\nimport { getSession } from \"../auth\";\nimport { get } from \"../storage\";\n\nfunction sortSlotTypesAvailability(slots) {\n if (!slots) {\n return null;\n }\n return slots.sort((slot1, slot2) => {\n if (slot1.interval < slot2.interval) {\n return -1;\n } else {\n return 1;\n }\n });\n}\n\nfunction sortSlotsAvailability(slots) {\n if (!slots) {\n return null;\n }\n if (!Array.isArray(slots)) {\n return slots;\n }\n let asapSlots = slots.filter((slot) => slot.type === \"ASAP\");\n let stdSlots = slots.filter((slot) => slot.type === \"STANDARD\");\n asapSlots = sortSlotTypesAvailability(asapSlots);\n stdSlots = sortSlotTypesAvailability(stdSlots);\n return asapSlots.concat(stdSlots);\n}\n\nfunction sortAsapSlots(slots) {\n if (!slots) {\n return null;\n }\n return slots.sort((slot1, slot2) => {\n if (slot1.endTime < slot2.endTime) {\n return -1;\n } else {\n return 1;\n }\n });\n}\n\nfunction sortStandardSlots(slots) {\n if (!slots) {\n return null;\n }\n return slots.sort((slot1, slot2) => {\n if (slot1.startTime < slot2.startTime) {\n return -1;\n } else {\n return 1;\n }\n });\n}\n\nfunction sortSlots(slots) {\n if (!slots) {\n return null;\n }\n if (!Array.isArray(slots)) {\n return slots;\n }\n let asapSlots = slots.filter((slot) => slot.type === \"ASAP\");\n let stdSlots = slots.filter((slot) => slot.type === \"STANDARD\");\n asapSlots = sortAsapSlots(asapSlots);\n stdSlots = sortStandardSlots(stdSlots);\n return asapSlots.concat(stdSlots);\n}\n\nfunction getDisplaySlot(slot) {\n if (!slot) {\n return null;\n }\n if (slot.type === \"ASAP\") {\n return `${getMessage(\"asapDurationStartText\")} ${getMinutes(\n slot.endTime\n )} ${getMessage(\"asapDurationEndText\")}`;\n } else {\n return `${\n getPrintableTime(\n getStandradDateTime(\n utcToLocalTime,\n `${new Date().toISOString().split(\"T\")[0]} ${slot.startTime}`\n )\n ).split(\",\")[1]\n } - ${\n getPrintableTime(\n getStandradDateTime(\n utcToLocalTime,\n `${new Date().toISOString().split(\"T\")[0]} ${slot.endTime}`\n )\n ).split(\",\")[1]\n }`;\n }\n}\n\n// Takes array of slot objects and returns the text and value needed for select options\nfunction slotSelectOptions(slots) {\n if (!slots) {\n return [];\n }\n slots = sortSlots(slots);\n return slots.map((slot) => {\n return {\n text: getDisplaySlot(slot),\n value: slot.id,\n };\n });\n}\n\n// Takes time in 01:40:00 and returns 100 (60 + 40 mins)\nfunction getMinutes(his) {\n if (!his) {\n return \"\";\n }\n var a = his.split(\":\");\n return +a[0] * 60 + +a[1];\n}\n\nfunction getAsapDuration(startTime, endTime) {\n if (!startTime || !endTime) {\n return \"\";\n }\n let momentStartTime = moment(startTime, \"h:mma\");\n let momentEndTime = moment(endTime, \"h:mma\");\n if (momentStartTime.isBefore(momentEndTime)) {\n return `${getMessage(\"asapDurationStartText\")} ${momentEndTime.diff(\n momentStartTime,\n \"minutes\"\n )} ${getMessage(\"asapDurationEndText\")}`;\n } else {\n return `${getMessage(\"asapDurationStartText\")} ${\n 1440 - momentStartTime.diff(momentEndTime, \"minutes\")\n } ${getMessage(\"asapDurationEndText\")}`;\n }\n}\n\nfunction getTimes() {\n let times = [];\n for (let i = 0; i <= 23; i++) {\n if (i < 10) {\n times.push(`0${i}:00`);\n times.push(`0${i}:30`);\n } else {\n times.push(`${i}:00`);\n times.push(`${i}:30`);\n }\n }\n return times;\n}\n\nfunction getDisplayAddress(givenAddress, sequence) {\n if (!givenAddress) {\n return null;\n }\n // Todo: Find an efficient way to do this for all keys\n let fieldsToDelete = [\n \"id\",\n \"latitude\",\n \"longitude\",\n \"clientId\",\n \"metaData\",\n \"FirstName\",\n \"LastName\",\n ];\n let address = Object.assign({}, givenAddress);\n let pin = address.pincode;\n pin = pin && pin.toString().padStart(6, 0);\n let endAddress = {\n address: address.address || \"\",\n landmark: address.landmark,\n city: address.city,\n pincode: pin,\n };\n if (isExtensionEnabled(\"EntityMetaData\")) {\n if (sequence && address.metaData) {\n let seqAddress = {};\n sequence.forEach((key) => {\n if (key === \"Address\") {\n seqAddress.address = givenAddress.address;\n }\n seqAddress[key] = address.metaData[key];\n });\n address = Object.assign({}, { ...seqAddress }, endAddress);\n } else {\n address = Object.assign({}, { ...address.metaData }, endAddress);\n }\n } else {\n address = Object.assign({}, endAddress);\n }\n fieldsToDelete.forEach((field) => {\n delete address[field];\n });\n return Object.values(address).filter(Boolean).join(\", \");\n}\n\n// converts camelcase to regular english sentence\nfunction camelToReading(word) {\n if (!word) {\n return \"\";\n }\n return word\n .replace(/([A-Z])/g, \" $1\")\n .replace(/^./, (str) => str.toUpperCase());\n}\n\n// converts word another word to Word Another Word\nfunction toTitleCase(word) {\n if (!word) {\n return \"\";\n }\n return word\n .toLowerCase()\n .split(\" \")\n .map((s) => s.charAt(0).toUpperCase() + s.substring(1))\n .join(\" \");\n}\n\nfunction storeSelection() {\n const stores = getStores() || [];\n return stores.map((store) => {\n return {\n text: store.name,\n value: store.id,\n };\n });\n}\n\nfunction getProductName(product) {\n if (!product) {\n return \"\";\n }\n let name = product.fullName || product.name;\n if (product.brand) {\n return `${product.brand.name} ${name}`;\n } else {\n return name;\n }\n}\n\nfunction getProductImage(product) {\n if (!product) {\n return \"\";\n }\n if (product.images && product.images.length) {\n return product.images[0];\n }\n let variant =\n product.variants && product.variants.filter((variant) => variant.images)[0];\n if (variant) {\n return variant.images && variant.images[0];\n }\n return \"\";\n}\n\n// All sorted order status that are there\nconst getSortedOrderStatus = () => {\n let sortedStatues = [\"PENDING\"];\n if (isExtensionEnabled(\"InStoreProcessing\")) {\n sortedStatues = sortedStatues.concat([\n \"PICKING\",\n \"PICKED\",\n \"CHECKING\",\n \"CHECKED\",\n \"PACKING\",\n \"PACKED\",\n ]);\n }\n if (isExtensionEnabled(\"LogisticsSupport\")) {\n sortedStatues = sortedStatues.concat([\"DISPATCHED\"]);\n }\n sortedStatues = sortedStatues.concat([\"COMPLETED\", \"CANCELLED\"]);\n if (isExtensionEnabled(\"OrderReturns\")) {\n sortedStatues = sortedStatues.concat([\"RETURNED\"]);\n }\n return sortedStatues;\n};\n\nconst allStatuses = [\n \"PENDING\",\n \"PICKING\",\n \"PARTIALLY-PICKED\",\n \"PICKED\",\n \"CHECKING\",\n \"CHECKED\",\n \"PACKING\",\n \"PACKED\",\n \"DISPATCHED\",\n \"COMPLETED\",\n \"CANCELLED\",\n \"RETURNED\",\n];\n\nconst getSelectOrderStatus = () => {\n let allStatuses = getSortedOrderStatus();\n return allStatuses.map((status) => {\n return {\n text: getMessage(status),\n value: status,\n };\n });\n};\n\n// If we give an array of statuses then this function gives the statuses in sequence\nconst sortOrderStatus = (statuses = []) => {\n const allStatuses = getSortedOrderStatus();\n return allStatuses\n .map((status) => {\n if (statuses.indexOf(status) > -1) {\n return status;\n }\n return false;\n })\n .filter(Boolean);\n};\n\nfunction hasDuplicates(array) {\n return new Set(array).size !== array.length;\n}\n\nconst getCountryList = () => {\n return [\n { name: \"Afghanistan\", code: \"AF\" },\n { name: \"Ã…land Islands\", code: \"AX\" },\n { name: \"Albania\", code: \"AL\" },\n { name: \"Algeria\", code: \"DZ\" },\n { name: \"American Samoa\", code: \"AS\" },\n { name: \"AndorrA\", code: \"AD\" },\n { name: \"Angola\", code: \"AO\" },\n { name: \"Anguilla\", code: \"AI\" },\n { name: \"Antarctica\", code: \"AQ\" },\n { name: \"Antigua and Barbuda\", code: \"AG\" },\n { name: \"Argentina\", code: \"AR\" },\n { name: \"Armenia\", code: \"AM\" },\n { name: \"Aruba\", code: \"AW\" },\n { name: \"Australia\", code: \"AU\" },\n { name: \"Austria\", code: \"AT\" },\n { name: \"Azerbaijan\", code: \"AZ\" },\n { name: \"Bahamas\", code: \"BS\" },\n { name: \"Bahrain\", code: \"BH\" },\n { name: \"Bangladesh\", code: \"BD\" },\n { name: \"Barbados\", code: \"BB\" },\n { name: \"Belarus\", code: \"BY\" },\n { name: \"Belgium\", code: \"BE\" },\n { name: \"Belize\", code: \"BZ\" },\n { name: \"Benin\", code: \"BJ\" },\n { name: \"Bermuda\", code: \"BM\" },\n { name: \"Bhutan\", code: \"BT\" },\n { name: \"Bolivia\", code: \"BO\" },\n { name: \"Bosnia and Herzegovina\", code: \"BA\" },\n { name: \"Botswana\", code: \"BW\" },\n { name: \"Bouvet Island\", code: \"BV\" },\n { name: \"Brazil\", code: \"BR\" },\n { name: \"British Indian Ocean Territory\", code: \"IO\" },\n { name: \"Brunei Darussalam\", code: \"BN\" },\n { name: \"Bulgaria\", code: \"BG\" },\n { name: \"Burkina Faso\", code: \"BF\" },\n { name: \"Burundi\", code: \"BI\" },\n { name: \"Cambodia\", code: \"KH\" },\n { name: \"Cameroon\", code: \"CM\" },\n { name: \"Canada\", code: \"CA\" },\n { name: \"Cape Verde\", code: \"CV\" },\n { name: \"Cayman Islands\", code: \"KY\" },\n { name: \"Central African Republic\", code: \"CF\" },\n { name: \"Chad\", code: \"TD\" },\n { name: \"Chile\", code: \"CL\" },\n { name: \"China\", code: \"CN\" },\n { name: \"Christmas Island\", code: \"CX\" },\n { name: \"Cocos (Keeling) Islands\", code: \"CC\" },\n { name: \"Colombia\", code: \"CO\" },\n { name: \"Comoros\", code: \"KM\" },\n { name: \"Congo\", code: \"CG\" },\n { name: \"Congo, The Democratic Republic of the\", code: \"CD\" },\n { name: \"Cook Islands\", code: \"CK\" },\n { name: \"Costa Rica\", code: \"CR\" },\n { name: \"Cote D'Ivoire\", code: \"CI\" },\n { name: \"Croatia\", code: \"HR\" },\n { name: \"Cuba\", code: \"CU\" },\n { name: \"Cyprus\", code: \"CY\" },\n { name: \"Czech Republic\", code: \"CZ\" },\n { name: \"Denmark\", code: \"DK\" },\n { name: \"Djibouti\", code: \"DJ\" },\n { name: \"Dominica\", code: \"DM\" },\n { name: \"Dominican Republic\", code: \"DO\" },\n { name: \"Ecuador\", code: \"EC\" },\n { name: \"Egypt\", code: \"EG\" },\n { name: \"El Salvador\", code: \"SV\" },\n { name: \"Equatorial Guinea\", code: \"GQ\" },\n { name: \"Eritrea\", code: \"ER\" },\n { name: \"Estonia\", code: \"EE\" },\n { name: \"Ethiopia\", code: \"ET\" },\n { name: \"Falkland Islands (Malvinas)\", code: \"FK\" },\n { name: \"Faroe Islands\", code: \"FO\" },\n { name: \"Fiji\", code: \"FJ\" },\n { name: \"Finland\", code: \"FI\" },\n { name: \"France\", code: \"FR\" },\n { name: \"French Guiana\", code: \"GF\" },\n { name: \"French Polynesia\", code: \"PF\" },\n { name: \"French Southern Territories\", code: \"TF\" },\n { name: \"Gabon\", code: \"GA\" },\n { name: \"Gambia\", code: \"GM\" },\n { name: \"Georgia\", code: \"GE\" },\n { name: \"Germany\", code: \"DE\" },\n { name: \"Ghana\", code: \"GH\" },\n { name: \"Gibraltar\", code: \"GI\" },\n { name: \"Greece\", code: \"GR\" },\n { name: \"Greenland\", code: \"GL\" },\n { name: \"Grenada\", code: \"GD\" },\n { name: \"Guadeloupe\", code: \"GP\" },\n { name: \"Guam\", code: \"GU\" },\n { name: \"Guatemala\", code: \"GT\" },\n { name: \"Guernsey\", code: \"GG\" },\n { name: \"Guinea\", code: \"GN\" },\n { name: \"Guinea-Bissau\", code: \"GW\" },\n { name: \"Guyana\", code: \"GY\" },\n { name: \"Haiti\", code: \"HT\" },\n { name: \"Heard Island and Mcdonald Islands\", code: \"HM\" },\n { name: \"Holy See (Vatican City State)\", code: \"VA\" },\n { name: \"Honduras\", code: \"HN\" },\n { name: \"Hong Kong\", code: \"HK\" },\n { name: \"Hungary\", code: \"HU\" },\n { name: \"Iceland\", code: \"IS\" },\n { name: \"India\", code: \"IN\" },\n { name: \"Indonesia\", code: \"ID\" },\n { name: \"Iran, Islamic Republic Of\", code: \"IR\" },\n { name: \"Iraq\", code: \"IQ\" },\n { name: \"Ireland\", code: \"IE\" },\n { name: \"Isle of Man\", code: \"IM\" },\n { name: \"Israel\", code: \"IL\" },\n { name: \"Italy\", code: \"IT\" },\n { name: \"Jamaica\", code: \"JM\" },\n { name: \"Japan\", code: \"JP\" },\n { name: \"Jersey\", code: \"JE\" },\n { name: \"Jordan\", code: \"JO\" },\n { name: \"Kazakhstan\", code: \"KZ\" },\n { name: \"Kenya\", code: \"KE\" },\n { name: \"Kiribati\", code: \"KI\" },\n { name: \"Korea, Democratic People'S Republic of\", code: \"KP\" },\n { name: \"Korea, Republic of\", code: \"KR\" },\n { name: \"Kuwait\", code: \"KW\" },\n { name: \"Kyrgyzstan\", code: \"KG\" },\n { name: \"Lao People'S Democratic Republic\", code: \"LA\" },\n { name: \"Latvia\", code: \"LV\" },\n { name: \"Lebanon\", code: \"LB\" },\n { name: \"Lesotho\", code: \"LS\" },\n { name: \"Liberia\", code: \"LR\" },\n { name: \"Libyan Arab Jamahiriya\", code: \"LY\" },\n { name: \"Liechtenstein\", code: \"LI\" },\n { name: \"Lithuania\", code: \"LT\" },\n { name: \"Luxembourg\", code: \"LU\" },\n { name: \"Macao\", code: \"MO\" },\n { name: \"Macedonia, The Former Yugoslav Republic of\", code: \"MK\" },\n { name: \"Madagascar\", code: \"MG\" },\n { name: \"Malawi\", code: \"MW\" },\n { name: \"Malaysia\", code: \"MY\" },\n { name: \"Maldives\", code: \"MV\" },\n { name: \"Mali\", code: \"ML\" },\n { name: \"Malta\", code: \"MT\" },\n { name: \"Marshall Islands\", code: \"MH\" },\n { name: \"Martinique\", code: \"MQ\" },\n { name: \"Mauritania\", code: \"MR\" },\n { name: \"Mauritius\", code: \"MU\" },\n { name: \"Mayotte\", code: \"YT\" },\n { name: \"Mexico\", code: \"MX\" },\n { name: \"Micronesia, Federated States of\", code: \"FM\" },\n { name: \"Moldova, Republic of\", code: \"MD\" },\n { name: \"Monaco\", code: \"MC\" },\n { name: \"Mongolia\", code: \"MN\" },\n { name: \"Montserrat\", code: \"MS\" },\n { name: \"Morocco\", code: \"MA\" },\n { name: \"Mozambique\", code: \"MZ\" },\n { name: \"Myanmar\", code: \"MM\" },\n { name: \"Namibia\", code: \"NA\" },\n { name: \"Nauru\", code: \"NR\" },\n { name: \"Nepal\", code: \"NP\" },\n { name: \"Netherlands\", code: \"NL\" },\n { name: \"Netherlands Antilles\", code: \"AN\" },\n { name: \"New Caledonia\", code: \"NC\" },\n { name: \"New Zealand\", code: \"NZ\" },\n { name: \"Nicaragua\", code: \"NI\" },\n { name: \"Niger\", code: \"NE\" },\n { name: \"Nigeria\", code: \"NG\" },\n { name: \"Niue\", code: \"NU\" },\n { name: \"Norfolk Island\", code: \"NF\" },\n { name: \"Northern Mariana Islands\", code: \"MP\" },\n { name: \"Norway\", code: \"NO\" },\n { name: \"Oman\", code: \"OM\" },\n { name: \"Pakistan\", code: \"PK\" },\n { name: \"Palau\", code: \"PW\" },\n { name: \"Palestinian Territory, Occupied\", code: \"PS\" },\n { name: \"Panama\", code: \"PA\" },\n { name: \"Papua New Guinea\", code: \"PG\" },\n { name: \"Paraguay\", code: \"PY\" },\n { name: \"Peru\", code: \"PE\" },\n { name: \"Philippines\", code: \"PH\" },\n { name: \"Pitcairn\", code: \"PN\" },\n { name: \"Poland\", code: \"PL\" },\n { name: \"Portugal\", code: \"PT\" },\n { name: \"Puerto Rico\", code: \"PR\" },\n { name: \"Qatar\", code: \"QA\" },\n { name: \"Reunion\", code: \"RE\" },\n { name: \"Romania\", code: \"RO\" },\n { name: \"Russian Federation\", code: \"RU\" },\n { name: \"RWANDA\", code: \"RW\" },\n { name: \"Saint Helena\", code: \"SH\" },\n { name: \"Saint Kitts and Nevis\", code: \"KN\" },\n { name: \"Saint Lucia\", code: \"LC\" },\n { name: \"Saint Pierre and Miquelon\", code: \"PM\" },\n { name: \"Saint Vincent and the Grenadines\", code: \"VC\" },\n { name: \"Samoa\", code: \"WS\" },\n { name: \"San Marino\", code: \"SM\" },\n { name: \"Sao Tome and Principe\", code: \"ST\" },\n { name: \"Saudi Arabia\", code: \"SA\" },\n { name: \"Senegal\", code: \"SN\" },\n { name: \"Serbia and Montenegro\", code: \"CS\" },\n { name: \"Seychelles\", code: \"SC\" },\n { name: \"Sierra Leone\", code: \"SL\" },\n { name: \"Singapore\", code: \"SG\" },\n { name: \"Slovakia\", code: \"SK\" },\n { name: \"Slovenia\", code: \"SI\" },\n { name: \"Solomon Islands\", code: \"SB\" },\n { name: \"Somalia\", code: \"SO\" },\n { name: \"South Africa\", code: \"ZA\" },\n { name: \"South Georgia and the South Sandwich Islands\", code: \"GS\" },\n { name: \"Spain\", code: \"ES\" },\n { name: \"Sri Lanka\", code: \"LK\" },\n { name: \"Sudan\", code: \"SD\" },\n { name: \"Suriname\", code: \"SR\" },\n { name: \"Svalbard and Jan Mayen\", code: \"SJ\" },\n { name: \"Swaziland\", code: \"SZ\" },\n { name: \"Sweden\", code: \"SE\" },\n { name: \"Switzerland\", code: \"CH\" },\n { name: \"Syrian Arab Republic\", code: \"SY\" },\n { name: \"Taiwan, Province of China\", code: \"TW\" },\n { name: \"Tajikistan\", code: \"TJ\" },\n { name: \"Tanzania, United Republic of\", code: \"TZ\" },\n { name: \"Thailand\", code: \"TH\" },\n { name: \"Timor-Leste\", code: \"TL\" },\n { name: \"Togo\", code: \"TG\" },\n { name: \"Tokelau\", code: \"TK\" },\n { name: \"Tonga\", code: \"TO\" },\n { name: \"Trinidad and Tobago\", code: \"TT\" },\n { name: \"Tunisia\", code: \"TN\" },\n { name: \"Turkey\", code: \"TR\" },\n { name: \"Turkmenistan\", code: \"TM\" },\n { name: \"Turks and Caicos Islands\", code: \"TC\" },\n { name: \"Tuvalu\", code: \"TV\" },\n { name: \"Uganda\", code: \"UG\" },\n { name: \"Ukraine\", code: \"UA\" },\n { name: \"United Arab Emirates\", code: \"AE\" },\n { name: \"United Kingdom\", code: \"GB\" },\n { name: \"United States\", code: \"US\" },\n { name: \"United States Minor Outlying Islands\", code: \"UM\" },\n { name: \"Uruguay\", code: \"UY\" },\n { name: \"Uzbekistan\", code: \"UZ\" },\n { name: \"Vanuatu\", code: \"VU\" },\n { name: \"Venezuela\", code: \"VE\" },\n { name: \"Viet Nam\", code: \"VN\" },\n { name: \"Virgin Islands, British\", code: \"VG\" },\n { name: \"Virgin Islands, U.S.\", code: \"VI\" },\n { name: \"Wallis and Futuna\", code: \"WF\" },\n { name: \"Western Sahara\", code: \"EH\" },\n { name: \"Yemen\", code: \"YE\" },\n { name: \"Zambia\", code: \"ZM\" },\n { name: \"Zimbabwe\", code: \"ZW\" },\n ];\n};\n\nconst getLanguages = () => {\n return [\n {\n name: \"Arabic\",\n code: \"ar\",\n },\n {\n name: \"Pashto\",\n code: \"ps\",\n },\n {\n name: \"Swedish\",\n code: \"sv\",\n },\n {\n name: \"Albanian\",\n code: \"sq\",\n },\n {\n name: \"Catalan\",\n code: \"ca\",\n },\n {\n name: \"Portuguese\",\n code: \"pt\",\n },\n {\n name: \"Spanish\",\n code: \"es\",\n },\n {\n name: \"Armenian\",\n code: \"hy\",\n },\n {\n name: \"Dutch\",\n code: \"nl\",\n },\n {\n name: \"German\",\n code: \"de\",\n },\n {\n name: \"Azerbaijani\",\n code: \"az\",\n },\n {\n name: \"Bengali\",\n code: \"bn\",\n },\n {\n name: \"Belarusian\",\n code: \"be\",\n },\n {\n name: \"French\",\n code: \"fr\",\n },\n {\n name: \"Dzongkha\",\n code: \"dz\",\n },\n {\n name: \"Bosnian\",\n code: \"bs\",\n },\n {\n name: \"Norwegian\",\n code: \"no\",\n },\n {\n name: \"Malay\",\n code: \"ms\",\n },\n {\n name: \"Bulgarian\",\n code: \"bg\",\n },\n {\n name: \"Khmer\",\n code: \"km\",\n },\n {\n name: \"Chinese\",\n code: \"zh\",\n },\n {\n name: \"Croatian\",\n code: \"hr\",\n },\n {\n name: \"Greek (modern)\",\n code: \"el\",\n },\n {\n name: \"Czech\",\n code: \"cs\",\n },\n {\n name: \"Danish\",\n code: \"da\",\n },\n {\n name: \"Tigrinya\",\n code: \"ti\",\n },\n {\n name: \"Estonian\",\n code: \"et\",\n },\n {\n name: \"Amharic\",\n code: \"am\",\n },\n {\n name: \"Faroese\",\n code: \"fo\",\n },\n {\n name: \"Finnish\",\n code: \"fi\",\n },\n {\n name: \"Georgian\",\n code: \"ka\",\n },\n {\n name: \"Kalaallisut\",\n code: \"kl\",\n },\n {\n name: \"Latin\",\n code: \"la\",\n },\n {\n name: \"Hungarian\",\n code: \"hu\",\n },\n {\n name: \"Icelandic\",\n code: \"is\",\n },\n {\n name: \"Hindi\",\n code: \"hi\",\n },\n {\n name: \"Indonesian\",\n code: \"id\",\n },\n {\n name: \"Persian (Farsi)\",\n code: \"fa\",\n },\n {\n name: \"Irish\",\n code: \"ga\",\n },\n {\n name: \"Hebrew (modern)\",\n code: \"he\",\n },\n {\n name: \"Italian\",\n code: \"it\",\n },\n {\n name: \"Japanese\",\n code: \"ja\",\n },\n {\n name: \"Kazakh\",\n code: \"kk\",\n },\n {\n name: \"Kyrgyz\",\n code: \"ky\",\n },\n {\n name: \"Lao\",\n code: \"lo\",\n },\n {\n name: \"Latvian\",\n code: \"lv\",\n },\n {\n name: \"Lithuanian\",\n code: \"lt\",\n },\n {\n name: \"Macedonian\",\n code: \"mk\",\n },\n {\n name: \"Malaysian\",\n code: \"null\",\n },\n {\n name: \"Divehi\",\n code: \"dv\",\n },\n {\n name: \"Maltese\",\n code: \"mt\",\n },\n {\n name: \"Romanian\",\n code: \"ro\",\n },\n {\n name: \"Mongolian\",\n code: \"mn\",\n },\n {\n name: \"Serbian\",\n code: \"sr\",\n },\n {\n name: \"Burmese\",\n code: \"my\",\n },\n {\n name: \"Nepali\",\n code: \"ne\",\n },\n {\n name: \"Korean\",\n code: \"ko\",\n },\n {\n name: \"Polish\",\n code: \"pl\",\n },\n {\n name: \"Russian\",\n code: \"ru\",\n },\n {\n name: \"Kinyarwanda\",\n code: \"rw\",\n },\n {\n name: \"Samoan\",\n code: \"sm\",\n },\n {\n name: \"Slovak\",\n code: \"sk\",\n },\n {\n name: \"Slovene\",\n code: \"sl\",\n },\n {\n name: \"Somali\",\n code: \"so\",\n },\n {\n name: \"Afrikaans\",\n code: \"af\",\n },\n {\n name: \"Sinhalese\",\n code: \"si\",\n },\n {\n name: \"Tajik\",\n code: \"tg\",\n },\n {\n name: \"Swahili\",\n code: \"sw\",\n },\n {\n name: \"Thai\",\n code: \"th\",\n },\n {\n name: \"Turkish\",\n code: \"tr\",\n },\n {\n name: \"Turkmen\",\n code: \"tk\",\n },\n {\n name: \"Ukrainian\",\n code: \"uk\",\n },\n {\n name: \"Uzbek\",\n code: \"uz\",\n },\n {\n name: \"Bislama\",\n code: \"bi\",\n },\n {\n name: \"Vietnamese\",\n code: \"vi\",\n },\n {\n name: \"Tamil\",\n code: \"ta\",\n },\n {\n name: \"Tamil (India)\",\n code: \"ta-IN\",\n },\n {\n name: \"Gujarati\",\n code: \"gu\",\n },\n {\n name: \"Gujarati (India)\",\n code: \"gu-IN\",\n },\n {\n name: \"Kannada\",\n code: \"kn\",\n },\n {\n name: \"Kannada (India)\",\n code: \"kn-IN\",\n },\n {\n name: \"Marathi\",\n code: \"mr\",\n },\n {\n name: \"Marathi (India)\",\n code: \"mr-IN\",\n },\n {\n name: \"Punjabi\",\n code: \"pa\",\n },\n {\n name: \"Punjabi (India)\",\n code: \"pa-IN\",\n },\n {\n name: \"Sanskrit\",\n code: \"sa\",\n },\n {\n name: \"Sanskrit (India)\",\n code: \"sa-IN\",\n },\n {\n name: \"Telugu\",\n code: \"te\",\n },\n {\n name: \"Telugu (India)\",\n code: \"te-IN\",\n },\n {\n name: \"Malayalam\",\n code: \"ml\",\n },\n ];\n};\nconst roleMapping = [\n {\n name: \"PICKER\",\n redirect: \"/operations/picking-queue\",\n },\n {\n name: \"CHECKER\",\n redirect: \"/operations/picking-queue\",\n },\n {\n name: \"PACKER\",\n redirect: \"/operations/picking-queue\",\n },\n {\n name: \"DELIVERY AGENT\",\n redirect: \"/logistics/vehicles\",\n },\n {\n name: \"CS AGENT\",\n redirect: \"customer-support/dashboard\",\n },\n {\n name: \"CS MANAGER\",\n redirect: \"customer-support/dashboard\",\n },\n {\n name: \"Transport Coordinator\",\n redirect: \"/logistics/vehicles\",\n },\n {\n name: \"OPS Manager\",\n redirect: \"/operations/dashboard\",\n },\n {\n name: \"CONTENT MANAGER\",\n redirect: \"/catalogue/dashboard\",\n },\n {\n name: \"CONTENT WRITER\",\n redirect: \"/marketing/blog\",\n },\n {\n name: \"HR MANAGER\",\n redirect: \"/hr/employees\",\n },\n {\n name: \"MARKETING MANAGER\",\n redirect: \"/marketing/pages\",\n },\n {\n name: \"MARKETING EXECUTIVE\",\n redirect: \"/marketing/pages\",\n },\n {\n name: \"LOGISTICS MANAGER\",\n redirect: \"/logistics/vehicles\",\n },\n {\n name: \"STORE MANAGER\",\n redirect: \"/catalogue/dashboard\",\n },\n {\n name: \"PICKING MANAGER\",\n redirect: \"/operations/picking-queue\",\n },\n {\n name: \"Transport Coordinator\",\n redirect: \"/logistics/vehicles\",\n },\n {\n name: \"CASHIER\",\n redirect: \"/operations/orders\",\n },\n {\n name: \"ERC ORDER\",\n redirect: \"/operations/orders\",\n },\n {\n name: \"COMPLETE ORDER\",\n redirect: \"/operations/orders\",\n },\n];\n\nconst getStepValue = (num) => {\n if (num) {\n let stringifiedNum = String(num);\n\n let decimalDigits = stringifiedNum.split(\".\");\n\n if (decimalDigits.length > 1) {\n let decimalPlaces = decimalDigits[1].length;\n\n return 1 / Math.pow(10, decimalPlaces);\n }\n }\n};\n\nconst isAllRulesValid = (\n rules = [],\n requiredFields = [],\n itemDiscountType = \"COMBO_DISCOUNT\"\n) => {\n for (let i = 0; i < rules.length; i++) {\n for (let j = 0; j < requiredFields.length; j++) {\n if (\n itemDiscountType !== \"COMBO_DISCOUNT\" &&\n requiredFields[j] === \"total\"\n )\n continue;\n let value = rules[i][requiredFields[j]];\n if (!value) {\n return false;\n } else if (typeof value === \"object\" && isEmpty(value)) {\n return false;\n }\n }\n if (itemDiscountType !== \"COMBO_DISCOUNT\") {\n let products = rules[i].product;\n return products.every((product) => product.q && product.t && product.v);\n }\n }\n\n return true;\n};\n\nconst getNestedValues = function (obj, keys) {\n let stateReference = obj;\n while (keys.length) {\n if (\n stateReference &&\n [\"boolean\", \"string\", \"number\"].indexOf(typeof stateReference[keys[0]]) >\n -1\n ) {\n return stateReference[keys[0]];\n } else if (\n stateReference &&\n (stateReference[keys[0]] || stateReference[keys[0]] === \"\")\n ) {\n stateReference = stateReference[keys.shift()];\n } else {\n return null;\n }\n }\n return stateReference;\n};\n\nconst getSingularPluralForm = (number, singularForm = \"\", pluralForm) => {\n if (!number) {\n number = 0;\n }\n\n number = Number(number);\n\n const text =\n number +\n \" \" +\n (number > 1 ? pluralForm || `${singularForm}s` : singularForm);\n\n return text;\n};\n\nconst truncateToTwoDecimal = (num) =>\n parseFloat(num.toString().match(/^-?\\d+(?:\\.\\d{0,2})?/)?.[0]).toFixed(2);\n\nconst convertToISODuration = (data) => {\n const { type, frequency } = data;\n let duration = \"P\";\n\n switch (type) {\n case \"Year\":\n duration += `${frequency}Y`;\n break;\n case \"Month\":\n duration += `${frequency}M`;\n break;\n case \"Week\":\n duration += `${frequency}W`;\n break;\n case \"Day\":\n duration += `${frequency}D`;\n break;\n default:\n throw new Error(\"Invalid type\");\n }\n\n return duration;\n};\n\nconst parseISODuration = (duration) => {\n const regex = /^P(?:(\\d+)Y)?(?:(\\d+)M)?(?:(\\d+)W)?(?:(\\d+)D)?$/;\n const match = duration.match(regex);\n\n if (!match) {\n throw new Error(\"Invalid ISO 8601 duration format\");\n }\n\n const [, years, months, weeks, days] = match;\n\n if (years) {\n return { type: \"Year\", frequency: parseInt(years, 10) };\n } else if (months) {\n return { type: \"Month\", frequency: parseInt(months, 10) };\n } else if (weeks) {\n return { type: \"Week\", frequency: parseInt(weeks, 10) };\n } else if (days) {\n return { type: \"Day\", frequency: parseInt(days, 10) };\n } else {\n throw new Error(\"No valid duration found in the input string\");\n }\n};\n\nconst getSiteURL = () => {\n const sessionData = getSession();\n const organization = sessionData.organization;\n let siteUrl = organization?.domain;\n if (siteUrl) {\n let isHttpsEnabled = JSON.parse(get(\"organization\")).httpsEnabled;\n let protocol = isHttpsEnabled ? \"https://\" : \"http://\";\n const isPrefixInSiteUrl = siteUrl?.includes(\"http\");\n siteUrl = isPrefixInSiteUrl ? siteUrl : `${protocol}${siteUrl}`;\n }\n return siteUrl;\n};\n\nexport {\n roleMapping,\n getAsapDuration,\n sortAsapSlots,\n sortStandardSlots,\n sortSlots,\n getTimes,\n getCountryList,\n getDisplayAddress,\n getDisplaySlot,\n getMinutes,\n camelToReading,\n storeSelection,\n toTitleCase,\n getProductName,\n getProductImage,\n getLanguages,\n slotSelectOptions,\n sortSlotsAvailability,\n getSortedOrderStatus,\n getSelectOrderStatus,\n sortOrderStatus,\n allStatuses,\n hasDuplicates,\n getStepValue,\n isAllRulesValid,\n getNestedValues,\n getSingularPluralForm,\n truncateToTwoDecimal,\n convertToISODuration,\n parseISODuration,\n getSiteURL,\n};\n","import React, { Component } from \"react\";\nimport { getMessage } from \"../../../lib/translator\";\nimport \"./style.css\";\nimport ViewIcon from \"./view-icon.svg\";\nimport { getSession } from \"../../../lib/auth\";\nimport { get } from \"../../../lib/storage\";\n\nclass WebsiteLink extends Component {\n constructor(props) {\n super(props);\n this.getSiteUrl = this.getSiteUrl.bind(this);\n this.state = {\n siteUrl: \"\",\n };\n }\n\n getSiteUrl() {\n const organization = getSession().organization;\n let url = this.props.frontendUrl ?? organization?.domain;\n if (url) {\n let isHttpsEnabled = JSON.parse(get(\"organization\")).httpsEnabled;\n let protocol = isHttpsEnabled ? \"https://\" : \"http://\";\n this.setState({\n siteUrl: protocol + url,\n });\n }\n }\n\n componentDidMount() {\n this.getSiteUrl();\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.frontendUrl !== prevProps.frontendUrl) {\n this.getSiteUrl();\n }\n }\n\n render() {\n if (this.state.siteUrl) {\n return (\n \n
\n \n );\n }\n return null;\n }\n}\n\nexport default WebsiteLink;\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { getMessage } from \"../../lib/translator\";\nimport WebsiteLink from \"./WebsiteLink\";\n\nfunction createSlugFromName(name) {\n return name.replace(/\\s+/g, \"-\").toLowerCase();\n}\n\nfunction mouseEventListener(event) {\n let receivedElementName = event.target.nodeName;\n let hiddenSubmenuUlOffsetHeight = document.querySelector(\n \"#menu #hidden-menu .submenu ul\"\n )\n ? parseInt(\n document.querySelector(\"#menu #hidden-menu .submenu ul\").offsetHeight,\n 10\n )\n : 0;\n let hiddenSubmenuUl = document.querySelector(\n \"#menu #hidden-menu .submenu ul\"\n );\n let hiddenSubmenu = document.querySelector(\"#menu #hidden-menu .submenu\");\n if (receivedElementName === \"LI\") {\n if (event.target.querySelector(\".submenu ul\")) {\n let hoverSubmenuHeight = event.target.querySelector(\".submenu ul\")\n ? parseInt(event.target.querySelector(\".submenu ul\").offsetHeight, 10)\n : 0;\n let item = event.target.querySelector(\".submenu ul\")\n ? event.target.querySelector(\".submenu ul\").cloneNode(true)\n : null;\n if (item && hiddenSubmenuUlOffsetHeight < hoverSubmenuHeight) {\n hiddenSubmenuUl.remove();\n hiddenSubmenu.appendChild(item);\n }\n }\n } else if (receivedElementName === \"A\") {\n let parent = event.target.parentElement;\n if (parent) {\n let hoverSubmenuHeight = parent.querySelector(\".submenu ul\")\n ? parseInt(parent.querySelector(\".submenu ul\").offsetHeight, 10)\n : 0;\n let item = parent.querySelector(\".submenu ul\")\n ? parent.querySelector(\".submenu ul\").cloneNode(true)\n : null;\n if (item && hiddenSubmenuUlOffsetHeight < hoverSubmenuHeight) {\n hiddenSubmenuUl.remove();\n hiddenSubmenu.appendChild(item);\n }\n }\n }\n}\n\nexport default class MenuItem extends Component {\n /*\n TODO - It may be easier to use NavLink instead of Link, if we can refactor the html/css to use markup\n such that active class is added on links instead of list. If we can do this, then we can remove the higher\n order component WithRouter from Menu, as that is used just for active links calculation - NavLink directly\n provides this method.\n\n */\n constructor(props) {\n super(props);\n this.getSubmenu = this.getSubmenu.bind(this);\n }\n\n getSubmenu(activeText) {\n const { props } = this;\n const active = props.active.split(\"/\");\n return (\n \n 
\n
\n \n {getMessage(\"menu.item.website-link\")}{\" \"}\n
\n \n {this.state.siteUrl.split(\"/\")[2]}\n
\n \n {props.info &&
\n );\n }\n\n render() {\n const { props } = this;\n let text = props.text;\n if (!text) {\n text = \"home\";\n }\n const className = \"icon-\" + createSlugFromName(text);\n const active = props.active.split(\"/\");\n const submenu = this.getSubmenu(text);\n\n return (\n - \n {props.subMenu &&\n props.subMenu.map((text) => {\n let queryParam = \"\";\n if (text.includes(\"?\")) {\n const splitText = text.split(\"?\");\n queryParam = splitText[1];\n text = splitText[0];\n }\n return (\n
- \n
\n \n
\n
\n );\n }\n}\n\nexport { UserActions, UserInfo };\n","import React, { Component } from \"react\";\nimport { DropDown, DropDownItem } from \"../../DropDown\";\nimport {\n setLocale,\n getLocale,\n getSupportedLanguages,\n getMessage,\n} from \"../../../lib/translator\";\nimport \"./style.css\";\nimport { withRouter } from \"react-router-dom\";\n\nclass LanguageSelector extends Component {\n changeLanguage(value) {\n setLocale({\n language: value,\n });\n const { history, location } = this.props;\n history.replace(location.pathname);\n }\n\n render() {\n let currentLang = getLocale()[\"language\"];\n let options = getSupportedLanguages();\n const dropdownHeading = (\n \n
\n {user.name}
\n {email && {email}
}\n \n {getMessage(\"menu.selectLanguage.heading\")}\n
\n );\n\n return (\n \n \n \n
\n );\n }\n}\nexport default withRouter(LanguageSelector);\n","import React from \"react\";\nimport closeIcon from \"./close-icon.svg\";\nimport \"./style.css\";\n\nconst NotificationBox = (props) => {\n return (\n \n {options.map((option, index) => (\n \n {option.language}\n \n ))}\n
\n \n
\n );\n};\n\nexport default NotificationBox;\n","import React, { Component, Fragment } from \"react\";\nimport NotificationBox from \"./NotificationBox\";\nimport Image from \"../../Image\";\nimport { getMessage } from \"../../../lib/translator\";\nimport notificationImage from \"./notification-empty.svg\";\nimport \"./style.css\";\n\nexport default class Notification extends Component {\n constructor(props) {\n super(props);\n this.state = {\n showModal: false,\n };\n this.modalClose = this.modalClose.bind(this);\n this.showModal = this.showModal.bind(this);\n this.handleClick = this.handleClick.bind(this);\n }\n\n modalClose(event) {\n if (event) {\n event.stopPropagation();\n }\n this.setState({\n showModal: false,\n });\n }\n\n showModal() {\n this.state.showModal\n ? this.modalClose()\n : this.setState({ showModal: true });\n }\n\n handleClick(e) {\n if (\n !(\n this.toggleRef.contains(e.target) && e.target.className !== \"close-icon\"\n )\n ) {\n this.modalClose();\n }\n }\n\n componentDidMount() {\n window.addEventListener(\"click\", this.handleClick);\n }\n componentWillUnmount() {\n window.removeEventListener(\"click\", this.handleClick);\n }\n\n render() {\n return (\n \n
\n {props.title}
\n{props.children}
\n \n
\n \n
\n \n
\n {getMessage(\"menu.notificationToday.empty\")}
\n\n this.changeLanguage(code)}\n >\n {name}\n \n )\n )}\n \n
\n )\n );\n }\n}\n\nexport default withRouter(LanguageSelector);\n","import React, { Component } from \"react\";\nimport \"./menu.css\";\nimport MenuItem from \"./menuItem\";\nimport { withRouter } from \"react-router-dom\";\nimport NavigationDrawer from \"./NavigationDrawer\";\nimport { UserActions, UserInfo } from \"./UserActions\";\nimport LanguageSelector from \"./LanguageSelector\";\nimport Notification from \"./Notification\";\nimport { GIT_HASH, GIT_TAG } from \"../../config/app\";\nimport { get, set } from \"./../../lib/storage\";\nimport StoreSelector, { getDefaultStore } from \"../../containers/StoreSelector\";\nimport LanguageDropDown from \"../../containers/LanguageDropDown\";\n\nclass Menu extends Component {\n componentDidMount() {\n const el = document.querySelector(\".menu-items\");\n const sidebar = document.querySelector(\".sidebar-content\");\n const activeLi = document.querySelector(\n \".sidebar-content ul.menu-items>li.active\"\n );\n el.addEventListener(\"mouseover\", (e) => {\n if (e.target.className === \"menu-items\") {\n if (get(\"zopsmart-menu-collapse\") === \"collapse-out\") {\n sidebar.classList.toggle(\"shrink\");\n } else {\n activeLi && activeLi.classList.toggle(\"showSubmenu\");\n }\n }\n });\n el.addEventListener(\"mouseout\", (e) => {\n if (e.target.className === \"menu-items\") {\n if (get(\"zopsmart-menu-collapse\") === \"collapse-out\") {\n sidebar.classList.toggle(\"shrink\");\n } else {\n activeLi && activeLi.classList.toggle(\"showSubmenu\");\n }\n }\n });\n }\n render() {\n const activeText = this.props.location.pathname.split(\"/\")[1];\n const activeSubMenu = this.props.items && this.props.items[activeText];\n const hoverSubmenuInfo = activeText === \"user\" ? UserInfo : null;\n const { props } = this;\n const menu = Object.keys(props.items).map((key) => {\n const subMenuInfo = key === \"user\" ? UserInfo : null;\n return (\n \n {selectedLanguage || eng.name}\n
\n \n {/* {userData?.id && !isUserVerified && \n {props.menu ? (\n this.updateStore(e)}\n />\n ) : null}\n \n {props.menu ? \n {this.state.error ? (\n \n \n
\n \n );\n }\n}\n","import React from \"react\";\nimport placeholder from \"./image-placeholder.svg\";\n\nimport \"./style.css\";\n\nexport default function Image(props) {\n return (\n \n {this.state.defaultStore}\n
\n \n {\n if (parseInt(this.props.value, 10) === id) {\n return;\n }\n updateStore(id, this.props.onChange);\n }}\n >\n {name}\n \n ))}\n \n
\n ) : (\n \n {selectedStore.name}\n
\n \n \n {this.state.showError && (\n
\n );\n }\n}\n\nUpload.defaultProps = {\n accept:\n \"image/jpeg,image/jpg,image/png,image/webp,video/mp4,video/mov,video/mkv,image/gif\",\n maxFileSize: \"10485760\",\n validationStrings: {\n fileSizeExeeded: getMessage(\"input.fileSizeExeeded\"),\n invalidFileType: getMessage(\"input.invalidFileType\"),\n },\n};\n\nexport default Upload;\n","import React, { Component } from \"react\";\nimport previousIcon from \"./previous.svg\";\nimport nextIcon from \"./next.svg\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport debounce from \"lodash/debounce\";\n\nclass ImageSlider extends Component {\n constructor(props) {\n super(props);\n this.state = {\n images: this.props.images || [],\n currentIndex: 0,\n scrollWidth: 0,\n };\n this.goToImage = this.goToImage.bind(this);\n this.setWidth = this.setWidth.bind(this);\n this.resizeWidth = debounce(this.resizeWidth.bind(this), 350);\n this.handleTouchMove = this.handleTouchMove.bind(this);\n this.handleTouchEnd = this.handleTouchEnd.bind(this);\n this.handleTouchStart = this.handleTouchStart.bind(this);\n }\n handleTouchEnd() {\n let { start, end } = this.state;\n if (start && end) {\n // to avoid nextslide call on single touch\n if (start - end < 0) {\n this.goToImage(\"previous\");\n } else {\n this.goToImage(\"next\");\n }\n }\n this.setState({\n start: 0,\n end: 0,\n });\n }\n\n handleTouchStart(event) {\n this.setState({ start: event.touches[0].clientX });\n }\n\n handleTouchMove(event) {\n this.setState({ end: event.touches[event.touches.length - 1].clientX });\n }\n goToImage(button) {\n const sliderContainer = this.refs.slider;\n const containerOffsetWidth = sliderContainer.offsetWidth;\n const containerScrollWidth = sliderContainer.scrollWidth;\n if (containerScrollWidth < 254) {\n return;\n }\n if (button === \"next\") {\n if (\n containerOffsetWidth + Math.abs(this.state.scrollWidth) <=\n containerScrollWidth\n ) {\n this.setState(\n {\n scrollWidth: this.state.scrollWidth - 254,\n currentIndex: this.state.currentIndex + 1,\n },\n () => {\n sliderContainer.style.transform = `translateX(${this.state.scrollWidth}px)`;\n }\n );\n }\n } else {\n if (this.state.scrollWidth < 0) {\n this.setState(\n {\n scrollWidth: this.state.scrollWidth + 254,\n currentIndex: this.state.currentIndex - 1,\n },\n () => {\n sliderContainer.style.transform = `translateX(${this.state.scrollWidth}px)`;\n }\n );\n }\n }\n }\n\n setWidth() {\n const sliderContainer = this.refs.slider;\n const containerOffsetWidth = sliderContainer.offsetWidth;\n const containerScrollWidth = sliderContainer.scrollWidth;\n this.setState({\n containerOffsetWidth: containerOffsetWidth,\n containerScrollWidth: containerScrollWidth,\n });\n }\n\n resizeWidth() {\n this.setWidth();\n }\n\n componentDidMount() {\n this.setWidth();\n window.addEventListener(\"resize\", this.resizeWidth, false);\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.resizeWidth, false);\n }\n\n componentWillReceiveProps({ images }) {\n this.setWidth();\n this.setState({ images: images });\n }\n\n render() {\n const {\n containerOffsetWidth,\n containerScrollWidth,\n scrollWidth,\n currentIndex,\n } = this.state;\n return (\n \n {this.state.errorMessage}\n
\n )}\n {fileUpload && this.state.file.type === \"application/pdf\" ? (\n \n ) : isVideo ? (\n \n ) : (\n \n \n Close\n \n \n {this.state.fileUploading ? \"...\" : \"Confirm\"}\n \n
\n \n \n {\n this.uploadInputRef = node;\n }}\n onClick={this.handleClick}\n />\n
\n {Boolean(showCloseIcon) && (\n \n {uploadedImageUrl ? (\n getFileExtensionFromUrl(uploadedImageUrl) === \"pdf\" ? (\n
\n \n {placeholder || \"Click here to upload or drag your image\"}\n
\n )}\n handleRemove(name)}>\n ×\n
\n )}\n \n {containerOffsetWidth < containerScrollWidth ||\n this.state.images.length > 2 ? (\n this.goToImage(\"previous\")}\n disabled={scrollWidth === 0}\n >\n 
\n \n ) : (\n \n )}\n
\n \n {containerOffsetWidth < containerScrollWidth ||\n this.state.images.length > 2 ? (\n \n \n {this.state.images &&\n this.state.images.map((data, index, arr) => (\n 
\n
\n ))}\n \n {data.uploading ? (\n {\n if (\n arr.length - 1 === index ||\n arr.length - 2 === index\n ) {\n this.setState(\n { scrollWidth: this.state.scrollWidth + 254 },\n this.goToImage()\n );\n }\n this.props.removeItem(index);\n }}\n >\n ×\n
\n \n {getMessage(\"product.form.imageUpload.uploading\")}\n
\n ) : null}\n {data.error ? (\n \n {getMessage(\"product.form.imageUpload.error\")}\n
\n ) : null}\n \n \n {singleImage && images?.[0] ? null : (\n
\n ) : (\n \n {\n this.inputRef = inputRef;\n }}\n type=\"file\"\n name=\"logo\"\n required={this.props.required}\n multiple={this.props.multiple}\n onChange={this.handleFileSelection}\n disabled={disabled}\n />\n
\n )}\n {this.state.images.length ? (\n !this.props.isProductCreatePage ? (\n \n
\n \n
\n \n {this.props.placeholder +\n ((this.props.required && !this.props.label && \" *\") ||\n \"\")}\n
\n \n {this.state.images.map((data, index) => (\n \n
\n ))}\n \n {data.uploading ? (\n {\n this.removeItem(index);\n }}\n >\n ×\n
\n )}\n Uploading...
\n ) : null}\n {data.error ? (\n Error in uploading
\n ) : null}\n {!disabled && (\n \n {this.state.selectedFiles.map((image, index) => (\n 
\n ))}\n
\n \n \n Confirm\n \n
\n \n ) : null}\n \n \n );\n }\n}\n\nexport default ImageUpload;\n","import React, { Component } from \"react\";\nimport _Phone from \"react-phone-number-input\";\nimport \"react-phone-number-input/style.css\";\nimport { getSession } from \"../../../../lib/auth\";\nimport \"./override.css\";\n\nfunction getValidationObj(props, value) {\n let valueMissing = props.required ? !value : false;\n return {\n valueMissing,\n valid: !valueMissing,\n };\n}\n\nclass Phone extends Component {\n constructor(props) {\n super(props);\n this.org = getSession().organization || {};\n this.handleChange = this.handleChange.bind(this);\n this.runValidation = this.runValidation.bind(this);\n this.state = {\n defaultCountryCode: this.org?.countryCode || \"IN\",\n };\n }\n\n handleChange(value) {\n this.props.onChange && this.props.onChange(value);\n this.runValidation(value);\n }\n\n runValidation(value) {\n this.props.onValidation &&\n this.props.onValidation(getValidationObj(this.props, value));\n }\n\n componentDidMount() {\n this.runValidation(this.props.value);\n }\n\n componentDidUpdate(prevProps, prevState) {\n const updatedLocalOrgData = getSession().organization || {};\n if (prevState.defaultCountryCode !== updatedLocalOrgData?.countryCode) {\n this.setState({ defaultCountryCode: updatedLocalOrgData?.countryCode });\n }\n }\n\n render() {\n let {\n emphasize,\n onValidation,\n showErrors,\n onChange,\n country,\n required = false,\n label,\n placeholder,\n ...props\n } = this.props;\n let PhoneInput = _Phone;\n return (\n \n \n \n {props.displaySelectedValue\n ? props.displaySelectedValue(props.value)\n : props.value[props.nameKey]}\n \n \n {\n props.onSelect(props.value);\n }}\n />\n
\n );\n});\n\nconst SortableList = SortableContainer((props) => {\n const items = props.items || [];\n return (\n - \n {items &&\n Array.isArray(items) &&\n items.map((value, index) => (\n
\n 
\n
\n {this.state.error && (\n {this.state.error}
\n )}\n {this.state.searchText && (\n \n \n {createButton &&\n this.state.options.findIndex(\n (option) =>\n option[nameKey].toLowerCase() ===\n this.state.searchText.toLowerCase()\n ) === -1 ? (\n \n {this.state.searchText}\n {this.state.creating ? (\n {\n this.addNewItem(this.state.searchText);\n }}\n >\n + {createButton || \"Create\"}\n \n )}\n \n ) : null}\n {selectableValues}\n \n
\n )}\n {this.props.multiple ? (\n this.props.draggable ? (\n \n
\n ) : (\n (this.state.selectedValue || []).map((value) => (\n \n \n \n {this.props.displaySelectedValue\n ? this.props.displaySelectedValue(value)\n : value[nameKey]}\n \n \n {!readOnly && (\n {\n this.onSelect(value);\n }}\n />\n )}\n
\n ))\n )\n ) : null}\n \n );\n }\n}\n\nSearchable.defaultProps = {\n nameKey: \"name\",\n valueKey: \"value\",\n draggable: false,\n};\n\nexport default Searchable;\n","import React, { Component } from \"react\";\nimport { DateRangePicker } from \"react-dates\";\nimport moment from \"moment\";\nimport \"react-dates/initialize\";\nimport \"react-dates/lib/css/_datepicker.css\";\nimport \"./style.css\";\nimport calenderIcon from \"./calender-icon.svg\";\n\nexport default class DateRangePickerWrapper extends Component {\n constructor(props) {\n super(props);\n this.state = {\n focusedInput: null,\n };\n }\n\n render() {\n const { focusedInput } = this.state;\n let {\n startDate,\n endDate,\n displayFormat,\n transForm,\n required,\n onDatesChange,\n startDatePlaceholder,\n endDatePlaceholder,\n minimumNights,\n isOutsideRange,\n openDirection,\n readOnly,\n } = this.props;\n const smallDevice = window.matchMedia(\"(max-width: 600px)\").matches;\n const orientation = smallDevice ? \"vertical\" : \"horizontal\";\n\n startDate = (startDate && moment(startDate, transForm)) || null;\n endDate = (endDate && moment(endDate, transForm)) || null;\n return (\n \n \n onDatesChange(\n startDate && moment(startDate).format(transForm),\n endDate && moment(endDate).format(transForm)\n )\n }\n focusedInput={focusedInput}\n onFocusChange={(focusedInput) => {\n this.setState({ focusedInput });\n }}\n startDateId=\"startDate\"\n endDateId=\"endDate\"\n displayFormat={displayFormat}\n required={required}\n startDatePlaceholderText={startDatePlaceholder}\n endDatePlaceholderText={endDatePlaceholder}\n customInputIcon={
}\n orientation={orientation}\n minimumNights={minimumNights}\n isOutsideRange={isOutsideRange}\n openDirection={openDirection}\n readOnly={readOnly}\n disabled={readOnly}\n />\n
\n );\n }\n}\nDateRangePickerWrapper.defaultProps = {\n displayFormat: \"YYYY-MM-DD\",\n className: \"\",\n transForm: \"YYYY-MM-DD\",\n minimumNights: 1,\n};\n","import React, { Component } from \"react\";\nimport DateRangePickerWrapper from \"../../../DateRangePickerWrapper\";\nimport \"./style.css\";\n\nfunction getValidationObj(props, dateRange) {\n let valueMissing =\n props.required &&\n (!dateRange || !dateRange.startDate || !dateRange.endDate);\n let result = {\n valueMissing,\n valid: !valueMissing,\n };\n return result;\n}\n\nexport default class DateRangePicker extends Component {\n constructor(props) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n this.runValidation = this.runValidation.bind(this);\n }\n\n runValidation(dateRange) {\n this.props.onValidation &&\n this.props.onValidation(getValidationObj(this.props, dateRange));\n }\n\n handleChange(startDate, endDate) {\n const dateRange = { startDate: startDate, endDate: endDate };\n this.props.onChange(dateRange);\n this.runValidation(dateRange);\n }\n\n componentDidMount() {\n this.runValidation(this.props.value);\n }\n\n render() {\n let {\n value,\n displayFormat,\n required,\n startDatePlaceholder,\n endDatePlaceholder,\n minimumNights,\n isOutsideRange,\n openDirection,\n readOnly,\n } = this.props;\n return (\n \n \n {option.text}\n \n \n 
\n \n
\n );\n }\n}\n","import React, { Component } from \"react\";\nimport arrowIcon from \"./arrow.svg\";\nimport \"./style.css\";\nimport SelectValue from \"./SelectValue\";\nimport { isEqual } from \"lodash\";\n\nfunction getValidationObj(props, selectedValues) {\n let valueMissing =\n props.required && (!selectedValues || selectedValues.length === 0);\n let result = {\n valueMissing,\n valid: !valueMissing,\n };\n return result;\n}\n\nexport default class MultiSelect extends Component {\n constructor(props) {\n super(props);\n this.state = {\n expanded: false,\n };\n [\n \"onSelect\",\n \"onRemove\",\n \"expand\",\n \"setWrapperRef\",\n \"handleClickOutside\",\n \"runValidation\",\n ].forEach((fn) => {\n this[fn] = this[fn].bind(this);\n });\n }\n\n runValidation(values) {\n this.props.onValidation &&\n this.props.onValidation(getValidationObj(this.props, values));\n }\n\n expand() {\n this.setState({ expanded: true });\n }\n\n componentDidMount() {\n window.addEventListener(\"mousedown\", this.handleClickOutside);\n this.runValidation(this.props.value);\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"mousedown\", this.handleClickOutside);\n }\n\n componentDidUpdate(prevProps) {\n if (!isEqual(prevProps.value, this.props.value)) {\n this.runValidation(this.props.value);\n }\n }\n\n // set wrapper ref\n setWrapperRef(node) {\n this.wrapperRef = node;\n }\n // close dropdown if clicked outside the wrapper\n handleClickOutside(event) {\n if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {\n this.setState({ expanded: false });\n }\n }\n // on select of an option , add it to array of selected values\n onSelect(option) {\n if (this.props.readOnly) {\n return;\n }\n const valueKey = this.props.valueKey;\n const value = option && option[valueKey];\n let selectedValues =\n (Array.isArray(this.props.value) && this.props.value) || [];\n if (option && !selectedValues.some((val) => val === value)) {\n selectedValues.push(value);\n }\n this.props.onChange && this.props.onChange(selectedValues);\n this.runValidation(selectedValues);\n }\n // on remove of an option, remove it from array of selected values\n onRemove(option) {\n if (this.props.readOnly) {\n return;\n }\n const { valueKey, value: values } = this.props;\n const selectedValue = option && option[valueKey];\n let selectedValues = values;\n if (Array.isArray(values) && values.some((val) => val === selectedValue)) {\n selectedValues = selectedValues.filter((e) => e !== selectedValue);\n this.props.onChange && this.props.onChange(selectedValues);\n }\n }\n\n render() {\n const {\n type,\n name,\n placeholder,\n required,\n options,\n value,\n valueKey,\n nameKey,\n readOnly,\n dontDisplaySelected,\n label,\n } = this.props;\n const { expanded } = this.state;\n\n let selectableValues = [];\n let selectedValues = [];\n if (options.length) {\n options.forEach((option, index) => {\n let suggestionAllowed = !(\n value &&\n Array.isArray(value) &&\n value.some((val) => val === option[valueKey])\n );\n if (suggestionAllowed) {\n // Do not show selected values in options dropdown\n selectableValues.push(\n \n
\n {expanded && selectableValues.length > 0 && !readOnly && (\n \n 
\n
\n \n
\n )}\n {!dontDisplaySelected && selectedValues}\n \n );\n }\n}\n\nMultiSelect.defaultProps = {\n nameKey: \"text\",\n valueKey: \"value\",\n readOnly: false,\n};\n","import React, { Component } from \"react\";\nimport crossIcon from \"../../cross_gray.svg\";\n\nexport default class TagValue extends Component {\n constructor(props) {\n super(props);\n this.remove = this.remove.bind(this);\n }\n\n remove() {\n this.props.onRemove(this.props.value);\n }\n\n render() {\n const { value, readOnly } = this.props;\n return (\n - {selectableValues}
\n \n {value}\n \n \n \n \n
\n );\n }\n}\n","import React, { Component } from \"react\";\nimport \"./style.css\";\nimport TagValue from \"./TagValue\";\n\nfunction getValidationObj(props, values) {\n let valueMissing = props.required && (!values || values.length === 0);\n let result = {\n valueMissing,\n valid: !valueMissing,\n };\n return result;\n}\n\nexport default class MultiTextInput extends Component {\n constructor(props) {\n super(props);\n [\n \"onKeyDown\",\n \"runValidation\",\n \"onRemove\",\n \"addValue\",\n \"handleChange\",\n ].forEach((fn) => {\n this[fn] = this[fn].bind(this);\n });\n }\n\n runValidation(values) {\n this.props.onValidation &&\n this.props.onValidation(getValidationObj(this.props, values));\n }\n\n componentDidMount() {\n this.runValidation(this.props.value);\n }\n\n onRemove(value) {\n const { value: values } = this.props;\n let selectedValues = values;\n if (Array.isArray(values) && values.some((val) => val === value)) {\n selectedValues = selectedValues.filter((e) => e !== value);\n this.props.onChange && this.props.onChange(selectedValues);\n this.runValidation(selectedValues);\n }\n }\n\n addValue(value) {\n const { value: values } = this.props;\n let selectedValues = (Array.isArray(values) && values) || [];\n if (value && !selectedValues.some((val) => val === value)) {\n selectedValues.push(value);\n this.props.onChange && this.props.onChange(selectedValues);\n this.runValidation(selectedValues);\n }\n }\n handleChange(e) {\n e.preventDefault();\n this.addValue(e.target.value);\n e.target.value = \"\";\n }\n onKeyDown(e) {\n if (e.keyCode === 13) {\n // whenever enter is pressed then create a tag with text input\n e.preventDefault(); // prevent submission of form on Enter\n this.addValue(e.target.value);\n e.target.value = \"\";\n }\n }\n\n render() {\n const {\n name,\n required,\n value: values,\n placeholder,\n readOnly,\n label,\n } = this.props;\n const tags =\n values && values.length > 0\n ? values.map((value, index) => (\n \n \n {tags}\n
\n \n );\n }\n}\n","import React, { Component } from \"react\";\nimport debounce from \"../../../../lib/debounce\";\nimport searchIcon from \"./icon-search.svg\";\n\nfunction getValidationObj(props, value) {\n let valueMissing = props.required && !value;\n if (props.required && props.multiple) {\n valueMissing = valueMissing || !value || !value.length;\n }\n let result = {\n valueMissing,\n valid: !valueMissing,\n };\n return result;\n}\n\nclass SelectSearch extends Component {\n constructor(props) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n this.runValidation = this.runValidation.bind(this);\n const options = props.options || [];\n const selectedOption = options.filter(\n (opt) => opt[props.valueKey] === props.value\n )[0];\n const searchText = selectedOption ? selectedOption[props.nameKey] : \"\";\n this.state = {\n options: options,\n searchText: searchText,\n selectedValue: props.value,\n loading: false,\n selectableOptions: props.defaultSelectableOptions ? props.options : [],\n };\n this.selectSearch = debounce(this.selectSearch.bind(this), 300);\n this.search = this.selectSearch;\n this.onSelect = this.onSelect.bind(this);\n this.onKeyDown = this.onKeyDown.bind(this);\n }\n\n handleChange(e) {\n e.preventDefault();\n this.setState({\n searchText: e.target.value,\n });\n this.search(e.target.value);\n }\n\n runValidation(value) {\n this.props.onValidation &&\n this.props.onValidation(getValidationObj(this.props, value));\n }\n\n selectSearch(value) {\n const options = this.state.options;\n let searchKey = this.props.valueKey;\n if (this.props.searchByName) {\n searchKey = this.props.nameKey;\n }\n let searchOptions = options.filter((opt) =>\n opt[searchKey].toLowerCase().includes(value.toLowerCase())\n );\n this.setState({\n selectableOptions: searchOptions,\n lastSearch: value,\n });\n }\n\n componentWillReceiveProps(nextProps) {\n var newValue, oldValue;\n const options = this.state.options || [];\n const selectedOption = options.filter(\n (opt) => opt[this.props.valueKey] === nextProps.value\n )[0];\n const name = selectedOption ? selectedOption[this.props.nameKey] : \"\";\n if (this.props.multiple) {\n newValue = nextProps.value;\n oldValue = this.props.value;\n } else {\n newValue = nextProps.value ? nextProps.value || \"\" : \"\";\n oldValue = this.props.value ? this.props.value || \"\" : \"\";\n }\n if (oldValue !== newValue) {\n let searchText;\n if (this.props.multiple) {\n searchText = \"\";\n } else {\n searchText = name;\n }\n this.setState({\n searchText: searchText,\n selectedValue: nextProps.value || (this.props.multiple ? [] : \"\"),\n });\n }\n }\n\n onSelect(option) {\n let selectedValue = option;\n if (this.props.multiple) {\n selectedValue = [...(this.state.selectedValue || [])];\n let index = selectedValue.findIndex(\n (listOption) =>\n listOption[this.props.valueKey] === option[this.props.valueKey]\n );\n if (index > -1) {\n selectedValue.splice(index, 1);\n } else {\n selectedValue = [...selectedValue, option];\n }\n }\n this.setState(\n {\n selectableOptions: [],\n searchText:\n option && !this.props.multiple ? option[this.props.nameKey] : \"\",\n lastSearch: \"\",\n selectedValue,\n },\n () => {\n this.props.onChange(\n this.props.multiple\n ? selectedValue\n : selectedValue[this.props.valueKey]\n );\n this.runValidation(selectedValue);\n }\n );\n }\n\n onKeyDown(e) {\n if (!this.props.multiple && (e.keyCode === 8 || e.keyCode === 46)) {\n if (this.state.selectedValue) {\n this.onSelect(\"\");\n }\n }\n }\n\n render() {\n const {\n name,\n placeholder,\n required,\n renderListElement,\n type,\n nameKey,\n valueKey,\n readOnly,\n autoFocus,\n defaultSelectableOptions,\n dontDisplaySelected,\n label,\n autoComplete,\n } = this.props;\n let { selectableOptions, searchText, selectedValue, error, lastSearch } =\n this.state;\n let selectableValues = selectableOptions.length\n ? selectableOptions.map((suggestion, index) => {\n let suggestionAllowed;\n if (this.props.multiple) {\n suggestionAllowed =\n selectedValue && selectedValue.length\n ? selectedValue.findIndex(\n (option) => suggestion[valueKey] === option[valueKey]\n ) === -1\n : true;\n } else {\n suggestionAllowed = selectedValue\n ? selectedValue[valueKey] !== suggestion[valueKey]\n : true;\n }\n return suggestionAllowed ? (\n renderListElement ? (\n renderListElement(suggestion, this.onSelect)\n ) : (\n \n
\n \n
\n );\n }\n}\nSelectSearch.defaultProps = {\n nameKey: \"text\",\n valueKey: \"value\",\n defaultSelectableOptions: false,\n};\nexport default SelectSearch;\n","import React, { Component } from \"react\";\nimport { Select, Searchable } from \"../../../Form\";\nimport Image from \"../../../Image\";\nimport API from \"../../../../lib/api\";\nimport { getSession } from \"../../../../lib/auth\";\nimport { getDefaultStore } from \"../../../../containers/StoreSelector\";\nimport { getProductImage } from \"../../../../lib/commonlyused\";\n\nimport \"./style.css\";\n\nfunction getValidationObj(props, value) {\n let valueMissing = props.required && !value;\n if (props.required && props.multiple) {\n valueMissing = valueMissing || !value || !value.length;\n }\n let result = {\n valueMissing,\n valid: !valueMissing,\n };\n return result;\n}\n\nclass ProductSearch extends Component {\n constructor(props) {\n super(props);\n this.selectOptions = [\n {\n text: \"Name\",\n value: \"name\",\n },\n {\n text: \"Barcode\",\n value: \"barcode\",\n },\n {\n text: \"Client Id\",\n value: \"clientId\",\n },\n ];\n this.state = {\n selectionKey: \"name\",\n };\n this.handleChange = this.handleChange.bind(this);\n this.getInventoryDetails = this.getInventoryDetails.bind(this);\n this.renderSearchableList = this.renderSearchableList.bind(this);\n this.generateProductsFromVariants =\n this.generateProductsFromVariants.bind(this);\n this.getDetails = this.getDetails.bind(this);\n }\n\n runValidation(value) {\n this.props.onValidation &&\n this.props.onValidation(getValidationObj(this.props, value));\n }\n\n handleChange(e) {\n this.setState({\n selectionKey: e,\n });\n }\n\n renderSearchableList(item, valueKey, nameKey, onSelect) {\n const includeInventory = this.props.includeInventory ? \"\" : \"no-inventory\";\n const currency = getSession().organization.currency.symbol;\n return (\n \n
\n {error && {error}
}\n {searchText && !defaultSelectableOptions && (\n \n \n {selectableValues}\n \n
\n )}\n {defaultSelectableOptions && (\n \n
\n )}\n {!dontDisplaySelected && this.props.multiple ? (\n - \n {selectableValues}\n
\n {(this.state.selectedValue || []).map((value) => (\n
\n ) : null}\n \n \n {value[nameKey]}\n \n {\n this.onSelect(value);\n }}\n />\n
\n ))}\n \n {item.brand && {item.brand.name} }\n {item.fullName ? item.fullName : item.name}\n
\n {this.props.includeInventory && (\n \n \n {currency} {item.amount.toFixed(2)}{\" \"}\n \n {item.discount > 0 && (\n {item.mrp.toFixed(2)}\n )}\n
\n )}\n \n \n );\n }\n\n getInventoryDetails(products, callback) {\n let params = \"\";\n if (!products || products.length <= 0) {\n return [];\n }\n products.forEach((pdt) => {\n params += `${pdt.id},`;\n });\n const api = new API({\n url: `/inventory-service/item?storeId=${\n Number(this.props.storeId) || getDefaultStore().storeId\n }&productId=${params}`,\n });\n return api\n .get()\n .then((response) => {\n let inventoryData = response.data;\n return products\n .map((pdt, index) => {\n let pdtInventory = inventoryData[index];\n if (\n pdtInventory &&\n (Boolean(pdtInventory.stock) || pdtInventory.unlimitedStock) &&\n pdtInventory.mrp > 0\n ) {\n pdt.storeSpecificData = {\n discount: pdtInventory.discount || 0,\n mrp: pdtInventory.mrp,\n amount: pdtInventory.mrp - (pdtInventory.discount || 0),\n };\n pdt.discount = pdtInventory.discount || 0;\n pdt.mrp = pdtInventory.mrp;\n pdt.amount = pdtInventory.mrp - pdt.discount;\n return pdt;\n }\n return false;\n })\n .filter(Boolean);\n })\n .catch((error) => {\n console.error(error);\n });\n }\n\n generateProductsFromVariants(product) {\n let products =\n product.variants &&\n product.variants.map((variant) => {\n let pdt = Object.assign({}, product);\n pdt.name = variant.fullName;\n pdt.brand = product.brand;\n pdt.images = variant.images;\n pdt.id = variant.id;\n pdt.soldByWeight = product.soldByWeight;\n pdt.status = variant.status;\n return pdt;\n });\n return products;\n }\n\n getDetails(pdtWithVariants) {\n pdtWithVariants = pdtWithVariants\n .map((product) => {\n let variantCount = (product.variants && product.variants.length) || 0;\n let productWithVariants = null;\n if (variantCount > 0) {\n productWithVariants = this.generateProductsFromVariants(product);\n return productWithVariants.filter(Boolean);\n }\n return false;\n })\n .filter(Boolean);\n pdtWithVariants = (pdtWithVariants && [].concat(...pdtWithVariants)) || [];\n return pdtWithVariants;\n }\n\n render() {\n const {\n multiple,\n value,\n onChange,\n getVariantData,\n includeInventory,\n placeholder,\n name,\n readOnly,\n required,\n selectOnEnter,\n withoutDropDown,\n } = this.props;\n const { selectionKey } = this.state;\n return (\n \n
\n );\n }\n}\n\nexport default DateTime;\n","import React from \"react\";\nimport Searchable from \"../Searchable\";\n\nconst getChain = (category) => {\n let chain = [];\n let reference = category;\n while (reference) {\n chain.push(reference.name);\n reference = reference.parentCategory;\n }\n return chain.reverse().join(\" > \");\n};\n\nexport default function CategorySearch(props) {\n let newProps = Object.assign({}, props, {\n searchUrl: \"/catalogue-service/category\",\n valueKey: \"id\",\n nameKey: \"displayName\",\n searchKey: \"name\",\n displaySelectedValue: (category) => {\n return props.dontShowChain ? category.name : getChain(category);\n },\n transformRequest: (searchText, paramsDefault) => {\n let params = Object.assign({}, paramsDefault);\n params.name = `%${params.name}`;\n return params;\n },\n transformResponse: (response) => {\n return (props.appendElement ? props.appendElement : []).concat(\n response.data.category.map((category) => {\n category.displayName = getChain(category);\n return category;\n })\n );\n },\n });\n return \n
\n );\n }\n}\n\nexport default TimePickerWrapper;\n","import React, { Component } from \"react\";\nimport TimePickerWrapper from \"../../../TimePickerWrapper\";\n\nfunction getValidationObj(props, time) {\n let valueMissing = props.required && !time;\n let result = {\n valueMissing,\n valid: !valueMissing,\n };\n return result;\n}\n\nexport default class TimePicker extends Component {\n constructor(props) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n this.runValidation = this.runValidation.bind(this);\n }\n\n runValidation(time) {\n this.props.onValidation &&\n this.props.onValidation(getValidationObj(this.props, time));\n }\n\n handleChange(time) {\n this.props.onChange(time);\n this.runValidation(time);\n }\n\n componentDidMount() {\n this.runValidation(this.props.value);\n }\n\n render() {\n const { label, required, placeholder, disabled } = this.props;\n return (\n \n {showErrors ? error : null}\n
\n )}\n \n );\n }\n }\n return InputValidator;\n};\n\nconst Input = addValidations(_Input);\nconst Select = addValidations(_Select);\nconst Upload = addValidations(_Upload);\nconst ImageUpload = addValidations(_ImageUpload);\nconst Textarea = addValidations(_Textarea);\nconst Phone = addValidations(_Phone);\nconst Checkbox = addValidations(_Checkbox);\nconst Radio = addValidations(_Radio);\nconst Searchable = addValidations(_Searchable);\nconst CheckboxGroup = addValidations(_CheckboxGroup);\nconst DateRangePicker = addValidations(_DateRangePicker);\nconst SingleDatePicker = addValidations(_SingleDatePicker);\nconst MultiLevelCheckbox = addValidations(_MultiLevelCheckbox);\nconst MultiSelect = addValidations(_MultiSelect);\nconst MultiTextInput = addValidations(_MultiTextInput);\nconst Toggle = addValidations(_Toggle);\nconst SelectSearch = addValidations(_SelectSearch);\nconst ProductSearch = addValidations(_ProductSearch);\nconst BrandSearch = addValidations(_BrandSearch);\nconst CustomerTagSearch = addValidations(_CustomerTagSearch);\nconst DateTime = addValidations(_DateTime);\nconst CategorySearch = addValidations(_CategorySearch);\nconst TimePicker = addValidations(_TimePicker);\nconst RichTextEditorQuill = addValidations(_RichTextEditorQuill);\n\nexport {\n Input,\n Select,\n Upload,\n ImageUpload,\n Textarea,\n Phone,\n Checkbox,\n Radio,\n Searchable,\n CheckboxGroup,\n DateRangePicker,\n SingleDatePicker,\n MultiLevelCheckbox,\n MultiSelect,\n MultiTextInput,\n Toggle,\n SelectSearch,\n ProductSearch,\n BrandSearch,\n DateTime,\n CategorySearch,\n CustomerTagSearch,\n TimePicker,\n RichTextEditorQuill,\n};\n","import React from \"react\";\nimport { Searchable } from \"../../Inputs\";\n\nexport default function BrandSearch(props) {\n let newProps = Object.assign({}, props, {\n searchUrl: \"/catalogue-service/brand\",\n valueKey: \"id\",\n nameKey: \"name\",\n searchKey: \"name\",\n transformRequest: (searchText, paramsDefault) => {\n let params = Object.assign({}, paramsDefault);\n params.name = `%${params.name}`;\n return params;\n },\n transformResponse: (response) => {\n return (\n (props.appendElement ? props.appendElement : []).concat(\n response.data.brand\n ) || []\n );\n },\n });\n return \n
\n \n \n \n {okText}\n \n )}\n
\n {title}
\n {message}
\n {information && {information}
}\n {close && (\n \n )}\n {onOk && (\n\n \n
\n );\n }\n}\nexport default Toggle;\n","import React from \"react\";\nimport Modal from \"../Modal/index\";\nimport \"./style.css\";\n\nexport default function Popup(props) {\n return (\n \n
\n \n
\n {props.heading}
\n \n{props.children}
\n \n
\n \n \n \n 
\n \n
\n \n {\n this.toggleRef = node;\n }}\n >\n \n \n \n
\n \n \n
\n \n \n \n
\n )}\n \n \n
\n {!enterprise && (\n \n {\n this.toggleRef = node;\n }}\n >\n \n \n \n
\n - \n
- \n
- \n
- \n
\n {links &&\n links.map((a, index) => (\n \n {a.label}\n \n ))}\n
\n \n {props.showHeader && (\n \n \n )}\n {props.children} \n \n
\n \n {(options || []).map((option, index) => (\n \n {this.props.skin === SKINS.WITH_ICONS && option.icon && (\n
\n );\n }\n}\n\nconst SKINS = {\n DEFAULT: \"default-skin\",\n WITH_ICONS: \"icons-skin\",\n};\n\nCheckboxGroup.defaultProps = {\n value: \"\",\n options: [],\n skin: SKINS.DEFAULT,\n};\n\nexport default CheckboxGroup;\nexport { SKINS };\n","module.exports = __webpack_public_path__ + \"static/media/delete.a868c1c7.svg\";","import React, { Component } from \"react\";\n\nimport \"./style.css\";\n\nfunction getValidationObj(DomNode) {\n if (!DomNode) {\n return {};\n }\n let validationObj = DomNode.validity;\n let errors = {};\n for (let key in validationObj) {\n errors[key] = validationObj[key];\n }\n return errors;\n}\n\nclass Radio extends Component {\n constructor(props) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n // this.handleBlur = this.handleBlur.bind(this)\n // this.runValidation = this.runValidation.bind(this)\n }\n runValidation(DomNode) {\n this.props.onValidation &&\n this.props.onValidation(getValidationObj(DomNode));\n }\n handleChange(e) {\n e.preventDefault();\n this.props.onChange && this.props.onChange(e.target.value);\n this.runValidation(e.target);\n }\n componentDidMount() {\n this.runValidation(this.inputRef);\n }\n render() {\n let { props } = this;\n return (\n \n 
\n
\n )}\n \n {(props.options || []).map((option, index) => (\n \n {\n if (index === 0) {\n this.inputRef = node;\n }\n }}\n disabled={props.readOnly || option.disabled}\n />\n \n {option.text}\n \n \n ))}\n
\n );\n }\n}\n\nconst SKINS = {\n DEFAULT: \"\",\n BORDERLESS: \"borderless-skin\",\n ONE_PER_LINE: \"block-skin\",\n};\n\nRadio.defaultProps = {\n value: \"\",\n options: [],\n skin: SKINS.DEFAULT,\n};\n\nexport default Radio;\nexport { SKINS };\n","function debounce(func, wait, immediate) {\n let timeout;\n return function () {\n let context = this;\n let args = arguments;\n let later = function () {\n timeout = null;\n if (!immediate) {\n func.apply(context, args);\n }\n };\n let callNow = immediate && !timeout;\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n if (callNow) {\n func.apply(context, args);\n }\n };\n}\n\nexport default debounce;\n","import React, { Component } from \"react\";\nimport { SingleDatePicker, isInclusivelyBeforeDay } from \"react-dates\";\nimport moment from \"moment\";\nimport \"react-dates/initialize\";\nimport \"react-dates/lib/css/_datepicker.css\";\n\nimport calenderIcon from \"./calender-icon.svg\";\n\nexport default class SingleDatePickerWrapper extends Component {\n constructor(props) {\n super(props);\n this.state = {\n focusedInput: false,\n };\n }\n\n render() {\n const { focusedInput } = this.state;\n let {\n date,\n displayFormat,\n transForm,\n required,\n onDateChange,\n placeholder,\n numberOfMonths,\n isOutsideRange,\n enableToday,\n allowAllDates,\n openDirection,\n readOnly,\n disabled,\n key,\n name,\n customIsOutsideRange,\n } = this.props;\n const smallDevice = window.matchMedia(\"(max-width: 600px)\").matches;\n const orientation = smallDevice ? \"vertical\" : \"horizontal\";\n\n date = (date && moment(date, transForm)) || null;\n\n return (\n \n \n onDateChange(date && moment(date).format(transForm))\n }\n readOnly={readOnly}\n isOutsideRange={\n customIsOutsideRange\n ? isOutsideRange\n : isOutsideRange\n ? (day) => !isInclusivelyBeforeDay(day, moment())\n : allowAllDates\n ? () => false\n : enableToday\n ? undefined\n : (day) => isInclusivelyBeforeDay(day, moment())\n }\n onFocusChange={(focusedInput) => {\n this.setState({ focusedInput });\n }}\n displayFormat={displayFormat}\n required={required}\n placeholder={placeholder}\n customInputIcon={}\n orientation={orientation}\n numberOfMonths={numberOfMonths}\n openDirection={openDirection}\n disabled={disabled}\n />\n
\n );\n }\n}\nSingleDatePickerWrapper.defaultProps = {\n displayFormat: \"YYYY-MM-DD\",\n className: \"\",\n transForm: \"YYYY-MM-DD\",\n numberOfMonths: 1,\n isOutsideRange: false,\n readOnly: false,\n disabled: false,\n};\n","import React, { Component } from \"react\";\nimport SingleDatePickerWrapper from \"../../../SingleDatePickerWrapper\";\n\nimport \"react-dates/initialize\";\nimport \"react-dates/lib/css/_datepicker.css\";\nimport \"./override.css\";\n\nfunction getValidationObj(props, date) {\n let valueMissing = props.required && !date;\n let result = {\n valueMissing,\n valid: !valueMissing,\n };\n return result;\n}\n\nexport default class SingleDatePicker extends Component {\n constructor(props) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n this.runValidation = this.runValidation.bind(this);\n }\n\n runValidation(date) {\n this.props.onValidation &&\n this.props.onValidation(getValidationObj(this.props, date));\n }\n\n handleChange(date) {\n this.props.onChange(date);\n this.runValidation(date);\n }\n\n componentDidMount() {\n this.runValidation(this.props.value);\n }\n\n render() {\n let {\n value,\n displayFormat,\n required,\n placeholder,\n numberOfMonths,\n isOutsideRange,\n enableToday,\n allowAllDates,\n openDirection,\n readOnly,\n disabled,\n name,\n key,\n showError,\n customIsOutsideRange,\n label,\n } = this.props;\n return (\n \n {renderCheckboxes(options, this.props.value, this.props.onChange)}\n
\n );\n }\n}\n\nfunction Checkbox(props) {\n return (\n \n
\n );\n}\n\nfunction renderCheckboxes(options, value, onChange, depth = 1) {\n options = options || [];\n if (value === undefined || value === null) {\n value = getInitialState(options);\n }\n return (\n \n {options.map(({ name, label, children }) => {\n let thisValue = computeChecked(value[name]);\n return (\n
\n );\n}\n\nfunction computeChecked(value) {\n if (value instanceof Object) {\n return Object.values(value).reduce(\n (acc, value) => acc && computeChecked(value),\n true\n );\n }\n return value;\n}\n\nfunction toggleAll(obj, value) {\n if (!(value instanceof Object || typeof value === \"boolean\")) {\n return obj;\n }\n if (obj instanceof Object) {\n let updatedObj = Object.assign({}, obj);\n for (let key in updatedObj) {\n updatedObj[key] = toggleAll(obj[key], value);\n }\n return updatedObj;\n }\n return value;\n}\n\nfunction getInitialState(options) {\n return Object.assign(\n {},\n ...options.map((obj) => {\n return {\n [obj.name]: obj.children ? getInitialState(obj.children) : false,\n };\n })\n );\n}\n\nexport default MultiLevelCheckbox;\nexport { getInitialState, computeChecked, toggleAll };\n","module.exports = __webpack_public_path__ + \"static/media/settings-inactive.0d3e731d.svg\";","module.exports = __webpack_public_path__ + \"static/media/empty.3f67be2f.svg\";","import React from \"react\";\nimport PublicPage from \"../../../containers/PublicPage/index\";\nimport { withRouter } from \"react-router-dom\";\nimport { getMessage as t } from \"../../../lib/translator\";\n\nimport \"./style.css\";\n\nconst ErrorPage = function (props) {\n return (\n \n {\n let changedValue = Object.assign({}, value);\n changedValue[name] = toggleAll(value[name], !thisValue);\n onChange(changedValue);\n }}\n value={thisValue}\n />\n
\n );\n })}\n \n {children\n ? renderCheckboxes(\n children,\n value[name],\n (changedValue) => {\n onChange(\n Object.assign({}, value, {\n [name]: changedValue,\n })\n );\n },\n depth + 1\n )\n : null}\n
\n {props.title}
}\n\n
\n {t(\"unexpected.error.heading\")}
\n\n {t(\"unexpected.error.description\")}\n
\n\n
{getMessage(\"signup.heading\")}
\n\n {getMessage(\"signup.subheading\")}\n
\n\n
\n \n {getMessage(\"signup.oldUser.message\")}{\" \"}\n \n {getMessage(\"signup.oldUser.signinText\")}\n \n
\n\n {this.state.formError && (\n
\n {this.state.formError}
\n )}\n \n
\n\n \n
\n \n {\n this.updateState([\"remember\"], e.target.checked);\n }}\n />\n \n {!enterprise && (\n \n {getMessage(\"login.forgotPassword\")}\n \n )}\n
\n \n {enterprise ? (\n \n {getMessage(\"login.submitText\")}\n \n ) : (\n \n {getMessage(\"login.submitText\")}\n \n )}\n
\n \n \n );\n }\n}\n\nexport default withRouter(LoginForm);\n","import React, { Fragment } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport PublicPage from \"../../../containers/PublicPage/index\";\nimport LoginForm from \"./form\";\nimport { Consumer } from \"../../../containers/Context\";\n\nimport { getMessage } from \"../../../lib/translator\";\n\nexport default class Login extends React.Component {\n render() {\n return (\n {getMessage(\"login.heading\")}
\n{getMessage(\"login.subheading\")}
\n\n
\n \n {getMessage(\"login.newUser.message\")}{\" \"}\n \n {getMessage(\"login.newUser.signupText\")}\n \n
\n )}\n\n {this.state.formError && (\n
\n );\n }\n}\n\nexport default withRouter(ResetPasswordForm);\n","import React, { Component, Fragment } from \"react\";\nimport PublicPage from \"../../../containers/PublicPage/index\";\nimport ResetPasswordForm from \"./form\";\nimport { Link, Redirect } from \"react-router-dom\";\nimport { Consumer } from \"../../../containers/Context\";\n\nimport { getMessage } from \"../../../lib/translator\";\n\nexport default class ResetPassword extends Component {\n constructor(props) {\n super(props);\n this.state = {\n success: false,\n };\n this.onReset = this.onReset.bind(this);\n }\n onReset() {\n this.setState({\n success: true,\n });\n }\n render() {\n return (\n {this.state.formError}
\n )}\n \n \n {getMessage(\"resetPassword.heading\")}\n
\n\n {getMessage(\"resetPassword.subheading\")}\n
\n\n {!this.state.success ? (\n
\n \n
\n ) : (\n \n {getMessage(\"resetPassword.oldUserText\")}{\" \"}\n \n {getMessage(\"resetPassword.login\")}\n \n
\n\n {getMessage(\"resetPassword.successMessage\")}\n
\n )}\n \n \n {getMessage(\"resetPassword.loginLinkText\")}\n \n
\n {getMessage(\"404.heading\")}
\n\n We are still working on {props.location.pathname}\n
\n\n
\n Missing Page
\nAre you lost?
\n\n 
\n \n \n {verifyEmailText}\n \n {!error && (\n \n {error ? (\n <>\n \n {(formError || formSuccess) && (\n \n {formError ? formError : formSuccess}\n
\n )}\n \n ) : (\n \n {getMessage(\"login.submitText\")}\n \n )}\n \n )}\n \n {getMessage(\"password.sent.to.mobile\")}\n
\n )}\n\n \n \n
\n {getMessage(\"account.created\")}
\n\n {getMessage(\"verification.email.sent\")}\n
\n\n
\n )}\n \n {getMessage(\"use.password.sent.to.registered.mobile\")}\n
\n \n {getMessage(\"login.newUser.message\")}{\" \"}\n {getMessage(\"signup.buttonText\")}\n
\n )}\n\n
\n ) : (\n {getMessage(\"user.payment.loader.text\")}
\n \n {this.state.verificationData.status === \"COMPLETED\" ? (\n
\n )}\n \n {getMessage(\"user.payment.success.title\")}\n
\n ) : (\n\n {getMessage(\"user.payment.fail.title\")}\n
\n )}\n \n {getMessage(\"user.payment.redirect.link\")}\n \n{props.children}
;\n }\n}\n","import React from \"react\";\n\nimport \"./style.css\";\n\nexport default function EmptyState(props) {\n let views = props.additionalViews || [];\n return (\n \n 
\n
\n );\n}\n","import React from \"react\";\n\nexport default function Row(props) {\n let data = props.items || [];\n return (\n {props.message}
\n{props.submessage}
\n {views.map((View, index) => (\n \n {data.map((header, index) =>\n typeof header === \"string\" ? (\n \n {header.name}\n
\n )\n )}\n {props.children}\n \n );\n}\n","import React from \"react\";\n\nexport default function Row(props) {\n return (\n \n {header}\n
\n ) : (\n \n {props.children}\n
\n );\n}\n","import React from \"react\";\n\nexport default function Cell(props) {\n let alignmentClass = props.align === \"right\" ? \" align-right\" : \"\";\n return (\n \n \n {onAction ? (\n
\n {props.title}
\n ) : (\n {props.title}
\n )}\n {props.children}
\n \n );\n}\n","import React from \"react\";\nimport \"./style.css\";\n\nexport default function HelpWidget(props) {\n return (\n\n
\n );\n}\n","import React from \"react\";\n\nimport \"./style.css\";\nimport leftArrow from \"./icon-left-arrow.svg\";\nimport rightArrow from \"./icon-right-arrow.svg\";\n\n/* TODO: Logic to selectively show page numbers if there are too many pages */\n\nconst noop = () => {};\n\nexport default function Pagination(props) {\n let { total, current } = props;\n if (!Number.isInteger(total) || !Number.isInteger(current)) {\n return null;\n }\n let pageNumbers = Array(total)\n .fill(0)\n .map((_, index) => index + 1);\n let spliced = pageNumbers.splice(1, current - 3);\n if (spliced.length) {\n pageNumbers.splice(1, 0, \"...\");\n }\n spliced = pageNumbers.splice(5, pageNumbers.length - 6);\n if (spliced.length) {\n pageNumbers.splice(5, 0, \"...\");\n }\n let leftDisabled = current === 1;\n let rightDisabled = current === total;\n let clickHandler = props.onSelect || noop;\n let ellipsis = …;\n\n let pageNumberNotEditable = Boolean(props.pageNumberNotEditable); // Props for unwanted page number edit\n\n const visitPageDirectly = (e) => {\n if (e.which === 13) {\n if (e.target.value >= 1 && e.target.value <= total) {\n clickHandler(e.target.value);\n }\n }\n };\n\n const createClickHandler = (value) => (e) => {\n e && e.preventDefault();\n clickHandler(value);\n };\n\n return (\n {props.title}
\n{props.children}
\n \n \n 
\n \n {pageNumbers.map((number, index) => (\n \n {Number.isFinite(number) ? (\n number === current && !pageNumberNotEditable ? (\n \n 
\n \n
\n );\n}\n","import React from \"react\";\nimport { withRouter } from \"react-router-dom\";\nimport PropTypes from \"prop-types\";\nimport AuthenticatedPage from \"../AuthenticatedPage\";\nimport WithoutMenuPage from \"../WithoutMenuPage\";\nimport EmptyState from \"../../components/EmptyState\";\nimport Table, { Header } from \"../../components/Table\";\nimport HelpCard from \"../../components/HelpCard\";\nimport HelpWidget from \"../../components/HelpWidget\";\nimport Loader from \"../../components/Loader\";\nimport Pagination from \"../../components/Pagination\";\nimport { Popup as Modal, Dialog } from \"../../components/Popup\";\nimport API from \"../../lib/api\";\nimport { getMessage } from \"../../lib/translator\";\nimport { get } from \"../../lib/storage\";\nimport { getDefaultStore } from \"../StoreSelector\";\nimport { isExtensionEnabled, isEnterprise } from \"../../lib/auth\";\nimport { compareValues } from \"../../lib/stateManagement\";\n\nimport \"./style.css\";\n\nexport const TABLE_ACTIONS = {\n ADD: \"ADD\",\n EDIT: \"EDIT\",\n VIEW: \"VIEW\",\n DELETE: \"DELETE\",\n FILTER: \"FILTER\",\n REFRESH: \"REFRESH\",\n UPDATE: \"UPDATE\",\n SET_API_PARAMS: \"SET_API_PARAMS\",\n};\nconst SUCCESS_STATUS_CODE = [200, 201, 204];\n\nconst NullComponent = () => null;\n\nclass ListingPage extends React.Component {\n constructor(props) {\n super(props);\n let searchParams = Object.assign(\n {},\n ...this.props.router.location.search\n .slice(1)\n .split(\"&\")\n .filter(Boolean)\n .map((keystr) => {\n keystr = keystr.split(\"=\");\n return {\n [keystr[0]]: decodeURIComponent(keystr[1]),\n };\n })\n );\n if (Object.keys(searchParams).length > 0) {\n let item = window.localStorage.getItem(this.props.className);\n if (!item) {\n window.localStorage.setItem(this.props.className, 1);\n }\n }\n let apiParams = {};\n let apiHeaders = {};\n\n if (props.api) {\n if (props.api.params) {\n apiParams = props.api.params;\n }\n if (props.api.headers) {\n apiHeaders = props.api.headers;\n }\n if (\n props.storeDependent &&\n isExtensionEnabled(\"MultiStoreSupport\") &&\n (get(\"store\") || getDefaultStore().storeId)\n ) {\n apiParams.storeId = Number(get(\"store\") || getDefaultStore().storeId);\n }\n }\n this.state = {\n data: {\n items: null,\n paging: null,\n filters: searchParams || {}, // Corresponds to the filters applied to the API\n viewItems: null,\n },\n filters: {\n // Corresponds to the state of the 'filters' view\n shown:\n Object.keys(searchParams).length > 0 ||\n (this.props.filters && this.props.filters.showFiltersOnLoad),\n },\n apiParams: apiParams,\n apiHeaders: apiHeaders,\n loaders: {\n data: false,\n updatingApiParams: false,\n },\n form: {\n shown: false,\n rowIndex: -1, // The row being edited\n data: null,\n },\n deleteDialog: {\n shown: false,\n data: {},\n },\n errorDialog: {\n shown: false,\n message: \"\",\n title: \"\",\n },\n successDialog: false,\n firstLoadDone: false, // Indicate that we have gotten results from API at least once\n };\n\n this.primaryKey = this.props.primaryKey || \"id\";\n\n if (props.api && props.api.url) {\n this.api = new API({ url: props.api.url });\n }\n\n /* Default hooks */\n // Method to extract data from the API call made\n this._transformResponse = (response) => response;\n this._transformSubmit = (form) => form;\n\n /* Hook overrides */\n if (props.api && props.api.transform) {\n this._transformResponse = props.api.transform;\n }\n if (props.form && props.form.transformSubmit) {\n this._transformSubmit = props.form.transformSubmit;\n }\n if (props.updateView) {\n this.updateView = this.updateView.bind(this);\n }\n\n this._showDataLoader = this._showDataLoader.bind(this);\n this._hideDataLoader = this._hideDataLoader.bind(this);\n this.changePage = this.changePage.bind(this);\n this.performAction = this.performAction.bind(this);\n this._showForm = this._showForm.bind(this);\n this._hideForm = this._hideForm.bind(this);\n this._showFilters = this._showFilters.bind(this);\n this._hideFilters = this._hideFilters.bind(this);\n this._toggleFilters = this._toggleFilters.bind(this);\n this.createResource = this.createResource.bind(this);\n this.modifyResource = this.modifyResource.bind(this);\n this.getResource = this.getResource.bind(this);\n this.applyFilters = this.applyFilters.bind(this);\n this.clearFilters = this.clearFilters.bind(this);\n this.confirmDelete = this.confirmDelete.bind(this);\n this.throwError = this.throwError.bind(this);\n this._showDeleteDialog = this._showDeleteDialog.bind(this);\n this._hideDeleteDialog = this._hideDeleteDialog.bind(this);\n this._showErrorDialog = this._showErrorDialog.bind(this);\n this._hideErrorDialog = this._hideErrorDialog.bind(this);\n this.setApiParam = this.setApiParam.bind(this);\n this._showSuccesDialog = this._showSuccesDialog.bind(this);\n this.updateApiUrl = this.updateApiUrl.bind(this);\n }\n // Some data lookup methods\n _getRow(data) {\n let result = {\n data: null,\n index: -1,\n };\n if (!data && this.props.noId) {\n return result;\n }\n let { items } = this.state.data;\n for (let i = 0, len = items.length; i < len; i++) {\n let item = items[i];\n let matched = true;\n for (let key in data) {\n if (!(key in item) || item[key] !== data[key]) {\n matched = false;\n break;\n }\n }\n if (matched) {\n result.data = item;\n result.index = i;\n break;\n }\n }\n return result;\n }\n // Some utility methods to manage states\n _showDataLoader() {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.loaders.data = true;\n return newState;\n });\n }\n _hideDataLoader() {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.loaders.data = false;\n newState.loaders.updatingApiParams = false;\n return newState;\n });\n }\n _showForm(rowIndex, data) {\n // If rowIndex is specified, then a particular row is being edited\n if (this.props.form && this.props.form.component) {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.form.shown = true;\n newState.form.rowIndex = isFinite(rowIndex) ? rowIndex : -1;\n if (data) {\n newState.form.data = data;\n }\n return newState;\n });\n }\n }\n _hideForm() {\n // Clear the form and hide it\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.form.shown = false;\n newState.form.rowIndex = -1;\n newState.form.data = null;\n return newState;\n });\n }\n _showFilters() {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.filters.shown = true;\n return newState;\n });\n }\n _hideFilters() {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.filters.shown = false;\n return newState;\n });\n }\n _toggleFilters() {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.filters.shown = !prevState.filters.shown;\n return newState;\n });\n }\n _hideDeleteDialog() {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.deleteDialog.shown = false;\n return newState;\n });\n }\n _showDeleteDialog() {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.deleteDialog.shown = true;\n return newState;\n });\n }\n _hideErrorDialog() {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.errorDialog.shown = false;\n newState.errorDialog.message = \"\";\n newState.errorDialog.title = \"\";\n return newState;\n });\n }\n _showErrorDialog() {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.errorDialog.shown = true;\n return newState;\n });\n }\n _showSuccesDialog() {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.successDialog = !prevState.successDialog;\n return newState;\n });\n }\n\n updateApiUrl(url) {\n if (this.api && this.api.url) {\n this.api = new API({ url: url });\n }\n }\n // Methods to manage data via API\n /**\n * Makes API call to create the resource\n * @param {object} data - Data to be created in DB\n * @return {Oject} newState - updated state [Immutated]\n */\n createResource(data) {\n let api = new API({\n url: this.props.api.url,\n });\n let params =\n this.props.form && this.props.form.overwriteWithApiParams === false\n ? Object.assign({}, this.state.apiParams, this._transformSubmit(data))\n : Object.assign({}, this._transformSubmit(data), this.state.apiParams);\n if (params.storeId) {\n params.storeId = Number(params.storeId);\n }\n let headers = this.state.apiHeaders;\n return api\n .post(params, headers)\n .then(\n (response) => {\n if (SUCCESS_STATUS_CODE?.includes(response?.code)) {\n this._showSuccesDialog();\n }\n let data = this._transformResponse(response);\n /* Show new entry at top of the table */\n if (this.props.form && this.props.form.filterBeforeAdding) {\n let filterBeforeAdding = this.props.form.filterBeforeAdding;\n data = filterBeforeAdding(data, this);\n }\n if (data) {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n let updatedItems = newState.data.items;\n this.props.addNewItemToLast\n ? updatedItems.push(data)\n : updatedItems.unshift(data);\n newState.data.items = updatedItems;\n const updatedPaging = newState.data.paging;\n updatedPaging.count = (updatedPaging.count || 0) + 1;\n newState.data.paging = updatedPaging;\n return newState;\n });\n }\n this._hideForm();\n },\n (error) => {\n this.throwError(error);\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n modifyResource(data) {\n // Make an API call to update the resource\n let x = !this.props.noId ? data[this.primaryKey] : \"X\";\n let api = new API({\n url: this.props.api.url + \"/\" + x,\n });\n let params =\n this.props.form && this.props.form.overwriteWithApiParams === false\n ? Object.assign({}, this.state.apiParams, this._transformSubmit(data))\n : Object.assign({}, this._transformSubmit(data), this.state.apiParams);\n let headers = this.state.apiHeaders;\n return api\n .put(params, headers)\n .then(\n (response) => {\n /* Update the table row */\n if (SUCCESS_STATUS_CODE?.includes(response?.code)) {\n this._showSuccesDialog();\n }\n if (this.props.form && this.props.form.filterBeforeAdding) {\n let filterBeforeAdding = this.props.form.filterBeforeAdding;\n data = filterBeforeAdding(data, this);\n }\n let row, updatedRow;\n if (data.id) {\n updatedRow = this.state.data.items.find(\n (item) => Number(item.id) === Number(data.id)\n );\n delete data.id;\n updatedRow = Object.assign({}, updatedRow, data);\n row = this._getRow({\n [this.primaryKey]: updatedRow?.id ?? \"\",\n });\n } else {\n updatedRow = this._transformResponse(response);\n row = this._getRow({\n [this.primaryKey]: updatedRow[this.primaryKey],\n });\n }\n if (data) {\n if (row.index > -1) {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n let updatedItems = newState.data.items;\n updatedItems.splice(row.index, 1, updatedRow);\n newState.data.items = updatedItems;\n return newState;\n });\n } else if (this.props.noId) {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n let updatedItems = newState.data.items;\n this.props.addNewItemToLast\n ? updatedItems.push(updatedRow)\n : updatedItems.unshift(updatedRow);\n newState.data.items = updatedItems;\n const updatedPaging = newState.data.paging;\n updatedPaging.count = (updatedPaging.count || 0) + 1;\n newState.data.paging = updatedPaging;\n return newState;\n });\n }\n } else {\n if (row.index > -1) {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n let updatedItems = newState.data.items;\n updatedItems.splice(row.index, 1);\n newState.data.items = updatedItems;\n const updatedPaging = newState.data.paging;\n updatedPaging.count = updatedPaging.count - 1;\n newState.data.paging = updatedPaging;\n return newState;\n });\n }\n }\n this.props.api &&\n this.props.api.afterSubmit &&\n this.props.api.afterSubmit(response);\n this._hideForm();\n },\n (error) => {\n this.throwError(error);\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n /**\n * Makes API call to delete the resource\n * @param {object} data - Data to be deleted from DB\n * @return {Oject} newState - updated state [Immutated]\n */\n deleteResource(data) {\n let api = new API({\n url: this.props.api.url + \"/\" + data[this.primaryKey],\n });\n let params =\n this.props.api.overWriteDeleteParams === false\n ? Object.assign({}, this.state.apiParams, data)\n : Object.assign({}, data, this.state.apiParams);\n let headers = this.state.apiHeaders;\n api\n .delete(params, headers)\n .then(\n (response) => {\n /* Update the table row */\n let row = this._getRow({\n [this.primaryKey]: data[this.primaryKey],\n });\n if (row.index > -1) {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n let updatedItems = newState.data.items;\n updatedItems.splice(row.index, 1);\n newState.data.items = updatedItems;\n const updatedPaging = newState.data.paging;\n updatedPaging.count = updatedPaging.count - 1;\n newState.data.paging = updatedPaging;\n return newState;\n });\n }\n if (SUCCESS_STATUS_CODE?.includes(response?.code)) {\n this._showSuccesDialog();\n }\n },\n (error) => {\n this.throwError(error, getMessage(\"errorDialog.delete.error.title\"));\n }\n )\n .then(this._hideForm)\n .catch((error) => {\n console.error(error);\n });\n }\n\n getResource(data) {\n let api = new API({\n url: this.props.api.url + \"/\" + data[this.primaryKey],\n });\n let params = Object.assign(\n {},\n this._transformSubmit(data),\n this.state.apiParams\n );\n let headers = this.state.apiHeaders;\n api\n .get(params, headers)\n .then(\n (response) => {\n /* Update the table row */\n let updatedRow = this._transformResponse(response);\n let row = this._getRow({\n [this.primaryKey]: updatedRow[this.primaryKey],\n });\n if (row.index > -1) {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n let updatedItems = newState.data.items;\n updatedItems.splice(row.index, 1, updatedRow);\n newState.data.items = updatedItems;\n return newState;\n });\n }\n this.props.api &&\n this.props.api.afterSubmit &&\n this.props.api.afterSubmit(response);\n this._hideForm();\n },\n (error) => {\n this.throwError(error);\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n fetchTableData(params = {}) {\n if (!this.api) {\n return;\n }\n this._showDataLoader();\n if (Object.keys(params).length > 0) {\n params = Object.assign({}, this.state.apiParams, params);\n } else {\n params = Object.assign({}, params, this.state.apiParams);\n }\n if (params?.dateRange) {\n params = { ...params, ...params.dateRange };\n delete params.dateRange;\n }\n if (this.props.storeDependent && isExtensionEnabled(\"MultiStoreSupport\")) {\n if (this.props.sethubId) {\n params.hubId = params.storeId;\n }\n if (!params.storeId) {\n return null;\n }\n }\n let headers = this.state.apiHeaders;\n return this.api\n .get(params, headers)\n .then((response) => {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.data.items = this._transformResponse(response);\n if (this.props.updateView) {\n newState.data.viewItems = this._transformResponse(response);\n }\n newState.data.paging = (({ count, limit, offset }) => ({\n count,\n limit,\n offset,\n }))(response.data || {});\n newState.firstLoadDone = true;\n return newState;\n });\n })\n .then(() => {\n if (this.props.api.transformResponseAsync) {\n return this.props.api\n .transformResponseAsync(this.state.data.items)\n .then((items) => {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.data.items = items;\n return newState;\n });\n });\n }\n })\n .then(this._hideDataLoader)\n .catch((error) => {\n this._hideDataLoader();\n console.error(error);\n this.throwError(error);\n });\n }\n changePage(page) {\n window.localStorage.setItem(this.props.className, page); // necessary for pagination\n if (Object.keys(this.state.data.filters).length) {\n this.applyFilters(this.state.data.filters, page);\n } else {\n this.fetchTableData({ page });\n }\n }\n applyFilters(filters, page = 1) {\n window.localStorage.setItem(this.props.className, page); // necessary for pagination\n var transformedFilters = filters;\n if (this.props.filters && this.props.filters.transformSubmit) {\n transformedFilters = this.props.filters.transformSubmit(filters);\n }\n let params = Object.assign(\n {\n offset: 0, // Reset page to 1 if applying filters\n page: page,\n },\n transformedFilters\n );\n this.setState(\n (prevState) => {\n let newState = Object.assign({}, prevState);\n newState.data.filters = filters;\n return newState;\n },\n () => {\n this.fetchTableData(params);\n }\n );\n }\n clearFilters() {\n window.localStorage.setItem(this.props.className, 1);\n let { onClear } = this.props;\n this.setState(\n (prevState) => {\n let newState = Object.assign({}, prevState);\n newState.data.filters = {};\n newState.filters = { shown: true };\n return newState;\n },\n () => {\n onClear ? onClear() : this.fetchTableData();\n }\n );\n }\n confirmDelete() {\n this.deleteResource(this.state.deleteDialog.data);\n this._hideDeleteDialog();\n }\n throwError(error, title) {\n if (error.code === 400 || error.code === 409) {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.errorDialog.message = error.message; // if string does not have a colon\n newState.errorDialog.title = title || getMessage(\"error.title\");\n return newState;\n }, this._showErrorDialog());\n } else {\n throw error;\n }\n }\n performAction(action, data, updates, deleteRow = false) {\n // action: (string) Action to perform\n // data: The data needed to search a specific a row\n // updates: The data to update the row with\n // deleteRow: delete the row from view without making api call\n if (action in TABLE_ACTIONS) {\n switch (action) {\n case TABLE_ACTIONS.ADD:\n if (this.props.form) {\n this._showForm(-1, data);\n }\n break;\n case TABLE_ACTIONS.EDIT:\n if (this.props.form) {\n // Lookup row number for given data and send that row number\n let row = this._getRow(data);\n if (row.index >= 0) {\n if (updates) {\n // If there are updates, just update row instead of showing form\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n let updatedItems = newState.data.items;\n updatedItems.splice(\n row.index,\n 1,\n Object.assign({}, row.data, updates)\n );\n newState.data.items = updatedItems;\n return newState;\n });\n } else {\n this._showForm(row.index);\n }\n } else {\n if (this.props.noId && row.index >= 0) {\n this._showForm(row.index, data);\n } else if (this.props.noId) {\n this._showForm(-1, data);\n }\n }\n }\n break;\n case TABLE_ACTIONS.UPDATE:\n let row = this._getRow(data);\n if (row.index >= 0 && updates) {\n let params = Object.assign({}, data, updates);\n return this.modifyResource(params);\n }\n break;\n case TABLE_ACTIONS.DELETE:\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.deleteDialog.data = data;\n return newState;\n });\n this._showDeleteDialog();\n break;\n case TABLE_ACTIONS.FILTER:\n // To the user, search & filters are mutually exclusive, but internally,\n // both are implemented as filters\n this.applyFilters(data);\n break;\n case TABLE_ACTIONS.REFRESH:\n let params = {};\n if (data && deleteRow) {\n // If data and delete row are not empty, simply delete the row from the view\n let row = this._getRow(data);\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n let updatedItems = newState.data.items.slice();\n updatedItems.splice(row.index, 1);\n newState.data.items = updatedItems;\n return newState;\n });\n return;\n } else if (data && updates) {\n // If 'data' and 'updates' are not empty, simply update the view by pushing 'updates' into the state\n let row = this._getRow(data);\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n let updatedItems = newState.data.items;\n updatedItems.splice(\n row.index,\n 1,\n Object.assign({}, row.data, updates)\n );\n newState.data.items = updatedItems;\n return newState;\n });\n } else if (data) {\n // TODO: If 'data' is not empty, fetch details for that row and update the data for that row\n this.getResource(data);\n return;\n } else if (this.state.data && this.state.data.filters) {\n // if filters are applied on the table then refresh the page with filters\n params = Object.assign(\n {\n offset: 0, // Reset page to 1 if applying filters\n },\n this.state.data.filters\n );\n }\n this.fetchTableData(params);\n break;\n case TABLE_ACTIONS.SET_API_PARAMS:\n this.setState((prevState) => {\n return {\n apiParams: Object.assign({}, prevState.apiParams, data),\n };\n }, this.fetchTableData);\n break;\n default:\n break;\n }\n } else if (\n this.props.tableProperties.actions &&\n action in this.props.tableProperties.actions\n ) {\n // Perform custom action\n }\n }\n componentDidMount() {\n this.props.dontSavePagination &&\n window.localStorage.setItem(this.props.className, 1);\n let configs = { page: window.localStorage.getItem(this.props.className) };\n if (\n this.props.filters &&\n this.props.filters.transformFilter &&\n this.state.data.filters\n ) {\n let transformedFilters = this.props.filters.transformFilter(\n this.state.data.filters\n );\n this.fetchTableData({\n ...transformedFilters,\n ...configs,\n \"includes[0]\": \"reReturns\",\n });\n } else {\n this.fetchTableData({ ...this.state.data.filters, ...configs });\n }\n }\n\n componentWillReceiveProps(nextProps) {\n if (\n !compareValues(this.props.api.params, nextProps.api.params) &&\n this.props.api &&\n this.props.api.updateApiParams\n ) {\n let loaders = Object.assign({}, this.state.loaders);\n loaders.updatingApiParams = true;\n this.setState({\n loaders,\n });\n }\n }\n\n componentDidUpdate(prevProps, prevState) {\n const api = this.props.api;\n if (api && api.updateApiParams) {\n let updates = api.updateApiParams(\n prevProps.api.params,\n this.props.api.params,\n prevState.apiParams,\n this.state.apiParams\n );\n if (updates && updates.shouldUpdate) {\n this.setState(\n (prevState) => {\n let loaders = Object.assign({}, prevState.loaders);\n loaders.updatingApiParams = true;\n return {\n loaders,\n };\n },\n () => {\n this.performAction(TABLE_ACTIONS.SET_API_PARAMS, updates.params);\n }\n );\n }\n }\n // if (\n // this.state.apiParams.storeId &&\n // prevState.apiParams.storeId !== this.state.apiParams.storeId\n // ) {\n // console.log(prevState.apiParams, this.state.apiParams);\n // this.fetchTableData();\n // }\n }\n\n componentWillUnmount() {\n this.api && this.api.cancel();\n }\n\n updateView(data, key) {\n if (this.props.updateView) {\n let newView = this.props.updateView(data, key);\n let newData = Object.assign({}, this.state.data);\n newData.viewItems = newView;\n this.setState({\n data: newData,\n });\n }\n }\n setApiParam(storeId) {\n let apiParams = JSON.parse(JSON.stringify(this.state.apiParams));\n if (\n !apiParams.storeId &&\n this.props.storeDependent &&\n isExtensionEnabled(\"MultiStoreSupport\")\n ) {\n apiParams.storeId = Number(storeId);\n this.setState({ apiParams });\n }\n }\n\n render() {\n // TODO: Add support for replacing default messages with localized strings\n let { props } = this;\n let view = null;\n let data = this.state.data;\n let filtersCount = Object.keys(data.filters).filter((key) =>\n Boolean(data.filters[key])\n ).length;\n let filtersApplied = filtersCount > 0;\n let emptyStateShown = false;\n if (\n !this.api ||\n (data.paging &&\n data.paging.count === 0 &&\n !(data.items && data.items.length > 0)) ||\n (data.items && data.items.length === 0) ||\n props.showEmptyState\n ) {\n if (filtersApplied && !props.showEmptyState) {\n view = No results found
;\n } else {\n emptyStateShown = true;\n let emptyStateProps = Object.assign({}, props.emptyState);\n let emptyState = \n {emptyState}\n {helpItems}\n
\n );\n }\n } else if (\n data.items &&\n props.tableProperties.row &&\n !this.state.loaders.updatingApiParams\n ) {\n let Row = props.tableProperties.row;\n let { count, offset, limit } = data.paging;\n count = Number(count);\n offset = Number(offset);\n limit = Number(limit);\n let totalPages = Math.ceil(count / limit);\n const page = window.localStorage.getItem(this.props.className);\n const viewData = props.updateView\n ? data.viewItems && data.viewItems.length > 0\n ? data.viewItems\n : data.items\n : data.items;\n view = (\n \n \n {props.tableProperties.headers ? (\n
\n
\n );\n }\n let HeaderActions = this.props.headerActions || NullComponent;\n const Form = props.form\n ? props.form.component || NullComponent\n : NullComponent;\n const Filters = props.filters\n ? props.filters.component || NullComponent\n : NullComponent;\n const allowDelete = props.form && props.form.allowDelete; // to allow delete action from inside the form\n if (emptyStateShown) {\n HeaderActions =\n props.emptyState && props.emptyState.actions\n ? props.emptyState.actions\n : NullComponent;\n }\n let WrapperComponent = this.props.menu\n ? AuthenticatedPage\n : WithoutMenuPage;\n return (\n \n
\n {`${getMessage(\n \"pagination.text\"\n )} ${offset + 1} - ${\n limit > 0 && offset >= 0 ? Math.min(offset + limit, count) : count\n } ${getMessage(\"pagination.helperText\")} ${count}`}
\n {totalPages > 1 ? (\n \n {props.title &&
\n {this.props.additionalViews\n ? this.props.additionalViews.map((View, index) => (\n {props.title}
}\n {(!emptyStateShown && this.state.firstLoadDone) ||\n (this.props.filters && this.props.filters.forceShow) ? (\n\n {this.props.filters ? (\n
\n ) : (\n emptyStateShown && (\n \n
\n ) : null}\n \n
\n )\n )}\n {this.state.notFoundError}
\n ) : null;\n }\n return (\n\n
\n );\n }\n}\n\nclass ListingPageWithRoutes extends Component {\n render() {\n const { router, form, secondaryActions } = this.props;\n const { overwriteWithApiParams } = form;\n const action = router.match.params.action;\n let WrapperComponent = this.props.menu\n ? AuthenticatedPage\n : ({ menu, ...props }) => ;\n this.apiHeaders = this.props.api?.headers || {};\n if (action === \"add\" && form && form.component) {\n const Form = form.component;\n const {\n api: { url, params = {} },\n } = this.props;\n const formApiUrl = form.url || url;\n const apiParams = form.apiParams || params;\n return (\n {this.props.addHeading || \"Add\"}
\n{this.props.editHeading || \"Edit\"}
\n{this.props.addHeading || \"Add\"}
\n{title}
\n {(!file.name || uploadError) && !fileUploaded && (\n \n {\n this.uploadInputRef = node;\n }}\n onClick={this.handleClick}\n disabled={disableUpload}\n />\n
\n )}\n {uploadError ? (\n \n {placeholder || \"Click here to upload the file\"}\n
\n {uploadError}
\n ) : (\n file.name && (\n \n
\n )\n )}\n \n );\n }\n}\n\nFileUpload.defaultProps = {\n accept: \".csv,text/csv\",\n};\n\nexport default FileUpload;\n","import React, { Component } from \"react\";\n\nimport Upload from \"../../../../components/FileUpload\";\nimport API from \"../../../../lib/api\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport { isExtensionEnabled } from \"../../../../lib/auth\";\nimport { Link } from \"react-router-dom\";\nimport csvIcon from \"./csv-icon.svg\";\nimport uploadIcon from \"./upload-products.svg\";\nimport { getSession } from \"../../../../lib/auth\";\nimport { isSellerSection } from \"..\";\nimport \"./style.css\";\n\nfunction downloadCsv(data, uploadType) {\n let csv = \"\";\n csv += data.join(\",\");\n csv += \"\\n\";\n var hiddenElement = document.createElement(\"a\");\n hiddenElement.href = \"data:text/csv;charset=utf-8,\" + encodeURI(csv);\n hiddenElement.target = \"_blank\";\n hiddenElement.download =\n uploadType === \"inventory\" ? \"inventory.csv\" : \"product.csv\";\n hiddenElement.click();\n}\n\nexport default class ProductUpload extends Component {\n constructor(props) {\n super(props);\n this.getSampleCsv = this.getSampleCsv.bind(this);\n }\n\n getSampleCsv(e) {\n e.preventDefault();\n const { bulkUploadType } = this.props;\n if (bulkUploadType === \"catalogue\") {\n const api = new API({ url: \"/catalogue-service/product-upload\" });\n api\n .get()\n .then(\n (response) => {\n downloadCsv(response.data.fileUpload || [], bulkUploadType);\n },\n (error) => {\n this.setState({ uploadError: error.message });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n } else if (bulkUploadType === \"inventory\") {\n const country = new API({\n url: `/account-service/country?isoCode=${\n getSession().organization.countryCode\n }`,\n });\n country\n .get()\n .then((response) => {\n const taxHeaders = response.data.country.tax.split(\",\");\n const inventoryCsvHeaders = [\n \"Store ID\",\n \"Item ID\",\n \"Price\",\n \"Discount\",\n ...taxHeaders,\n \"Stock\",\n ].concat(\n isExtensionEnabled(\"InStoreProcessing\")\n ? [\"Rack\", \"Aisle\", \"Shelf\"]\n : []\n );\n downloadCsv(inventoryCsvHeaders, bulkUploadType);\n })\n .catch((error) => {\n console.error(error);\n });\n }\n }\n\n render() {\n let { hideAddButton, disableUpload, bulkUploadType } = this.props;\n return (\n \n {icon && (\n
\n {!fileUploaded && (\n \n 
\n
\n )}\n {file.name}
\n \n \n {cancelText}\n \n \n {fileUploading ? \"...\" : uploadButtonText}\n \n
\n )}\n \n {!hideAddButton ? (\n
\n );\n }\n}\n","import React from \"react\";\nimport { BaseForm, Input, Select } from \"../../../../../components/Form\";\nimport API from \"../../../../../lib/api\";\nimport { getMessage } from \"../../../../../lib/translator\";\n// import { DEVELOPER_TOKEN } from \"../../../../../../src/config/app\";\nimport \"./style.css\";\nimport { Dialog } from \"../../../../../components/Popup\";\nimport { faro } from \"@grafana/faro-web-sdk\";\nimport { isExtensionEnabled } from \"../../../../../lib/auth\";\n\nexport default class ProductFiltersForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state = {\n indusrtyNames: [],\n selectedIndustry: \"All\",\n showErrorDialog: false,\n formError: \"\",\n values: {\n tagId: null,\n },\n };\n this.isMarketPlaceEntensionEnabled = isExtensionEnabled(\"MarketPlace\");\n }\n handleGetIndustry = () => {\n return this.state.indusrtyNames.map((val) => ({\n text: val.name,\n value: val.name,\n }));\n };\n componentDidMount() {\n this.getIndustryApi = new API({\n url: \"/account-service/industry\",\n });\n if (!this.isMarketPlaceEntensionEnabled) {\n Promise.all([this.getIndustryApi.get()])\n .then(([industryApiResponse]) => {\n const allObject = {\n name: \"All\",\n id: \"All\",\n };\n const availableIndustryProvider = [\n allObject,\n ...industryApiResponse.data?.industry,\n ];\n this.setState({ indusrtyNames: availableIndustryProvider });\n })\n .catch((error) => {\n if (faro?.api?.pushError) {\n faro.api.pushError(error);\n }\n this.setState({ formError: error.message, showErrorDialog: true });\n });\n }\n }\n handleGetTagId = (tag) => {\n this.getTagApi = new API({\n url: \"/catalogue-service/tag\",\n });\n this.getTagApi\n .get(\n {\n name: tag,\n }\n // {\n // \"Developer-token\": DEVELOPER_TOKEN,\n // restrictAutherizationToken: true,\n // }\n )\n .then((tagApiResponse) => {\n const tagArr = tagApiResponse.data.tag;\n if (tagArr?.length) {\n const tagCurrent = tagArr.filter((obj) => obj.name === tag);\n const tagNumber = tagCurrent[0].id;\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.values.tagId = tagNumber;\n return newState;\n });\n }\n })\n .catch((error) => {\n if (faro?.api?.pushError) {\n faro.api.pushError(error);\n }\n this.setState({ formError: error.message, showErrorDialog: true });\n });\n };\n handleSelectChange = (value) => {\n if (value !== \"All\") {\n this.handleGetTagId(value);\n }\n\n this.setState({ selectedIndustry: value });\n };\n closeDialogs = () => {\n this.setState({\n showErrorDialog: false,\n formError: \"\",\n });\n };\n render() {\n const { SubmitButton } = this.buttons;\n const { Form } = this.components;\n return (\n <>\n \n \n + {getMessage(\"product.add.text\")}\n \n
\n ) : null}\n \n
\n \n 
\n
\n {!hideAddButton ? (\n \n {getMessage(\"productUpload.orText\")}\n \n ) : null}\n \n \n {getMessage(\"productUpload.csvDownloadText\")}\n \n
\n \n {brand ? {brand.name} : null}\n {name}\n
\n \n onChange(key, e)\n : commonGenerateStateMappers(_this, key, stateKeys).onChange\n }\n />\n
\n );\n preserveSequence ? arr.push(data) : arr.unshift(data);\n } else if (\n details.type === \"enum\" ||\n details.type === \"multiValued Enum\"\n ) {\n let Comp = details.type === \"enum\" ? Select : MultiSelect;\n let data = (\n \n
\n );\n preserveSequence ? arr.push(data) : arr.unshift(data);\n } else if (details.type === \"percentage\") {\n let data = (\n Dimensions in cms
\n \n {Object.entries(members).map((mem, index) => {\n const subKey = mem[0];\n return (\n onChange(subKey, e)\n : commonGenerateStateMappers(_this, subKey, stateKeys)\n .onChange\n }\n readOnly={readOnly}\n />\n );\n })}\n
\n \n onChange(key, e)\n : commonGenerateStateMappers(_this, key, stateKeys).onChange\n }\n readOnly={readOnly}\n />\n
\n );\n preserveSequence ? arr.push(data) : arr.unshift(data);\n }\n return null;\n });\n arr = arr.concat(tempArr);\n return !noContainer ? (\n \n {arr.length > 0 && title &&
\n ) : (\n \n {props.items.map((item) => {\n return (\n \n {item[nameKey]}\n \n );\n })}\n
\n ) : (\n \n {props.items.map((item, index) => {\n return (\n \n {item}\n \n );\n })}\n
\n );\n return component;\n }\n}\n","import { getStores } from \"../../lib/auth\";\nimport { get } from \"../../lib/storage\";\n\nfunction getDefaultStore(stores) {\n let result = {};\n let orgStores = getStores();\n if (stores && stores.length && get(\"store\")) {\n let store = get(\"store\");\n result = {\n storeId: Number(store),\n };\n return result;\n }\n if (stores && stores.length) {\n result = {\n storeId: stores[0].id,\n };\n }\n if (orgStores && orgStores.length) {\n result = {\n storeId: orgStores[0].id,\n };\n }\n return result;\n}\n\nexport default getDefaultStore;\n","import React, { Component } from \"react\";\nimport JoditEditor from \"jodit-react\";\nimport \"./style.css\";\nexport default class RichEditor extends Component {\n constructor(props) {\n super(props);\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(newContent) {\n this.props.onChange(newContent);\n }\n\n config = {\n showPlaceholder: true,\n placeholder: this.props.placeholder || \"\",\n disablePlugins: \"add-new-line\",\n useSearch: false,\n spellcheck: false,\n enter: \"P\",\n defaultMode: \"1\",\n toolbarAdaptive: false,\n toolbarSticky: false,\n showCharsCounter: false,\n showWordsCounter: false,\n showXPathInStatusbar: false,\n minHeight: 350,\n buttons: [\n \"bold\", \"italic\", \"underline\", \"strikethrough\", \"|\",\n \"superscript\", \"subscript\", \"|\", \"paragraph\", \"font\", \"fontsize\", \"brush\", \"|\",\n \"ul\", \"ol\", \"outdent\", \"indent\", \"|\", \"align\", \"|\",\n \"image\", \"link\", \"|\", \"eraser\", \"copyformat\", \"|\",\n \"selectall\", \"print\", \"|\", \"source\", \"|\", \"undo\", \"redo\", \"|\",\n ],\n };\n\n render() {\n return (\n \n
\n );\n }\n}\n\nexport function importText(value) {\n return value || \"\";\n}\n\nexport function exportText(content) {\n return content;\n}\n","import { getSession, isExtensionEnabled } from \"../auth\";\n\nexport const isMarketPlaceSeller = () => {\n const userInfo = getSession()?.user;\n const isSellerAdmin = (userInfo?.roles || []).some(\n (role) => role.name === \"SELLER ADMIN\"\n );\n const isOwner = userInfo?.isOwner;\n const isMarketplaceEnabled = isExtensionEnabled(\"MarketPlace\");\n\n return !isOwner && isMarketplaceEnabled && isSellerAdmin;\n};\n\nexport const isMarketPlaceOwner = () => {\n const userInfo = getSession()?.user;\n const isSellerAdmin = (userInfo?.roles || []).some(\n (role) => role.name === \"SELLER ADMIN\"\n );\n const isMarketplaceEnabled = isExtensionEnabled(\"MarketPlace\");\n return !isSellerAdmin && isMarketplaceEnabled;\n};\n","import React from \"react\";\nimport { Helmet } from \"react-helmet\";\nimport {\n BaseForm,\n CategorySearch,\n Input,\n ImageUpload,\n Checkbox,\n Searchable,\n MultiTextInput,\n BrandSearch,\n VALIDATION_TYPES,\n Toggle,\n Textarea,\n Select,\n} from \"../../../../components/Form\";\nimport MetaDataFormFields from \"../../../../components/MetaDataFormFields\";\nimport Tabs from \"../../../../components/Tabs\";\nimport Loader from \"../../../../components/Loader\";\nimport { Dialog, Popup } from \"../../../../components/Popup\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport cloneDeep from \"lodash.clonedeep\";\nimport isEmpty from \"lodash.isempty\";\nimport {\n getSession,\n isExtensionEnabled,\n getStores,\n} from \"../../../../lib/auth\";\nimport API from \"../../../../lib/api\";\nimport { get, unset } from \"../../../../lib/storage\";\nimport getDefaultStore from \"../../../../containers/StoreSelector/getDefaultStore\";\n\nimport deleteIcon from \"./icon-dustbin.svg\";\nimport shopIcon from \"./shop.svg\";\nimport editIcon from \"./edit.svg\";\nimport \"./style.css\";\nimport RichEditor, {\n exportText,\n importText,\n} from \"../../../../components/RichEditor\";\nimport {\n isMarketPlaceOwner,\n isMarketPlaceSeller,\n} from \"../../../../lib/marketPlace\";\nimport { getProductRequestStatus, isSellerSection } from \"..\";\nimport {\n convertToISODuration,\n parseISODuration,\n} from \"../../../../lib/commonlyused\";\n\nconst FREQUENCY_TYPE = [\n {\n text: \"Day\",\n value: \"Day\",\n },\n {\n text: \"Month\",\n value: \"Month\",\n },\n {\n text: \"Year\",\n value: \"Year\",\n },\n];\n\nexport const fetchClientItemLabel = (code) => {\n let label;\n switch (code) {\n case \"PH\":\n label = \"SKU Code\";\n break;\n default:\n label = \"Client Item Id\";\n break;\n }\n return label;\n};\n\nexport default class ProductForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state.selectedVariant = 0;\n this.state.variantName = \"\";\n this.state.variantFields = [];\n this.state.editVariantFields = [];\n this.state.productVariantProperties = null;\n this.state.editVariant = false;\n this.state.variants = [];\n this.state.variantToggle = false;\n this.state.selectedStore = getDefaultStore().storeId;\n this.state.allStoresLoaded = false;\n this.state.cancelEditVariantName = \"\";\n this.state.apiError = null;\n this.state.showErrorDialog = false;\n this.state.status = isExtensionEnabled(\"MultiStoreSupport\");\n this.state.taxes = [];\n this.state.isRecurringProduct = false;\n this.state.values.purchaseFrequencyData = {\n type: \"Day\",\n frequency: 0,\n };\n this.addVariant = this.addVariant.bind(this);\n this.removeVariant = this.removeVariant.bind(this);\n this.showProductDeleteConfirmation =\n this.showProductDeleteConfirmation.bind(this);\n this.hideProductDeleteConfirmation =\n this.hideProductDeleteConfirmation.bind(this);\n this.showVariantDeleteConfirmation =\n this.showVariantDeleteConfirmation.bind(this);\n this.hideVariantDeleteConfirmation =\n this.hideVariantDeleteConfirmation.bind(this);\n this.deleteProduct = this.deleteProduct.bind(this);\n this.getStores = this.getStores.bind(this);\n this.getEntityMetaData = this.getEntityMetaData.bind(this);\n this.getInventoryData = this.getInventoryData.bind(this);\n this.onSelectStore = this.onSelectStore.bind(this);\n this.hideApiErrorDialog = this.hideApiErrorDialog.bind(this);\n this.onToggleChange = this.onToggleChange.bind(this);\n this.toggleIsRecurringProduct = this.toggleIsRecurringProduct.bind(this);\n this.showAllVariantsDeleteConfirmation =\n this.showAllVariantsDeleteConfirmation.bind(this);\n this.hideAllVariantsDeleteConfirmation =\n this.hideAllVariantsDeleteConfirmation.bind(this);\n this.removeAllVariant = this.removeAllVariant.bind(this);\n this.status = {\n \"Save as Draft\": \"DRAFT\",\n \"Submit for review\": \"PENDING\",\n };\n this.isMarketPlaceSeller = isMarketPlaceSeller();\n this.isInputEditable = isSellerSection();\n this.isMarketPlaceOwner = isMarketPlaceOwner();\n this.isSellerSection = isSellerSection();\n let urlParams = new URL(document.location).searchParams;\n let sellerId = parseInt(urlParams.get(\"sellerId\"));\n this.isOwnerCreatingRequest =\n this.isSellerSection &&\n this.isMarketPlaceOwner &&\n this.props.method === \"add\" &&\n Boolean(sellerId);\n this.isProductSubscriptionEnabled = isExtensionEnabled(\n \"SubscriptionProducts\"\n );\n }\n addVariant() {\n if (!this.state.variantName) {\n return;\n }\n\n const { productVariantProperties, variantFields } = this.state;\n const variantProperties = (\n productVariantProperties?.productProperties || []\n ).map((data, index) => {\n return {\n propertyId: data.id,\n value: variantFields[index],\n };\n });\n\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n if (Array.isArray(newState.values.variants)) {\n if (newState.values.variants?.length) {\n if (newState.values.variants.length === 1) {\n if (!newState.values.variants[0].name) {\n newState.values.variants[0].name = this.state.variantName;\n if (!isEmpty(variantProperties)) {\n newState.values.variants[0].properties = variantProperties;\n }\n newState.variantName = \"\";\n newState.variantFields = [];\n } else {\n newState.values.variants.push({\n name: this.state.variantName,\n ...(variantProperties.length > 0 && {\n properties: variantProperties,\n }),\n });\n newState.variantName = \"\";\n newState.variantFields = [];\n }\n } else {\n newState.values.variants.push({\n name: this.state.variantName,\n ...(variantProperties?.length > 0 && {\n properties: variantProperties,\n }),\n });\n newState.variantName = \"\";\n newState.variantFields = [];\n }\n }\n } else {\n newState.values.variants = [\n {\n name: this.state.variantName,\n ...(variantProperties?.length > 0 && {\n properties: variantProperties,\n }),\n },\n ];\n newState.variantName = \"\";\n newState.variantFields = [];\n }\n return newState;\n });\n }\n removeVariant(index) {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.values.variants.splice(index, 1);\n newState.validations.variants.splice(index, 1);\n if (newState.values.variants?.length === 1) {\n // Remove validation of 'variant name' field as it is no longer shown\n delete newState.validations.variants[0].name;\n } else if (!newState.values.variants?.length) {\n newState.values.variants.push({});\n }\n newState.selectedVariant = Math.max(prevState.selectedVariant - 1, 0);\n return newState;\n }, this.hideVariantDeleteConfirmation);\n }\n\n onToggleChange() {\n if (\n this.state.values &&\n this.state.values.variants &&\n this.state.values.variants.length > 1\n ) {\n this.setState({ deleteAllVariantsDialogShown: true });\n } else {\n this.setState({\n variantToggle: !this.state.variantToggle,\n });\n }\n }\n showAllVariantsDeleteConfirmation() {\n this.setState({\n deleteAllVariantsDialogShown: true,\n });\n }\n hideAllVariantsDeleteConfirmation() {\n this.setState({\n deleteAllVariantsDialogShown: false,\n });\n }\n removeAllVariant() {\n this.setState(\n (prevState) => {\n let newState = Object.assign({}, prevState);\n newState.values.variants.splice(1);\n newState.validations.variants.splice(1);\n if (this.props.method === \"add\") {\n if (\n newState.values.variants &&\n newState.values.variants.length === 1\n ) {\n delete newState.values.variants[0].name;\n }\n } else {\n if (\n newState.values.variants &&\n newState.values.variants.length === 1\n ) {\n if (!newState.values.variants[0].productId) {\n delete newState.values.variants[0].name;\n } else {\n delete newState.values.variants[0].name;\n delete newState.values.variants[0].fullName;\n delete newState.values.variants[0].id;\n delete newState.values.variants[0].productId;\n delete newState.values.variants[0].status;\n }\n }\n }\n return newState;\n },\n () => {\n this.setState({ variantToggle: false, selectedVariant: 0 });\n this.hideAllVariantsDeleteConfirmation();\n }\n );\n }\n showProductDeleteConfirmation(e) {\n e && e.preventDefault();\n this.setState({\n deleteProductDialogShown: true,\n });\n }\n hideProductDeleteConfirmation() {\n this.setState({\n deleteProductDialogShown: false,\n });\n }\n showVariantDeleteConfirmation() {\n this.setState({\n deleteVariantDialogShown: true,\n });\n }\n hideVariantDeleteConfirmation() {\n this.setState({\n deleteVariantDialogShown: false,\n });\n }\n hideApiErrorDialog() {\n this.setState({\n showErrorDialog: false,\n });\n }\n deleteProduct() {\n this.props.onDelete && this.props.onDelete();\n }\n beforeSubmit() {\n // Since variants are tabbed, when errors are there, navigate to the first tab with errors\n let index = -1;\n if (\n this.state.validations &&\n this.state.validations.variants &&\n this.state.validations.variants.length\n ) {\n index = this.state.validations.variants.findIndex(\n (variant) => !this.isFormValid(variant)\n );\n }\n if (index > -1) {\n this.setState({ selectedVariant: index });\n }\n }\n\n changeParamsDataType(param) {\n let params = Object.assign({}, param);\n if (params.discount !== undefined) {\n params.discount = parseFloat(params.discount);\n }\n if (params.mrp !== undefined) {\n params.mrp = parseFloat(params.mrp);\n }\n if (params.stock !== undefined) {\n params.stock = Number(params.stock);\n }\n if (!params.stock) {\n params.stock = 0;\n }\n if (\n params.unlimitedStock !== undefined &&\n params.unlimitedStock &&\n isExtensionEnabled(\"StockManagement\")\n ) {\n params.stock = 0;\n }\n if (params.status === undefined) {\n params.status = isExtensionEnabled(\"MultiStoreSupport\")\n ? \"HIDDEN\"\n : \"ENABLED\";\n }\n return params;\n }\n\n toggleIsRecurringProduct() {\n this.setState((prev) => ({\n isRecurringProduct: !prev.isRecurringProduct,\n }));\n }\n\n transformSubmit(formData) {\n const brandsEnabled = isExtensionEnabled(\"MultiBrandSupport\");\n const entityMetaDataEnabled = isExtensionEnabled(\"EntityMetaData\");\n let marginMetadata = null;\n // return null\n let modifiedData = Object.assign({}, formData);\n modifiedData.description = exportText(\n importText(this.state.values.description)\n );\n if (formData.categories) {\n modifiedData.primaryCategoryId = formData.categories[0].id;\n modifiedData.categoryIds = formData.categories.map(\n (category) => category.id\n );\n }\n delete modifiedData.primaryCategory;\n delete modifiedData.secondaryCategories;\n delete modifiedData.categories;\n\n if (\n !(\n isExtensionEnabled(\"MultiVariantSupport\") && this.state.variantToggle\n ) &&\n modifiedData.variants &&\n modifiedData.variants.length > 0\n ) {\n if (isExtensionEnabled(\"MarketPlace\")) {\n marginMetadata =\n modifiedData.variants?.[0]?.metaData[\"Minimum Profit Margin\"];\n }\n delete modifiedData.variants[0].name;\n delete modifiedData.variants[0].fullName;\n delete modifiedData.variants[0].metaData;\n Object.assign(modifiedData, modifiedData.variants[0]);\n // delete modifiedData.variants\n modifiedData.variants = [];\n if (modifiedData.hasOwnProperty(\"hasVariants\")) {\n modifiedData.hasVariants = 0;\n }\n }\n\n if (brandsEnabled && modifiedData.brand) {\n if (modifiedData.brand.name === modifiedData.brandName) {\n modifiedData.brandId = modifiedData.brand.id;\n delete modifiedData.brandName;\n }\n modifiedData.brandId = modifiedData.brand.id;\n }\n if (brandsEnabled && !modifiedData.brand) {\n modifiedData.brandId = \"\";\n }\n delete modifiedData.brand;\n if (modifiedData.tags) {\n modifiedData.tagIds = formData.tags.map((tag) => tag.id);\n delete modifiedData.tags;\n }\n if (modifiedData.metaData) {\n if (!entityMetaDataEnabled) {\n delete modifiedData.metaData;\n } else {\n let metaData = Object.assign({}, modifiedData.metaData);\n if (Object.keys(metaData)[0] === \"0\") {\n metaData = metaData[\"0\"];\n }\n Object.keys(metaData).forEach((key) => {\n if (metaData[key] === \"\") {\n delete metaData[key];\n }\n });\n if (Object.keys(metaData).length) {\n modifiedData.metaData = metaData;\n\n if (isExtensionEnabled(\"MarketPlace\")) {\n modifiedData.metaData[\"Minimum Profit Margin\"] = marginMetadata;\n }\n } else {\n delete modifiedData.metaData;\n }\n }\n }\n\n if (modifiedData?.variants?.length) {\n (modifiedData?.variants || []).forEach((variant) => {\n if (!entityMetaDataEnabled) {\n delete variant?.metaData;\n }\n });\n }\n modifiedData.soldByWeight = modifiedData.soldByWeight ? 1 : 0;\n modifiedData.handlingDays = modifiedData.handlingDays || 0;\n modifiedData.bulkOrderThreshold = modifiedData.bulkOrderThreshold || 0;\n delete modifiedData.madeUp;\n return modifiedData;\n }\n\n pendingActionAddProduct = (id) => {\n const api = new API({ url: `/account-service/pending-action/${id}` });\n api\n .put({ status: \"COMPLETED\" })\n .then((response) => {\n unset(\"AddProductPendingAction\");\n })\n .catch((error) => {\n console.error(error);\n throw error;\n });\n };\n\n onSubmitOwnerRequest(values, storeData, statusKey) {\n const statusMap = {\n Approve: \"APPROVED\",\n Reject: \"REJECTED\",\n };\n let urlParams = new URL(document.location).searchParams;\n let requestId = parseInt(urlParams.get(\"requestId\"));\n const putApi = new API({\n url: `/catalogue-service/seller-product-request/${requestId}/approval`,\n });\n const { id, variants } = values;\n if (variants && variants.length > 1) {\n // to be removed in future after correcting DB design\n this.setState({\n submitting: false,\n });\n return;\n }\n const storeId = Object.keys(storeData[0]?.product)[0];\n const { sellingPrice, sellerDiscount } = storeData[0]?.product[storeId];\n\n const params = {\n organizationId: getSession()?.organization?.id?.toString(),\n storeId: Number(storeId),\n status: statusMap[statusKey],\n description: exportText(importText(this.state.values.description)),\n shortDescription: values.metaData?.[\"Short Description\"],\n discount: sellerDiscount,\n sellingPrice,\n images: values.variants[0]?.images || [],\n productId: id,\n rejectionReason: this.state.rejectionReason,\n };\n\n this.submitApprovalStatus = (newParams) => {\n putApi\n .put({ ...params, ...newParams })\n .then((response) => {\n this.props.onCancel();\n })\n .catch((error) => {\n if (error.code === 401 || error.code === 403) {\n throw error;\n }\n this.setState({\n apiError: error.message,\n showErrorDialog: true,\n });\n console.error(error);\n })\n .finally(() => {\n this.setState({ providersLoading: false, submitting: false });\n });\n };\n\n if (statusMap[statusKey] === \"REJECTED\" && !this.state.rejectionReason) {\n this.state.showRejectReasonForm = true;\n return;\n }\n\n this.submitApprovalStatus();\n }\n\n onSubmitRequest = (values, storeData, statusKey) => {\n const { isMinimumProfitMargin } = this.state;\n const { id, variants } = values;\n\n const requestId = new URLSearchParams(window.location.search).get(\n \"requestId\"\n );\n\n const isAddProductPage = window.location.pathname\n .split(\"/\")\n .includes(\"add-product\");\n const isApproved = this.state?.currentRequestStatus === \"APPROVED\";\n\n const apiUrl =\n isApproved || isAddProductPage\n ? `/catalogue-service/seller-product-request`\n : `/catalogue-service/seller-product-request/${requestId}`;\n\n const apiMethod = isApproved || isAddProductPage ? \"post\" : \"put\";\n\n const api = new API({ url: apiUrl });\n\n if (\n isMinimumProfitMargin ||\n (variants && variants.length > 1) ||\n (apiMethod === \"put\" && !requestId)\n ) {\n // Added for WSI, future after correcting DB design\n this.setState({\n submitting: false,\n });\n return;\n }\n\n const storeId = Object.keys(storeData[0]?.product)[0];\n const { sellingPrice, sellerDiscount } = storeData[0]?.product[storeId];\n const params = {\n organizationId: getSession()?.organization?.id?.toString(),\n storeId: Number(storeId),\n status: this.status[statusKey],\n description: exportText(importText(this.state.values.description)),\n shortDescription: values.metaData?.[\"Short Description\"],\n discount: sellerDiscount,\n sellingPrice,\n images: values.variants[0]?.images || [],\n productId: id,\n };\n if (this.isOwnerCreatingRequest) {\n let urlParams = new URL(document.location).searchParams;\n let sellerId = parseInt(urlParams.get(\"sellerId\"));\n params.sellerID = sellerId + \"\";\n params.status = \"PENDING\";\n }\n api[apiMethod](params)\n .then(() => {\n const message =\n params.status === \"PENDING\"\n ? \"product.review.submission.message\"\n : \"product.draft.submission.message\";\n this.setState({\n showReviewSubmissionDialog: true,\n requestSubmissionMessage: message,\n });\n })\n .catch((error) => {\n if (error.code === 401 || error.code === 403) throw error;\n this.setState({\n apiError: error.message,\n showErrorDialog: true,\n });\n console.error(error);\n })\n .finally(() => {\n this.setState({ submitting: false });\n });\n };\n\n async onSubmit(values, storeData) {\n // this.props.onSubmit(values)\n const putApi = new API({ url: `/catalogue-service/product/${values.id}` });\n const postApi = new API({ url: `/catalogue-service/product` });\n const inventoryApi = new API({ url: `/inventory-service/item` });\n\n const param = this.transformSubmit(values);\n const hasBrands = this.props.options && this.props.options.brands;\n const hasTags = this.props.options && this.props.options.tags;\n function updateInventoryAlert(productId, threshold) {\n const inventoryPutApi = new API({\n url: `/inventory-service/item/${productId}/alert`,\n });\n return inventoryPutApi.put({ threshold }).catch((error) => {\n console.error(error);\n });\n }\n if (this.props.method === \"add\") {\n if (this.props.options?.masterCatelogue) {\n if (!hasTags) {\n delete param.tagIds;\n }\n if (!hasBrands) {\n param.brandId = \"\";\n }\n if (param.variants && param.variants.length > 0) {\n param.variants.forEach((variant) => {\n delete variant.id;\n });\n }\n param.clientItemId = String(param.id);\n delete param.id;\n delete param.createdAt;\n delete param.productId;\n }\n postApi\n .post(param)\n .then(async (response) => {\n if (get(\"AddProductPendingAction\")) {\n this.pendingActionAddProduct(\"PRODUCT_ADDITION\");\n }\n\n if (storeData.length === 1 && storeData[0].product) {\n let data = storeData[0].product;\n await Promise.all(\n Object.keys(data).map(async (storeId) => {\n let params = data[storeId];\n params = this.changeParamsDataType(params);\n if (\n (params.mrp !== 0 && !params.mrp) ||\n (params.stock !== 0 && !params.stock)\n ) {\n console.warn(\"Invalid params\", params);\n return;\n }\n params.productId = response.data?.product?.id;\n params.storeId = Number(storeId);\n if (isExtensionEnabled(\"MarketPlace\")) {\n const dealerPrice = params?.dealerPrice;\n const mrp = params?.mrp;\n const discount = mrp - dealerPrice;\n params.discount = discount;\n delete params?.dealerPrice;\n }\n try {\n await inventoryApi.post(params);\n } catch (error) {\n console.error(error);\n if (error.code === 401 || error.code === 403) {\n throw error;\n }\n this.setState({\n apiError: error.message,\n showErrorDialog: true,\n });\n }\n })\n );\n if (isMarketPlaceOwner()) {\n const { variants } = response.data?.product;\n const productId = response.data?.product?.id;\n this.handlePermissableSellerSubmit(\n values.permissableSellers,\n productId\n );\n\n if (!variants || (variants && variants?.length === 0)) {\n await updateInventoryAlert(productId, Number(param?.threshold));\n } else {\n const updatePromises = variants.map((variant) => {\n const matchingVariant = param.variants.find(\n (v) => v.id === variant.id\n );\n return updateInventoryAlert(\n variant.id,\n Number(matchingVariant?.threshold)\n );\n });\n await Promise.all(updatePromises);\n }\n }\n } else {\n await Promise.all(\n storeData.map(async (variant) => {\n await Promise.all(\n Object.keys(variant).map(async (variantName) => {\n if (!variantName) return;\n\n if (variant[variantName]) {\n await Promise.all(\n Object.keys(variant[variantName]).map(\n async (storeId) => {\n let params = variant[variantName][storeId];\n const foundVariant =\n response.data?.product?.variants?.find(\n (v) => v.name === variantName\n );\n params.productId = foundVariant\n ? foundVariant.id\n : null;\n params.storeId = Number(storeId);\n params = this.changeParamsDataType(params);\n if (isExtensionEnabled(\"MarketPlace\")) {\n const dealerPrice = params?.dealerPrice;\n const mrp = params?.mrp;\n const discount = mrp - dealerPrice;\n params.discount = discount;\n delete params?.dealerPrice;\n }\n if (\n (params.mrp !== 0 && !params.mrp) ||\n (params.stock !== 0 && !params.stock)\n ) {\n console.warn(\"Invalid params\", params);\n return;\n }\n try {\n await inventoryApi.post(params);\n } catch (error) {\n console.error(error);\n if (error.code === 401 || error.code === 403) {\n throw error;\n }\n this.setState({\n apiError: error.message,\n showErrorDialog: true,\n });\n }\n }\n )\n );\n }\n })\n );\n })\n );\n if (isMarketPlaceOwner()) {\n const { variants } = response.data?.product;\n const productId = response.data?.product?.id;\n this.handlePermissableSellerSubmit(\n values.permissableSellers,\n productId\n );\n\n if (variants || (variants && variants?.length === 0)) {\n await updateInventoryAlert(productId, Number(param?.threshold));\n } else {\n const updatePromises = variants.map((variant) => {\n const matchingVariant = param.variants.find(\n (v) => v.id === variant.id\n );\n return updateInventoryAlert(\n variant.id,\n Number(matchingVariant?.threshold)\n );\n });\n await Promise.all(updatePromises);\n }\n }\n }\n\n if (this.isProductSubscriptionEnabled) {\n const productId = response?.data?.product?.id;\n const productSubscriptionApi = new API({\n url: `/catalogue-service/product/${productId}/subscription`,\n });\n const formattedData = convertToISODuration(\n values.purchaseFrequencyData\n );\n const params = { frequency: formattedData };\n await productSubscriptionApi\n .put(params)\n .then(() => {})\n .catch((error) => {\n console.error(error);\n });\n }\n\n if (param.status === \"PENDING\") {\n this.setState({\n showReviewSubmissionDialog: true,\n });\n } else {\n this.props.onCancel();\n }\n })\n .catch((error) => {\n console.error(error);\n if (error.code === 401 || error.code === 403) {\n throw error;\n }\n this.setState({\n apiError: error.message,\n showErrorDialog: true,\n submitting: false,\n });\n });\n } else {\n param.variants &&\n param.variants.forEach((variant) => {\n if (variant.id && !variant.productId) {\n delete variant.id;\n }\n });\n\n try {\n const response = await putApi.put(param);\n if (get(\"AddProductPendingAction\")) {\n this.pendingActionAddProduct(\"PRODUCT_ADDITION\");\n }\n await Promise.all(\n storeData.map(async (variant) => {\n await Promise.all(\n Object.keys(variant).map(async (variantName) => {\n if (variant[variantName]) {\n await Promise.all(\n Object.keys(variant[variantName]).map(async (storeId) => {\n let params = variant[variantName][storeId];\n if (params.productId) {\n params.productId = variant.id;\n } else if (\n !response.data?.product?.variants ||\n (response.data.product?.variants &&\n response.data.product.variants?.length === 0)\n ) {\n params.productId = response.data?.product?.id;\n } else {\n const foundVariant =\n response.data.product?.variants?.find(\n (v) => v.name === variantName\n );\n params.productId = foundVariant\n ? foundVariant.id\n : null;\n }\n\n params.storeId = Number(storeId);\n params = this.changeParamsDataType(params);\n if (isExtensionEnabled(\"MarketPlace\")) {\n const dealerPrice = params?.dealerPrice;\n const mrp = params?.mrp;\n const discount = mrp - dealerPrice;\n params.discount = discount;\n delete params?.dealerPrice;\n }\n if (\n (params.mrp !== 0 && !params.mrp) ||\n (params.stock !== 0 && !params.stock)\n ) {\n console.error(\"Invalid params\", params);\n return;\n }\n\n if (!isExtensionEnabled(\"StockManagement\")) {\n params.unlimitedStock = false;\n }\n\n try {\n await inventoryApi.post(params);\n } catch (error) {\n console.error(error);\n if (error.code === 401 || error.code === 403) {\n throw error;\n }\n this.setState({\n apiError: error.message,\n showErrorDialog: true,\n });\n }\n })\n );\n }\n })\n );\n })\n );\n\n if (isMarketPlaceOwner()) {\n const { variants } = response.data?.product;\n const productId = response.data?.product?.id;\n this.handlePermissableSellerSubmit(\n values.permissableSellers,\n productId\n );\n\n if (!variants || (variants && variants?.length === 0)) {\n await updateInventoryAlert(productId, Number(param?.threshold));\n } else {\n const updatePromises = variants.map((variant) => {\n const matchingVariant = param.variants.find(\n (v) => v.id === variant.id\n );\n return updateInventoryAlert(\n variant.id,\n Number(matchingVariant?.threshold)\n );\n });\n await Promise.all(updatePromises);\n }\n }\n\n this.setState({ submitting: false });\n\n if (this.isProductSubscriptionEnabled) {\n const { id, variants = [] } = values;\n const productId = variants.length > 0 ? variants[0]?.id : id;\n if (productId) {\n const productSubscriptionApi = new API({\n url: `/catalogue-service/product/${productId}/subscription`,\n });\n const formattedData = convertToISODuration(\n values.purchaseFrequencyData\n );\n const params = { frequency: formattedData };\n await productSubscriptionApi\n .put(params)\n .then(() => {})\n .catch((error) => {\n console.error(error);\n });\n }\n }\n\n if (param.status === \"PENDING\") {\n this.setState({\n showReviewSubmissionDialog: true,\n });\n } else {\n this.props.onCancel();\n }\n } catch (error) {\n console.error(error);\n if (error.code === 401 || error.code === 403) {\n throw error;\n }\n this.setState({\n apiError: error.message,\n showErrorDialog: true,\n submitting: false,\n });\n }\n }\n }\n\n handlePermissableSellerSubmit = (permissableSellers = null, id) => {\n if (!permissableSellers) return;\n\n const addedSellers = this.state?.permissableSellers || [];\n const permissablePayload = permissableSellers.map((seller) => ({\n sellerID: seller.id,\n status: \"ENABLED\",\n }));\n\n const existingSellerIDs = new Set(\n permissablePayload.map((item) => item.sellerID)\n );\n\n addedSellers.forEach((seller) => {\n if (!existingSellerIDs.has(seller.id)) {\n permissablePayload.push({ sellerID: seller.id, status: \"DISABLED\" });\n }\n });\n\n const permissableApi = new API({\n url: `/catalogue-service/product/${id}/permissible-seller`,\n });\n\n permissableApi\n .put({ permissibleProductSeller: permissablePayload })\n .then((res) => {})\n .catch((error) => {\n console.error(error);\n });\n };\n\n _submitHandler(e) {\n e && e.preventDefault();\n this.beforeSubmit();\n this.setState({\n pressedSubmitWithCurrentData: true,\n submitting: true,\n });\n let isValid = this.isFormValid();\n let storeData = [];\n\n if (isValid) {\n const values = JSON.parse(JSON.stringify(this.state.values));\n values.variants &&\n values.variants.forEach((variant) => {\n if (variant.name) {\n storeData.push({ [variant.name]: variant.storeSpecificData });\n }\n if (!variant.name) {\n storeData.push({ product: variant.storeSpecificData });\n }\n delete variant.storeSpecificData;\n });\n\n // submission function\n if (this.isMarketPlaceSeller || this.isOwnerCreatingRequest) {\n this.onSubmitRequest(\n values,\n storeData,\n e?.nativeEvent?.submitter?.value\n );\n } else if (this.isMarketPlaceOwner && this.isSellerSection()) {\n this.onSubmitOwnerRequest(\n values,\n storeData,\n e?.nativeEvent?.submitter?.value\n );\n } else {\n this.onSubmit(values, storeData);\n }\n } else {\n this.setState({ submitting: false });\n }\n }\n getStores() {\n if (this.props.options && this.props.options.multipleStores) {\n this.setState({\n loadingStores: true,\n failedLoadingStores: false,\n });\n this.props.options\n .getStores()\n .then((stores) => {\n this.setState(\n (prevState) => {\n let newState = Object.assign({}, prevState, {\n stores,\n loadingStores: false,\n failedLoadingStores: false,\n });\n return newState;\n },\n () => {\n // const location = window.location.pathname.split(\"/\");\n if (window.location.pathname.split(\"/\").includes(\"add\")) {\n if (this.props.options?.masterCatelogue && this.state.stores) {\n const defaultStore = this.state.stores.filter(\n (store) => store.default === true\n );\n this.getInventoryData(defaultStore[0]?.id);\n }\n return null;\n }\n (this.state.stores || [{ id: getDefaultStore().storeId }]).map(\n (store) =>\n (store.hasPicking || store.hasSelfCheckout) &&\n this.getInventoryData(store.id)\n );\n }\n );\n })\n .catch((error) => {\n this.setState({\n loadingStores: false,\n failedLoadingStores: true,\n });\n console.error(error);\n });\n } else {\n this.setState(\n (prevState) => {\n let newState = Object.assign({}, prevState, {\n stores: getStores(),\n });\n return newState;\n },\n () => {\n if (this.props.method === \"add\") {\n if (this.props.options?.masterCatelogue && this.state.stores) {\n const defaultStore = this.state.stores.filter(\n (store) => store.default === true\n );\n this.getInventoryData(defaultStore[0]?.id);\n }\n return null;\n }\n this.getInventoryData(get(\"store\"));\n }\n );\n }\n }\n\n onSelectStore(storeId) {\n this.setState({ selectedStore: storeId });\n }\n\n handleUpdateMetaData = (metaValue, metaResponse) => {\n let metaData = metaValue;\n if (!metaData) {\n metaData = {};\n metaResponse &&\n Object.keys(metaResponse).forEach((mt) => {\n metaData[mt] = \"\";\n });\n metaValue = {\n ...metaData,\n };\n } else {\n let newMetaData = {};\n metaResponse &&\n Object.keys(metaResponse).forEach((mt) => {\n newMetaData[mt] = metaData[mt] || \"\";\n });\n metaValue = {\n ...metaData,\n };\n }\n return metaValue;\n };\n\n getEntityMetaData() {\n let { props } = this;\n if (\n props.options &&\n props.options.entityMetaData &&\n props.options.getProductMetaData\n ) {\n this.setState({\n loadingProductMetaData: true,\n });\n props.options.getProductMetaData().then((metaDataResponse) => {\n const productMetaData = metaDataResponse.product;\n const variantMetaData = metaDataResponse?.variant;\n this.productMetaDataWithType = metaDataResponse;\n\n if (isExtensionEnabled(\"MarketPlace\")) {\n this.marketPlaceVariantMetadata = {\n \"Minimum Profit Margin\":\n metaDataResponse.product?.[\"Minimum Profit Margin\"],\n };\n this.marketPlaceProductMetadata = {\n \"Short Description\":\n metaDataResponse.product?.[\"Short Description\"],\n };\n if (variantMetaData?.metaData)\n variantMetaData[\"Minimum Profit Margin\"] =\n metaDataResponse.product[\"Minimum Profit Margin\"];\n\n delete productMetaData?.[\"Minimum Profit Margin\"];\n delete productMetaData?.[\"Short Description\"];\n }\n\n let values = Object.assign({}, this.state.values);\n\n values.metaData = this.handleUpdateMetaData(\n values.metaData,\n productMetaData\n );\n\n if (values?.variants?.length) {\n values.variants.forEach((variant, index) => {\n variant.metaData = this.handleUpdateMetaData(\n variant?.metaData,\n variantMetaData\n );\n });\n }\n\n this.setState({\n values,\n loadingProductMetaData: false,\n });\n });\n }\n }\n\n getInventoryData(storeId) {\n const variants = Object.assign({}, this.state.values.variants);\n let ids = [];\n Object.values(variants).forEach((variant) => {\n ids.push(variant.id);\n });\n this.props.options.getInventoryData &&\n this.props.options.getInventoryData(storeId, ids).then(\n (response) => {\n // let variants = this.state.values && this.state.values.variants && Object.assign({}, this.state.values.variants)\n let newValues = this.state.values && cloneDeep(this.state.values);\n let variants = newValues.variants;\n variants &&\n variants?.length === response?.data?.length &&\n variants.forEach((variant, index) => {\n variant.storeSpecificData = variant.storeSpecificData || {};\n variant.storeSpecificData[storeId] = response.data?.[index] || {\n location: {},\n tax: {},\n };\n if (isExtensionEnabled(\"MarketPlace\")) {\n const mrp = variant.storeSpecificData[storeId]?.mrp;\n const discount = variant.storeSpecificData[storeId]?.discount;\n const dealerPrice = mrp - discount;\n variant.storeSpecificData[storeId].dealerPrice = dealerPrice;\n }\n });\n this.setState({ values: newValues });\n },\n (error) => {\n this.setState({ error });\n }\n );\n }\n\n updateItemData = (item) => {\n this.props.options\n .updateItem(item.url, item.name)\n .then((response) => {\n const dataItem = response?.data?.[item.keyName];\n\n if (item.keyName === \"brand\") {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.values.brand = dataItem;\n return newState;\n });\n } else {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.values[item.stateKeyName] = [dataItem];\n return newState;\n });\n }\n })\n .catch((error) => {\n console.error(error.message);\n });\n };\n\n handleVariantName = () => {\n const { variantFields } = this.state;\n const filteredName = variantFields.filter((str) => str !== undefined);\n const concatinatedName = filteredName.join(\"-\");\n this.setState({\n variantName: concatinatedName,\n });\n };\n\n handleCancelEditVariant = () => {\n this.setState(\n (prevState) => {\n let newState = Object.assign({}, prevState);\n newState.values.variants = this.state.variants;\n newState.values.variants[this.state.selectedVariant].name =\n this.state.cancelEditVariantName;\n return newState;\n },\n () => {\n this.setState({\n editVariant: !this.state.editVariant,\n });\n }\n );\n };\n handleEditVariantName = () => {\n const {\n editVariantFields,\n selectedVariant,\n productVariantProperties,\n values,\n } = this.state;\n\n if (isEmpty(productVariantProperties?.productProperties)) {\n this.setState(\n (prevState) => {\n let newState = Object.assign({}, prevState);\n newState.values.variants = this.state.variants;\n return newState; // should return newState instead of prevState\n },\n () => {\n this.setState({\n editVariant: !this.state.editVariant,\n });\n }\n );\n } else {\n const filteredName = editVariantFields.filter((str) => str !== undefined);\n const concatinatedName = filteredName.join(\"-\");\n\n const variantProperties = (\n productVariantProperties?.productProperties || []\n ).map((data, index) => {\n return {\n id: data.variantId,\n propertyId: data.id,\n value: editVariantFields[index],\n };\n });\n\n let valueCopy = cloneDeep(values);\n valueCopy.variants[selectedVariant].name = concatinatedName;\n valueCopy.variants[selectedVariant].properties = variantProperties;\n\n this.setState({\n values: valueCopy,\n editVariant: !this.state.editVariant, // removed second call to setState\n editVariantFields: [],\n });\n }\n };\n\n handleVariantFieldChange = (value, index) => {\n this.setState((prevState) => {\n const variantFields = [...prevState.variantFields];\n variantFields[index] = value;\n return { variantFields };\n }, this.handleVariantName);\n };\n\n handleEditVariantFieldChange = (value, index) => {\n if (this.state.editVariantFields) {\n this.setState((prevState) => {\n const editVariantFields = [...prevState.editVariantFields];\n editVariantFields[index] = value;\n return { editVariantFields };\n }, this.handleVariantName);\n }\n };\n\n getItemData = () => {\n const brandName = this.props.value?.brand?.name;\n const categoryName = this.props.value?.categories?.[0]?.name;\n const tagName = this.props.value?.tags?.[0]?.name;\n const hasBrands = this.props.options && this.props.options.brands;\n const hasTags = this.props.options && this.props.options.tags;\n\n const itemList = [\n {\n url: \"/catalogue-service/category\",\n name: categoryName,\n keyName: \"category\",\n stateKeyName: \"categories\",\n enable: true,\n },\n {\n url: \"/catalogue-service/tag\",\n name: tagName,\n keyName: \"tag\",\n stateKeyName: \"tags\",\n enable: hasTags,\n },\n {\n url: \"/catalogue-service/brand\",\n name: brandName,\n keyName: \"brand\",\n stateKeyName: \"brand\",\n enable: hasBrands,\n },\n ];\n itemList\n .filter((item) => item.enable)\n .forEach((item) => {\n item.name &&\n this.props.options\n .getItem(item.url, item.name)\n .then((response) => {\n const dataList = response?.data?.[item.keyName]?.filter(\n (data) => data.name === item.name\n );\n\n if (dataList.length) {\n if (item.keyName === \"brand\") {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.values.brand = dataList[0];\n return newState;\n });\n } else {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.values[item.stateKeyName] = dataList;\n return newState;\n });\n }\n } else {\n this.updateItemData(item);\n }\n })\n .catch((error) => {\n console.error(error.message);\n });\n });\n };\n\n fetchThreshold = async (id) => {\n try {\n const response = await this.getInventoryAlert(id).get();\n return response?.data?.threshold;\n } catch (error) {\n console.error(error);\n return null;\n }\n };\n\n getInventoryAlert = (productId) => {\n const inventoryPutApi = new API({\n url: `/inventory-service/item/${productId}/alert`,\n });\n return inventoryPutApi;\n };\n\n fetchAllThresholds = async (valueFromProps) => {\n const productIds =\n valueFromProps.variants.length === 0\n ? [valueFromProps.id]\n : valueFromProps.variants.map((variant) => variant.id);\n\n try {\n const thresholds = await Promise.all(\n productIds.map(async (id) => await this.fetchThreshold(id))\n );\n\n const thresholdsByVariantId = {};\n\n productIds.forEach((id, index) => {\n thresholdsByVariantId[id] = thresholds?.[index];\n });\n\n // Update thresholds inside the variants array\n const updatedVariants = valueFromProps.variants.map((variant) => ({\n ...variant,\n threshold: thresholdsByVariantId[variant.id],\n }));\n\n this.setState((prevState) => ({\n values: {\n ...prevState.values,\n variants: updatedVariants,\n },\n }));\n } catch (error) {\n console.error(\"Error fetching thresholds:\", error);\n }\n };\n\n getRefactorPermissableSellers = (response = []) => {\n let permissibleSellers = [];\n permissibleSellers = response?.map((seller) => {\n return {\n id: seller.sellerId,\n name: seller.name,\n };\n });\n return permissibleSellers;\n };\n\n getPermissableSellers = () => {\n const productId = this.state.values.id;\n if (productId) {\n const permissableApi = new API({\n url: `/catalogue-service/permissible-seller?productId=${productId}&status=ENABLED`,\n });\n permissableApi\n .get()\n .then((response) => {\n let values = Object.assign({}, this.state.values);\n const permissableSellers = this.getRefactorPermissableSellers(\n response?.data?.permissibleSellers\n );\n values.permissableSellers = permissableSellers;\n this.setState({\n values,\n permissableSellers,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n };\n\n fetchSellerRequestData = () => {\n const requestId = new URLSearchParams(window.location.search).get(\n \"requestId\"\n );\n\n if (!requestId) return;\n\n const api = new API({\n url: `/catalogue-service/seller-product-request/${parseInt(requestId)}`,\n });\n\n api\n .get()\n .then(({ data: { request } }) => {\n const {\n images: imagesArr,\n description,\n shortDescription,\n sellingPrice,\n discount,\n status,\n } = request;\n\n if (this.isSellerSection()) {\n this.setState(\n (prevState) => {\n const updatedVariants = prevState.values.variants.map(\n (item, index) => {\n if (index !== 0) return item;\n\n const storeKey = Object.keys(item.storeSpecificData)[0];\n const storeData = item.storeSpecificData[storeKey];\n\n return {\n ...item,\n images: imagesArr ?? item.images,\n storeSpecificData: {\n ...item.storeSpecificData,\n [storeKey]: {\n ...storeData,\n sellingPrice: sellingPrice,\n sellerDiscount: discount,\n },\n },\n };\n }\n );\n\n return {\n currentRequestStatus: status,\n ...prevState,\n values: {\n ...prevState.values,\n sellerName: request?.sellerName,\n description: description ?? prevState.values.description,\n variants: updatedVariants,\n metaData: {\n ...prevState.values.metaData,\n \"Short Description\":\n shortDescription ??\n prevState?.values?.metaData?.[\"Short Description\"],\n },\n },\n };\n },\n () => {\n const storeKey = Object.keys(\n this.state.values.variants[0].storeSpecificData\n )[0];\n this.handleSellingAndProfitMargin(0, storeKey);\n }\n );\n }\n })\n .catch(console.error);\n };\n\n fetchSubscriptionData = () => {\n const { id, variants = [] } = this.state.values;\n const productId = variants.length > 0 ? variants[0]?.id : id;\n\n const productSubscriptionApi = new API({\n url: `/catalogue-service/product/${productId}/subscription`,\n });\n\n productSubscriptionApi\n .get()\n .then((resp) => {\n const formattedTime = parseISODuration(\n resp.data.productSubscription?.frequency\n );\n const updatedValues = {\n ...this.state.values,\n purchaseFrequencyData: formattedTime,\n };\n\n this.setState({\n isRecurringProduct: true,\n values: updatedValues,\n });\n })\n .catch((error) => {\n console.error(\"Error fetching subscription data:\", error);\n });\n };\n\n async componentDidMount() {\n const location = window.location.pathname.split(\"/\");\n let urlParams = new URL(document.location).searchParams;\n let requestId = parseInt(urlParams.get(\"requestId\"));\n if (isMarketPlaceOwner() && !isSellerSection()) {\n this.getPermissableSellers();\n }\n const valueFromProps = this.props.value;\n if (\n isExtensionEnabled(\"MarketPlace\") &&\n (this.props.method === \"edit\" || location.includes(\"add-product\")) &&\n valueFromProps\n ) {\n await this.fetchAllThresholds(valueFromProps);\n }\n let inventoryConfig = new API({ url: `/config-service/config/inventory` });\n inventoryConfig\n .get()\n .then((response) => {\n let taxArray = response.data?.inventory?.taxes || [];\n this.setState({ taxArray });\n if (response.data?.inventory?.taxes === null) {\n const country = new API({\n url: `/account-service/country?isoCode=${\n getSession().organization.countryCode\n }`,\n });\n country.get(\"\", { \"X-API-VERSION\": 2 }).then((response) => {\n this.setState({ taxes: response.data?.country?.[0]?.tax });\n });\n }\n })\n .catch((error) => {\n console.error(error);\n });\n\n if (isExtensionEnabled(\"MultiVariantSupport\")) {\n const getProductProperties = new API({\n url: `/catalogue-service/product-properties`,\n });\n getProductProperties\n .get()\n .then((response) => {\n this.setState({\n productVariantProperties: response.data,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n\n if (\n this.props.options?.masterCatelogue &&\n this.props.method === \"add\" &&\n this.props.value\n ) {\n // get the category, tag, brand for state.values\n // as masterCatelogue has different id these\n this.getItemData();\n }\n if (\n this.props.method === \"edit\" &&\n valueFromProps &&\n valueFromProps.variants\n ) {\n if (\n valueFromProps.variants.length === 1 &&\n valueFromProps.variants[0].name\n ) {\n this.setState({ variantToggle: true });\n }\n if (valueFromProps.variants.length > 1) {\n this.setState({ variantToggle: true });\n }\n }\n this.getStores();\n this.getEntityMetaData();\n let tabs = {\n description: getMessage(\"product.form.description.heading\"),\n otherDetails: getMessage(\"product.form.other.details.heading\"),\n };\n if (!isExtensionEnabled(\"EntityMetaData\")) {\n delete tabs.otherDetails;\n }\n this.setState({ selected: tabs.description, tabs: tabs });\n const supportVariants =\n (this.props.options &&\n this.props.options.variants &&\n this.props.method === \"add\") ||\n (this.props.options &&\n this.props.options.variants &&\n this.props.value &&\n this.props.value.variants &&\n this.props.value.variants.length > 0);\n if (\n supportVariants &&\n this.props.method === \"edit\" &&\n this.getState([\"variants\"]).length > 1\n ) {\n this.setState({ variantToggle: true });\n }\n // this.getInventoryData(getDefaultStore().storeId)\n const storeId = get(\"store\");\n if (storeId) {\n this.updateState(\n [\"variants\", 0, \"storeSpecificData\", storeId, \"status\"],\n \"ENABLED\"\n );\n }\n if (isSellerSection() && requestId) {\n this.fetchSellerRequestData();\n }\n if (this.isProductSubscriptionEnabled && this.props.method === \"edit\") {\n this.fetchSubscriptionData();\n }\n }\n\n handleEditBtnClick = () => {\n const { productVariantProperties, selectedVariant, values } = this.state;\n const oldVariant =\n this.state.values?.variants[this.state.selectedVariant]?.name;\n this.setState({\n cancelEditVariantName: oldVariant,\n });\n if (isEmpty(productVariantProperties?.productProperties)) {\n this.setState({\n editVariant: !this.state.editVariant,\n variants: this.state.values.variants,\n });\n return;\n }\n\n const { productProperties } = productVariantProperties;\n const selectedVariantObj = values.variants[selectedVariant];\n const { name } = selectedVariantObj;\n const variantNameArray = name?.split(\"-\");\n\n const formattedName = variantNameArray?.filter(\n (ele, index) => index < productProperties.length\n );\n\n this.setState(\n {\n editVariantFields: formattedName,\n },\n this.setState({\n editVariant: !this.state.editVariant,\n })\n );\n };\n\n handleSellingPrice = (e, variantIndex, storeId, type) => {\n const value = e;\n this.setState(\n (prevState) => {\n const newState = { ...prevState };\n const newVariant = [...newState.values.variants];\n const storeSpecificData = {\n ...newVariant[variantIndex].storeSpecificData,\n };\n const storeData = { ...storeSpecificData[storeId] };\n storeData[type] = value;\n\n storeSpecificData[storeId] = storeData;\n newVariant[variantIndex].storeSpecificData = storeSpecificData;\n newState.values.variants = newVariant;\n return newState;\n },\n () => {\n this.handleSellingAndProfitMargin(variantIndex, storeId);\n }\n );\n };\n\n handleSellingAndProfitMargin = (variantIndex, storeId) => {\n const sellingPrice =\n this.state.values.variants[variantIndex].storeSpecificData[storeId]\n .sellingPrice || 0;\n const sellerDiscount =\n this.state.values.variants[variantIndex].storeSpecificData[storeId]\n .sellerDiscount || 0;\n const sellingMargin = sellingPrice - sellerDiscount;\n const mrp =\n this.state.values.variants[variantIndex].storeSpecificData[storeId].mrp ||\n 0;\n const discount =\n this.state.values.variants[variantIndex].storeSpecificData[storeId]\n .discount || 0;\n const dealerPrice = mrp - discount;\n const profitMargin = ((sellingMargin - dealerPrice) / dealerPrice) * 100;\n const minimumProfitMargin =\n this.state.values.variants[variantIndex].metaData[\n \"Minimum Profit Margin\"\n ];\n this.setState({\n profitMargin: profitMargin.toFixed(2),\n isMinimumProfitMargin: Number(profitMargin) < Number(minimumProfitMargin),\n sellingMargin,\n });\n };\n\n render() {\n const { SubmitButton, CancelButton } = this.buttons;\n const { Form } = this.components;\n // Allow user to create more variants if the product already had variants\n const supportVariants =\n (this.props.options &&\n this.props.options.variants &&\n this.props.method === \"add\") ||\n (this.props.options &&\n this.props.options.variants &&\n this.props.value &&\n this.props.value.variants &&\n this.props.value.variants.length > 0);\n const booleanStock =\n this.props.options &&\n this.props.options.stockStrategy === STOCK_STRATEGIES.BOOLEAN;\n // const hasMultipleStores = this.props.options && this.props.options.multipleStores\n const hasTags = this.props.options && this.props.options.tags;\n const hasInstoreProcessing =\n this.props.options && this.props.options.inStoreProcessing;\n const hasSoldByWeight =\n this.props.options && this.props.options.soldByWeight;\n const preOrderSupport =\n this.props.options && this.props.options.preOrderSupport;\n const bulkOrderSuppport =\n this.props.options && this.props.options.bulkOrderSuppport;\n const namepattern = \"[a-zA-Z0-9\\\\s]+([0-9]+\\\\s+(kg|g|gm))$\";\n const variantpattern = \"([a-zA-Z0-9]\\\\s*)*([0-9]+\\\\s+(kg|g|gm))$\";\n const namePattern =\n this.state.values.soldByWeight && !this.state.values.variants\n ? namepattern\n : \".*\";\n const variantPattern = this.state.values.soldByWeight\n ? variantpattern\n : \".*\";\n const enabledSoldByWeight = this.state.values.soldByWeight;\n let stores = this.state.stores && this.state.stores.slice();\n stores =\n stores &&\n stores.filter((store) => store.hasPicking || store.hasSelfCheckout);\n stores =\n stores &&\n Object.assign({}, ...stores.map((item) => ({ [item[\"id\"]]: item })));\n let { tabs, selected } = this.state;\n const checkEditStatus = (variantIndex) => {\n if (this.props?.value?.variants) {\n if (this.props?.value?.variants[variantIndex]?.clientItemId) {\n return true;\n } else {\n return false;\n }\n } else {\n return false;\n }\n };\n const countryCode = getSession().organization.countryCode || \"IN\";\n const clientItemLabel = fetchClientItemLabel(countryCode);\n\n const checkLowStockEditStatus = (variantIndex) => {\n if (!isMarketPlaceOwner()) {\n if (this.props?.value?.variants) {\n if (this.props?.value?.variants[variantIndex]?.clientItemId) {\n return true;\n } else {\n return false;\n }\n } else {\n return false;\n }\n }\n };\n\n const getVariantInputFields = (variantIndex) => {\n const { productVariantProperties, variantFields } = this.state;\n if (isEmpty(productVariantProperties?.productProperties)) {\n return (\n \n {Array.isArray(this.state.values.variants)\n ? this.state.values.variants.map((variant, index, arr) => {\n return (\n {\n this.setState((prevState) => {\n let newState = cloneDeep(prevState);\n newState.variants[index].name = value;\n return newState;\n });\n }}\n readOnly={this.state.selectedVariant !== index}\n onKeyPress={(event) => {\n if (event.key === \"Enter\") {\n event.preventDefault();\n }\n }}\n />\n );\n })\n : null}\n
\n \n {\n this.handleEditVariantName();\n }}\n >\n {getMessage(\"save.text\")}\n \n\n {\n this.handleCancelEditVariant();\n }}\n >\n {getMessage(\"cancel.text\")}\n \n
\n \n );\n }\n\n const variantFieldsLength = editVariantFields?.reduce(\n (count, currentValue) => {\n if (Boolean(currentValue && currentValue.trim())) {\n return count + 1;\n }\n return count;\n },\n 0\n );\n\n const { productProperties } = productVariantProperties;\n return (\n <>\n \n {productProperties?.map((data, index) => (\n \n this.handleEditVariantFieldChange(value, index)\n }\n onKeyPress={(event) => {\n if (event.key === \"Enter\") {\n event.preventDefault();\n }\n }}\n validationStrings={{\n valueMissing: getMessage(\"input.requiredMessage\"),\n }}\n >\n {enabledSoldByWeight\n ? getMessage(\"product.form.variant.pattern\")\n : \"\"}\n \n ))}\n
\n\n \n {\n this.handleEditVariantName();\n }}\n >\n {getMessage(\"save.text\")}\n \n\n {\n this.setState({\n variants: this.getState([\"variants\"]),\n editVariant: !this.state.editVariant,\n });\n }}\n >\n {getMessage(\"cancel.text\")}\n \n
\n \n );\n };\n const currentTab = getProductRequestStatus()[get(`productPage-tabIndex`)];\n const showApproveBtn =\n this.state?.currentRequestStatus !== \"APPROVED\" &&\n !this.isOwnerCreatingRequest;\n\n const showRejectBtn =\n this.isMarketPlaceOwner &&\n this.isSellerSection() &&\n currentTab === \"PENDING\" &&\n !this.isOwnerCreatingRequest;\n\n return (\n \n {\n this.setState({ showReviewSubmissionDialog: false }, () => {\n this.props.onCancel();\n });\n }}\n />\n {\n this.removeVariant(this.state.selectedVariant);\n }}\n close={this.hideVariantDeleteConfirmation}\n closeText={getMessage(\"cancel.text\")}\n okText={getMessage(\"product.form.delete.confirmText\")}\n />\n {\n this.setState({ showRejectReasonForm: false, submitting: false });\n }}\n className=\"rejection-form\"\n >\n {\n e && e.preventDefault();\n this.submitApprovalStatus({\n rejectionReason: this.state.values?.rejectionReason,\n });\n }}\n >\n \n {getMessage(\"product.request.reject.form.heading\")}\n \n {\n this.setState({\n showRejectReasonForm: false,\n submitting: false,\n });\n }}\n >\n {getMessage(\"category.form.cancelText\")}\n \n \n \n
\n )}\n \n
\n \n )\n )}\n \n \n \n {supportVariants && (\n \n {this.state.variantToggle && !this.isMarketPlaceSeller && (\n \n {getMessage(\"product.form.stores.fetchError\")}\n
\n ) : null}\n \n {getMessage(\"product.form.variant.heading\")}\n
\n )}\n {(this.getState([\"variants\"]) || [{}]).map(\n (variant, variantIndex, arr) => (\n \n
\n )}\n \n {supportVariants\n ? getVariantInputFields(variantIndex)\n : null}\n
\n \n {this.state.editVariant && (\n
\n {!this.state.editVariant && (\n \n {getEditVariantInputs()}\n
\n )}\n \n {supportVariants &&\n ((this.props.method === \"add\" &&\n (this.getState([\"variants\"]) || []).length > 0) ||\n (this.props.method === \"edit\" &&\n ((this.getState([\"variants\"]) || []).length >\n 1 ||\n ((this.getState([\"variants\"]) || [])\n .length === 1 &&\n this.getState([\"variants\"])[0].name)))) ? (\n \n (\n \n {variant.name || \"*\"}\n {arr.length > 1 &&\n this.state.selectedVariant === index ? (\n \n ×\n \n ) : null}\n \n ))}\n active={this.state.selectedVariant}\n onClick={(selectedVariant) => {\n this.setState({ selectedVariant });\n }}\n />\n {\n this.handleEditBtnClick();\n }}\n >\n 
\n \n \n ) : null}\n
\n )}\n \n {([\"add\", \"edit\"].includes(this.props.method) ||\n this.getState([\n \"variants\",\n variantIndex,\n \"clientItemId\",\n ])) && (\n \n
\n \n
\n ) : null}\n\n \n {getMessage(\n \"product.form.additional.details.heading\"\n )}\n
\n \n
\n \n {\n // hasMultipleStores ? (\n // variant.storeSpecificData || []\n // ) : (\n // variant.storeSpecificData && variant.storeSpecificData.length\n // ? variant.storeSpecificData\n // : [{}]\n // )\n // (variant.storeSpecificData && Object.keys(variant.storeSpecificData)) || []\n ((stores && Object.keys(stores)) || []).map(\n (storeId, storeIndex) => (\n \n {stores &&\n stores[storeId] &&\n stores[storeId].name ? (\n
\n )\n )\n }\n {this.state.loadingStores ? \n 
\n \n {stores[storeId].name}\n \n \n {\n let status =\n this.getState([\n \"variants\",\n variantIndex,\n \"storeSpecificData\",\n storeId,\n \"status\",\n ]) === \"ENABLED\" ||\n (!isExtensionEnabled(\n \"MultiStoreSupport\"\n ) &&\n !this.getState([\n \"variants\",\n variantIndex,\n \"storeSpecificData\",\n storeId,\n \"status\",\n ]));\n this.setState(\n { status: !status },\n () => {\n this.updateState(\n [\n \"variants\",\n variantIndex,\n \"storeSpecificData\",\n storeId,\n \"status\",\n ],\n this.state.status\n ? \"ENABLED\"\n : \"HIDDEN\"\n );\n }\n );\n }}\n readOnly={this.isInputEditable}\n />\n \n
\n ) : null}\n {isExtensionEnabled(\"MarketPlace\") && (\n <>\n \n
\n \n {getMessage(\n \"product.dealer.price.header\"\n )}\n
\n \n
\n \n
\n \n )}\n {!isExtensionEnabled(\"MarketPlace\") && (\n \n {getMessage(\"Suggested Retail Price\")}\n
\n \n
\n \n
\n )}\n {this.isSellerSection() && storeIndex === 0 && (\n \n {getMessage(\n \"product.form.variant.price.header\"\n )}\n
\n \n
\n \n
\n )}\n {getSession().organization.currency.name ===\n \"INR\" && (\n \n {getMessage(\n \"product.form.seller.price.heading\"\n )}\n
\n \n \n this.handleSellingPrice(\n e,\n variantIndex,\n storeId,\n \"sellingPrice\"\n )\n }\n />\n \n this.handleSellingPrice(\n e,\n variantIndex,\n storeId,\n \"sellerDiscount\"\n )\n }\n />\n
\n \n
\n \n {getMessage(\"product.form.sellingMargin\")}\n {\n getSession().organization.currency\n .symbol\n }\n {this.state.sellingMargin}\n
\n \n {getMessage(\"product.form.profitMargin\")}\n {this.state.profitMargin}%\n
\n \n {this.state.isMinimumProfitMargin && (\n <>\n {getMessage(\n \"product.form.minimumProfitMargin.error\",\n {\n value:\n this.state.values.variants?.[0]\n ?.metaData[\n \"Minimum Profit Margin\"\n ],\n }\n )}\n \n )}\n
\n \n
\n )}\n {getSession().organization.currency.name !==\n \"INR\" &&\n this.state.taxArray &&\n this.state.taxArray.length > 0 && (\n \n {getMessage(\n \"product.form.variant.tax.header\"\n )}\n
\n \n {this.state?.taxes?.map((tax) => {\n return (\n
\n \n
\n )}\n {getSession().organization.currency.name !==\n \"INR\" &&\n this.state.taxes &&\n this.state.taxes.length > 0 && (\n \n {getMessage(\n \"product.form.variant.tax.header\"\n )}\n
\n \n {this.state.taxArray.map((tax, i) => {\n return (\n
\n \n
\n )}\n {hasInstoreProcessing && (\n \n {getMessage(\n \"product.form.variant.tax.header\"\n )}\n
\n \n {this.state.taxes.map((tax, i) => {\n return (\n
\n \n
\n )}\n \n {getMessage(\n \"product.form.variant.location.header\"\n )}\n
\n \n
\n \n
\n \n {getMessage(\n \"product.form.variant.stock.header\"\n )}\n
\n \n {booleanStock ? (\n \n {\n this.updateState(\n [\n \"variants\",\n variantIndex,\n \"storeSpecificData\",\n storeId,\n \"unlimitedStock\",\n ],\n event\n );\n this.updateState(\n [\n \"variants\",\n variantIndex,\n \"storeSpecificData\",\n storeId,\n \"stock\",\n ],\n 0\n );\n }}\n controlled\n value={\n this.getState([\n \"variants\",\n variantIndex,\n \"storeSpecificData\",\n storeId,\n \"unlimitedStock\",\n ]) || false\n }\n disabled={this.isInputEditable}\n />\n \n )}\n
\n \n {this.state.values.id && !this.isSellerSection() ? (\n \n 
\n \n {getMessage(\"product.form.deleteText\")}\n \n \n ) : null}\n
\n \n \n );\n }\n}\n\nexport const STOCK_STRATEGIES = {\n BOOLEAN: \"boolean\",\n NUMERIC: \"numeric\",\n};\n","import React from \"react\";\nimport {\n BaseForm,\n Input,\n Radio,\n Searchable,\n BrandSearch,\n CategorySearch,\n} from \"../../../../components/Form\";\n// import ProductsMetaDataSearch from './ProductsMetaDataSearch'\n\nimport { getMessage } from \"../../../../lib/translator\";\n\nimport \"./style.css\";\n\nexport default class ProductFiltersForm extends BaseForm {\n render() {\n const { SubmitButton, ClearButton } = this.buttons;\n const { Form } = this.components;\n const isSeller = this.props?.options?.seller || false;\n return (\n \n );\n }\n}\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\n\nimport { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport ListingPageWithRoutes from \"../../../containers/ListingPage/listingRouter\";\nimport ProductUpload from \"./ProductUpload\";\nimport SearchAndAdd from \"./SearchAndAdd\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport Image from \"../../../components/Image\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\nimport ProductForm, { STOCK_STRATEGIES } from \"./Form\";\nimport ProductFilters from \"./Filters\";\nimport { Popup, Dialog } from \"../../../components/Popup\";\nimport { getMessage } from \"../../../lib/translator\";\nimport { isExtensionEnabled, getSession } from \"../../../lib/auth\";\nimport API from \"../../../lib/api\";\nimport { get, unset } from \"../../../lib/storage\";\nimport find from \"lodash.find\";\nimport Toggle from \"../../../components/Form/Inputs/Toggle\";\nimport {\n Radio,\n BaseForm,\n Textarea,\n Searchable,\n MultiSelect,\n Checkbox,\n} from \"../../../components/Form\";\nimport Tabs from \"../../../components/Tabs\";\nimport {\n isMarketPlaceOwner,\n isMarketPlaceSeller,\n} from \"../../../lib/marketPlace\";\nimport downloadIcon from \"./download.svg\";\nimport emptyIcon from \"./products-empty.svg\";\n\nimport \"./style.css\";\nimport { GO_HOST } from \"../../../config/app\";\nconst emptyState = {\n icon: emptyIcon,\n message: getMessage(\"product.helpItems.message\"),\n submessage: getMessage(\"product.helpItems.submessage\"),\n additionalViews: [ProductUpload],\n};\nconst showConfig = () => {\n if (GO_HOST.includes(\"tamimimarkets.com\")) return false;\n return true;\n};\n\nconst API_HEADER = {\n // \"Developer-token\": DEVELOPER_TOKEN,\n \"Accept-Language\": \"en\",\n restrictAutherizationToken: true,\n};\n// const MASTER_CATELOGUE_STORE_ID = 1;\nexport const getProductRequestStatus = () => {\n const requestStatusTabs = [\"APPROVED\", \"PENDING\", \"REJECTED\"];\n if (isMarketPlaceSeller()) {\n requestStatusTabs.push(\"DRAFT\");\n }\n\n return requestStatusTabs;\n};\n\nexport const isSellerSection = () => {\n const location = window.location.pathname.split(\"/\");\n if (isExtensionEnabled(\"MarketPlace\")) {\n if (isMarketPlaceSeller() || location.includes(\"seller-catalogue\")) {\n return true;\n }\n }\n return false;\n};\n\nclass HeaderActions extends BaseForm {\n constructor(props) {\n super(props);\n this.state = {\n openModal: false,\n showDownloadOptions: false,\n showDownloadComplete: false,\n showSellerSelectionForm: false,\n allSelected: false,\n storeOptions: [...JSON.parse(get(\"stores\"))].map((store) => {\n return { text: store.name, value: store.id };\n }),\n };\n this.showModal = this.showModal.bind(this);\n this.hideModal = this.hideModal.bind(this);\n this.showDownloadModal = this.showDownloadModal.bind(this);\n this.hideDownloadModal = this.hideDownloadModal.bind(this);\n this.csvDownload = this.csvDownload.bind(this);\n this.toggleShowSellerSelectionForm =\n this.toggleShowSellerSelectionForm.bind(this);\n this.isMarketPlaceOwner = isMarketPlaceOwner();\n this.isMarketPlaceSeller = isMarketPlaceSeller();\n this.isSellerSection = isSellerSection();\n this.handleSelectAll = this.handleSelectAll.bind(this);\n }\n\n handleSelectAll(value) {\n let currentState = JSON.parse(JSON.stringify(this.state));\n let { values } = currentState;\n\n if (value) {\n values.storeId = this.state?.storeOptions?.map((store) => store?.value);\n this.state.storeOptions && this.setState({ values, allSelected: true });\n } else {\n values.storeId = [];\n this.setState({ values, allSelected: false });\n }\n }\n\n toggleShowSellerSelectionForm() {\n this.setState((prev) => ({\n showSellerSelectionForm: !prev.showSellerSelectionForm,\n }));\n }\n\n handleSelectedSeller = (data) => {\n this.setState({\n selectedSellerData: data,\n });\n };\n\n showModal() {\n this.setState({\n openModal: true,\n values: {\n bulkUploadType: \"catalogue\",\n },\n });\n }\n\n hideModal() {\n this.setState({\n openModal: false,\n });\n }\n\n showDownloadModal(e) {\n e && e.preventDefault();\n this.setState({\n showDownloadOptions: true,\n values: {\n downloadType: \"catalogue\",\n },\n });\n }\n\n hideDownloadModal(message) {\n if (typeof message === \"string\") {\n this.setState({\n showDownloadOptions: false,\n showDownloadComplete: true,\n });\n } else {\n this.setState({\n showDownloadOptions: false,\n });\n }\n }\n\n csvDownload(e) {\n e.preventDefault();\n if (this.state.values && this.state.values.downloadType === \"catalogue\") {\n const api = new API({\n url: \"/catalogue-service/product-upload?type=file\",\n });\n api\n .get()\n .then((response) => {\n this.hideDownloadModal(response.data);\n })\n .catch((error) => {\n console.error(error);\n });\n } else if (\n this.state.values &&\n this.state.values.downloadType === \"inventory\" &&\n this.state.values.storeId\n ) {\n const { storeId } = this.state.values;\n const { email } = { ...JSON.parse(get(\"user\")) }.emails[0];\n const api = new API({ url: \"/inventory-service/inventory-file\" });\n api\n .get({ storeId, email })\n .then((response) => {\n this.hideDownloadModal(response.data);\n })\n .catch((error) => {\n console.error(error);\n });\n }\n }\n\n getAddProductOptions = () => {\n const dropDown = [\n \n {(!isExtensionEnabled(\"MarketPlace\") ||\n (this.isMarketPlaceOwner && !this.isSellerSection()) ||\n this.isOwnerCreatingRequest) && (\n \n {getMessage(\"product.form.submitText\")}\n \n )}\n {isMarketPlaceSeller() && (\n <>\n \n {getMessage(\"product.form.review.submission\")}\n \n \n {getMessage(\"Approve\")}\n \n )}\n {showRejectBtn && (\n \n {getMessage(\"product.form.cancelText\")}\n \n
\n \n \n {getMessage(\"product.form.save.draft\")}\n \n
\n \n )}\n\n {isMarketPlaceOwner() && this.isSellerSection() && (\n <>\n {showApproveBtn && (\n \n \n {getMessage(\"Reject\")}\n \n
\n )}\n \n )}\n\n \n {getMessage(\"product.search.and.add.text\")}\n
\n ) : (\n \n {getMessage(\"product.search.and.add.text\")}\n \n )}\n \n {this.state.showSellerSelectionForm && (\n \n \n \n (\n this.handleSelectAll(value)}\n className=\"checkLabel\"\n />\n )}\n />\n \n )}\n \n \n \n )}\n \n this.setState({\n showDownloadComplete: false,\n })\n }\n />\n {!isSellerSection() && (\n \n )}\n {(!isSellerCatalogue || isMarketPlaceOwner) && (\n \n + {getMessage(\"product.add.text\")}\n \n }\n >\n {this.getAddProductOptions().map((item) => item)}\n \n )}\n
\n );\n }\n}\n\nconst getEditPath = (pId, id) => {\n if (isMarketPlaceOwner() && !isSellerSection()) {\n return `/catalogue/master-catalogue/edit/${pId}`;\n } else if (isSellerSection() && !isMarketPlaceSeller()) {\n return `/catalogue/seller-catalogue/edit/${pId}?requestId=${id}`;\n } else if (isSellerSection() && isMarketPlaceSeller()) {\n return `/catalogue/products/edit/${pId}?requestId=${id}`;\n } else {\n return `/catalogue/products/edit/${pId}`;\n }\n};\n\nconst tableProperties = (_this) => {\n const { handleRequestApproval } = _this;\n const textAlignment = get(\"dataLang\") === \"ar\" ? \"right\" : \"\";\n const sellerColumn = {\n name: getMessage(\"product.header.sellername\"),\n dir: textAlignment,\n };\n const statusColumn = {\n name: getMessage(\"product.header.status\"),\n dir: textAlignment,\n };\n const merchandiseColumn = {\n name: getMessage(\"product.merchandise.id\"),\n dir: textAlignment,\n };\n const headers = [\n getMessage(\"product.header.image\"),\n {\n name: getMessage(\"product.header.name\"),\n dir: textAlignment,\n },\n {\n name: getMessage(\"product.header.primaryCategory\"),\n dir: textAlignment,\n },\n getMessage(\"product.header.actions\"),\n ];\n\n if (isSellerSection() && isMarketPlaceOwner()) {\n headers.splice(4, 0, sellerColumn);\n }\n if (!(isSellerSection() || isMarketPlaceSeller())) {\n headers.splice(4, 0, statusColumn);\n }\n if (!showConfig()) {\n headers.splice(2, 0, merchandiseColumn);\n }\n\n return {\n headers,\n row: ({\n id,\n productId,\n images,\n brand,\n name,\n slug,\n primaryCategory,\n status,\n variants,\n onAction,\n product,\n sellerName,\n sellerID,\n metaData,\n }) => {\n let image = images && images.length && images[0];\n const { merchandise = \"\" } = metaData || {};\n if (!image && variants && variants.length) {\n let varImage = variants.filter((variant) => variant.images)[0];\n if (varImage && varImage.images) {\n image = varImage.images[0];\n }\n }\n const showApproveBtn =\n isMarketPlaceOwner() &&\n isSellerSection() &&\n [\"PENDING\", \"REJECTED\"].includes(status);\n\n const showRejectBtn =\n isMarketPlaceOwner() && isSellerSection() && status === \"PENDING\";\n const pId = product ? productId : id;\n const sessionData = getSession();\n const organization = sessionData.organization;\n let siteUrl = organization?.domain;\n\n if (siteUrl) {\n let isHttpsEnabled = JSON.parse(get(\"organization\")).httpsEnabled;\n let protocol = isHttpsEnabled ? \"https://\" : \"http://\";\n const isPrefixInSiteUrl = siteUrl?.includes(\"http\");\n siteUrl = isPrefixInSiteUrl ? siteUrl : `${protocol}${siteUrl}`;\n }\n let productStoreLink = isSellerSection()\n ? `${siteUrl}/product/${product?.slug}/${sellerID}`\n : `${siteUrl}/product/${slug}`;\n return (\n \n response.data.seller}\n onChange={(val) => this.handleSelectedSeller(val)}\n value={this.state.selectedSellerData}\n />\n\n \n {getMessage(\"Continue\")}\n \n this.toggleShowSellerSelectionForm()}\n >\n {getMessage(\"category.form.cancelText\")}\n \n
\n \n )}\n {this.state.openModal && (\n \n
\n
\n \n
\n
\n
\n \n
\n \n {getMessage(\"product.cancelDownloadCsv\")}\n \n
\n \n )}\n \n {brand ? (\n {brand.name} \n ) : null}\n {name ?? product?.name}\n
\n \n \n \n getMessage(`product.request.${tab.toLowerCase()}`)\n )}\n default={Number(this.state.requestTab)}\n onClick={(index) => {\n this.changeTab(index);\n }}\n />\n
\n )\n );\n },\n ]}\n form={{\n url: \"/catalogue-service/product\",\n apiParams: {},\n component: ProductForm,\n options: {\n tags: tagsEnabled,\n variants: variantsEnabled,\n brands: brandsEnabled,\n stockStrategy: stockStrategy,\n multipleStores: storesEnabled,\n inStoreProcessing: inStoreProcessing,\n soldByWeight: soldByWeightEnabled,\n entityMetaData: entityMetaDataEnabled,\n preOrderSupport: preOrderSupportEnabled,\n bulkOrderSuppport: bulkOrderEnabled,\n getStores: function () {\n const stores = JSON.parse(get(\"stores\"));\n return new Promise((resolve) => {\n resolve(stores);\n });\n },\n getProductMetaData: () => {\n if (isExtensionEnabled(\"EntityMetaData\")) {\n return new Promise((resolve, reject) => {\n const api = new API({ url: `/config-service/meta-data` });\n api.get().then((response) => {\n resolve(response.data.config.entityMetaData);\n }, reject);\n }).catch((error) => {\n console.error(error);\n });\n }\n return null;\n },\n getInventoryData: (storeId, ids) => {\n return new Promise((resolve, reject) => {\n const api = new API({\n url: `/inventory-service/item?storeId=${storeId}&productId=${ids.join(\n \",\"\n )}`,\n });\n api.get().then((response) => {\n resolve(response);\n }, reject);\n }).catch((error) => {\n console.error(error);\n });\n },\n },\n transformResponse: (response) => {\n let product = response.data.product;\n // For each product, assume single variant, single store (at least)\n // Depending on organization settings, transform submit data correspondingly\n let modifiedProduct = Object.assign({}, product);\n if (\n !product.variants ||\n (Array.isArray(product.variants) &&\n product.variants.length === 0)\n ) {\n modifiedProduct.variants = [{}];\n if (product.images) {\n modifiedProduct.variants[0].images = product.images;\n // delete modifiedProduct.images\n }\n if (product.barcodes) {\n modifiedProduct.variants[0].barcodes = product.barcodes;\n // delete product.barcodes\n }\n if (product.clientItemId) {\n modifiedProduct.variants[0].clientItemId =\n product.clientItemId;\n modifiedProduct.madeUp = true;\n // delete product.clientItemId\n }\n\n if (isExtensionEnabled(\"MarketPlace\")) {\n modifiedProduct.variants[0].metaData = {};\n modifiedProduct.variants[0].metaData[\n \"Minimum Profit Margin\"\n ] = product.metaData?.[\"Minimum Profit Margin\"];\n delete product.metaData?.[\"Minimum Profit Margin\"];\n }\n\n modifiedProduct.variants[0].id = product.id;\n }\n // Primary category and secondary categories merged as categories\n modifiedProduct.categories =\n modifiedProduct.secondaryCategories.length > 0\n ? [...modifiedProduct.secondaryCategories]\n : [];\n // Primary category as the first element in categories\n if (modifiedProduct.primaryCategory)\n modifiedProduct.categories.unshift(\n modifiedProduct.primaryCategory\n );\n delete modifiedProduct.primaryCategory;\n delete modifiedProduct.secondaryCategories;\n return modifiedProduct;\n },\n }}\n filters={{\n component: ProductFilters,\n options: {\n brands: brandsEnabled,\n tags: tagsEnabled,\n entityMetaData: entityMetaDataEnabled,\n seller: isSellerSection(),\n },\n transformSubmit: (formData) => {\n let filters = Object.assign({}, formData);\n if (formData.category) {\n filters.slugCategory = formData.category.slug;\n delete filters.category;\n }\n if (formData.brand) {\n filters.slugBrand = formData.brand.slug;\n delete filters.brand;\n }\n if (formData.tag) {\n filters.tagId = formData.tag.id;\n delete filters.tag;\n }\n if (formData.name) {\n filters.sorting = \"RELEVANCE\";\n }\n if (formData.seller) {\n filters.sellerID = formData.seller.id;\n delete filters.seller;\n }\n return filters;\n },\n }}\n secondaryActions={{\n component: {\n action: \"search-and-add\",\n Component: SearchAndAdd,\n },\n form: {\n action: \"add-product\",\n secondaryOptions: {\n headers: API_HEADER,\n masterCatelogue: true,\n getInventoryData: (storeId, ids) => {\n return new Promise((resolve, reject) => {\n const api = new API({\n url: `/inventory-service/item?storeId=${storeId}&productId=${ids.join(\n \",\"\n )}`,\n });\n api.get({}, API_HEADER).then((response) => {\n resolve(response);\n }, reject);\n });\n },\n getItem: (url, name) => {\n return new Promise((resolve, reject) => {\n const api = new API({\n url: url,\n });\n const params = { name: name };\n api.get(params).then((response) => {\n resolve(response);\n }, reject);\n });\n },\n updateItem: (url, name) => {\n return new Promise((resolve, reject) => {\n const api = new API({\n url: url,\n });\n const params = { name: name };\n api.post(params).then((response) => {\n resolve(response);\n }, reject);\n });\n },\n },\n },\n }}\n tableProperties={tableProperties(this)}\n />\n \n );\n }\n}\n","import React from \"react\";\nimport {\n BaseForm,\n Input,\n Upload,\n VALIDATION_TYPES,\n CategorySearch,\n} from \"../../../../components/Form\";\n\nimport { getMessage } from \"../../../../lib/translator\";\n\nimport deleteIcon from \"../delete.svg\";\n\nexport default class CategoryForm extends BaseForm {\n constructor(props) {\n super(props);\n this.delete = this.delete.bind(this);\n this.changeStatus = this.changeStatus.bind(this);\n }\n\n transformResponse(response) {\n return response.data ? response.data.category : \"\";\n }\n\n delete() {\n this.props.onDelete();\n }\n\n changeStatus(status) {\n const { value } = this.props;\n if (value && value.id) {\n this.props.onSubmit({ id: value.id, status: status });\n }\n }\n\n render() {\n const { SubmitButton, CancelButton } = this.buttons;\n const { Form } = this.components;\n const { props } = this;\n return (\n \n \n
\n );\n }\n}\n","import React from \"react\";\nimport {\n BaseForm,\n Radio,\n VALIDATION_TYPES,\n CategorySearch,\n} from \"../../../../components/Form\";\n\nimport { getMessage } from \"../../../../lib/translator\";\n\nexport default class CategoryFiltersForm extends BaseForm {\n render() {\n const { SubmitButton, ClearButton } = this.buttons;\n const { Form } = this.components;\n return (\n \n );\n }\n}\n","import React, { Component } from \"react\";\nimport Upload from \"../../../../components/FileUpload\";\nimport API from \"../../../../lib/api\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport csvIcon from \"../../../catalogue/Products/ProductUpload/csv-icon.svg\";\nimport uploadIcon from \"../../../catalogue/Products/ProductUpload/upload-products.svg\";\nimport \"./style.css\";\n\nfunction downloadCsv(data) {\n let csv = \"\";\n csv += data.join(\",\");\n csv += \"\\n\";\n var hiddenElement = document.createElement(\"a\");\n hiddenElement.href = \"data:text/csv;charset=utf-8,\" + encodeURI(csv);\n hiddenElement.target = \"_blank\";\n hiddenElement.download = \"categories.csv\";\n hiddenElement.click();\n}\n\nexport default class CategoryUpload extends Component {\n constructor(props) {\n super(props);\n this.getSampleCsv = this.getSampleCsv.bind(this);\n }\n\n getSampleCsv(e) {\n e && e.preventDefault();\n const api = new API({ url: \"/catalogue-service/category-upload\" });\n api\n .get()\n .then(\n (response) => {\n downloadCsv(response.data.fileUpload || []);\n },\n (error) => {\n this.setState({ uploadError: error.message });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n render() {\n return (\n \n
\n );\n }\n}\n","import React, { Component } from \"react\";\nimport { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport ListingPageWithRoutes from \"../../../containers/ListingPage/listingRouter\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport Image from \"../../../components/Image\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\nimport CategoryForm from \"./Form\";\nimport { getMessage } from \"../../../lib/translator\";\nimport { Link } from \"react-router-dom\";\nimport CategoryFilters from \"./Filters\";\n\nimport emptyIcon from \"./categories-empty.svg\";\nimport helpCard1Icon from \"./helpcard1.svg\";\nimport helpCard2Icon from \"./helpcard2.svg\";\nimport helpCard3Icon from \"./helpcard3.svg\";\nimport tableActive from \"./table-active.svg\";\nimport treeViewInactive from \"./tree-view-inactive.svg\";\n\nimport \"./style.css\";\nimport { Popup } from \"../../../components/Popup\";\nimport CategoryUpload from \"./CategoryUpload\";\n\nconst emptyState = {\n icon: emptyIcon,\n message: getMessage(\"category.helpItems.message\"),\n submessage: getMessage(\"category.helpItems.submessage\"),\n actions: ({ onAction }) => (\n \n
\n \n \n
\n \n \n
\n \n
\n )}\n form={{\n component: CategoryForm,\n transformSubmit: (formData) => {\n let result = Object.assign({}, formData);\n if (formData.parentCategory) {\n result.parentCategoryId = formData.parentCategory.id;\n delete result.parentCategory;\n }\n if (!formData.parentCategory) {\n delete result.parentCategoryId;\n }\n return result;\n },\n allowDelete: true,\n }}\n tableProperties={tableProperties(\n this.state && this.state.isMobileView\n )}\n filters={{\n component: CategoryFilters,\n transformSubmit: (formData) => {\n let data = Object.assign({}, formData);\n if (data.category) {\n data.name = data.category.name;\n delete data.category;\n }\n return data;\n },\n }}\n />\n );\n return null;\n }\n}\n","import React, { Component } from \"react\";\nimport SortableTree, {\n getTreeFromFlatData,\n removeNodeAtPath,\n addNodeUnderParent,\n changeNodeAtPath,\n getVisibleNodeCount,\n} from \"react-sortable-tree\";\nimport \"react-sortable-tree/style.css\";\nimport \"./style.css\";\n\nexport default class Tree extends Component {\n render() {\n const {\n data,\n onChange,\n onMoveNode,\n getNodeKey,\n removeNodeAtPath,\n addNodeUnderParent,\n generateNodeProps,\n canDrag,\n className,\n onDragStateChanged,\n canDrop,\n onVisibilityToggle,\n } = this.props;\n const count = getVisibleNodeCount({ treeData: data });\n return (\n \n
\n\n \n \n \n +{\" \"}\n \n {getMessage(\"category.upload.text\")}\n \n \n }\n >\n {\n onAction(TABLE_ACTIONS.ADD);\n }}\n >\n \n {getMessage(\"category.add.text\")}\n \n \n \n {getMessage(\"sellers.seller.form.add.bulk.text\")}\n \n \n
\n \n
\n );\n }\n}\n\nexport {\n getTreeFromFlatData,\n removeNodeAtPath,\n addNodeUnderParent,\n changeNodeAtPath,\n};\n\nTree.defaultProps = {\n getNodeKey: ({ node }) => node.id,\n canDrag: true,\n treeData: [],\n};\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport Tree, {\n removeNodeAtPath,\n addNodeUnderParent,\n changeNodeAtPath,\n} from \"../../../../components/Tree\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../../components/DropDown\";\nimport CategoryForm from \"../Form\";\nimport API from \"../../../../lib/api\";\nimport Loader from \"../../../../components/Loader\";\nimport AuthenticatedPage from \"../../../../containers/AuthenticatedPage\";\nimport \"./style.css\";\nimport { Popup, Dialog } from \"../../../../components/Popup\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport Image from \"../../../../components/Image\";\nimport ImagePlaceHolder from \"../../../../components/Image/image-placeholder.svg\";\nimport tableInctive from \"./table-inactive.svg\";\nimport treeViewActive from \"./tree-view-active.svg\";\nimport emptyIcon from \"../categories-empty.svg\";\nimport EmptyState from \"../../../../components/EmptyState\";\n\nfunction generateCategoryTree(data, parent = null) {\n data.map((item) => {\n if (item.subCategories === null) {\n item.title = item.name;\n item.children = null;\n item.parentCategory = parent && { name: parent.name, id: parent.id };\n } else {\n item.title = item.name;\n item.children = generateCategoryTree([...item.subCategories], item);\n item.parentCategory = parent && { name: parent.name, id: parent.id };\n }\n return item;\n });\n return data;\n}\n\nfunction filterHiddenCategories(data) {\n var result = (data || []).filter(function filterCategory(category) {\n if (category.status !== \"HIDDEN\") {\n if (category.children) {\n return (category.children = category.children.filter(filterCategory));\n }\n return true;\n } else {\n return false;\n }\n });\n return result;\n}\n\nclass CategoryTree extends Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: true,\n treeData: [],\n getNodeKey: ({ node }) => node.id,\n done: true,\n };\n this.changeParent = this.changeParent.bind(this);\n this.addCategory = this.addCategory.bind(this);\n this.deleteCategory = this.deleteCategory.bind(this);\n this.editCategory = this.editCategory.bind(this);\n this.fetchData = this.fetchData.bind(this);\n }\n\n changeParent(node, parentNode) {\n this.setState({\n done: false,\n });\n this.api = new API({ url: `/catalogue-service/category/${node.id}` });\n let params = {};\n if (parentNode) {\n params.parentCategoryId = parentNode.id;\n } else {\n params.parentCategoryId = \"\";\n }\n this.api\n .put(params)\n .then(\n (response) => {\n this.treeData = null;\n this.setState({\n done: true,\n error: null,\n });\n },\n (error) => {\n if (error.code === 401 || error.code === 403) {\n throw error;\n }\n this.setState(\n {\n error: error.message,\n done: true,\n treeData: this.treeData,\n },\n () => {\n this.treeData = null;\n }\n );\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n componentWillUnmount() {\n this.api && this.api.cancel();\n }\n\n componentDidMount() {\n this.fetchData();\n }\n\n fetchData() {\n this.setState({\n loading: true,\n });\n\n this.api = new API({ url: \"/catalogue-service/category\" });\n this.api\n .get({ paginate: \"false\", hierarchy: true })\n .then((response) => {\n let categories = response.data.category || [];\n let generateTree = [];\n let empty = false;\n if (categories.length > 0) {\n generateTree = generateCategoryTree(categories);\n } else {\n empty = true;\n }\n this.setState({\n loading: false,\n treeData: generateTree,\n empty,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n\n editCategory(formData) {\n this.setState({\n submitting: true,\n });\n let params = Object.assign({}, formData);\n this.api = new API({ url: `/catalogue-service/category/${params.id}` });\n if (params.parentCategory) {\n params.parentCategoryId = params.parentCategory.id;\n } else if (params.parentCategory === \"\") {\n params.parentCategoryId = \"\";\n } else {\n delete params.parentCategoryId;\n }\n delete params.parentCategory;\n this.api\n .put(params)\n .then(\n (response) => {\n const category = response.data.category;\n this.setState(\n (state) => ({\n treeData: changeNodeAtPath({\n treeData: state.treeData,\n path: state.path,\n getNodeKey: state.getNodeKey,\n newNode: { ...category, title: category.name },\n }),\n submitting: false,\n value: null,\n showForm: false,\n error: null,\n done: true,\n path: null,\n }),\n () => this.fetchData()\n );\n },\n (error) => {\n if (error.code === 401 || error.code === 403) {\n throw error;\n }\n this.setState({\n submitting: false,\n error: error.message,\n done: true,\n path: null,\n });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n addCategory(formData) {\n this.setState({\n submitting: true,\n });\n this.api = new API({ url: \"/catalogue-service/category\" });\n let params = Object.assign({}, formData);\n const path = this.state.path;\n if (path) {\n params.parentCategoryId = path[path.length - 1];\n } else {\n params.parentCategoryId = null;\n }\n if (formData.parentCategory) {\n params.parentCategoryId = formData.parentCategory.id;\n }\n this.api\n .post(params)\n .then((response) => {\n let category = response.data.category;\n let parentCategoryId =\n category.parentCategory && category.parentCategory.id;\n let newNode = { ...category, title: category.name };\n this.setState((state) => ({\n showForm: false,\n value: null,\n submitting: false,\n path: null,\n done: true,\n treeData: addNodeUnderParent({\n treeData: state.treeData,\n parentKey: parentCategoryId,\n expandParent: true,\n getNodeKey: state.getNodeKey,\n newNode: newNode,\n addAsFirstChild: true,\n }).treeData,\n }));\n })\n .catch((error) => {\n console.error(error);\n });\n }\n deleteCategory() {\n this.setState({\n done: false,\n });\n const path = this.state.path;\n const id = path[path.length - 1];\n this.api = new API({ url: `/catalogue-service/category/${id}` });\n this.api\n .delete()\n .then(\n (response) => {\n this.setState((prevState) => ({\n treeData: removeNodeAtPath({\n treeData: prevState.treeData,\n path: prevState.path,\n getNodeKey: prevState.getNodeKey,\n }),\n path: null,\n done: true,\n showDelete: false,\n error: null,\n }));\n },\n (error) => {\n if (error.code === 401 || error.code === 403) {\n throw error;\n }\n this.setState({\n error: error.message,\n path: null,\n done: true,\n showDelete: false,\n });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n render() {\n const { loading, done, error, empty } = this.state;\n let { treeData } = this.state;\n // treeData = filterHiddenCategories(treeData)\n return (\n \n
\n {loading ? (\n {getMessage(\"category.tree.title\")}
\n\n \n \n this.setState({\n showForm: true,\n addFromTree: false,\n path: null,\n })\n }\n >\n + {getMessage(\"category.add.text\")}\n \n
\n {error}
}\n \n
,\n {node.status}
,\n \n \n
\n );\n }\n}\n","import React from \"react\";\nimport { BaseForm, Radio, BrandSearch } from \"../../../../components/Form\";\n\nimport { getMessage } from \"../../../../lib/translator\";\n\nexport default class BrandFiltersForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state.values.status = \"\";\n }\n render() {\n const { SubmitButton, ClearButton } = this.buttons;\n const { Form } = this.components;\n return (\n \n );\n }\n}\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport ListingPage, { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport Image from \"../../../components/Image\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\nimport BrandForm from \"./Form\";\nimport BrandFilters from \"./Filters\";\nimport { getMessage } from \"../../../lib/translator\";\nimport \"./style.css\";\n\nimport emptyIcon from \"./brands-empty.svg\";\nimport Toggle from \"../../../components/Form/Inputs/Toggle\";\n\nconst emptyState = {\n icon: emptyIcon,\n message: getMessage(\"brand.helpItems.message\"),\n actions: ({ onAction }) => (\n \n
\n );\n}\n","import React from \"react\";\nimport \"./style.css\";\nexport default function NameValueCard(props) {\n const color = props.color || \"gray\";\n return (\n \n {textToBold} {sentence}\n
\n {helpLink ? (\n \n \n \n ) : (\n \n {tooltipText &&
\n )}\n {tooltipText}
}\n \n
\n );\n}\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport AuthenticatedPage from \"../../../containers/AuthenticatedPage/index\";\nimport { getMessage } from \"../../../lib/translator\";\nimport HelpWidget from \"../../../components/HelpWidget\";\nimport HelpCard from \"../../../components/HelpCard\";\nimport Warning from \"../../../components/Warning\";\nimport { isEnterprise } from \"../../../lib/auth\";\n\nimport productsIcon from \"./products.svg\";\nimport uploadingImagesIcon from \"./uploading-images.svg\";\nimport contentMarketingIcon from \"./content-marketing.svg\";\n\nimport API from \"../../../lib/api\";\nimport Loader from \"../../../components/Loader\";\nimport NameValueCard from \"../../../components/NameValueCard\";\n\nimport \"./style.css\";\n\nconst helpItems = {\n title: getMessage(\"catalogue.dashboard.helpItems.title\"),\n instructions: [\n {\n icon: productsIcon,\n title: getMessage(\"catalogue.dashboard.helpItems.gp.title\"),\n description: getMessage(\"catalogue.dashboard.helpItems.gp.description\"),\n },\n {\n icon: uploadingImagesIcon,\n title: getMessage(\"catalogue.dashboard.helpItems.uI.title\"),\n description: getMessage(\"catalogue.dashboard.helpItems.uI.description\"),\n },\n {\n icon: contentMarketingIcon,\n title: getMessage(\"catalogue.dashboard.helpItems.cm.title\"),\n description: getMessage(\"catalogue.dashboard.helpItems.cm.description\"),\n },\n ],\n};\n\nexport default class Dashboard extends Component {\n constructor(props) {\n super(props);\n this.api = null;\n this.state = {\n showLoader: false,\n catalogueCountData: [],\n productsData: {},\n apiError: \"\",\n };\n this.colors = [\"green\", \"gray\", \"blue\"];\n }\n\n componentDidMount() {\n this.setState({\n showLoader: true,\n });\n this.api = new API({ url: \"/catalogue-service/stats\" });\n this.api\n .get()\n .then(\n (response) => {\n const catalogueCountData = [];\n const productsData = response.data[\"products\"] || {};\n let index = 0;\n for (var key in response.data) {\n if (response.data[key][\"count\"] >= 0) {\n catalogueCountData.push({\n name: key,\n value: response.data[key][\"count\"],\n color: this.colors[index++],\n });\n }\n }\n this.setState({\n catalogueCountData,\n productsData,\n showLoader: false,\n });\n },\n (error) => {\n if (error.message === \"cancelled\") {\n return;\n }\n if (error.code === 401) {\n throw error;\n }\n this.setState({\n apiError: error.message,\n showLoader: false,\n });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n componentWillUnmount() {\n this.api && this.api.cancel();\n }\n\n render() {\n const { menu } = this.props;\n const { showLoader, catalogueCountData, productsData } = this.state;\n const cards = catalogueCountData.map(({ name, ...data }, index) => (\n {props.value}
\n {props.name}
\n {getMessage(\"catalogue.dashboard.heading\")}
\n {showLoader ? (\n\n {this.state.apiError && (\n
\n )}\n {!isEnterprise() && (\n {getMessage(\"error.generic\")}
\n )}\n {cards}
\n\n \n {productsData.withoutImagesCount > 0 && (\n
\n \n \n
\n );\n }\n}\n","import React from \"react\";\nimport { BaseForm, Input, VALIDATION_TYPES } from \"../../../../components/Form\";\n\nimport { getMessage } from \"../../../../lib/translator\";\n\nexport default class TagFiltersForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state.values.status = \"\";\n }\n render() {\n const { SubmitButton, ClearButton } = this.buttons;\n const { Form } = this.components;\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport { BaseForm, ProductSearch } from \"../../../../components/Form\";\nimport API from \"../../../../lib/api\";\nimport { getMessage } from \"../../../../lib/translator\";\n\nimport \"./style.css\";\n\nfunction handleError(err) {\n if (err.code === 401) {\n throw err;\n }\n}\n\nexport default class ProductLinkingForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state = Object.assign(this.state, {\n products: [],\n });\n this.linkProductToTag = this.linkProductToTag.bind(this);\n this.unlinkProductFromTag = this.unlinkProductFromTag.bind(this);\n }\n linkProductToTag(product) {\n this.setState(\n (prevState) => {\n let index = prevState.products.findIndex(({ id }) => id === product.id);\n if (index === -1) {\n index = prevState.products.length;\n }\n let products = [...prevState.products];\n products.splice(\n index,\n 1,\n Object.assign({}, product, { _status: \"adding\" })\n );\n return { products };\n },\n () => {\n let api = new API({ url: `/catalogue-service/product/${product.id}` });\n api\n .get()\n .then((response) => Promise.resolve(response.data.product))\n .then((product) => {\n let tags = product.tags || [];\n delete product.tags;\n let tagIds = tags.map(({ id }) => id);\n let promise = null;\n let index = tagIds.indexOf(this.props.tagId);\n if (index === -1) {\n tagIds.push(this.props.tagId);\n promise = api.put(Object.assign({}, product, { tagIds }));\n } else {\n promise = Promise.resolve();\n }\n promise.then(() => {\n this.setState((prevState) => {\n let products = [...prevState.products];\n let index = products.findIndex(({ id }) => id === product.id);\n let selectedProduct = Object.assign({}, products[index], {\n _status: \"added\",\n });\n products.splice(index, 1, selectedProduct);\n return { products };\n });\n });\n })\n .catch((err) => {\n console.error(err);\n handleError(err);\n this.setState((prevState) => {\n let products = [...prevState.products];\n let index = products.findIndex(({ id }) => id === product.id);\n let selectedProduct = Object.assign({}, products[index], {\n _status: \"failed\",\n });\n products.splice(index, 1, selectedProduct);\n return { products };\n });\n });\n }\n );\n }\n unlinkProductFromTag(product) {\n this.setState(\n (prevState) => {\n let index = prevState.products.findIndex(({ id }) => id === product.id);\n if (index === -1) {\n index = prevState.products.length;\n }\n let products = [...prevState.products];\n products.splice(\n index,\n 1,\n Object.assign({}, product, { _status: \"removing\" })\n );\n return { products };\n },\n () => {\n let api = new API({ url: `/catalogue-service/product/${product.id}` });\n api\n .get()\n .then((response) => Promise.resolve(response.data.product))\n .then((product) => {\n let tags = product.tags || [];\n delete product.tags;\n let tagIds = tags.map(({ id }) => id);\n let promise = null;\n let index = tagIds.indexOf(this.props.tagId);\n if (index > -1) {\n tagIds.splice(index, 1);\n promise = api.put(Object.assign({}, product, { tagIds }));\n } else {\n promise = Promise.resolve();\n }\n promise.then(() => {\n this.setState((prevState) => {\n let products = [...prevState.products];\n let index = products.findIndex(({ id }) => id === product.id);\n products.splice(index, 1);\n return { products };\n });\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n );\n }\n render() {\n const { Form } = this.components;\n const statusButtonTexts = {\n added: getMessage(\"tag.linkToProduct.product.action.remove\"),\n failed: getMessage(\"tag.linkToProduct.product.action.retry\"),\n };\n return (\n \n );\n }\n}\n","import React, { Component } from \"react\";\nimport {\n Checkbox,\n SingleDatePicker,\n TimePicker,\n} from \"../../../../components/Form\";\nimport Upload from \"../../../../components/FileUpload\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport csvIcon from \"./csv-icon.svg\";\nimport uploadIcon from \"./import-customers.svg\";\nimport infoIcon from \"./info-icon.svg\";\nimport sampleTags from \"./sample-tags.csv\";\nimport moment from \"moment\";\nimport { localTimeToUtc, getStandradDateTime } from \"../../../../lib/datetime\";\n\nimport \"./style.css\";\n\nfunction downloadCsv() {\n var hiddenElement = document.createElement(\"a\");\n hiddenElement.href = sampleTags;\n hiddenElement.target = \"_blank\";\n hiddenElement.download = \"sample-tags.csv\";\n hiddenElement.click();\n}\n\nexport default class TagsImport extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isScheduled: false,\n };\n this.getSampleCsv = this.getSampleCsv.bind(this);\n this.transformSubmit = this.transformSubmit.bind(this);\n }\n\n getSampleCsv(e) {\n e.preventDefault();\n downloadCsv();\n }\n transformSubmit(data) {\n // let data = Object.assign({}, fileData)\n if (\n this.state.isScheduled &&\n this.state.scheduleDate &&\n this.state.scheduleTime\n ) {\n let dateTime = moment().add(5, \"minutes\");\n let selectedDateTime = moment(\n this.state.scheduleDate + \" \" + this.state.scheduleTime\n );\n dateTime = selectedDateTime > dateTime ? selectedDateTime : dateTime;\n\n dateTime = getStandradDateTime(\n localTimeToUtc,\n dateTime.format(\"YYYY-MM-DD HH:mm\")\n );\n const formattedTimestamp = dateTime?.slice(0, -3);\n data.append(\"scheduledDateTime\", formattedTimestamp);\n }\n return data;\n }\n\n render() {\n return (\n \n
\n );\n }\n}\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport ListingPage, { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\nimport TagForm from \"./Form\";\nimport TagFilters from \"./Filters\";\nimport ProductLinkingForm from \"./ProductLinkingForm\";\nimport { Popup } from \"../../../components/Popup\";\nimport { getMessage } from \"../../../lib/translator\";\nimport TagsImport from \"./TagsImport\";\nimport { getSession } from \"../../../lib/auth\";\nimport { get } from \"../../../lib/storage\";\nimport API from \"../../../lib/api\";\nimport { IS_STAGING } from \"../../../config/app\";\n\nimport \"./style.css\";\n\nimport emptyIcon from \"./tags-empty.svg\";\nimport Image from \"../../../components/Image\";\n\nconst readBasicConfig = () => {\n let config = window.localStorage.getItem(\"config-basic\");\n if (config) {\n return JSON.parse(config);\n } else {\n return null;\n }\n};\n\nconst emptyState = {\n icon: emptyIcon,\n message: getMessage(\"tag.helpItems.message\"),\n actions: ({ onAction }) => (\n \n
\n \n \n
\n \n 
\n NOTE\n
\n \n
\n Note:
\n \n * The column 'action' takes the values 'A' or 'D', for\n add/delete{\" \"}\n
\n \n \n
\n \n {\n this.setState({ isScheduled: !this.state.isScheduled });\n }}\n />\n
\n {this.state.isScheduled && (\n \n this.setState({ scheduleDate: v })}\n />\n this.setState({ scheduleTime: v })}\n showSecond={false}\n minuteStep={15}\n />\n
\n )}\n \n {this.state.modalShown && (\n \n {\n this.setState({\n modalShown: true,\n });\n }}\n >\n + {getMessage(\"Import Tags\")}\n \n
\n );\n }\n}\n\nexport default class Tags extends Component {\n componentDidMount() {\n const api = new API({ url: `/config-service/config/basic` });\n api\n .get()\n .then((res) => {\n let data = res.data && res.data.basic;\n window.localStorage.setItem(\"config-basic\", JSON.stringify(data));\n })\n .catch((err) => {\n console.error(err);\n if (err.code === 401) throw err;\n });\n }\n render() {\n let props = this.props;\n return (\n \n \n
\n );\n }\n}\n","import React from \"react\";\nimport {\n BaseForm,\n Input,\n Radio,\n VALIDATION_TYPES,\n} from \"../../../../components/Form\";\n\nimport { getMessage } from \"../../../../lib/translator\";\n\nexport default class SubstitutionGroupFiltersForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state.values.status = \"\";\n }\n render() {\n const { SubmitButton, ClearButton } = this.buttons;\n const { Form } = this.components;\n return (\n \n );\n }\n}\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport ListingPage from \"../../../containers/ListingPage/listingRouter\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\nimport SubstitutionGroupForm from \"./Form\";\nimport SubstitutionGroupFilters from \"./Filters\";\nimport { Dialog } from \"../../../components/Popup\";\nimport Toggle from \"../../../components/Form/Inputs/Toggle\";\nimport API from \"../../../lib/api\";\nimport { getMessage } from \"../../../lib/translator\";\n\nimport emptyIcon from \"./empty.svg\";\n\nimport \"./style.css\";\n\nconst emptyState = {\n icon: emptyIcon,\n message: getMessage(\"substitutionGroup.helpItems.message\"),\n actions: ({ onAction }) => (\n \n + {getMessage(\"substitutionGroup.add.text\")}\n \n ),\n};\n\nclass TableActions extends Component {\n constructor(props) {\n super(props);\n this.state = {\n statusToggleConfirmation: false,\n };\n this.toggleStatus = this.toggleStatus.bind(this);\n }\n toggleStatus() {\n let { id, status } = this.props;\n status = status === \"ENABLED\" ? \"DISABLED\" : \"ENABLED\";\n let api = new API({ url: `/catalogue-service/substitution-group/${id}` });\n return api\n .put({ id, status })\n .then((response) => {\n this.props.onAction(\n TABLE_ACTIONS.UPDATE,\n { id },\n response.data.substitutionGroup\n );\n })\n .then(() => {\n this.setState({ statusToggleConfirmation: false });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n render() {\n const { id, status, onAction } = this.props;\n const toggledAction = status === \"ENABLED\" ? \"disable\" : \"enable\";\n return (\n \n {\n this.setState({ statusToggleConfirmation: false });\n }}\n closeText={getMessage(`substitutionGroup.dialogs.cancelText`)}\n />\n \n \n {getMessage(\"substitutionGroup.action.edit\")}\n \n \n {\n this.setState({ statusToggleConfirmation: true });\n }}\n >\n {getMessage(`substitutionGroup.action.${toggledAction}`)}\n \n {\n onAction(TABLE_ACTIONS.DELETE, { id });\n }}\n >\n {getMessage(\"substitutionGroup.action.delete\")}\n \n \n
\n );\n }\n}\n\nconst tableProperties = (isMobileView) => {\n return {\n headers: [\n getMessage(\"substitutionGroup.header.name\"),\n getMessage(\"substitutionGroup.header.productCount\"),\n getMessage(\"substitutionGroup.header.status\"),\n getMessage(\"substitutionGroup.header.actions\"),\n ],\n row: ({ id, name, image, productsCount, status, onAction }) => (\n \n \n
\n );\n } else {\n return (\n \n No data available\n
\n );\n }\n } else {\n return \n {this.props.count.toLocaleString()}\n {this.props.itemType}\n
\n )}\n \n
\n \n \n {(this.props.bottomLeftData === 0 || this.props.bottomLeftData) &&\n this.props.bottomLeftData}\n \n {this.props.bottomLeftType}\n
\n \n \n {(this.props.bottomRightData === 0 ||\n this.props.bottomRightData) &&\n this.props.bottomRightData}\n \n {this.props.bottomRightType}\n
\n \n No data available\n
\n );\n }\n return (\n {this.props.heading}
\n {reqData && (\n\n
\n )}\n \n No data available\n
\n );\n }\n }\n }\n}\n","import React from \"react\";\nimport {\n Radio,\n DateRangePicker,\n BaseForm,\n} from \"../../../../../components/Form\";\nimport SimpleBarChart from \"./simple-bar-chart\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport \"./style.css\";\n\nfunction sortDateArray(data, type) {\n let dates = Object.keys(data);\n let sortedDates = dates.sort(function (a, b) {\n return new Date(b) - new Date(a);\n });\n let reqArr = sortedDates.map(function (eachDate) {\n let newob = {};\n for (var property in data[eachDate][type]) {\n if (data[eachDate][type].hasOwnProperty(property)) {\n let newProperty = \"\";\n if (property === \"DESKTOP_NA_WEB\") {\n newProperty = getMessage(\"coupon.analytics.pieChart.DESKTOP_NA_WEB\");\n } else if (property === \"MOBILE_ANDROID_WEB\") {\n newProperty = getMessage(\n \"coupon.analytics.pieChart.MOBILE_ANDROID_WEB\"\n );\n } else if (property === \"MOBILE_IOS_WEB\") {\n newProperty = getMessage(\"coupon.analytics.pieChart.MOBILE_IOS_WEB\");\n } else {\n let splitString = property.split(\"_\");\n newProperty =\n splitString.length > 1 ? splitString.join(\" \") : property;\n }\n newob[newProperty] = data[eachDate][type][property];\n }\n }\n\n let ob = { Name: eachDate, ...newob };\n return ob;\n });\n\n return reqArr;\n}\n\nfunction fetchingDataKeys(data) {\n let arr = data.map((element, index) => {\n return Object.keys(element);\n });\n\n let dataKeys = [];\n arr.map((element) => {\n return element.map(function (elem) {\n if (elem !== \"Name\" && !dataKeys.includes(elem)) {\n dataKeys.push(elem);\n }\n return dataKeys;\n });\n });\n return dataKeys;\n}\n\nfunction generatingRadioOptions(data) {\n let radioOptions = [{ text: \"All\", value: \"\" }];\n data.map((val) => {\n let value = val.toLowerCase();\n return radioOptions.push({\n text: value.charAt(0).toUpperCase() + value.slice(1),\n value: val,\n });\n });\n\n return radioOptions;\n}\n\nexport default class AnalyticBarChart extends BaseForm {\n constructor(props) {\n super(props);\n\n this.state = {\n values: {\n dateRange: {\n startDate: this.props.startDate,\n endDate: this.props.endDate,\n },\n },\n };\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(dates) {\n let values = JSON.parse(JSON.stringify(this.state.values));\n values.dateRange.startDate = dates && dates.startDate;\n values.dateRange.endDate = dates && dates.endDate;\n\n this.setState({\n values,\n });\n this.props.onChange(values.dateRange);\n }\n\n componentDidUpdate(prevProps) {\n if (\n prevProps.startDate !== this.props.startDate ||\n prevProps.endDate !== this.props.endDate\n ) {\n let values = JSON.parse(JSON.stringify(this.state.values));\n values.dateRange.startDate = this.props.startDate;\n values.dateRange.endDate = this.props.endDate;\n this.setState({\n values,\n });\n }\n }\n\n render() {\n let reqArr = sortDateArray(this.props.chartData, this.props.chartType);\n let dataKeys = fetchingDataKeys(reqArr);\n let radioOptions = generatingRadioOptions(dataKeys);\n let gadgetSelected =\n this.state && this.state.values && this.state.values[\"options-select\"]\n ? this.state.values[\"options-select\"]\n : null;\n\n let filteredData = [];\n if (gadgetSelected && gadgetSelected !== \"\") {\n reqArr.map((item, index) => {\n let ob = {};\n ob.Name = item.Name;\n ob[gadgetSelected] = item[gadgetSelected];\n filteredData[index] = ob;\n return filteredData;\n });\n } else {\n filteredData = reqArr;\n }\n\n return (\n {this.props.heading}
\n\n
\n \n date > new Date()}\n label={getMessage(\"coupon.analytics.selectDates.heading\")}\n {...this.generateStateMappers({\n stateKeys: [\"dateRange\"],\n })}\n onChange={this.onChange}\n />\n \n this.props.onClickSubmit({\n startDate: this.state.values.dateRange\n ? this.state.values.dateRange.startDate\n : null,\n endDate: this.state.values.dateRange\n ? this.state.values.dateRange.endDate\n : null,\n })\n }\n />\n
\n \n
\n \n {\n this.hideErrorDialog();\n }}\n closeText={getMessage(\"coupon.dialog.okText\")}\n />\n
\n );\n }\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n {getMessage(\"coupon.analytics.heading\")}
\n {mainContent}\n\n
\n );\n }\n}\nclass ResetPassword extends Component {\n constructor(props) {\n super(props);\n this.state = {\n showSuccessDialog: false,\n showPasswordResetDialog: false,\n submitting: false,\n };\n this.showPasswordReset = this.showPasswordReset.bind(this);\n this.closeDialogs = this.closeDialogs.bind(this);\n this.onSend = this.onSend.bind(this);\n }\n onSend() {\n const api = new API({ url: \"/customer-service/reset-password\" });\n let params = {};\n params[\"username\"] = this.props.email;\n\n api\n .post(params)\n .then(\n (response) => {\n this.setState({\n showSuccessDialog: true,\n showPasswordResetDialog: false,\n });\n },\n (error) => {\n this.setState({ formError: error.message });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n showPasswordReset() {\n this.setState({\n showPasswordResetDialog: true,\n });\n }\n closeDialogs() {\n this.setState({\n showSuccessDialog: false,\n });\n }\n render() {\n return (\n \n {this.props.status === \"ENABLED\"\n ? getMessage(\"customer.table.actions.disable\")\n : getMessage(\"customer.table.actions.enable\")}\n
\n \n \n {getMessage(\"customer.action.reset.password\")}\n \n this.onSend()}\n close={() => this.setState({ showPasswordResetDialog: false })}\n closeText={getMessage(\"customer.reset.password.cancelText\")}\n okText={getMessage(\"customer.reset.password.confirmText\")}\n />\n
\n );\n }\n}\n\nconst TableView = (page, rerender) => {\n return {\n headers: [\n getMessage(\"customer.table.header.image\"),\n getMessage(\"customer.table.header.name\"),\n getMessage(\"customer.table.header.contact\"),\n getMessage(\"customer.table.header.joinDate\"),\n getMessage(\"customer.table.header.status\"),\n getMessage(\"customer.table.header.actions\"),\n ],\n row: ({\n id,\n image,\n name,\n lastName,\n phones,\n emails,\n status,\n joinedTime,\n lastOrderedOn,\n totalOrders,\n totalAmount,\n onAction,\n }) => {\n const [phone] = phones || []; // Only need the first phone\n const [email] = emails || []; // Only need the first email\n return (\n \n {joinedTime ? getPrintableTime(joinedTime).split(\",\")[0] : null}\n
\n \n {joinedTime ? getPrintableTime(joinedTime).split(\",\")[1] : null}\n \n {status}
\n \n \n {\n this.selectOption(index);\n }}\n >\n {item}\n \n ))}\n \n
\n );\n }\n}\n\nexport default ButtonWithOptions;\n","import React, { Component } from \"react\";\nimport ButtonWithOptions from \"../../../components/ButtonWithOptions\";\nimport { Popup } from \"../../../components/Popup\";\nimport {\n BaseForm,\n Input,\n Textarea,\n VALIDATION_TYPES,\n} from \"../../../components/Form\";\nimport { getMessage } from \"../../../lib/translator\";\nimport API from \"../../../lib/api\";\nimport Dialog from \"../../../components/Popup/Dialog\";\n\nimport icon from \"./icon.svg\";\nimport \"./style.css\";\n\nclass EmailForm extends BaseForm {\n render() {\n let { Form } = this.components;\n let { SubmitButton } = this.buttons;\n return (\n \n );\n }\n}\n\nclass Email extends Component {\n constructor(props) {\n super(props);\n this.state = {\n selected: 0,\n showForm: false,\n formError: \"\",\n };\n this.showPopup = this.showPopup.bind(this);\n this.closePopup = this.closePopup.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n this.closeDialog = this.closeDialog.bind(this);\n this.getDefaultIndex = this.getDefaultIndex.bind(this);\n }\n showPopup() {\n this.setState({ showForm: true });\n }\n closePopup() {\n this.setState({ showForm: false, formError: \"\" });\n }\n closeDialog() {\n this.setState({ showDialog: false });\n }\n handleSubmit(form) {\n let params = {};\n params.to =\n this.props.emails &&\n this.props.emails.length &&\n this.props.emails[this.state.selected] &&\n this.props.emails[this.state.selected].email;\n params.transactional = false;\n params.type = \"no-template\";\n params.data = {\n subject: form.subject,\n body: form.body,\n };\n let api = new API({ url: \"/communication-service/email\" });\n return api\n .post(params)\n .then(\n (response) => {\n this.dialogMessage = getMessage(\"customer.details.email.send\");\n this.setState({ showForm: false, showDialog: true, formError: \"\" });\n },\n (error) => {\n this.setState({ formError: error.message });\n if (Number(error.code) === 401) {\n throw error;\n }\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n componentDidMount() {\n this.getDefaultIndex(this.props);\n }\n\n componentWillReceiveProps(nextProps) {\n this.getDefaultIndex(nextProps);\n }\n\n getDefaultIndex({ emails, defaultEmailId }) {\n let index =\n (defaultEmailId &&\n emails &&\n emails.length &&\n emails.findIndex((email) => email.id === defaultEmailId)) ||\n 0;\n index = index > -1 ? index : 0;\n this.setState({ selected: index });\n }\n render() {\n let { selected } = this.state;\n let { emails } = this.props;\n let email =\n emails && emails.length && emails[selected] && emails[selected].email;\n let message = getMessage(\"customer.emailWidget.form.title\");\n return (\n \n \n email)}\n selectedOption={this.state.selected}\n onChange={(selected) => {\n this.setState({ selected });\n }}\n onClick={this.showPopup}\n >\n \n \n ) : (\n \n )}\n
\n );\n }\n}\n\nEmail.defaultProps = {\n emails: [],\n};\n\nexport default Email;\n","import React, { Component } from \"react\";\nimport ButtonWithOptions from \"../../../components/ButtonWithOptions\";\nimport { Popup } from \"../../../components/Popup\";\nimport {\n BaseForm,\n Select,\n Textarea,\n VALIDATION_TYPES,\n} from \"../../../components/Form\";\nimport { getMessage } from \"../../../lib/translator\";\nimport API from \"../../../lib/api\";\nimport Dialog from \"../../../components/Popup/Dialog\";\n\nimport icon from \"./icon.svg\";\nimport { format, parse } from \"libphonenumber-js\";\n\nimport \"./style.css\";\n\nclass CallForm extends BaseForm {\n render() {\n let { Form } = this.components;\n let { SubmitButton } = this.buttons;\n return (\n \n );\n }\n}\n\nclass Call extends Component {\n constructor(props) {\n super(props);\n this.state = {\n selected: 0,\n showForm: false,\n formError: \"\",\n };\n this.showPopup = this.showPopup.bind(this);\n this.closePopup = this.closePopup.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n this.closeDialog = this.closeDialog.bind(this);\n this.getDefaultIndex = this.getDefaultIndex.bind(this);\n }\n showPopup() {\n this.setState({ showForm: true });\n }\n closePopup() {\n this.setState({ showForm: false, formError: \"\" });\n }\n closeDialog() {\n this.setState({ showDialog: false });\n }\n handleSubmit(form) {\n let params = {};\n params.number =\n this.props.phones &&\n !!this.props.phones.length &&\n this.props.phones[this.state.selected] &&\n this.props.phones[this.state.selected].phone;\n params.transactional = false;\n params.type = \"no-template\";\n if (params.reason === \"Other\" && form.otherReason) {\n params.reason = form.otherReason;\n } else {\n params.reason = form.reason;\n }\n let api = new API({ url: \"/communication-service/call\" });\n return api\n .post(params)\n .then((response) => {\n this.dialogMessage = getMessage(\"customer.details.call.call\");\n this.setState({ showForm: false, showDialog: true });\n })\n .catch((error) => {\n this.setState({ formError: error.message });\n if (Number(error.code) === 401) {\n throw error;\n }\n console.error(error);\n });\n }\n\n componentDidMount() {\n this.getDefaultIndex(this.props);\n }\n\n componentWillReceiveProps(nextProps) {\n this.getDefaultIndex(nextProps);\n }\n\n getDefaultIndex({ phones, defaultPhoneId }) {\n let index =\n (defaultPhoneId &&\n phones &&\n phones.length &&\n phones.findIndex((phone) => phone.id === defaultPhoneId)) ||\n 0;\n index = index > -1 ? index : 0;\n this.setState({ selected: index });\n }\n\n render() {\n let { selected } = this.state;\n let { phones } = this.props;\n let phone =\n phones &&\n phones.length &&\n phones[selected] &&\n phones[selected].phone &&\n Object.keys(parse(phones[selected].phone)).length > 0\n ? format(parse(phones[selected].phone), \"International\")\n : phones[selected].phone;\n let message = getMessage(\"customer.callWidget.form.title\");\n return (\n \n \n {\n return phone\n ? Object.keys(parse(phone)).length > 0\n ? format(parse(phone), \"International\")\n : phone\n : null;\n })\n .filter((phone) => phone !== null)}\n selectedOption={this.state.selected}\n onChange={(selected) => {\n this.setState({ selected });\n }}\n onClick={this.showPopup}\n >\n \n \n ) : (\n \n )}\n
\n );\n }\n}\n\nCall.defaultProps = {\n phones: [],\n};\n\nexport default Call;\n","import React, { Component } from \"react\";\nimport {\n GoogleMap,\n withGoogleMap,\n withScriptjs,\n Marker,\n Polygon,\n InfoWindow,\n Polyline,\n DirectionsRenderer,\n} from \"react-google-maps\";\nimport { SearchBox } from \"react-google-maps/lib/components/places/SearchBox\";\nimport { DrawingManager } from \"react-google-maps/lib/components/drawing/DrawingManager\";\nimport { MarkerWithLabel } from \"react-google-maps/lib/components/addons/MarkerWithLabel\";\nimport { GOOGLE_MAPS_URL, GOOGLE_MAP_DEFAULT_KEY } from \"../../config/app.js\";\nimport { get } from \"../../lib/storage/index.js\";\n\nclass BaseMap extends Component {\n render() {\n const { props } = this;\n const defaultOptions = props.defaultOptions || null;\n return (\n \n 
\n
\n \n )}\n \n {location.pincode}\n
\n \n )}\n \n );\n }\n}\n\nclass PinCode extends Component {\n constructor(props) {\n super(props);\n this.state = {\n locations: [],\n };\n this.geocodeAddress = this.geocodeAddress.bind(this);\n }\n geocodeAddress(props) {\n const { pincodes } = props;\n let geocoder = new window.google.maps.Geocoder();\n let locations = [];\n let promises = [];\n pincodes &&\n pincodes.forEach((pincode) => {\n let promise = new Promise((resolve, reject) => {\n geocoder.geocode(\n { address: pincode.pincode.toString() },\n (results, status) => {\n if (status === window.google.maps.GeocoderStatus.OK) {\n locations.push({\n location: results[0].geometry.location,\n pincode: pincode.pincode,\n });\n }\n resolve();\n }\n );\n });\n promises.push(promise);\n });\n Promise.all(promises).then(() => {\n this.setState({\n locations,\n });\n });\n }\n componentDidMount() {\n let { pincodes } = this.props;\n if (pincodes) {\n this.geocodeAddress(pincodes);\n }\n }\n render() {\n let { locations } = this.state.locations?.length && this.state;\n let { index } = this.props;\n if (locations) {\n let markersWithInfo =\n locations.length &&\n locations.map((location, pincodeIndex) => {\n return (\n \n
\n \n )}\n {isTripPlannerPage && isDeliveryAreaExtensionEnabled && (\n \n \n
\n );\n }\n}\n\nclass Address extends Component {\n constructor(props) {\n super(props);\n this.state = {\n showForm: false,\n };\n this.showPopup = this.showPopup.bind(this);\n this.hidePopup = this.hidePopup.bind(this);\n }\n\n showPopup() {\n this.setState({\n showForm: true,\n });\n }\n\n hidePopup() {\n this.setState({\n showForm: false,\n });\n }\n\n render() {\n return (\n \n \n
\n );\n }\n}\nAddress.defaultProps = {\n address: [],\n};\n\nexport default Address;\n","import React, { Component } from \"react\";\nimport { BaseForm, VALIDATION_TYPES, Textarea } from \"../../../components/Form\";\nimport { getMessage } from \"../../../lib/translator\";\nimport API from \"../../../lib/api\";\nimport ButtonWithOptions from \"../../../components/ButtonWithOptions\";\nimport { Popup } from \"../../../components/Popup\";\nimport Dialog from \"../../../components/Popup/Dialog\";\n\nimport icon from \"./icon.svg\";\nimport { format, parse } from \"libphonenumber-js\";\n\nimport \"./style.css\";\n\nclass SmsForm extends BaseForm {\n render() {\n const { SubmitButton } = this.buttons;\n const { Form } = this.components;\n return (\n \n \n
\n );\n }\n}\n\nclass Sms extends Component {\n constructor(props) {\n super(props);\n this.state = {\n selected: 0,\n showForm: false,\n formError: \"\",\n message: \"\",\n };\n this.showPopup = this.showPopup.bind(this);\n this.closePopup = this.closePopup.bind(this);\n this.closeDialog = this.closeDialog.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n this.getDefaultIndex = this.getDefaultIndex.bind(this);\n }\n showPopup() {\n this.setState({ showForm: true });\n }\n closePopup() {\n this.setState({ showForm: false, formError: \"\" });\n }\n closeDialog() {\n this.setState({ showDialog: false });\n }\n\n componentDidMount() {\n this.getDefaultIndex(this.props);\n }\n\n componentWillReceiveProps(nextProps) {\n this.getDefaultIndex(nextProps);\n }\n\n getDefaultIndex({ phones, defaultPhoneId }) {\n let index =\n (defaultPhoneId &&\n phones &&\n phones.length &&\n phones.findIndex((phone) => phone.id === defaultPhoneId)) ||\n 0;\n index = index > -1 ? index : 0;\n this.setState({ selected: index });\n }\n\n handleSubmit(data) {\n const api = new API({ url: \"/communication-service/SMS\" });\n let params = {};\n params[\"to\"] =\n this.props.phones &&\n !!this.props.phones.length &&\n this.props.phones[this.state.selected] &&\n this.props.phones[this.state.selected].phone;\n params[\"transactional\"] = false;\n params[\"type\"] = \"no-template\";\n params[\"data\"] = {};\n params[\"data\"][\"content\"] = data.message;\n return api\n .post(params)\n .then(\n (response) => {\n this.dialogMessage = getMessage(\"customer.details.sms.send\");\n this.setState({ showForm: false, showDialog: true, formError: \"\" });\n },\n (error) => {\n this.setState({ formError: error.message });\n if (Number(error.code) === 401) {\n throw error;\n }\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n render() {\n let { selected } = this.state;\n let { phones } = this.props;\n let phone =\n phones &&\n phones.length &&\n phones[selected] &&\n phones[selected].phone &&\n Object.keys(parse(phones[selected].phone)).length > 0\n ? format(parse(phones[selected].phone), \"International\")\n : phones[selected].phone;\n let message = getMessage(\"customer.smsWidget.form.title\");\n return (\n \n \n {\n return phone\n ? Object.keys(parse(phone)).length > 0\n ? format(parse(phone), \"International\")\n : phone\n : null;\n })\n .filter((phone) => phone !== null)\n }\n selectedOption={this.state.selected}\n onChange={(selected) => {\n this.setState({ selected });\n }}\n onClick={this.showPopup}\n >\n \n \n ) : (\n \n )}\n
\n );\n }\n}\n\nSms.defaultProps = {\n phones: [],\n};\n\nexport default Sms;\n","import React from \"react\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport { isEnterprise } from \"../../../../../lib/auth\";\n\nimport \"./style.css\";\n\nconst InvoiceSummary = (props) => {\n const { currency, data } = props;\n let {\n shipping = 0.0,\n paid = 0.0,\n couponDiscount = 0.0,\n invoiceAmount = 0.0,\n refundAmount,\n loadedFromInvoice,\n editing = false,\n pendingAmount = 0.0,\n surcharge = 0,\n orderDiscount = [],\n clickAndCollectCharges = 0.0,\n taxBreakdown,\n } = data;\n couponDiscount = Number(couponDiscount);\n paid = Number(paid);\n let paymentAmountText = null;\n pendingAmount = Number(pendingAmount);\n if (!Number(!!refundAmount && Number(refundAmount))) {\n if (invoiceAmount > paid) {\n let amount = (invoiceAmount - paid).toFixed(2);\n if (!editing && pendingAmount >= 0) {\n amount = pendingAmount.toFixed(2);\n }\n paymentAmountText = (\n \n
\n );\n }\n } else {\n paymentAmountText = (\n \n {getMessage(\"order.details.summary.pendingAmount\")}\n
\n \n {currency.symbol} \n {amount}\n
\n \n
\n );\n }\n\n const orderSlotDiscount = orderDiscount\n .filter(({ reason }) => reason === \"ORDER_SLOT_DISCOUNT\")\n .reduce(\n (totalOrderDiscount, { discount }) =>\n totalOrderDiscount + Number(discount),\n 0\n );\n\n const shippingDiscount = orderDiscount\n .filter(({ reason }) => reason === \"HANDLING_DISCOUNT\")\n .reduce(\n (totalOrderDiscount, { discount }) =>\n totalOrderDiscount + Number(discount),\n 0\n );\n\n const allTaxes = {}; // will Store unique type of taxes\n const reducer = (accumulator, currentValue) =>\n +(+accumulator + +currentValue).toFixed(2); // utility function\n Object.keys(taxBreakdown).forEach((obj) =>\n Object.keys(JSON.parse(obj)).forEach((tax) => {\n if (typeof allTaxes[tax] === \"undefined\") allTaxes[tax] = 1;\n })\n ); // Store unique type of taxes in allTaxes\n let totalTaxValue = new Array(Object.keys(allTaxes).length).fill(0); // will store Total tax amounts for each type of taxes\n const allTaxPercentages = Object.keys(taxBreakdown).map((taxObj) =>\n Object.keys(allTaxes).map((tax) =>\n typeof JSON.parse(taxObj)[tax] === \"undefined\"\n ? 0\n : +JSON.parse(taxObj)[tax]\n )\n ); // Tax percentages (taxObj - stores tax percentage for each tax for a single tax Slab like {cgst: 14, igst: 9} )\n const priceBeforeTax = Object.keys(taxBreakdown).map((taxObj) =>\n (\n (taxBreakdown[taxObj] * 100) /\n ((Object.values(JSON.parse(taxObj)).length > 0\n ? +Object.values(JSON.parse(taxObj)).reduce(reducer)\n : 0) +\n 100)\n ).toFixed(2)\n ); // Calculate Price before tax for each Tax Slab (taxObj)\n const allTaxAmounts = Object.keys(taxBreakdown).map((taxObj, index) =>\n Object.keys(allTaxes).map((tax) =>\n typeof JSON.parse(taxObj)[tax] === \"undefined\"\n ? 0\n : +(priceBeforeTax[index] * (+JSON.parse(taxObj)[tax] / 100)).toFixed(2)\n )\n ); // Tax Amounts\n const netAmounts = Object.values(taxBreakdown);\n allTaxAmounts.forEach((taxes) =>\n taxes.forEach((tax, index) => (totalTaxValue[index] += +tax))\n ); // Calculate Total Tax amounts for each type of Tax\n const zeroTaxes = !Object.keys(allTaxes).length;\n\n return (\n \n {getMessage(\"order.details.summary.refundAmount\")}\n
\n \n {currency.symbol} \n \n {Number(refundAmount).toFixed(2)}\n \n
\n \n
\n );\n};\n\nexport default InvoiceSummary;\n","import React, { Component } from \"react\";\nimport InvoiceSummary from \"../InvoiceSummary\";\nimport Table, { Header, Row, Cell } from \"../../../../../components/Table\";\nimport Image from \"../../../../../components/Image\";\nimport { ProductSearch } from \"../../../../../components/Form\";\nimport {\n getNestedState,\n updateStateRecursively,\n} from \"../../../../../lib/stateManagement\";\nimport {\n getSession,\n isEnterprise,\n isExtensionEnabled,\n} from \"../../../../../lib/auth\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport { Dialog } from \"../../../../../components/Popup\";\nimport Loader from \"../../../../../components/Loader\";\n\nimport \"./style.css\";\nimport editIcon from \"../edit-icon.svg\";\nimport { truncateToTwoDecimal } from \"../../../../../lib/commonlyused\";\nimport newTag from \"./new-tag.png\";\nimport LShape from \"./L-shape.svg\";\nimport { fetchClientItemLabel } from \"../../../../catalogue/Products/Form\";\n\nconst haveAccess = (orderStatus, action) => {\n if (\n (action === \"PENDING\" && orderStatus === \"PENDING\") ||\n (action === \"PICKING\" &&\n (orderStatus === \"PICKING\" || orderStatus === \"PENDING\"))\n ) {\n return true;\n }\n};\n\nclass OrderItemsView extends Component {\n constructor(props) {\n super(props);\n this.state = this.generateStateFromProps(props, {\n items: [],\n editing: false,\n saving: false,\n error: false,\n productLookup: {},\n // The index of the item in the row that is to be removed\n // Setting this state will show confirmation popup\n itemToRemove: null,\n });\n this.getNestedState = getNestedState.bind(this);\n this.updateStateRecursively = updateStateRecursively.bind(this);\n this.startEditing = this.startEditing.bind(this);\n this.cancelEditing = this.cancelEditing.bind(this);\n this.submitChanges = this.submitChanges.bind(this);\n this.addProductToOrder = this.addProductToOrder.bind(this);\n }\n startEditing() {\n this.setState({ editing: true });\n }\n cancelEditing() {\n this.setState((prevState) =>\n this.generateStateFromProps(this.props, {\n editing: false,\n })\n );\n }\n submitChanges() {\n if (this.props.onChange) {\n // onChange method should return a promise\n this.setState(\n {\n editing: false,\n saving: true,\n },\n () => {\n this.props\n .onChange(this.state.items)\n .then(\n () => {\n this.setState({ error: false });\n },\n () => {\n this.setState({ error: true });\n }\n )\n .then(() => {\n this.setState({ saving: false });\n });\n }\n );\n }\n }\n addProductToOrder(newProduct) {\n if (!newProduct) {\n return;\n }\n // TODO: Find a better way to cause Searchable component to re-render\n this.setState({ productLookup: newProduct }, () => {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState, {\n productLookup: {},\n });\n // Check if new product exists in the order already\n let index = prevState.items.findIndex(\n (product) => product.id === newProduct.id\n );\n if (index > -1) {\n // Product exists, just increase quantity\n let item = prevState.items[index];\n if (item.isSoldByWeight) {\n let unit = item.variant\n ? item.variant.fullName &&\n item.variant.fullName.split(\" \").slice(-1).pop()\n : item.product\n ? item.product.name.split(\" \").slice(-1)[0]\n : \"\";\n unit = unit.toUpperCase();\n let multiplier = unit === \"KG\" || unit === \"L\" ? 1000 : 1;\n let weight = item.variant\n ? item.variant.fullName &&\n item.variant.fullName.split(\" \").slice(-2)[0]\n : item.product\n ? item.product.name.split(\" \").slice(-2)[0]\n : 1;\n weight = Number(weight);\n newState.items[index].orderDetails.orderedQuantity = (\n Number(item.orderDetails.orderedQuantity) +\n multiplier * weight\n ).toFixed(2);\n } else {\n newState.items[index].orderDetails.orderedQuantity = (\n Number(prevState.items[index].orderDetails.orderedQuantity) + 1\n ).toFixed(2);\n }\n } else {\n // Product doesn't exist, create a new entry\n let orderedQuantity = \"1.00\";\n let unit = null;\n let multiplier = 1;\n let weight = 1;\n if (newProduct.soldByWeight) {\n unit = newProduct.name.split(\" \").slice(-1)[0];\n unit = unit.toUpperCase();\n multiplier = unit === \"KG\" || unit === \"L\" ? 1000 : 1;\n weight = newProduct.name.split(\" \").slice(-2)[0];\n weight = Number(weight);\n orderedQuantity = (multiplier * weight).toFixed(2);\n } else {\n orderedQuantity = \"1.00\";\n }\n newState.items = [\n ...prevState.items,\n Object.assign(\n { id: newProduct.id, ...newProduct },\n {\n orderDetails: {\n factorForPutRequest: newProduct.soldByWeight\n ? multiplier * weight\n : 1,\n orderedQuantity,\n discount: (\n Number(newProduct.storeSpecificData.discount) /\n Number(orderedQuantity)\n ).toFixed(2),\n mrp: (\n Number(newProduct.storeSpecificData.mrp) /\n Number(orderedQuantity)\n ).toFixed(2),\n },\n }\n ),\n ];\n }\n return newState;\n });\n });\n }\n removeProductFromOrder(index) {\n this.updateStateRecursively(\n [\"items\", index, \"orderDetails\", \"orderedQuantity\"],\n 0\n );\n this.setState({ itemToRemove: null });\n }\n\n generateStateFromProps(props, state) {\n let newState = Object.assign({}, state, {\n items: [...props.data.items],\n });\n // TODO: Use immutable data structures instead\n return JSON.parse(JSON.stringify(newState));\n }\n componentWillReceiveProps(newProps) {\n if (newProps.data.items) {\n this.setState((prevState) =>\n this.generateStateFromProps(newProps, prevState)\n );\n }\n }\n\n getOfferProductUI = (items, id) => {\n const offObj = items?.find((e) =>\n e?.orderDetails?.offerReason?.orderItemId?.includes(id)\n );\n if (offObj) {\n let name = offObj.fullName || offObj.name;\n return (\n \n {!isEnterprise() && (\n \n
\n )}\n
\n\n | \n %{getMessage(\"order.details.summary.tax\")}\n | \n )}\n {Object.keys(allTaxes).map((tax) => (\n%{tax} | \n ))}\n\n {getMessage(\"order.details.summary.price\")}\n | \n {zeroTaxes && (\n\n {getMessage(\"order.details.summary.taxAmount\")}\n | \n )}\n {Object.keys(allTaxes).map((tax) => (\n\n {currency.symbol} {tax}\n | \n ))}\n\n {getMessage(\"order.details.summary.netAmount\")}\n | \n
|---|---|---|---|---|---|
| 0% | }\n {taxes.map((tax) => (\n{tax} % | \n ))}{\" \"}\n {/* Tax Percentages */}\n{`${currency.symbol} ${priceBeforeTax[index]}`} | \n {zeroTaxes && (\n{`${currency.symbol}0`} | \n )}\n {allTaxAmounts[index].map((taxAmount) => (\n\n {currency.symbol} {+taxAmount.toFixed(2)}\n | \n ))}{\" \"}\n {/* Tax Amounts */}\n{`${currency.symbol} ${+netAmounts[\n index\n ].toFixed(2)}`} | \n
| }\n {Object.keys(allTaxes).map((tax) => (\n | \n ))}\n | \n {getMessage(\"order.details.summary.totalTax\")} :\n | \n {zeroTaxes && (\n{`${currency.symbol} 0`} | \n )}\n {totalTaxValue.map((taxValue) => (\n\n {currency.symbol} {+taxValue.toFixed(2)}\n | \n ))}\n\n |
\n
\n \n
\n {shippingDiscount > 0 && (\n \n {props.data.type === \"DELIVERY\"\n ? getMessage(\"order.details.summary.shippingCharge\")\n : getMessage(\"order.details.summary.collectionCharge\")}\n
\n \n {currency.symbol} \n \n {props.data.type === \"DELIVERY\"\n ? Number(shipping).toFixed(2)\n : Number(clickAndCollectCharges).toFixed(2)}\n \n
\n \n
\n )}\n {Boolean(surcharge) && (\n \n {props.data.type === \"DELIVERY\"\n ? getMessage(\"order.details.summary.shippingDiscount\")\n : getMessage(\"order.details.summary.collectionDiscount\")}\n
\n \n -{currency.symbol} \n \n {Number(shippingDiscount || 0).toFixed(2)}\n \n
\n \n
\n )}\n {orderSlotDiscount > 0 && (\n \n {getMessage(\"order.details.summary.slotCharge\")}\n
\n \n {surcharge < 0 && -}\n {currency.symbol} \n \n {Number(surcharge).toFixed(2)}\n \n
\n \n
\n )}\n {couponDiscount > 0 && (\n \n {getMessage(\"order.details.summary.slotDiscount\")}\n
\n \n -{currency.symbol} \n \n {Number(orderSlotDiscount).toFixed(2)}\n \n
\n \n
\n )}\n \n {getMessage(\"order.details.summary.coupondiscount\")}\n
\n \n -{currency.symbol}\n \n {Number(couponDiscount).toFixed(2)}\n \n
\n \n
\n {paymentAmountText}\n {loadedFromInvoice && (\n \n {getMessage(\"order.details.summary.totalAmount\")}:\n
\n \n {currency.symbol} \n {invoiceAmount}\n
\n \n {getMessage(\"order.details.invoice.taxDisclaimer\")}\n
\n )}\n \n
\n );\n } else return null;\n };\n\n getOfferItems = (items) => {\n const orderItems = items?.filter((item) => item?.orderDetails?.offerReason);\n return orderItems;\n };\n\n render() {\n const currency = this.props.currency;\n const data = this.props.data;\n let invoiceAmount = data && data.invoiceAmount;\n let loadedFromInvoice = this.props.loadedFromInvoice;\n let productsInOrder = this.state.items;\n const isPendingOrCancelledOrPicking =\n this.props.status === \"PENDING\" ||\n this.props.status === \"CANCELLED\" ||\n this.props.status === \"PICKING\";\n const invoiceQuantity = isPendingOrCancelledOrPicking\n ? \"orderedQuantity\"\n : \"deliveredQuantity\";\n let totalMrp = this.state.items.reduce(\n (result, item) =>\n result +\n Number(item.orderDetails.mrp) *\n Number(item.orderDetails[invoiceQuantity]),\n 0\n );\n\n let totalDiscount = this.state.items.reduce(\n (result, item) =>\n result +\n Number(item.orderDetails.discount) *\n Number(item.orderDetails[invoiceQuantity]),\n 0\n );\n\n let totalAmountCalculated = this.state.editing\n ? parseFloat(totalMrp) - parseFloat(totalDiscount)\n : parseFloat(data.amount) - parseFloat(data.discount);\n\n let paidAmount = this.props.data.payment.reduce(\n (result, payment) =>\n result + (payment.status === \"COMPLETED\" ? Number(payment.amount) : 0),\n 0\n );\n\n let overlayClass = \"hidden\";\n if (this.state.saving) {\n overlayClass = \"\";\n } else if (this.state.error) {\n overlayClass = \"error-message\";\n }\n\n let totalTax = 0;\n const taxSlab = {};\n const taxBreakdown = {};\n const editableList = this.props.editableList;\n const orderStatus = this.props.status;\n\n const countryCode = getSession().organization?.countryCode || \"IN\";\n const label = fetchClientItemLabel(countryCode);\n\n const getRow = (item, index, isContainReplaceItem) => {\n const { orderDetails } = item;\n const tax = orderDetails.tax || {};\n\n if (\n loadedFromInvoice &&\n this.props.status === \"COMPLETED\" &&\n !Number(item.orderDetails.deliveredQuantity)\n ) {\n return null;\n }\n let image = item.images && item.images[0] ? item.images[0] : null;\n let mrp = Number(item.orderDetails.mrp);\n let discount = Number(item.orderDetails.discount) || 0;\n\n const storeSpecificData = item?.storeSpecificData?.[0];\n\n let orderedQuantity = item.orderDetails.orderedQuantity;\n let pickedQuantity = Number(item.orderDetails.deliveredQuantity);\n let chargeableQuantity =\n item.orderDetails.status === \"PENDING\" ||\n (item.orderDetails[\"deliveredQuantity\"] === undefined &&\n item.orderDetails.status === undefined)\n ? orderedQuantity\n : pickedQuantity;\n let isSoldByWeight = item.soldByWeight || false;\n let name = item.fullName || item.name;\n let clientItemId = item.clientItemId;\n let comment =\n item &&\n item.orderDetails &&\n item.orderDetails.metaData &&\n item.orderDetails.metaData.comment;\n let isNew = orderDetails?.metaData?.isNew;\n let unit = (name && name.split(\" \").slice(-1).pop()) || \"\";\n unit = unit.toUpperCase();\n let weight = name ? name.split(\" \").slice(-2)[0] : 1;\n let divider = 1;\n let multiplier = 1;\n let smallUnit = \"g\";\n if (unit === \"KG\" || unit === \"L\") {\n smallUnit = unit === \"KG\" ? \" g\" : \" ml\";\n multiplier = weight * 1000;\n divider = weight * 1000;\n }\n if (unit === \"G\" || unit === \"GM\" || unit === \"ML\") {\n multiplier = weight;\n divider = weight;\n }\n if (orderedQuantity === 0) {\n return null;\n }\n\n const amount = (mrp - discount) * chargeableQuantity;\n // To calculate total tax and tax slab\n let temp = 0;\n const taxValues = Object.values(tax);\n for (let i = 0; i < taxValues.length; i += 1) {\n temp += +taxValues[i];\n }\n\n const priceBeforeTax = (amount * 100) / (temp + 100);\n totalTax += amount - priceBeforeTax;\n taxSlab[temp] =\n typeof taxSlab[temp] === \"undefined\" ? amount : taxSlab[temp] + amount;\n\n Object.keys(tax).forEach(\n (taxType) => !tax[taxType] && delete tax[taxType]\n );\n taxBreakdown[JSON.stringify(tax)] =\n typeof taxBreakdown[JSON.stringify(tax)] === \"undefined\"\n ? +amount\n : taxBreakdown[JSON.stringify(tax)] + +amount;\n\n let replaceItems = orderDetails.replaceItems?.[0];\n const offerItems = this.getOfferItems(this.state?.items);\n const sellerName = orderDetails?.metaData?.sellerName || \"\";\n return (\n <>\n {getMessage(\"order.details.sample\")}
\n \n {offObj.brand ? (\n \n {\" \"}\n {offObj?.brand?.name} {name}\n
\n ) : (\n name\n )}\n \n \n 
\n
\n )}\n {!isContainReplaceItem && isNew && (\n \n 
\n
\n )}\n \n \n {item.brand ? (\n
\n {comment && (\n \n {\" \"}\n {item.brand.name}{\" \"}\n {name}\n
\n ) : (\n name\n )}\n \n {orderDetails.isFree && (\n \n {getMessage(\"order.details.sample\")}\n
\n )}\n {comment}
\n )}\n {this.getOfferProductUI(\n offerItems,\n item?.orderDetails?.orderItemId\n )}\n {label}
\n {clientItemId}\n \n {getMessage(\"product.dealer.price.header\")}\n
\n \n {this.props.currency.symbol}{\" \"}\n {isSoldByWeight\n ? (\n (storeSpecificData?.mrp - storeSpecificData?.discount) *\n multiplier\n ).toFixed(2)\n : (\n storeSpecificData?.mrp - storeSpecificData?.discount\n ).toFixed(2)}\n \n \n {getMessage(\"order.details.itemsTable.header.mrp\")}\n
\n \n {this.props.currency.symbol}{\" \"}\n {isSoldByWeight\n ? (mrp * multiplier).toFixed(2)\n : mrp.toFixed(2)}\n \n \n {`${key}`}\n {`: ${tax[key]}%`}\n
\n );\n })}\n \n {getMessage(\"order.details.itemsTable.header.discount\")}\n
\n \n {this.props.currency.symbol}{\" \"}\n {isSoldByWeight\n ? (discount * multiplier).toFixed(2)\n : discount.toFixed(2)}\n \n \n {getMessage(\"order.details.itemsTable.header.amount\")}\n
\n \n {this.props.currency.symbol} {amount.toFixed(2)}\n {this.state.editing\n ? !loadedFromInvoice &&\n haveAccess(orderStatus, editableList.isItemRemoval) && (\n {\n this.setState({ itemToRemove: index });\n }}\n >\n ×\n
\n )\n : null}\n \n \n {\n this.removeProductFromOrder(this.state.itemToRemove);\n }}\n close={() => {\n this.setState({ itemToRemove: null });\n }}\n closeText={getMessage(\"order.details.removeItem.cancelText\")}\n okText={getMessage(\"order.details.removeItem.confirmText\")}\n />\n \n {this.state.error || this.state.saving ? (\n
\n {productsInOrder.length <= 0 ? (\n this.state.editing ? (\n
\n );\n }\n}\n\nOrderItemsView.defaultProps = {\n data: {\n items: [],\n payment: [],\n },\n includeInvoice: true,\n};\n\nexport default OrderItemsView;\n","import React, { Component } from \"react\";\nimport { Popup } from \"../../../../../components/Popup\";\nimport OrderItemsView from \"../OrderItemsView\";\nimport Loader from \"../../../../../components/Loader\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport { getSession, isExtensionEnabled } from \"../../../../../lib/auth\";\nimport {\n formatDate,\n formatTime,\n getPrintableTime,\n} from \"../../../../../lib/datetime\";\nimport { parse, format } from \"libphonenumber-js\";\nimport API from \"../../../../../lib/api\";\nimport {\n getAsapDuration,\n getDisplayAddress,\n} from \"../../../../../lib/commonlyused\";\nimport {\n getStandradDateTime,\n utcToLocalTime,\n} from \"../../../../../lib/datetime\";\nimport \"./style.css\";\n\nclass OrderInvoice extends Component {\n constructor(props) {\n super(props);\n this.state = {};\n this.organization = getSession().organization;\n this.currency = this.organization.currency;\n this.hideInvoice = this.hideInvoice.bind(this);\n }\n hideInvoice() {\n this.props.close();\n }\n getData() {\n let referenceNumber = this.props.referenceNumber;\n let api = new API({ url: `/order-service/order/${referenceNumber}` });\n this.setState(\n {\n loading: true,\n failed: false,\n },\n () => {\n api\n .get()\n .then(\n (response) => {\n const order = response.data.order;\n if (order.createdAt) {\n order.createdAt = getStandradDateTime(\n utcToLocalTime,\n order.createdAt\n );\n }\n if (order.completedAt) {\n order.completedAt = getStandradDateTime(\n utcToLocalTime,\n order.completedAt\n );\n }\n if (order.updatedAt) {\n order.updatedAt = getStandradDateTime(\n utcToLocalTime,\n order.updatedAt\n );\n }\n if (order.preferredDate && order.slotStartTime) {\n const tempDate = getStandradDateTime(\n utcToLocalTime,\n `${order.preferredDate} ${order.slotStartTime}`\n ).split(\" \");\n order.preferredDate = tempDate[0];\n order.slotStartTime = tempDate[1];\n }\n if (order.preferredDate && order.slotEndTime) {\n const tempDate = getStandradDateTime(\n utcToLocalTime,\n `${order.preferredDate} ${order.slotEndTime}`\n ).split(\" \");\n order.slotEndTime = tempDate[1];\n }\n this.setState({\n failed: false,\n data: order,\n });\n },\n (error) => {\n this.setState({ failed: true });\n if (error.code === 401) {\n throw error;\n }\n }\n )\n .then(() => {\n this.setState(\n (prevState) => {\n return { loading: false };\n },\n () => {\n if (this.props.print) {\n window.print();\n this.hideInvoice();\n }\n }\n );\n })\n .catch((error) => {\n console.error(error);\n });\n }\n );\n if (isExtensionEnabled(\"EntityMetaData\") && !this.props.addressSequence) {\n this.api = new API({ url: \"/config-service/config/customers\" });\n this.api\n .get()\n .then((response) => {\n let addressSequence = response.data.customers.addressSequence;\n this.setState({\n addressSequence,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n }\n componentDidMount() {\n if (this.props.data) {\n this.setState({\n data: this.props.data,\n loading: false,\n failed: false,\n addressSequence: this.props.addressSequence,\n });\n } else if (this.props.show) {\n this.getData();\n }\n }\n componentDidUpdate(prevProps, prevState) {\n let { props } = this;\n let newData = props && props.data;\n let prevData = prevState && prevState.data;\n if (newData && prevData) {\n if (\n newData.amount !== prevData.amount ||\n newData.preferredDate !== prevData.preferredDate ||\n newData.slotStartTime !== prevData.slotStartTime ||\n newData.slotEndTime !== prevData.slotEndTime\n ) {\n this.setState({\n data: newData,\n });\n }\n }\n }\n render() {\n const data = this.state.data || {};\n const name =\n data.address &&\n data.address.metaData &&\n (data.address.metaData.FirstName || data.address.metaData.LastName)\n ? `${\n data.address.metaData.FirstName\n ? data.address.metaData.FirstName\n : \"\"\n } ${\n data.address.metaData.LastName ? data.address.metaData.LastName : \"\"\n }`\n : data.customer && data.customer.name;\n let contentLoaded =\n !this.state.loading && !this.state.failed && this.state.data;\n return contentLoaded ? (\n this.props.show ? (\n \n
\n \n {getMessage(\"order.details.itemsTable.title\")}\n ({productsInOrder.length})\n
\n {this.state.editing &&\n haveAccess(orderStatus, editableList.isItemAddition) && (\n\n
\n )}\n {!this.state.editing &&\n this.props.editable &&\n !this.state.saving &&\n !this.state.error && (\n \n {getMessage(\"order.details.itemsTable.clearingMessage\")}\n
\n ) : (\n \n {getMessage(\"order.details.itemsTable.emptyMessage\")}\n
\n )\n ) : null}\n \n
\n \n {this.state.editing ? (\n \n ) : null}\n {this.state.editing ? (\n \n {getMessage(\"order.details.itemsTable.actions.cancelText\")}\n \n ) : null}\n
\n {\n \n
\n \n ) : (\n \n )\n ) : this.props.show ? (\n \n {this.organization.logo && (\n
\n {this.state.data.store && (\n \n 
\n
\n )}\n \n
\n \n {this.state.data.clientId ? (\n \n {getMessage(\"order.details.invoice.order\")}\n \n {getMessage(\"order.table.clientId.prefix\")}\n \n {this.state.data.clientId}\n \n ) : (\n \n {getMessage(\"order.details.invoice.order\")}\n {this.state.data.referenceNumber}\n \n )}\n
\n\n {getPrintableTime(this.state.data.createdAt)}\n
\n \n
\n )}\n {this.state.data.store.name}
\n \n {this.state.data.store.address}\n
\n \n
\n \n
\n \n
\n {this.state.data?.billingAddress && (\n {name}
\n \n {this.state.data.customer &&\n this.state.data.customer.phones &&\n !!this.state.data.customer.phones.length > 0 &&\n Object.keys(parse(this.state.data.customer.phones[0].phone))\n .length > 0\n ? format(\n parse(this.state.data.customer.phones[0].phone),\n \"International\"\n )\n : this.state.data.customer &&\n this.state.data.customer.phones &&\n this.state.data.customer.phones.length\n ? this.state.data.customer.phones[0].phone\n : null}\n
\n\n {this.state.data.address && (\n \n {getDisplayAddress(\n this.state.data.address,\n this.state.addressSequence\n )}\n
\n )}\n {isExtensionEnabled(\"DeliverySlots\") &&\n this.state.data.address &&\n this.state.data.preferredDate && (\n \n
\n )}\n {this.state.data.pickupLocation && (\n \n {getMessage(\"order.details.slot.heading\")} :{\" \"}\n {` ${\n this.state.data.preferredDate &&\n formatDate(this.state.data.preferredDate)\n } , `}\n {this.state.data.slotType &&\n this.state.data.slotType === \"ASAP\" &&\n this.state.data.slotStartTime &&\n this.state.data.slotEndTime\n ? getAsapDuration(\n this.state.data.slotStartTime,\n this.state.data.slotEndTime\n )\n : this.state.data.slotStartTime\n ? formatTime(this.state.data.slotStartTime) +\n \" - \" +\n formatTime(this.state.data.slotEndTime)\n : this.state.data.slotEndTime\n ? \"Within \" +\n this.state.data.slotEndTime.split(\":\")[2] +\n \" minutes\"\n : null}\n
\n \n {this.state.data.pickupLocation.address}\n
\n )}\n \n
\n )}\n \n {getMessage(\n \"order.details.location.billing.address.title\"\n )}\n
\n \n {getDisplayAddress(\n this.state.data.billingAddress,\n this.state.addressSequence\n )}\n
\n \n
\n \n
\n \n {getMessage(`Thank you for shopping at `, {\n name: this.organization.name,\n })}\n
\n \n {getMessage(\"We look forward to serve you again\")}\n
\n \n {getMessage(`Visit us at`, {\n domain: this.organization.domain,\n })}\n
\n \n {`${getMessage(\"return.heading.for\")} `}\n {order && (\n {order.clientId ? \"#\" : \"Z\"}\n )}\n {order &&\n `${order.clientId ? order.clientId : this.state.referenceNumber}`}\n
\n {loading ? (\n\n \n
\n )}\n \n {!productReturned && (\n
\n );\n }\n}\nexport default CompleteOrderWithPickupPending;\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { Row, Cell } from \"../../../../../components/Table\";\nimport { Dialog, Popup } from \"../../../../../components/Popup\";\nimport {\n DropDown,\n DropDownItem,\n ICONS,\n} from \"../../../../../components/DropDown\";\nimport {\n Email as CustomerEmailWidget,\n Call as CustomerCallWidget,\n Address as CustomerMapWidget,\n} from \"../../../../../containers/CustomerWidgets\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport {\n getSession,\n isExtensionEnabled,\n hasPermissions,\n} from \"../../../../../lib/auth\";\nimport { getPrintableTime, formatTime } from \"../../../../../lib/datetime\";\nimport { getAsapDuration } from \"../../../../../lib/commonlyused\";\nimport { TABLE_ACTIONS } from \"../../../../../containers/ListingPage\";\nimport OrderInvoice from \"../../Details/OrderInvoice\";\nimport FileForReturn from \"../../../Returns/Form/FileForReturn\";\nimport CompletePickupPendingOrder from \"../../../Returns/Form/CompletePickupPending\";\nimport { Consumer } from \"../index\";\nimport pickupImage from \"./pickup.svg\";\nimport deliveyImage from \"./delivery.svg\";\nimport offlineImage from \"./offline.svg\";\nimport B2BImage from \"./b2b.svg\";\nimport API from \"../../../../../lib/api\";\nimport { getOrderPermissions } from \"../index\";\nimport Image from \"../../../../../components/Image\";\nimport { isMarketPlaceOwner } from \"../../../../../lib/marketPlace\";\n\nimport { GO_HOST } from \"../../../../../config/app\";\nimport { is_Domain_Scarlet } from \"../../../../../utils/domainCheck\";\n\nconst showConfig = () => {\n if (GO_HOST.includes(\"tamimimarkets.com\")) return false;\n return true;\n};\n\n// Mapping order status with the relevant message key\nconst orderStatus = {\n COMPLETED: \"order.status.completed\",\n CANCELLED: \"order.status.cancelled\",\n PENDING: \"order.status.pending\",\n PICKED: \"order.status.picked\",\n CHECKED: \"order.status.checked\",\n PACKED: \"order.status.packed\",\n PICKING: \"order.status.picking\",\n \"PARTIALLY-PICKED\": \"order.status.partiallypicked\",\n CHECKING: \"order.status.checking\",\n PACKING: \"order.status.packing\",\n DISPATCHED: \"order.status.dispatched\",\n RETURNED: \"order.status.returned\",\n};\n\nconst orderTypeImages = {\n PICKUP: pickupImage,\n DELIVERY: deliveyImage,\n B2B: B2BImage,\n OFFLINE: offlineImage,\n};\n\n// Logic to decide what payment status should be shown for the order\nconst PaymentStatusText = ({ status, pendingAmount, refundAmount }) => {\n let text = \"\";\n switch (status) {\n case \"PAID\":\n text = (\n {getMessage(\"order.payment.paid\")}\n );\n break;\n case \"PENDING\":\n text = (\n \n {getMessage(\"order.table.pendingAmount\", {\n currency: getSession().organization.currency.symbol,\n amount: Number(pendingAmount).toFixed(2),\n })}\n \n );\n break;\n case \"REFUND\":\n text = (\n \n {getMessage(\"order.table.refundAmount\", {\n currency: getSession().organization.currency.symbol,\n amount: Number(pendingAmount).toFixed(2),\n })}\n \n );\n break;\n default:\n break;\n }\n return text;\n};\nconst FillRateText = ({ fillRate = 0 }) => {\n return (\n \n {(fillRate === 0 || fillRate) &&\n getMessage(\"order.table.text.fillrate\") +\n Math.round(fillRate * 100) / 100 +\n \"%\"}\n \n );\n};\n\nconst tripStatus = [\"DISPATCHED\", \"COMPLETED\", \"RETURNED\"];\n\nclass TableActions extends Component {\n constructor(props) {\n super(props);\n this.state = {\n showCompleteDialog: false,\n showCancelDialog: false,\n showInvoice: false,\n printInvoice: false,\n showLog: false,\n showPickupPending: false,\n orderActions: getOrderPermissions(),\n };\n this.returnableStatuses = [\"COMPLETED\"];\n this.isInStoreEnabled = isExtensionEnabled(\"InStoreProcessing\");\n this.isLogisticsEnabled = isExtensionEnabled(\"LogisticsSupport\");\n this.returnableStatuses.push(\"PACKED\");\n this.returnableStatuses.push(\"DISPATCHED\");\n\n this.printInvoice = this.printInvoice.bind(this);\n }\n printInvoice() {\n this.setState((prevState) => {\n return {\n showInvoice: true,\n printInvoice: true,\n };\n });\n }\n handleCourierDispatch = (referenceNumber) => {\n const courierApi = new API({\n url: `/logistics-service/courier/${referenceNumber}`,\n });\n courierApi\n .put()\n .then((_) => {\n this.setState({\n dispatchFormError: \"\",\n showSuccessDispatchDialog: true,\n });\n })\n .catch((error) => {\n this.setState({\n dispatchFormError: error.message,\n showErrorDispatchDialog: true,\n });\n console.error(error);\n });\n };\n closeDispatchDialogs = (onAction, whichDialogue) => {\n this.setState(\n {\n showSuccessDispatchDialog: false,\n showErrorDispatchDialog: false,\n },\n () => {\n if (whichDialogue === \"success\") onAction(TABLE_ACTIONS.REFRESH);\n }\n );\n };\n\n render() {\n let {\n referenceNumber,\n status,\n onAction,\n type,\n paymentStatus,\n pendingAmount,\n clientId,\n url,\n returnsByRE,\n courierDetails,\n } = this.props;\n const productReturned = (returnsByRE && returnsByRE.length > 0) || false; // to know product returned or not\n let hasOrderEditPermissions = hasPermissions(\"order\", \"order\", \"PUT\");\n let hasOrderPostPermissions = hasPermissions(\"order\", \"order\", \"post\");\n let canBeCompleted =\n hasOrderEditPermissions && isExtensionEnabled(\"InStoreProcessing\")\n ? isExtensionEnabled(\"LogisticsSupport\")\n ? status === \"DISPATCHED\"\n : status === \"PACKED\"\n : isExtensionEnabled(\"LogisticsSupport\")\n ? status === \"DISPATCHED\"\n : isExtensionEnabled(\"ShipRocket\")\n ? status === \"DISPATCHED\" && courierDetails?.vendor === \"OTHER\"\n : !(\n !isExtensionEnabled(\"InStoreProcessing\") &&\n isExtensionEnabled(\"ShipRocket\")\n ) && status === \"PACKED\";\n let canBePendingToPacked =\n hasOrderEditPermissions &&\n !isExtensionEnabled(\"InStoreProcessing\") &&\n status === \"PENDING\";\n let canBeReturned =\n hasOrderPostPermissions &&\n isExtensionEnabled(\"OrderReturns\") &&\n this.returnableStatuses.indexOf(status) > -1;\n const canBeDisputed =\n isExtensionEnabled(\"OrderDisputes\") && status === \"COMPLETED\";\n let canShowTrip =\n isExtensionEnabled(\"LogisticsSupport\") &&\n tripStatus.indexOf(status) > -1 &&\n hasPermissions(\"logistics\", \"trip\", \"get\") &&\n type.name === \"DELIVERY\";\n let canBeDispatched = Boolean(courierDetails)\n ? [\"RESERVED\", \"CANCELLED\"].includes(courierDetails?.status) &&\n isExtensionEnabled(\"ShipRocket\") &&\n status === \"PACKED\" &&\n type &&\n type.name === \"DELIVERY\"\n : isExtensionEnabled(\"ShipRocket\") &&\n status === \"PACKED\" &&\n type &&\n type.name === \"DELIVERY\";\n if (type && type.name === \"PICKUP\" && status === \"PACKED\") {\n canBeCompleted = true;\n }\n let canBeCancelled =\n (status === \"PENDING\" || status === \"RETURNED\") &&\n hasPermissions(\"order\", \"order\", \"put\");\n let registerPayments =\n paymentStatus === \"PENDING\" &&\n (!isExtensionEnabled(\"LogisticsSupport\") ||\n (type && type.name === \"PICKUP\"));\n const isStatusPacked = status === \"PACKED\" || false;\n const packedOrderEdit = this.props.packedOrderEdit || false;\n const fromOperations = this.props.url === \"/operations\";\n const hasAccessToAction = this.state.orderActions;\n\n const hideOptionForSeller =\n !isExtensionEnabled(\"MarketPlace\") || isMarketPlaceOwner();\n const hasAccessToInvoice = this.props.invoiceSupportEnabled && showConfig();\n\n return (\n \n {getMessage(\"order.details.completion.title\")}\n
\n )}\n \n {productReturned\n ? getMessage(\"order.details.packed.item.return.message\")\n : getMessage(\"order.details.completion.message\")}\n
\n \n {productReturned ? (\n \n {getMessage(\"order.details.completion.confirmReturnItem\")}\n \n ) : (\n \n {getMessage(\"order.details.completion.confirmText\")}\n \n )}\n \n
\n \n this.closeDispatchDialogs(onAction, \"success\")}\n closeText={getMessage(\"okay.text\")}\n />\n this.closeDispatchDialogs(onAction)}\n closeText={getMessage(\"okay.text\")}\n />\n {\n onAction(\n TABLE_ACTIONS.UPDATE,\n { referenceNumber },\n { status: \"COMPLETED\" }\n );\n this.setState({ showCompleteDialog: false });\n }}\n close={() => this.setState({ showCompleteDialog: false })}\n okText={getMessage(\"order.details.completion.confirmText\")}\n closeText={getMessage(\"order.details.completion.cancelText\")}\n />\n {\n onAction(\n TABLE_ACTIONS.UPDATE,\n { referenceNumber },\n { status: \"CANCELLED\" }\n );\n this.setState({ showCancelDialog: false });\n }}\n close={() => this.setState({ showCancelDialog: false })}\n okText={getMessage(\"order.details.cancellation.confirmText\")}\n closeText={getMessage(\"order.details.cancellation.cancelText\")}\n />\n {this.state.showMoveToPendingDialog && (\n {\n onAction(\n TABLE_ACTIONS.UPDATE,\n { referenceNumber },\n { status: \"PENDING\" }\n );\n }}\n close={() => this.setState({ moveCancelledToPending: false })}\n okText={getMessage(\"order.details.cancellation.confirmText\")}\n closeText={getMessage(\"order.details.cancellation.cancelText\")}\n />\n )}\n {this.state.showInvoice && (\n \n this.setState({ showInvoice: false, printInvoice: false })\n }\n print={this.state.printInvoice}\n />\n )}\n {this.state.showReturn && (\n this.setState({ showReturn: false })}\n className=\"file-for-return\"\n heading={`${getMessage(\"return.file.heading\")} #${referenceNumber}`}\n >\n this.setState({ showReturn: false })}\n onAction={onAction}\n status={status}\n />\n \n )}\n {this.state.showPickupPending && (\n this.setState({ showPickupPending: false })}\n className=\"pickup-pending-form\"\n >\n this.setState({ showPickupPending: false })}\n onComplete={() => {\n onAction(\n TABLE_ACTIONS.UPDATE,\n { referenceNumber },\n { status: \"COMPLETED\" }\n );\n this.setState({\n showPickupPending: false,\n });\n }}\n onPickupPendingComplete={(params) => {\n onAction(TABLE_ACTIONS.UPDATE, { referenceNumber }, params);\n }}\n />\n \n )}\n \n \n {getMessage(\"order.action.viewDetails\")}\n \n \n\n {hasAccessToInvoice && (\n this.setState({ showInvoice: true })}>\n {getMessage(\"order.action.viewInvoice\")}\n \n )}\n\n {canBeDisputed && (\n \n \n {getMessage(\"order.details.dispute.optionText\")}\n \n \n )}\n\n {canShowTrip && (\n \n \n {getMessage(\"order.actions.trips\")}\n \n \n )}\n\n {hasAccessToInvoice && (\n \n {getMessage(\"order.action.printInvoice\")}\n \n )}\n {hideOptionForSeller &&\n canBeCancelled &&\n hasAccessToAction?.includes(\"CANCEL_ORDER\") && (\n {\n this.setState({\n showCancelDialog: true,\n });\n }}\n >\n {getMessage(\"order.action.cancel\")}\n \n )}\n {hideOptionForSeller && canBePendingToPacked && (\n \n \n {getMessage(\"order.action.packed\")}\n \n \n )}\n {hideOptionForSeller &&\n canBeCompleted &&\n hasAccessToAction?.includes(\"COMPLETE_ORDER\") &&\n (!registerPayments ? (\n {\n if (!isExtensionEnabled(\"OrderReturns\")) {\n this.setState({ showCompleteDialog: true });\n } else {\n this.setState({ showPickupPending: true });\n }\n }}\n >\n {getMessage(\"order.action.complete\")}\n \n ) : (\n \n \n {getMessage(\"order.action.complete\")}\n \n \n ))}\n {hideOptionForSeller && canBeDispatched && (\n {\n if (courierDetails?.status === \"RESERVED\") {\n this.handleCourierDispatch(referenceNumber);\n }\n }}\n >\n {courierDetails?.status === \"RESERVED\" ? (\n <>{getMessage(\"order.action.dispatch\")}\n ) : (\n \n {getMessage(\"order.action.dispatch\")}\n \n )}\n \n )}\n {hideOptionForSeller &&\n canBeReturned &&\n hasAccessToAction?.includes(\"RETURN_ORDER\") && (\n \n \n {getMessage(\"order.action.return\")}\n \n \n )}\n {hideOptionForSeller && (\n \n \n {getMessage(\"order.actions.logs\")}\n \n \n )}\n\n {hideOptionForSeller &&\n isStatusPacked &&\n packedOrderEdit &&\n fromOperations &&\n hasAccessToAction?.includes(\"EDIT_ORDER\") && (\n \n \n {getMessage(\"order.action.editPackedOrder\")}\n \n \n )}\n \n
\n );\n }\n}\n\nconst tableHeader = (url) => {\n let headers = [\n getMessage(\"order.table.header.referenceNumber\"),\n getMessage(\"order.table.header.customer\"),\n getMessage(\"order.table.header.placedTime\"),\n getMessage(\"order.table.header.amount\"),\n getMessage(\"order.table.header.status\"),\n getMessage(\"order.table.header.completionTime\"),\n getMessage(\"order.table.header.actions\"),\n ];\n if (!is_Domain_Scarlet()) {\n headers.splice(5, 0, getMessage(\"order.table.header.courierAndCharge\"));\n }\n if (isExtensionEnabled(\"DeliverySlots\")) {\n headers.splice(3, 0, getMessage(\"order.table.header.expectedTime\"));\n }\n return headers;\n};\nconst tableProperties = (url, packedOrderEdit, orderConfiguration) => {\n return {\n headers: tableHeader(),\n row: ({\n items,\n slotType,\n clientId,\n referenceNumber,\n customer,\n address,\n completedAt,\n createdAt,\n invoiceAmount,\n itemCount,\n status,\n store,\n pickupLocation,\n pendingAmount,\n refundAmount,\n type,\n onAction,\n preferredDate,\n slotStartTime,\n slotEndTime,\n paymentStatus,\n fillRate,\n returnsByRE,\n courierDetails,\n shipping,\n }) => (\n \n
\n \n {type.name && (\n
\n \n
\n )}\n \n
\n \n \n {clientId ? (\n \n \n {\" \"}\n {getMessage(\"order.table.clientId.prefix\")}{\" \"}\n {\" \"}\n {clientId}\n \n ) : (\n \n {\" \"}\n \n {\" \"}\n {getMessage(\n \"order.table.referenceNumber.prefix\"\n )}{\" \"}\n {\" \"}\n {referenceNumber}\n \n )}\n \n
\n {type.name === \"PICKUP\" ? (\n \n {pickupLocation && pickupLocation.name}\n \n ) : (\n store && (\n \n {store.name}\n \n )\n )}\n \n {customer ? (\n \n {customer?.name}\n \n ) : null}\n
\n \n {address && (\n
\n \n {createdAt\n ? getPrintableTime(createdAt).split(\", \")[0]\n : null}\n
\n \n {createdAt\n ? getPrintableTime(createdAt).split(\", \")[1]\n : null}\n \n \n {preferredDate\n ? getPrintableTime(preferredDate).split(\", \")[0]\n : null}\n
\n \n {((organization.currency && organization.currency.symbol) ||\n \"\") + invoiceAmount}\n
\n \n {getMessage(\"order.table.itemCount\", {\n count: itemCount || (items && items.length) || 0,\n })}\n \n \n {orderStatus[status] ? getMessage(orderStatus[status]) : null}\n
\n {courierName ?? \"\"}
\n\n \n {courierCharge\n ? getSession().organization.currency.symbol +\n Number(courierCharge).toFixed(2)\n : null}\n \n \n )}\n \n {completedAt\n ? getPrintableTime(completedAt).split(\", \")[0]\n : null}\n
\n \n {completedAt\n ? getPrintableTime(completedAt).split(\", \")[1]\n : null}\n \n \n
\n );\n}\n","import React, { Component, useState } from \"react\";\nimport ListingPage, { TABLE_ACTIONS } from \"../../../../containers/ListingPage\";\nimport StoreSelector from \"../../../../containers/StoreSelector\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport OrderFilters from \"./Filters\";\nimport { tabularView } from \"./Views\";\nimport { Link } from \"react-router-dom\";\nimport API from \"../../../../lib/api\";\nimport { isExtensionEnabled } from \"../../../../lib/auth\";\nimport emptyIcon from \"./no-orders.svg\";\nimport rcmIcon from \"./rcm.svg\";\nimport seoIcon from \"./seo.svg\";\nimport newCustomerIcon from \"./new-customer.svg\";\nimport { DropDown, DropDownItem } from \"../../../../components/DropDown\";\nimport { Popup } from \"../../../../components/Popup\";\nimport \"./style.css\";\nimport { utcToLocalTime, getStandradDateTime } from \"../../../../lib/datetime\";\nimport checkHttpResponseCode from \"../../../../utils/isApiCallSuccessfull\";\nimport OrderUpload from \"../OrderUpload/index\";\nimport { getSession, getPermissionObject } from \"../../../../lib/auth\";\n\nconst bulkOrderFeatureDomains = [\"dashboard\", \"enterprise\", \"localhost\"];\n\nconst DEFAULT_ORDER_PERMISSIONS = [\n \"CREATE_ORDER\",\n \"EDIT_ORDER\",\n \"COMPLETE_ORDER\",\n \"CANCEL_ORDER\",\n \"RETURN_ORDER\",\n \"EDIT_CUSTOM_FIELDS\",\n];\n\nexport const getOrderPermissions = () => {\n const userObject = getSession().user;\n if (!userObject?.isOwner) {\n const orderPermissions = getPermissionObject(\"order-service\", \"order\");\n const permissions = orderPermissions.metaData?.permissions;\n let modifiedPermissions = [];\n if (permissions?.canCreate) {\n modifiedPermissions.push(\"CREATE_ORDER\");\n }\n if (permissions?.canEdit) {\n modifiedPermissions.push(\"EDIT_ORDER\");\n }\n if (permissions?.canComplete) {\n modifiedPermissions.push(\"COMPLETE_ORDER\");\n }\n if (permissions?.canCancel) {\n modifiedPermissions.push(\"CANCEL_ORDER\");\n }\n if (permissions?.canRefund) {\n modifiedPermissions.push(\"RETURN_ORDER\");\n }\n if (permissions?.canEditCustomFields) {\n modifiedPermissions.push(\"EDIT_CUSTOM_FIELDS\");\n }\n return modifiedPermissions;\n }\n return DEFAULT_ORDER_PERMISSIONS;\n};\n\nfunction CreateNewOrder() {\n const [showPopup, setShowPopup] = useState(false);\n const showModal = () => {\n setShowPopup(!showPopup);\n };\n\n let subDomain = window.location.hostname.split(\".\")[0];\n const isbulkOrderFeatureEnabled = bulkOrderFeatureDomains.includes(subDomain);\n\n return (\n \n
\n \n \n
\n\n \n \n
\n \n \n \n + {getMessage(\"order.add.text\")}\n \n }\n >\n \n \n {getMessage(\"order.add.text\")}\n \n \n \n {getMessage(\"order.add.bulk.text\")}\n \n \n ) : (\n \n + {getMessage(\"order.add.text\")}\n \n )}\n
\n );\n}\n\nconst emptyState = (props) => {\n return {\n icon: emptyIcon,\n message: getMessage(\"order.emptyList.message\"),\n actions: ({ onAction, apiParams }) => (\n Customer Support
\n \n {this.state.submitting ? (\n\n {this.state.customer ? (\n this.state.customer.length > 0 ? (\n
\n )}\n \n \n {CustomerTableView(\"customer-support\").headers ? (\n
\n
\n ) : (\n \n {getMessage(\"customerSupport.search.noCustomer\")}\n
\n )\n ) : this.state.isApiCalled ? (\n \n {getMessage(\"customerSupport.search.noCustomer\")}\n
\n ) : null}\n {this.state.orderSearch ? (\n \n
\n );\n}\n","import React, { Component } from \"react\";\nimport { hasPermissions } from \"../../lib/auth\";\nimport Image from \"../Image\";\nimport {\n Email as CustomerEmailWidget,\n Call as CustomerCallWidget,\n Sms as CustomerSmsWidget,\n} from \"../../containers/CustomerWidgets\";\nimport { format, parse } from \"libphonenumber-js\";\nimport \"./style.css\";\n\nexport default class CustomerDetailsCard extends Component {\n render() {\n const {\n phones,\n emails,\n image,\n communicationConfig,\n defaultPhone,\n defaultEmail,\n defaultEmailId,\n defaultPhoneId,\n } = this.props;\n let allowCall =\n communicationConfig &&\n communicationConfig.communication &&\n communicationConfig.communication.allowCall !== false;\n let allowSms =\n communicationConfig &&\n communicationConfig.communication &&\n communicationConfig.communication.allowSms !== false;\n let allowEmail =\n communicationConfig &&\n communicationConfig.communication &&\n communicationConfig.communication.allowEmail !== false;\n\n let number =\n phones && phones.filter((number) => number.id === defaultPhoneId);\n number = number && number.length > 0 && number[0] && number[0].phone;\n let email = emails && emails.filter((email) => email.id === defaultEmailId);\n email = email && email.length > 0 && email[0] && email[0].email;\n return (\n \n
\n {props.title}
\n {props.description}
\n \n
\n );\n }\n}\n","import React from \"react\";\nimport Image from \"../Image\";\nimport phoneIcon from \"./cx-phone-icon.svg\";\nimport emailIcon from \"./cx-email-icon.svg\";\nimport verifiedIcon from \"./verified.svg\";\nimport \"./style.css\";\nimport { getMessage } from \"../../lib/translator\";\nimport { DropDown, DropDownItem } from \"../DropDown\";\n\nimport icon from \"./actions.png\";\n\nfunction customerContactActions(action, actions, props) {\n if (action === actions.setAsDefault) {\n props.setDefaultPhoneOrEmail &&\n props.setDefaultPhoneOrEmail(props.type, props.id);\n } else if (action === actions.delete) {\n props.showDeleteOption && props.onDelete(props.id);\n }\n}\n\nexport default function PhoneAndEmailDisplay(props) {\n let actions = {\n setAsDefault: getMessage(\"customer.contact.details.set.default\"),\n delete: getMessage(\"customer.contact.details.delete\"),\n };\n const isDefault = props.defaultId === props.id;\n return (\n \n
\n \n
\n {(defaultEmail && defaultEmail.email) || email}
\n \n {(defaultPhone && defaultPhone.phone\n ? Object.keys(parse(defaultPhone.phone)).length > 0\n ? format(parse(defaultPhone.phone), \"International\")\n : defaultPhone.phone\n : null) ||\n (number && Object.keys(parse(number)).length > 0\n ? format(parse(number), \"International\")\n : number)}\n
\n \n {allowCall &&\n hasPermissions(\"communication\", \"call\", \"post\") &&\n phones &&\n !!phones.length && (\n
\n \n
\n );\n}\n","import React from \"react\";\nimport { BaseForm } from \"../../../../../../components/Form\";\nimport { getMessage } from \"../../../../../../lib/translator\";\nimport API from \"../../../../../../lib/api\";\nimport Map from \"../../../../../../containers/CustomerWidgets/AddressMap\";\nimport \"./style.css\";\n\nclass MapForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state = {\n formError: \"\",\n submitting: false,\n };\n let lat = props.coordinates && Number(props.coordinates.lat);\n let lng = props.coordinates && Number(props.coordinates.lng);\n if (lat && lng) {\n this.state.values = {\n location: {\n lat: lat,\n lng: lng,\n },\n };\n }\n [\"setNewLocation\", \"showError\"].forEach((fn) => {\n this[fn] = this[fn].bind(this);\n });\n }\n\n setNewLocation(lat, lng) {\n let values = { ...this.state.values };\n values.location = { lat, lng };\n this.setState({\n values,\n formError: null,\n });\n }\n\n showError(error) {\n this.setState({\n formError: error,\n });\n }\n\n onSubmit(data) {\n this.setState({\n submitting: true,\n });\n const api = new API({\n url: `/customer-service/address/${this.props.addressId}`,\n });\n let params = {};\n let lat = null;\n let lng = null;\n if (this.state.values && this.state.values.location) {\n lat = this.state.values.location.lat;\n lng = this.state.values.location.lng;\n }\n\n params[\"latitude\"] = lat;\n params[\"longitude\"] = lng;\n params[\"customerId\"] = this.props.customerId; // For tripPlanner page, customerId is required\n api\n .put(params)\n .then((response) => {\n this.setState({\n submitting: false,\n });\n this.props.onSuccess(\n response.data.address.latitude,\n response.data.address.longitude\n );\n })\n .catch((error) => {\n console.error(error);\n });\n }\n\n render() {\n const { Form } = this.components;\n const { SubmitButton } = this.buttons;\n let { address, isTripPlannerPage, stores, deliveryAreas, storeId } =\n this.props;\n let coor =\n this.state.values && this.state.values.location\n ? this.state.values.location\n : null;\n return (\n \n \n
\n {props.value}
\n {props.status === \"VERIFIED\" && (\n \n {isDefault && (\n \n {getMessage(\"customer.contact.details.default\")}\n \n )}\n {!isDefault ? (\n \n customerContactActions(actions[action], actions, props)\n }\n >\n {actions[action]}\n \n ))}\n \n ) : (\n \n )}\n
\n \n
\n );\n }\n}\nexport default MapForm;\n","import React, { Component } from \"react\";\nimport \"./style.css\";\nimport { Popup as Modal } from \"../../../../../components/Popup\";\nimport viewAddressIcon from \"./address-inactive.svg\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport { hasPermissions } from \"../../../../../lib/auth\";\nimport Dialog from \"../../../../../components/Popup/Dialog\";\nimport Mapform from \"./MapForm\";\n\nimport deleteIcon from \"./delete-icon.svg\";\n\nexport default class AddressCard extends Component {\n constructor(props) {\n super(props);\n this.state = {\n showMap: false,\n error: null,\n showDeletePrompt: false,\n showSuccessDialog: false,\n location: props.coordinates,\n };\n [\n \"showMap\",\n \"hideMap\",\n \"showError\",\n \"showDeletePrompt\",\n \"handleCloseDialog\",\n \"onSuccess\",\n \"showSuccessDialog\",\n \"handleSuccessClose\",\n ].forEach((fn) => {\n this[fn] = this[fn].bind(this);\n });\n }\n\n hideMap() {\n this.setState({\n showMap: false,\n error: null,\n });\n }\n\n showMap() {\n this.setState({\n showMap: true,\n });\n }\n\n showError(error) {\n this.setState({\n error,\n });\n }\n\n showDeletePrompt() {\n this.setState({\n showDeletePrompt: true,\n });\n }\n handleCloseDialog() {\n this.setState({\n showDeletePrompt: false,\n });\n }\n\n showSuccessDialog() {\n this.setState({\n showSuccessDialog: true,\n });\n }\n\n handleSuccessClose() {\n this.setState({\n showSuccessDialog: false,\n });\n }\n\n onSuccess(lat, lng) {\n this.setState({\n location: { lat, lng },\n });\n this.hideMap();\n this.showSuccessDialog();\n }\n\n render() {\n const {\n deleteMessage,\n title,\n value,\n onDelete,\n id,\n viewOnMap,\n showDeleteOption,\n customerId,\n } = this.props;\n const { showMap, showDeletePrompt, showSuccessDialog } = this.state;\n const coors = this.state.location;\n return (\n {address}
\n {this.state.formError && (\n {this.state.formError}
\n )}\n \n {\n onDelete(id);\n }}\n okText={getMessage(\"customer.confirm.message\")}\n />\n )}\n {showSuccessDialog && (\n \n
\n );\n }\n}\n","import React from \"react\";\nimport {\n BaseForm,\n Input,\n VALIDATION_TYPES,\n} from \"../../../../../components/Form\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport API from \"../../../../../lib/api\";\nimport \"./style.css\";\n\nclass CallForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state = {\n reason: getMessage(\"customer.details.call.option.orderEdit\"),\n submitting: \"\",\n formError: \"\",\n otherOptionValue: \"\",\n };\n this.options = [\n getMessage(\"customer.details.call.option.lateDelivery\"),\n getMessage(\"customer.details.call.option.orderEdit\"),\n getMessage(\"customer.details.call.option.paymentReminder\"),\n getMessage(\"customer.details.call.option.rescheduling\"),\n getMessage(\"customer.details.call.option.orderConfirmation\"),\n getMessage(\"customer.details.call.option.addressClarification\"),\n getMessage(\"customer.details.call.option.callToInternalEmployees\"),\n getMessage(\"customer.details.call.option.tripEnquiry\"),\n getMessage(\"customer.details.call.option.surveyOnceShopped\"),\n getMessage(\"customer.details.call.option.retention\"),\n getMessage(\"customer.details.call.option.other\"),\n ];\n this.handleSubmit = this.handleSubmit.bind(this);\n this.changeReason = this.changeReason.bind(this);\n this.submitForm = this.submitForm.bind(this);\n }\n\n handleSubmit(data) {\n const api = new API({ url: `/communication-service/call` });\n let params = {};\n params[\"number\"] = this.props.number;\n params[\"reason\"] = this.state.reason;\n params[\"transactional\"] = false;\n params[\"template\"] = \"no-template\";\n return api\n .post(params)\n .then(\n (response) => {\n this.setState({ formError: \"\" });\n },\n (error) => {\n this.setState({ formError: error.message });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n submitForm(data) {\n this.setState({\n submitting: true,\n });\n this.handleSubmit(data).then(() => {\n this.setState({\n submitting: false,\n });\n if (this.state.formError === \"\") {\n this.props.onSuccess(\"call\");\n }\n });\n }\n\n changeReason(event) {\n this.setState({\n reason: event.target.value,\n });\n }\n\n render() {\n const { Form } = this.components;\n return (\n {title}
\n {value}
\n \n \n {showDeleteOption &&\n hasPermissions(\"customer\", \"address\", \"delete\") && (\n \n )}\n
\n {showDeletePrompt && (\n \n \n
\n );\n }\n}\nexport default CallForm;\n","import React from \"react\";\nimport {\n BaseForm,\n Input,\n VALIDATION_TYPES,\n Textarea,\n} from \"../../../../../components/Form\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport API from \"../../../../../lib/api\";\n\nclass MailForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state.values = {\n subject: \"\",\n body: \"\",\n submitting: false,\n formError: \"\",\n };\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n handleSubmit(data) {\n const api = new API({ url: \"/communication-service/email\" });\n let params = {};\n params[\"to\"] = this.props.to;\n params[\"transactional\"] = false;\n params[\"type\"] = \"no-template\";\n let dataToSend = {};\n dataToSend[\"subject\"] = data[\"subject\"];\n dataToSend[\"body\"] = data[\"body\"];\n params[\"data\"] = dataToSend;\n return api\n .post(params)\n .then(\n (response) => {\n this.setState({ formError: \"\" });\n },\n (error) => {\n this.setState({ formError: error.message });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n onSubmit(data) {\n this.setState({\n submitting: true,\n });\n this.handleSubmit(data)\n .then(() => {\n this.setState({ submitting: false });\n if (this.state.formError === \"\") {\n this.props.onSuccess(\"render\");\n }\n })\n .catch((error) => {\n console.error(error);\n });\n }\n\n render() {\n const { SubmitButton } = this.buttons;\n const { Form } = this.components;\n return (\n \n \n
\n );\n }\n}\nexport default MailForm;\n","import React from \"react\";\nimport {\n BaseForm,\n VALIDATION_TYPES,\n Textarea,\n} from \"../../../../../components/Form\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport API from \"../../../../../lib/api\";\n\nclass SmsForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state = {\n message: \"\",\n submitting: false,\n formError: \"\",\n };\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n handleSubmit(data) {\n const api = new API({ url: \"/communication-service/SMS\" });\n let params = {};\n params[\"to\"] = this.props.to;\n params[\"transactional\"] = false;\n params[\"type\"] = \"no-template\";\n params[\"data\"] = {};\n params[\"data\"][\"content\"] = data.message;\n return api\n .post(params)\n .then(\n (response) => {\n this.setState({ formError: \"\" });\n },\n (error) => {\n this.setState({ formError: error.message });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n onSubmit(data) {\n this.setState(\n {\n submitting: true,\n },\n () => {\n this.handleSubmit(data).then(() => {\n this.setState({\n submitting: false,\n });\n if (this.state.formError === \"\") {\n this.props.onSuccess(\"sms\");\n }\n });\n }\n );\n }\n\n render() {\n const { SubmitButton } = this.buttons;\n const { Form } = this.components;\n return (\n \n \n
\n );\n }\n}\nexport default SmsForm;\n","import React from \"react\";\nimport {\n BaseForm,\n Input,\n VALIDATION_TYPES,\n} from \"../../../../../components/Form\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport API from \"../../../../../lib/api\";\n\nclass AddEmailForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state = {\n email: \"\",\n submitting: false,\n formError: \"\",\n };\n this.response = \"\";\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n handleSubmit(data) {\n const api = new API({ url: \"/customer-service/email\" });\n let params = {};\n params[\"customerId\"] = this.props.customerId;\n params[\"email\"] = data[\"email\"];\n\n return api\n .post(params)\n .then(\n (response) => {\n this.setState({ formError: \"\" });\n this.response = response.data.email;\n },\n (error) => {\n this.setState({ formError: error.message });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n onSubmit(data) {\n this.setState(\n {\n submitting: true,\n },\n () => {\n this.handleSubmit(data).then(() => {\n this.setState({\n submitting: false,\n });\n if (this.state.formError === \"\") {\n this.props.onSuccess(\"addedEmail\", this.response);\n }\n });\n }\n );\n }\n render() {\n const { SubmitButton } = this.buttons;\n const { Form } = this.components;\n return (\n \n \n
\n );\n }\n}\nexport default AddEmailForm;\n","import React from \"react\";\nimport {\n BaseForm,\n VALIDATION_TYPES,\n Phone,\n} from \"../../../../../components/Form\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport API from \"../../../../../lib/api\";\nimport \"./style.css\";\n\nclass AddPhoneNumberForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state = {\n values: {\n phone: \"\",\n },\n submitting: false,\n formError: \"\",\n };\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n handleSubmit(data) {\n const api = new API({ url: \"/customer-service/phone\" });\n let params = {};\n params[\"customerId\"] = this.props.customerId;\n params[\"phone\"] = data[\"phone\"];\n return api\n .post(params)\n .then(\n (response) => {\n this.setState({ formError: \"\" });\n this.response = response.data.phone;\n },\n (error) => {\n this.setState({ formError: error.message });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n onSubmit(data) {\n this.setState(\n {\n submitting: true,\n },\n () => {\n this.handleSubmit(data).then(() => {\n this.setState({\n submitting: false,\n });\n if (this.state.formError === \"\") {\n this.props.onSuccess(\"addedPhone\", this.response);\n }\n });\n }\n );\n }\n\n render() {\n const { SubmitButton } = this.buttons;\n const { Form } = this.components;\n return (\n \n \n
\n );\n }\n}\nexport default AddPhoneNumberForm;\n","import React from \"react\";\nimport { GOOGLE_MAPS_URL, GOOGLE_MAP_DEFAULT_KEY } from \"../../config/app\";\n\nimport { compose, withProps, lifecycle } from \"recompose\";\nimport { withScriptjs } from \"react-google-maps\";\nimport { StandaloneSearchBox } from \"react-google-maps/lib/components/places/StandaloneSearchBox\";\nimport { get } from \"../../lib/storage\";\n\nconst PlacesWithStandaloneSearchBox = compose(\n withProps({\n googleMapURL:\n GOOGLE_MAPS_URL + (get(\"googleMapAPIkey\") || GOOGLE_MAP_DEFAULT_KEY),\n loadingElement: ,\n containerElement: ,\n }),\n lifecycle({\n componentWillMount() {\n const refs = {};\n\n this.setState({\n places: [],\n onSearchBoxMounted: (ref) => {\n refs.searchBox = ref;\n },\n onPlacesChanged: () => {\n const places = refs.searchBox.getPlaces();\n this.setState(\n {\n places,\n },\n () => this.props.onPlacesSearched(this.state.places)\n );\n },\n });\n },\n }),\n withScriptjs\n)((props) => (\n \n \n
\n));\n\nexport default PlacesWithStandaloneSearchBox;\n","import React from \"react\";\nimport { BaseForm, Input } from \"../../../../../components/Form\";\nimport MetadataFormFields from \"../../../../../components/MetaDataFormFields\";\nimport PlacesWithStandaloneSearchBox from \"../../../../../components/StandaloneSearchBox\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport API from \"../../../../../lib/api\";\nimport { isExtensionEnabled } from \"../../../../../lib/auth\";\nimport Loader from \"../../../../../components/Loader\";\n\nclass AddAddressForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state = {\n address: \"\",\n landmark: \"\",\n pincode: \"\",\n city: \"\",\n submitting: false,\n latitude: \"\",\n longitude: \"\",\n formError: \"\",\n };\n this.sequence = null;\n if (\n isExtensionEnabled(\"EntityMetaData\") &&\n props.sequence &&\n props.sequence.length\n ) {\n this.sequence = props.sequence;\n }\n this.response = \"\";\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n componentDidMount() {\n this.setState({\n loading: true,\n });\n if (isExtensionEnabled(\"EntityMetaData\")) {\n // let id = getExtensionDetails('EntityMetaData').id\n this.api = new API({ url: `/config-service/meta-data` });\n this.sequenceApi = new API({ url: \"/config-service/config/customers\" });\n Promise.all([this.api.get(), !this.sequence && this.sequenceApi.get()])\n .then(([extnResponse, sequenceResponse]) => {\n const config = extnResponse.data.config.entityMetaData.address;\n this.sequence =\n (sequenceResponse &&\n sequenceResponse.data.customers.addressSequence) ||\n this.sequence;\n if (config && !config.length && this.sequence) {\n let sequenceConfig = {};\n this.sequence.forEach((key) => {\n sequenceConfig[key] = config[key];\n });\n this.customerConfig = sequenceConfig;\n } else {\n this.customerConfig = config;\n }\n this.setState({\n loading: false,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n } else {\n this.setState({\n loading: false,\n });\n }\n }\n\n componentWillUnmount() {\n this.api && this.api.cancel();\n }\n\n handleSubmit(data) {\n const api = new API({ url: \"/customer-service/address\" });\n let params = { ...data.address };\n params[\"customerId\"] = this.props.customerId;\n\n return api\n .post(params)\n .then(\n (response) => {\n this.setState({ formError: \"\" });\n this.response = response.data.address;\n },\n (error) => {\n this.setState({ formError: error.message });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n onSubmit(data) {\n this.setState(\n {\n submitting: true,\n },\n () => {\n this.handleSubmit(data).then(() => {\n this.setState({\n submitting: false,\n });\n if (this.state.formError === \"\") {\n this.props.onSuccess &&\n this.props.onSuccess(\"addedAddress\", this.response);\n }\n });\n }\n );\n }\n\n handlePlaceSearch = async (data, form) => {\n if (data?.[0]) {\n this.setState({ formError: \"\" });\n const addressComponents = data[0].address_components;\n const pincode = addressComponents?.filter(({ types }) =>\n types?.includes(\"postal_code\")\n )[0]?.short_name;\n const city = addressComponents?.filter(({ types }) =>\n types?.includes(\"locality\")\n )[0]?.short_name;\n const landmark = data[0].formatted_address;\n const location = data[0].geometry.location;\n const latitude = location.lat();\n const longitude = location.lng();\n const serviceableAreaAPI = new API({\n url: `/logistics-service/serviceable-area`,\n });\n try {\n const params = {\n \"address[latitude]\": latitude,\n \"address[longitude]\": longitude,\n \"address[pincode]\": pincode ?? \"\",\n };\n form.updateState([\"address\", \"landmark\"], landmark);\n const serviceableAreaResponse = await serviceableAreaAPI.get(params);\n if (serviceableAreaResponse.data) {\n form.updateState([\"address\", \"city\"], city);\n form.updateState([\"address\", \"latitude\"], latitude);\n form.updateState([\"address\", \"longitude\"], longitude);\n if (pincode) {\n form.updateState([\"address\", \"pincode\"], pincode);\n }\n } else {\n this.setState({\n formError: getMessage(\n \"customer.details.page.address.notServiceable.error\"\n ),\n });\n }\n } catch (e) {\n this.setState({ formError: e?.message ?? getMessage(\"error.generic\") });\n console.error(e);\n }\n }\n };\n\n render() {\n const { SubmitButton } = this.buttons;\n const { Form } = this.components;\n const { loading } = this.state;\n const { _this } = this.props;\n const Wrapper = _this ? \"div\" : Form;\n const form = _this || this;\n return (\n \n {props.element ? (\n props.element\n ) : (\n
\n \n \n \n {\n props.onChange(e);\n })\n }\n onBlur={props.onBlurFunction ? props.onBlurFunction : null}\n required={props.required ? props.required : false}\n disabled={props.readOnly}\n />\n
\n )}\n \n \n {this.state.formError && (\n \n {this.customerConfig && (\n \n )}\n {!_this && (\n \n
\n );\n }\n}\nexport default AddAddressForm;\n","import React from \"react\";\nimport { BaseForm, CustomerTagSearch } from \"../../../../../components/Form\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport API from \"../../../../../lib/api\";\nimport \"./style.css\";\n\nclass UserTags extends BaseForm {\n constructor(props) {\n super(props);\n this.state = {\n apiError: null,\n submitting: false,\n };\n }\n\n componentDidMount() {\n let values = Object.assign({}, this.state.values);\n let customerId = this.props.customer.id;\n if (customerId) {\n this.api = new API({\n url: `/customer-service/customer/${customerId}/tag`,\n });\n this.api\n .get()\n .then((response) => {\n values[\"tags\"] = response.data.tag;\n this.setState({\n values,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n }\n\n componentWillUnmount() {\n this.api && this.api.cancel();\n }\n\n render() {\n const { Form } = this.components;\n return (\n {this.state.formError}
\n )}\n {loading ? (\n \n \n {getMessage(\"customer.details.submitText.submit\")}\n \n
\n )}\n \n \n
\n );\n }\n}\nexport default UserTags;\n","import React from \"react\";\nimport { BaseForm } from \"../../../../../components/Form\";\nimport MetaDataFormFields from \"../../../../../components/MetaDataFormFields\";\nimport { Dialog } from \"../../../../../components/Popup\";\n\nimport API from \"../../../../../lib/api\";\nimport {\n getEntityMetaData,\n isExtensionEnabled,\n getExtensionDetails,\n saveEntityMetaData,\n hasPermissions,\n} from \"../../../../../lib/auth\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport UserTags from \"./../UserTags\";\n\nimport \"./style.css\";\n\nclass MetaDataForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state = {\n editing: false,\n };\n this.metaDataWithType = {};\n this.getCustomerMetaData = this.getCustomerMetaData.bind(this);\n this.handleEdit = this.handleEdit.bind(this);\n this.showView = this.showView.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n getCustomerMetaData() {\n let metaData = getEntityMetaData().customer;\n this.metaDataWithType = Object.assign({}, metaData);\n let customer = Object.assign({}, this.props.customer);\n this.metaData = customer.metaData;\n if (!customer.metaData) {\n metaData &&\n Object.entries(metaData).forEach(([key, type]) => {\n metaData[key] = \"\";\n });\n this.metaData = customer.metaData = metaData;\n }\n this.setState({\n values: customer,\n tempState: customer.metaData,\n prevState: customer.metaData,\n });\n }\n\n componentDidMount() {\n let customerKeys = getEntityMetaData() && getEntityMetaData().customer;\n if (\n (!customerKeys ||\n (Array.isArray(customerKeys) && !customerKeys.length) ||\n (customerKeys.constructor === Object &&\n !Object.keys(customerKeys).length)) &&\n isExtensionEnabled(\"EntityMetaData\")\n ) {\n let extentionDetails = getExtensionDetails(\"EntityMetaData\");\n if (extentionDetails) {\n this.api = new API({ url: `/config-service/meta-data` });\n this.api\n .get()\n .then((response) => {\n let details = response.data.config.entityMetaData;\n saveEntityMetaData(details);\n this.getCustomerMetaData();\n })\n .catch((error) => {\n console.error(error);\n });\n }\n } else {\n if (isExtensionEnabled(\"EntityMetaData\")) {\n this.getCustomerMetaData();\n }\n }\n }\n\n componentWillUnmount() {\n this.api && this.api.cancel();\n this.customerServiceApi && this.customerServiceApi.cancel();\n }\n\n handleEdit() {\n this.setState({\n editing: true,\n });\n }\n\n onSubmit(formDataRaw) {\n let formData = { ...formDataRaw, metaData: this.state.tempState };\n this.setState({\n submitting: true,\n editing: false,\n });\n const customerId = this.props.customer?.id;\n this.customerServiceApi = new API({\n url: `/customer-service/customer/${customerId}`,\n });\n let params = Object.assign({}, this.props.customer);\n params.metaData = formData.metaData;\n const configureableKeys = Object.keys(this.metaDataWithType);\n Object.keys(formData.metaData).forEach((key) => {\n if (configureableKeys.indexOf(key) < 0) {\n delete formData.metaData[key];\n }\n });\n this.customerServiceApi\n .put(params, { \"X-API-VERSION\": 2 })\n .then(\n (response) => {\n this.setState({\n submitting: false,\n formError: \"\",\n showSuccessDialog: true,\n });\n },\n (error) => {\n this.setState({\n submitting: false,\n formError: error.message,\n showErrorDialog: true,\n tempState: this.state.prevState,\n });\n }\n )\n .then(() => {\n if (this.state.tempState) {\n Object.keys(this.state.tempState).forEach((key) => {\n this.updateState([\"metaData\", key], this.state.tempState[key]);\n });\n }\n })\n .catch((error) => {\n console.error(error);\n });\n }\n\n handleChange(value, key) {\n this.setState({\n tempState: {\n ...this.state.tempState,\n [key]: value,\n },\n });\n }\n\n showView() {\n let temp = [];\n let count = 0;\n if (\n this.state.values &&\n this.state.values.metaData &&\n this.metaDataWithType\n ) {\n for (let key in this.metaDataWithType) {\n temp.push(\n \n
\n );\n }\n }\n return (\n {key}
\n \n {this.state.values.metaData[key]}\n
\n {[...temp]}
\n );\n }\n\n render() {\n const editPermission = hasPermissions(\"customer\", \"customer\", \"put\");\n const { Form } = this.components;\n const { SubmitButton } = this.buttons;\n return (\n \n
\n
\n )}\n {Object.keys(this.metaDataWithType).length > 0 && (\n \n
\n {\n \n }\n
\n )}\n \n
\n );\n }\n if (page === getMessage(\"customer.details.pages.address\")) {\n return (\n \n
\n \n
\n \n {this.getAddresses()}\n {hasPermissions(\"customer\", \"address\", \"post\") && (\n
\n );\n }\n if (page === getMessage(\"customer.details.pages.phoneemail\")) {\n return (\n \n \n
\n )}\n \n {getMessage(\"customer.details.address.addAddress\")}\n
\n \n
\n );\n }\n if (page === getMessage(\"customer.details.pages.otherdetails\")) {\n return (\n \n
\n \n {this.getPhoneNumbers()}\n {hasPermissions(\"customer\", \"phone\", \"post\") && (\n \n \n 
\n \n {getMessage(\n \"customer.details.pages.phonemail.addPhoneNumber\"\n )}\n \n )}\n
\n \n {this.getEmails()}\n {hasPermissions(\"customer\", \"email\", \"post\") && (\n \n )}\n
\n \n
\n );\n }\n}\n","import React from \"react\";\nimport {\n BaseForm,\n Input,\n VALIDATION_TYPES,\n SingleDatePicker,\n Radio,\n} from \"../../../../../components/Form\";\nimport { getMessage } from \"../../../../../lib/translator\";\n\nexport default class CustomerFilters extends BaseForm {\n render() {\n const { SubmitButton, ClearButton } = this.buttons;\n const { Form } = this.components;\n return (\n \n );\n }\n}\n","import React, { Component } from \"react\";\n\nimport Upload from \"../../../../components/FileUpload\";\nimport API from \"../../../../lib/api\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport csvIcon from \"./csv-icon.svg\";\nimport uploadIcon from \"./import-customers.svg\";\nimport infoIcon from \"./info-icon.svg\";\n\nimport \"./style.css\";\n\nfunction downloadCsv(data) {\n let csv = \"\";\n csv += data.join(\",\");\n csv += \"\\n\";\n var hiddenElement = document.createElement(\"a\");\n hiddenElement.href = \"data:text/csv;charset=utf-8,\" + encodeURI(csv);\n hiddenElement.target = \"_blank\";\n hiddenElement.download = \"customers.csv\";\n hiddenElement.click();\n}\n\nexport default class CustomerImport extends Component {\n constructor(props) {\n super(props);\n this.getSampleCsv = this.getSampleCsv.bind(this);\n }\n\n getSampleCsv(e) {\n e && e.preventDefault();\n const api = new API({ url: \"/customer-service/customer-upload\" });\n api\n .get()\n .then(\n (response) => {\n downloadCsv(response.data.customerUpload || []);\n },\n (error) => {\n this.setState({ uploadError: error.message });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n render() {\n return (\n {this.state?.customer?.name}
\n {this.state.showLoader ? (\n\n {this.state.customer && (\n \n \n
\n )}\n \n {this.renderCallPopup()}\n {this.renderMailPopup()}\n {this.renderDialog()}\n {this.renderSmsPopup()}\n {this.renderAddEmailPopup()}\n {this.renderAddPhonePopup()}\n {this.renderAddAddressPopup()}\n {this.renderPhoneDeleteDialog()}\n {this.renderEmailDeleteDialog()}\n
\n )}\n \n
\n \n {window.screen.width >= 480 ? (\n `${page}`)}\n default={this.state.page}\n onClick={(index) => {\n this.changePage(index);\n }}\n />\n ) : (\n {\n return { text: page, value: index };\n })}\n value={`${this.state.page}`}\n onChange={(index) =>\n this.changePage(Number(index) ? index : \"0\")\n }\n />\n )}\n {this.fetchTabData()}\n
\n {getMessage(\"customer.details.order.purchase.history\")}
\n\n {\n const orders = response.data.order;\n if (Array.isArray(orders)) {\n orders.map((order) => {\n if (order.createdAt) {\n order.createdAt = getStandradDateTime(\n utcToLocalTime,\n order.createdAt\n );\n }\n if (order.completedAt) {\n order.completedAt = getStandradDateTime(\n utcToLocalTime,\n order.completedAt\n );\n }\n if (order.updatedAt) {\n order.updatedAt = getStandradDateTime(\n utcToLocalTime,\n order.updatedAt\n );\n }\n if (order.preferredDate && order.slotStartTime) {\n const tempDate = getStandradDateTime(\n utcToLocalTime,\n `${order.preferredDate} ${order.slotStartTime}`\n ).split(\" \");\n order.preferredDate = tempDate[0];\n order.slotStartTime = tempDate[1];\n }\n if (order.preferredDate && order.slotEndTime) {\n const tempDate = getStandradDateTime(\n utcToLocalTime,\n `${order.preferredDate} ${order.slotEndTime}`\n ).split(\" \");\n order.slotEndTime = tempDate[1];\n }\n return order;\n });\n }\n return orders;\n },\n }}\n emptyState={emptyState}\n primaryKey=\"referenceNumber\"\n tableProperties={tabularView(\n `/${this.props.options && this.props.options.page}`\n )}\n tableDynamic\n />\n
\n \n
\n );\n }\n}\n","import React, { Component } from \"react\";\nimport ListingPageWithRoutes from \"../../../containers/ListingPage/listingRouter\";\nimport CustomerDetails from \"./Details\";\nimport CustomerFilters from \"./Tables/Filters\";\nimport { Popup } from \"../../../components/Popup\";\nimport TableView from \"./Tables\";\nimport { getMessage } from \"../../../lib/translator\";\nimport CustomerImport from \"./CustomerImport\";\nimport emptyIcon from \"./no-customers.svg\";\nimport offerIcon from \"./offers.svg\";\nimport offlineMarketingIcon from \"./offline-marketing.svg\";\nimport targetCustomerIcon from \"./target-customer.svg\";\nimport \"./style.css\";\nimport {\n getStandradDateTime,\n utcToLocalTime,\n localTimeToUtc,\n} from \"../../../lib/datetime\";\nimport { is_Domain_Scarlet } from \"../../../utils/domainCheck\";\n\nconst emptyState = {\n icon: emptyIcon,\n message: getMessage(\"customer.helpItems.message\"),\n additionalViews: [CustomerImport],\n};\n\nconst helpItems = {\n title: getMessage(\"customer.helpItems.title\"),\n instructions: [\n {\n icon: targetCustomerIcon,\n title: getMessage(\"customer.helpItems.iec.title\"),\n description: getMessage(\"customer.helpItems.iec.description\"),\n onAction: (e) => {\n let customerImport = document.getElementById(\"customerImport\");\n customerImport.click();\n },\n },\n {\n icon: offerIcon,\n title: getMessage(\"customer.helpItems.rpo.title\"),\n description: getMessage(\"customer.helpItems.rpo.description\"),\n },\n {\n icon: offlineMarketingIcon,\n title: getMessage(\"customer.helpItems.om.title\"),\n description: getMessage(\"customer.helpItems.om.description\"),\n },\n ],\n};\n\nclass HeaderActions extends Component {\n constructor(props) {\n super(props);\n this.state = {\n modalShown: false,\n };\n this.hideModal = this.hideModal.bind(this);\n }\n\n hideModal() {\n this.setState({\n modalShown: false,\n });\n }\n\n render() {\n return (\n \n
\n \n \n
\n \n \n NOTE\n
\n \n
\n Note:
\n \n * The phone numbers must be prepended with (+) followed by\n country code.\n
\n \n {\" \"}\n Eg: Phone number with country code 91 must be +911234567890\n
\n \n * For entries with the same client id or information, the\n corresponding records will be merged.\n
\n \n \n
\n \n \n {\n this.setState({\n modalShown: true,\n });\n }}\n >\n + {getMessage(\"customer.import.text\")}\n \n
\n );\n }\n}\n\n// DISCUSS: A better way to get awareness of window's width\n// Reasoning: Individual components should not be aware of the window or\n// its properties\nclass Customers extends Component {\n formatDate = (date) => {\n const start = getStandradDateTime(localTimeToUtc, `${date} 00:00:00`);\n const end = getStandradDateTime(localTimeToUtc, `${date} 23:59:59`);\n return `${start},${end}`;\n };\n render() {\n let { props } = this;\n let { page, rerender } = props;\n return (\n \n
\n );\n }\n}\n\nexport default PlacementDetails;\n","import React, { Component } from \"react\";\nimport moment from \"moment\";\nimport { Link } from \"react-router-dom\";\nimport {\n Email as CustomerEmailWidget,\n Call as CustomerCallWidget,\n} from \"../../../../../containers/CustomerWidgets\";\nimport { Radio, Select } from \"../../../../../components/Form\";\nimport { SKINS as RADIO_SKINS } from \"../../../../../components/Form/Inputs/Radio\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport {\n isExtensionEnabled,\n getExtensionDetails,\n getStores,\n} from \"../../../../../lib/auth\";\nimport API from \"../../../../../lib/api\";\nimport {\n formatDate,\n getPrintableTime,\n formatIsoTime,\n getStandradDateTime,\n utcToLocalTime,\n formatSlotTime,\n localTimeToUtc,\n} from \"../../../../../lib/datetime\";\n\nimport editIcon from \"../edit-icon.svg\";\nimport {\n getDisplayAddress,\n getAsapDuration,\n sortSlotsAvailability,\n} from \"../../../../../lib/commonlyused\";\n\nfunction generateDateOptions(slots) {\n if (!slots) {\n return [];\n } else {\n return Object.keys(slots).map((date) => {\n let text = formatDate(date);\n if (moment().format(\"YYYY-MM-DD\") === date) {\n text = getMessage(\"order.details.today\");\n } else if (moment().add(1, \"days\").format(\"YYYY-MM-DD\") === date) {\n text = getMessage(\"order.details.tomorrow\");\n }\n return { text: text, value: date };\n });\n }\n}\nclass DeliveryDetails extends Component {\n constructor(props) {\n super(props);\n this.state = {};\n this.orderTypes = [\n {\n text: getMessage(\"order.details.location.option.delivery\"),\n value: \"DELIVERY\",\n },\n ];\n if (isExtensionEnabled(\"DeliverySlots\")) {\n this.state.addressSlotMap = {\n DELIVERY: {},\n PICKUP: {},\n };\n }\n this.startEditing = this.startEditing.bind(this);\n this.cancelEditing = this.cancelEditing.bind(this);\n this.submitChanges = this.submitChanges.bind(this);\n this.getAddressParams = this.getAddressParams.bind(this);\n this.formatSlotEndTime = this.formatSlotEndTime.bind(this);\n this.getPickupParams = this.getPickupParams.bind(this);\n this.promisifySetState = this.promisifySetState.bind(this);\n this.onChange = this.onChange.bind(this);\n }\n\n handleChangeSelectedStore = (id) => {\n this.setState({ selectedDeliveryStore: id });\n };\n\n onChange(id) {\n let { visibleDaysForSlot, orderType } = this.state;\n\n if (isExtensionEnabled(\"DeliverySlots\")) {\n const addressApi = new API({ url: \"/order-service/slot-availability\" });\n if (!this.state.addressSlotMap[orderType][id]) {\n let params = {};\n if (orderType === \"DELIVERY\") {\n let addressIndex = this.state.customer.addresses.findIndex(\n (address) => Number(address.id) === Number(id)\n );\n params = this.getAddressParams(id, visibleDaysForSlot, addressIndex);\n } else if (orderType === \"PICKUP\") {\n params = this.getPickupParams(id, visibleDaysForSlot);\n }\n\n addressApi\n .get(params)\n .then((response) => {\n let addressSlots = sortSlotsAvailability(response.data.slots);\n let slots = {};\n addressSlots &&\n addressSlots.map((slot) => {\n if (slot.available) {\n if (slots.hasOwnProperty(slot.date)) {\n slots[slot.date].push(slot);\n } else {\n slots[slot.date] = [];\n slots[slot.date].push(slot);\n }\n }\n return null;\n });\n let addressSlotMap = JSON.parse(\n JSON.stringify(this.state.addressSlotMap)\n );\n addressSlotMap[orderType][id] = slots;\n this.dateOptions[orderType][id] = generateDateOptions(slots);\n\n this.setState({\n addressSlotMap,\n });\n })\n .catch((error) => {\n console.error(error);\n if (error.code === 401) {\n throw error;\n } else {\n this.setState({\n error: error.message,\n });\n }\n });\n }\n }\n\n if (this.state.orderType === \"DELIVERY\") {\n let addressIndex = this.state.customer.addresses.findIndex(\n (address) => Number(address.id) === Number(id)\n );\n this.setState({\n addressIndex,\n addressId: id,\n orderType: \"DELIVERY\",\n preferredSlotId: undefined,\n });\n } else if (this.state.orderType === \"PICKUP\") {\n let pickupLocationIndex =\n this.state.pickupLocations &&\n this.state.pickupLocations?.findIndex(\n (pickupAddress) => Number(pickupAddress.id) === Number(id)\n );\n this.setState({\n pickupLocationIndex,\n pickupLocationId: id,\n orderType: \"PICKUP\",\n preferredSlotId: undefined,\n });\n }\n }\n\n promisifySetState(state) {\n return new Promise((resolve) => {\n this.setState(state, resolve);\n });\n }\n\n getAddressParams(addressId, visibleDaysForSlot, addressIndex) {\n let params = {};\n const { data } = this.props;\n const { customer } = this.state;\n let address =\n customer && customer.addresses && customer.addresses[addressIndex];\n params[\"startDate\"] = moment().toISOString();\n params[\"endDate\"] = moment().add(visibleDaysForSlot, \"days\").toISOString();\n params[\"storeId\"] = data.storeId;\n params[\"orderType\"] = \"DELIVERY\";\n params[\"searchInterval\"] = params[\"startDate\"] + \"/\" + params[\"endDate\"];\n // Optional Parameters\n params[\"address[address]\"] = address.address;\n params[\"address[landmark]\"] = address.landmark;\n params[\"address[city]\"] = address.city;\n params[\"address[pincode]\"] = address.pincode?.toString();\n params[\"address[latitude]\"] = address.latitude;\n params[\"address[longitude]\"] = address.longitude;\n delete params[\"startDate\"];\n delete params[\"endDate\"];\n return params;\n }\n\n getPickupParams(pickupId, visibleDaysForSlot) {\n let params = {};\n let { pickupLocations } = this.state;\n if (!pickupLocations) {\n return params;\n }\n params[\"startDate\"] = moment().toISOString();\n params[\"endDate\"] = moment().add(visibleDaysForSlot, \"days\").toISOString();\n params[\"storeId\"] = pickupId;\n params[\"orderType\"] = \"PICKUP\";\n params[\"searchInterval\"] = params[\"startDate\"] + \"/\" + params[\"endDate\"];\n delete params[\"startDate\"];\n delete params[\"endDate\"];\n return params;\n }\n\n async componentDidMount() {\n const { data } = this.props;\n let dateOptions = { DELIVERY: {}, PICKUP: {} };\n\n let addressSlotMap = {\n DELIVERY: {},\n PICKUP: {},\n };\n\n let newStates = this.generateStateFromProps(this.props, {\n editing: false,\n saving: false,\n });\n\n await this.promisifySetState(newStates);\n\n if (isExtensionEnabled(\"DeliverySlots\")) {\n let extnId = getExtensionDetails(\"DeliverySlots\").id;\n this.extnApi = new API({ url: `/account-service/extension/${extnId}` });\n await this.extnApi\n .get()\n .then((response) => {\n let visibleDaysForSlot =\n (response.data.extension.config.globalConfig &&\n response.data.extension.config.globalConfig.visibleDaysForSlot) ||\n null;\n // visibleDaysForSlot = 5 // TODO: Remove this\n this.setState({\n visibleDaysForSlot,\n });\n })\n .catch((err) => console.error(err));\n\n if (this.state.visibleDaysForSlot) {\n let pickupLocations = getStores();\n if (pickupLocations?.length) {\n await this.promisifySetState({\n stores: pickupLocations,\n selectedDeliveryStore: data?.storeId,\n });\n }\n\n if (\n pickupLocations &&\n pickupLocations.length > 0 &&\n this.props.orderConfig &&\n this.props.orderConfig.orderTypes &&\n this.props.orderConfig.orderTypes.includes(\"PICKUP\")\n ) {\n this.orderTypes.push({\n text: getMessage(\"order.details.location.option.pickup\"),\n value: \"PICKUP\",\n });\n let pickupLocationId = data.pickupLocation && data.pickupLocation.id;\n let pickupLocationIndex;\n if (pickupLocationId) {\n pickupLocationIndex =\n pickupLocations &&\n pickupLocations.findIndex(\n (loc) => loc && loc.id === pickupLocationId\n );\n }\n\n await this.promisifySetState({\n pickupLocations: pickupLocations,\n pickupLocationIndex,\n pickupLocationId,\n });\n if (this.props.data.pickupLocation) {\n this.orderSlotApi = new API({\n url: \"/order-service/slot-availability\",\n });\n let params = this.getPickupParams(\n this.props.data.pickupLocation.id,\n this.state.visibleDaysForSlot\n ); // TODO: remove asap param\n this.orderSlotApi\n .get(params)\n .then((response) => {\n let addressSlots = sortSlotsAvailability(response.data.slots);\n let slots = {};\n addressSlots &&\n addressSlots.map((slot) => {\n if (slot.available) {\n if (slots.hasOwnProperty(slot.date)) {\n slots[slot.date].push(slot);\n } else {\n slots[slot.date] = [];\n slots[slot.date].push(slot);\n }\n }\n return null;\n });\n let today = new Date();\n let preferredDate =\n this.state.preferredDate &&\n moment(this.state.preferredDate).format(\"YYYY-MM-DD\");\n if (preferredDate < today) {\n preferredDate = moment().format(\"YYYY-MM-DD\");\n }\n addressSlotMap.PICKUP[data.pickupLocation.id] = slots;\n dateOptions[\"PICKUP\"][data.pickupLocation.id] =\n generateDateOptions(slots);\n\n this.setState({\n addressSlotMap,\n preferredDate,\n });\n })\n .catch((err) => console.error(err));\n }\n }\n\n if (data.address && (this.state.addressId || this.state.addressIndex)) {\n this.orderSlotApi = new API({\n url: \"/order-service/slot-availability\",\n });\n let params = this.getAddressParams(\n data.address.id,\n this.state.visibleDaysForSlot,\n 0\n );\n this.orderSlotApi\n .get(params)\n .then((response) => {\n let addressSlots = sortSlotsAvailability(response.data.slots);\n let today = new Date();\n let preferredDate =\n this.state.preferredDate &&\n moment(this.state.preferredDate).format(\"YYYY-MM-DD\");\n if (preferredDate < today) {\n preferredDate = moment().format(\"YYYY-MM-DD\");\n }\n\n let slots = {};\n addressSlots &&\n addressSlots.map((slot) => {\n if (slot.available) {\n if (slots.hasOwnProperty(slot.date)) {\n slots[slot.date].push(slot);\n } else {\n slots[slot.date] = [];\n slots[slot.date].push(slot);\n }\n }\n return null;\n });\n addressSlotMap.DELIVERY[data.address.id] = slots;\n dateOptions[\"DELIVERY\"][data.address.id] =\n generateDateOptions(slots);\n this.setState({\n addressSlotMap,\n preferredDate,\n error: null,\n });\n })\n .catch((error) => {\n console.error(error);\n if (error.code === 401) {\n throw error;\n }\n this.setState({\n error: error.message,\n });\n });\n }\n }\n }\n this.dateOptions = dateOptions;\n }\n\n startEditing() {\n this.setState({ editing: true, preferredSlotId: null });\n }\n cancelEditing() {\n this.setState({\n editing: false,\n });\n }\n formatSlotEndTime(time) {\n return (\n parseInt(time.split(\":\")[1], 10) + \"\" + parseInt(time.split(\":\")[2], 10)\n );\n }\n\n getUtcdate() {\n let utcDate = this.state.preferredDate;\n this.state.allSlots.forEach((val) => {\n if (`${val.id}` === this.state.preferredSlotId) {\n const timeArr = val.text.split(\" \");\n if (timeArr.includes(\"Within\")) {\n let currentLocal = moment(\n localTimeToUtc(moment().local().format(\"YYYY-MM-DD HH:mm:ss\"))\n ).format(\"YYYY-MM-DD HH:mm:ss\");\n utcDate = currentLocal.split(\" \")[0].trim();\n } else {\n const finalTime = moment(\n utcToLocalTime(`${val.date} ${val.interval.split(/[TZ]/)[1]}`)\n )\n .format(\"YYYY-MM-DD HH:ss:mm\")\n .split(\" \")[1];\n const tempDate = `${this.state.preferredDate} ${finalTime}`;\n utcDate = getStandradDateTime(localTimeToUtc, tempDate).split(\" \")[0];\n }\n }\n });\n return utcDate;\n }\n\n submitChanges() {\n let { orderType, selectedDeliveryStore } = this.state;\n const { data } = this.props;\n if (this.props.onChange) {\n // onChange method should return a promise\n this.setState(\n {\n // editing: false,\n saving: true,\n },\n () => {\n let requestParams = {};\n let storeRequestParams = {};\n let storeRequestHeaders = {};\n if (\n orderType === \"DELIVERY\" &&\n Number.isFinite(this.state.addressIndex)\n ) {\n requestParams.addressId =\n this.state.customer.addresses &&\n this.state.customer.addresses[this.state.addressIndex].id;\n requestParams.type = \"DELIVERY\";\n if (isExtensionEnabled(\"DeliverySlots\")) {\n requestParams.preferredDate = this.getUtcdate();\n requestParams.preferredSlotId = Number(\n this.state.preferredSlotId\n );\n }\n const { org } = this.props;\n const organizationId = org.id.toString();\n storeRequestParams.storeId = parseInt(\n this.state.selectedDeliveryStore\n );\n storeRequestParams.organizationId = organizationId;\n storeRequestHeaders[\"X-API-VERSION\"] = \"2\";\n } else if (\n orderType === \"PICKUP\" &&\n Number.isFinite(Number(this.state.pickupLocationId))\n ) {\n // TODO: Add logic to select a pickup location\n requestParams.pickupLocationId =\n this.state.pickupLocations[this.state.pickupLocationIndex].id;\n requestParams.type = \"PICKUP\";\n if (isExtensionEnabled(\"DeliverySlots\")) {\n requestParams.preferredSlotId = Number(\n this.state.preferredSlotId\n );\n requestParams.preferredDate = this.getUtcdate();\n }\n }\n if (this.props.data.status !== \"PENDING\") {\n delete requestParams.addressId;\n }\n\n if (this.state.preferredSlotId) {\n this.props\n .onChange(requestParams, {})\n .then(\n () => {\n this.setState({ error: false, saving: false });\n },\n (error) => {\n this.setState({ error: true, saving: false });\n if (error.code === 401) {\n throw error;\n }\n }\n )\n .then(() => {\n if (parseInt(selectedDeliveryStore) === data?.storeId) {\n this.setState({ editing: false, saving: false });\n }\n });\n }\n\n if (parseInt(selectedDeliveryStore) !== data?.storeId) {\n this.props\n .onChange(storeRequestParams, storeRequestHeaders)\n .then(\n () => {\n this.setState({ error: false, saving: false });\n },\n (error) => {\n this.setState({ error: true, saving: false });\n if (error.code === 401) {\n throw error;\n }\n }\n )\n .then(() => {\n this.setState({ editing: false, saving: false });\n });\n }\n }\n );\n }\n }\n generateStateFromProps(props, state) {\n let addressId = props.data.address ? props.data.address.id : null;\n let pickupId = props.data.pickupLocation\n ? props.data.pickupLocation.id\n : null;\n let addressIndex;\n let pickupLocationIndex;\n if (addressId) {\n addressIndex =\n props.data.customer &&\n props.data.customer.addresses &&\n props.data.customer.addresses.findIndex(\n (address) => address.id === props.data.address.id\n );\n if (addressIndex === -1) {\n addressIndex = undefined;\n }\n }\n if (pickupId && state.pickupLocations) {\n pickupLocationIndex =\n state.pickupLocations &&\n state.pickupLocations.findIndex(\n (loc) => loc.id === props.data.pickupLocation.id\n );\n if (pickupLocationIndex === -1) {\n pickupLocationIndex = null;\n }\n }\n let newState = JSON.parse(JSON.stringify(state));\n newState = {\n ...newState,\n addressIndex,\n addressId,\n pickupLocationIndex,\n pickupLocationId: pickupId,\n pickupLocation: props.data.pickupLocation,\n customer: props.data.customer,\n orderType: props.data.type,\n };\n\n if (isExtensionEnabled(\"DeliverySlots\") && !state.preferredDate) {\n newState.preferredDate =\n props.data.preferredDate < moment().format(\"YYYY-MM-DD\")\n ? moment().format(\"YYYY-MM-DD\")\n : props.data.preferredDate;\n newState.preferredSlotId =\n props.data.preferredSlot && props.data.preferredSlot.id;\n }\n return newState;\n }\n componentWillReceiveProps(newProps) {\n if (newProps.data.address || newProps.data.pickupLocation) {\n this.setState((prevState) =>\n this.generateStateFromProps(newProps, prevState)\n );\n }\n }\n\n componentDidUpdate(prevProps, prevState) {\n let { customer, visibleDaysForSlot, orderType } = this.state;\n if (prevState.orderType !== this.state.orderType) {\n if (orderType === \"DELIVERY\") {\n if (\n visibleDaysForSlot &&\n !this.state.addressSlotMap[orderType][this.state.addressId]\n ) {\n this.slotApi = new API({ url: \"/order-service/slot-availability\" });\n let addressId =\n customer &&\n customer.addresses &&\n customer.addresses[0] &&\n customer.addresses[0].id;\n if (addressId && this.props.data.storeId) {\n let params = this.getAddressParams(\n addressId,\n visibleDaysForSlot,\n 0\n );\n this.slotApi\n .get(params)\n .then((response) => {\n let addressSlots = sortSlotsAvailability(response.data.slots);\n let slots = {};\n addressSlots &&\n addressSlots.map((slot) => {\n if (slot.available) {\n if (slots.hasOwnProperty(slot.date)) {\n slots[slot.date].push(slot);\n } else {\n slots[slot.date] = [];\n slots[slot.date].push(slot);\n }\n }\n return null;\n });\n let addressSlotMap = JSON.parse(\n JSON.stringify(this.state.addressSlotMap)\n );\n let today = new Date();\n let preferredDate =\n this.state.preferredDate &&\n moment(this.state.preferredDate).format(\"YYYY-MM-DD\");\n if (!preferredDate || preferredDate < today) {\n preferredDate = moment().format(\"YYYY-MM-DD\");\n }\n addressSlotMap.DELIVERY[addressId] = slots;\n this.dateOptions[\"DELIVERY\"][addressId] =\n generateDateOptions(slots);\n let addressNotServed = addressSlots.length === 0;\n this.setState({\n addressSlotMap,\n preferredDate,\n addressId,\n addressNotServed,\n error: null,\n preferredSlotId: undefined,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n }\n } else if (orderType === \"PICKUP\") {\n if (\n visibleDaysForSlot &&\n this.state.addressSlotMap[orderType] &&\n !this.state.addressSlotMap[orderType][this.state.pickupLocationId]\n ) {\n this.slotApi = new API({ url: \"/order-service/slot-availability\" });\n let pickupId =\n this.state.pickupLocations &&\n this.state.pickupLocations[0] &&\n this.state.pickupLocations[0].id;\n if (pickupId) {\n let params = this.getPickupParams(pickupId, visibleDaysForSlot);\n this.slotApi\n .get(params)\n .then((response) => {\n let addressSlotMap = JSON.parse(\n JSON.stringify(this.state.addressSlotMap)\n );\n let addressSlots = sortSlotsAvailability(response.data.slots);\n let slots = {};\n addressSlots &&\n addressSlots.map((slot) => {\n if (slot.available) {\n if (slots.hasOwnProperty(slot.date)) {\n slots[slot.date].push(slot);\n } else {\n slots[slot.date] = [];\n slots[slot.date].push(slot);\n }\n }\n return null;\n });\n\n let today = new Date();\n let preferredDate =\n this.state.preferredDate &&\n moment(this.state.preferredDate).format(\"YYYY-MM-DD\");\n if (preferredDate < today || !preferredDate) {\n preferredDate = moment().format(\"YYYY-MM-DD\");\n }\n addressSlotMap.PICKUP[pickupId] = slots;\n this.dateOptions[\"PICKUP\"][pickupId] =\n generateDateOptions(slots);\n this.setState({\n addressSlotMap,\n preferredDate,\n pickupLocationId: pickupId,\n pickupLocationIndex: 0,\n addressNotServed: false,\n preferredSlotId: undefined,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n }\n }\n }\n }\n componentWillUnmount() {\n this.extnApi && this.extnApi.cancel();\n this.slotApi && this.slotApi.cancel();\n }\n\n render() {\n const {\n visibleDaysForSlot,\n addressSlotMap,\n preferredDate,\n addressId,\n orderType,\n pickupLocationId,\n selectedDeliveryStore,\n stores,\n } = this.state;\n const isPickupOrder = orderType === \"PICKUP\";\n let { communicationConfig, data } = this.props;\n let allowCall = communicationConfig?.allowCall;\n let allowEmail = communicationConfig?.allowEmail;\n var title;\n if (this.props.data.status === \"COMPLETED\") {\n if (this.props.data.type === \"DELIVERY\") {\n title = getMessage(\"order.details.location.delivery.completed.title\");\n } else if (this.props.data.type === \"PICKUP\") {\n title = getMessage(\"order.details.location.pickup.completed.title\");\n } else if (this.props.data.type === \"B2B\") {\n title = getMessage(\"order.details.location.b2b.completed.title\");\n } else if (this.props.data.type === \"OFFLINE\") {\n title = getMessage(\"order.details.location.offline.completed.title\");\n }\n } else {\n if (this.props.data.type === \"DELIVERY\") {\n title = getMessage(\"order.details.location.delivery.pending.title\");\n } else if (this.props.data.type === \"PICKUP\") {\n title = getMessage(\"order.details.location.pickup.pending.title\");\n } else if (this.props.data.type === \"B2B\") {\n title = getMessage(\"order.details.location.b2b.pending.title\");\n } else if (this.props.data.type === \"OFFLINE\") {\n title = getMessage(\"order.details.location.offline.pending.title\");\n }\n }\n\n let isAddressSelected = Number.isFinite(this.state.addressIndex);\n let isPickupLocationSelected = Number.isFinite(\n this.state.pickupLocationIndex\n );\n\n let minutesToDeliver = this.props.data.preferredSlot\n ? this.props.data.preferredSlot.startTime\n ? formatSlotTime(\n this.props.data.preferredDate,\n this.props.data.preferredSlot.startTime\n ) +\n \" - \" +\n formatSlotTime(\n this.props.data.preferredDate,\n this.props.data.preferredSlot.endTime\n )\n : null\n : null;\n if (\n this.props.data.slotType === \"ASAP\" &&\n this.props.data.preferredSlot &&\n this.props.data.preferredSlot.startTime &&\n this.props.data.preferredSlot.endTime\n ) {\n minutesToDeliver = getAsapDuration(\n this.props.data.preferredSlot.startTime,\n this.props.data.preferredSlot.endTime\n );\n }\n\n let metaData = this.props.data.address && this.props.data.address.metaData;\n let metaDataPhones =\n metaData &&\n [{ phone: metaData.Phone }, { phone: metaData.AlternatePhone }].filter(\n Boolean\n );\n let myoptions =\n this.dateOptions &&\n this.dateOptions[orderType] &&\n this.dateOptions[orderType][\n orderType === \"PICKUP\" ? pickupLocationId : addressId\n ];\n let filteredOption =\n myoptions && myoptions.filter((item) => item.value === preferredDate);\n let selectedDate = null;\n if (filteredOption && filteredOption.length > 0) {\n selectedDate = filteredOption[0].value;\n }\n const clientId = this.state?.pickupLocation?.clientId;\n const billingAddress = this.props.data?.billingAddress;\n return (\n \n
\n Status: {orderStatusText}
\n {this.props.data.preorder && (\n\n 
\n {getMessage(\"order.details.preorder\")}\n
\n )}\n \n \n \n Placed Time:{\" \"}\n \n {getPrintableTime(this.props.data.creationTime)}\n \n \n
\n {this.props.data.completionTime ? (\n \n \n \n Completion Time:{\" \"}\n \n {getPrintableTime(this.props.data.completionTime)}\n \n \n
\n ) : null}\n \n \n \n Placed From: {device}\n \n
\n \n {!this.state.editing ? (\n \n \n \n {this.state?.customer?.name}\n \n \n )}\n \n ) : (\n \n \n )}\n \n \n ) : (\n this.state.pickupLocation && (\n \n \n \n this.setState({\n preferredSlotId: undefined,\n preferredDate: e,\n })\n }\n />\n {preferredDate &&\n Array.isArray(\n addressSlotMap[orderType][addressId][preferredDate]\n ) && (\n {\n this.setState({\n preferredSlotId: e,\n allSlots:\n addressSlotMap[orderType][addressId][\n preferredDate\n ],\n });\n }}\n options={addressSlotMap[orderType][addressId][\n preferredDate\n ].map((slot) => {\n const timearr = slot.interval.split(\"/\");\n if (slot.type === \"ASAP\") {\n return {\n text: slot.text,\n value: slot.id,\n };\n } else {\n return {\n text: `${formatIsoTime(\n timearr[0]\n )} - ${formatIsoTime(timearr[1])}`,\n value: slot.id,\n };\n }\n })}\n />\n )}\n \n )}\n {isExtensionEnabled(\"DeliverySlots\") &&\n isPickupOrder &&\n addressSlotMap &&\n addressSlotMap[orderType] &&\n addressSlotMap[orderType][pickupLocationId] && (\n \n \n this.setState({\n preferredDate: e,\n preferredSlotId: undefined,\n })\n }\n />\n {preferredDate &&\n Array.isArray(\n addressSlotMap[orderType][pickupLocationId][\n preferredDate\n ]\n ) && (\n {\n this.setState({\n preferredSlotId: e,\n allSlots:\n addressSlotMap[orderType][pickupLocationId][\n preferredDate\n ],\n });\n }}\n options={addressSlotMap[orderType][pickupLocationId][\n preferredDate\n ].map((slot) => {\n const timearr = slot.interval.split(\"/\");\n return {\n text: `${formatIsoTime(\n timearr[0]\n )} - ${formatIsoTime(timearr[1])}`,\n value: slot.id,\n };\n })}\n />\n )}\n \n )}\n \n )\n ) : (\n
\n );\n }\n}\n\nexport default DeliveryDetails;\n","import Visa from \"./visa.svg\";\nimport MasterCard from \"./mastercard.svg\";\nimport Amex from \"./americanExpress.svg\";\nimport Generic from \"./genericCard.svg\";\nfunction getPaymentLogo(paymentMode) {\n let icon = Generic;\n switch (paymentMode) {\n case \"VISA\":\n case \"visa\":\n icon = Visa;\n break;\n case \"MASTER\":\n case \"MASTERCARD\":\n icon = MasterCard;\n break;\n case \"AMEX\":\n case \"AMERICANEXPRESS\":\n icon = Amex;\n break;\n default:\n icon = Generic;\n }\n return icon;\n}\n\nfunction formatCardNumber(number, type) {\n if (!number) {\n return \"\";\n }\n return `${\n type\n ? type.charAt(0).toUpperCase() + type.toLowerCase().slice(1) + \" - \"\n : \"\"\n } XXXX${number.substr(number.length - 4)}`;\n}\n\nexport { getPaymentLogo, formatCardNumber };\n","import React, { Component } from \"react\";\nimport Image from \"../../../../../components/Image\";\nimport Table, { Header, Row, Cell } from \"../../../../../components/Table\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport { getPaymentLogo, formatCardNumber } from \"../../../../../lib/payment\";\nimport { is_Domain_WSI } from \"../../../../../utils/domainCheck\";\nfunction getMobileView() {\n return window.screen.width <= 480;\n}\n\nclass PaymentDetails extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isMobileView: getMobileView(),\n };\n this.mobileView = this.mobileView.bind(this);\n }\n\n mobileView() {\n this.setState({ isMobileView: getMobileView() });\n }\n\n componentDidMount() {\n window.addEventListener(\"resize\", this.mobileView, false);\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.mobileView, false);\n }\n render() {\n let { isMobileView } = this.state;\n return (\n {getMessage(\"Customer\")}
\n {this.state.customer && (\n\n {allowEmail &&\n this.state.customer &&\n this.state.customer.emails &&\n this.state.customer.emails.length > 0 && (\n
\n \n
\n {title}
\n {this.props.editable ? (\n\n
\n )}\n {this.props.data.address && (\n \n {\n value === \"DELIVERY\"\n ? this.setState({\n orderType: \"DELIVERY\",\n preferredSlotId: null,\n })\n : this.setState({\n orderType: \"PICKUP\",\n preferredSlotId: null,\n });\n }}\n options={this.orderTypes}\n />\n
\n \n {(({ metaData }) => {\n let name = [\n metaData && metaData.FirstName,\n metaData && metaData.LastName,\n ]\n .filter(Boolean)\n .join(\" \");\n if (name) {\n return name;\n }\n return this.state?.customer?.name;\n })(this.props.data.address)}\n
\n )}\n {this.props.data.metaData &&\n this.props.data.pickupLocation &&\n this.props.data.metaData.pickupPersonName && (\n \n {(({ pickupPersonName }) => {\n return pickupPersonName;\n })(this.props.data.metaData)}\n
\n {this.props.data.metaData.pickupPersonContact && (\n \n {(({ pickupPersonContact }) => {\n return pickupPersonContact;\n })(this.props.data.metaData)}\n
\n )}\n \n {allowCall && metaDataPhones && metaDataPhones.length > 0 && (\n
\n {(orderType === \"DELIVERY\" ||\n orderType === \"PICKUP\" ||\n orderType === \"OFFLINE\") &&\n (isAddressSelected || isPickupLocationSelected) ? (\n !this.state.editing ? (\n !isPickupOrder ? (\n \n {this.props.data.address &&\n (({ address, city, pincode, metaData }) => {\n let addString =\n this.props.data.address &&\n getDisplayAddress(\n this.props.data.address,\n this.props.data.addressSequence\n );\n return addString;\n })(this.props.data.address)}\n
\n \n
\n \n {getMessage(\"order.details.location.billing.address.title\")}\n
\n \n {billingAddress &&\n (({ address, city, pincode, metaData }) => {\n let addString = getDisplayAddress(\n billingAddress,\n this.props.data.addressSequence\n );\n return addString;\n })(billingAddress)}\n
\n \n
\n )\n )\n ) : (\n \n {clientId ? (\n <>\n {clientId}, {this.state.pickupLocation.address}\n \n ) : (\n <>{this.state.pickupLocation.address}\n )}\n
\n \n {!isPickupOrder ? (\n ({\n value: address.id,\n text: getDisplayAddress(\n address,\n this.props.data.addressSequence\n ),\n }))}\n />\n ) : (\n store.hasClickCollect)\n .map((pickupLocation) => ({\n value: pickupLocation.id,\n text: pickupLocation.name,\n }))\n }\n />\n )}\n
\n {stores && orderType === \"DELIVERY\" && (\n \n ({\n value: store.id,\n text: store.name,\n }))}\n />\n
\n )}\n {isExtensionEnabled(\"DeliverySlots\") &&\n orderType === \"DELIVERY\" &&\n visibleDaysForSlot &&\n addressSlotMap &&\n addressSlotMap[orderType] &&\n addressSlotMap[orderType][addressId] && (\n \n {getMessage(\"operations.store.heading\")}\n
\n \n {this.state.pickupLocation ? (\n \n \n {getMessage(\"order.details.pickup.address\")}\n {\" \"}\n {this.state.pickupLocation.address}\n \n ) : null}\n
\n )}\n {!this.state.editing &&\n isExtensionEnabled(\"DeliverySlots\") &&\n (this.props.data.preferredDate || minutesToDeliver) && (\n \n
\n )}\n \n
\n {this.props.data.preferredDate && (\n {getMessage(\"order.details.slot.heading\")}
\n{`${\n this.props.data.preferredDate &&\n getPrintableTime(\n getStandradDateTime(\n utcToLocalTime,\n `${this.props.data.preferredDate} ${this.props.data.preferredSlot.startTime}`\n )\n ).split(\",\")[0]\n }`}
\n )}\n {minutesToDeliver && (\n {minutesToDeliver}
\n )}\n \n {this.state.editing ? (\n \n {getMessage(\"order.details.location.actions.confirmText\")}\n \n ) : null}\n {this.state.editing ? (\n \n {getMessage(\"order.details.location.actions.cancelText\")}\n \n ) : null}\n
\n \n
\n );\n }\n}\n\nexport default PaymentDetails;\n","import React, { Component } from \"react\";\nimport Table, { Header, Row, Cell } from \"../../../../../components/Table\";\nimport { getMessage } from \"../../../../../lib/translator\";\n\nfunction getMobileView() {\n return window.screen.width <= 480;\n}\n\nclass RefundDetails extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isMobileView: getMobileView(),\n };\n this.mobileView = this.mobileView.bind(this);\n }\n\n mobileView() {\n this.setState({ isMobileView: getMobileView() });\n }\n\n componentDidMount() {\n window.addEventListener(\"resize\", this.mobileView, false);\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.mobileView, false);\n }\n render() {\n let { isMobileView } = this.state;\n return (\n \n \n
\n
\n {getMessage(\"order.details.payment.heading\")}
\n\n
\n );\n }\n}\n\nexport default RefundDetails;\n","import React, { Component } from \"react\";\nimport Table, { Header, Row, Cell } from \"../../../../../components/Table\";\nimport API from \"../../../../../lib/api\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport editIcon from \"../edit-icon.svg\";\nimport { isExtensionEnabled } from \"../../../../../lib/auth\";\nclass PackingDetails extends Component {\n constructor() {\n super();\n this.state = { present: false };\n }\n componentDidMount() {\n const api = new API({ url: \"/config-service/config/inStoreProcessing\" });\n api\n .get()\n .then((response) => {\n const isInStoreProcessingPresent =\n response.data.inStoreProcessing.packedOrderEditAllowed;\n if (isInStoreProcessingPresent) {\n this.setState({\n present: true,\n });\n }\n })\n .catch((error) => {\n console.error(error);\n });\n }\n\n render() {\n const details = this.props.packingDetails;\n const metaData = this.props.packageMetaData;\n const referenceNumber = this.props.referenceNumber;\n return (\n \n \n
\n
\n {getMessage(\"Refund Details\")}
\n\n \n
\n ) : (\n \n
\n )}\n
\n );\n }\n}\n\nexport default PackingDetails;\n","import React, { useState } from \"react\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport { Popup as Modal } from \"../../../../../components/Popup\";\nimport getFileExtensionFromUrl from \"../../../../../utils/getFileExtensionFromUrl\";\nimport \"./style.css\";\n\nconst UploadedFileView = (props) => {\n const { orderDetailData } = props;\n const accessUrl = orderDetailData?.accessUrl;\n const fileType = accessUrl && getFileExtensionFromUrl(accessUrl);\n\n const [viewUploadedFile, setViewUploadedFile] = useState(false);\n const [showViewButton, setViewButton] = useState(false);\n\n const handleViewUploadedFile = () => {\n setViewUploadedFile(!viewUploadedFile);\n setViewButton(false);\n };\n return (\n <>\n {viewUploadedFile && (\n \n \n this.props?.history.push(\n `/orders/pack-order/${referenceNumber}/edit`\n )\n }\n />\n )}\n
\n {details ? (\n {getMessage(\"order.details.packing.heading\")}
\n {this.props.status === \"PACKED\" &&\n (this.props?.courierStatus === \"CANCELLED\" ||\n this.props?.courierStatus === undefined) &&\n this.state.present &&\n !isExtensionEnabled(\"InStoreProcessing\") && (\n\n {fileType && fileType === \"pdf\" ? (\n \n ) : (\n
\n \n )}\n \n {accessUrl && (\n
\n )}\n \n \n );\n};\n\nexport default UploadedFileView;\n","import React from \"react\";\nimport { BaseForm } from \"../../../../../components/Form\";\nimport MetaDataFormFields from \"../../../../../components/MetaDataFormFields\";\nimport API from \"../../../../../lib/api\";\nimport { hasPermissions } from \"../../../../../lib/auth\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport { cloneMutables } from \"../../../../../lib/stateManagement\";\nimport UploadedFileView from \"../UploadedFileView\";\n\nimport editIcon from \"../edit-icon.svg\";\nimport \"./style.css\";\n\nclass OrderMetaData extends BaseForm {\n constructor(props) {\n super(props);\n this.state = {\n editing: false,\n saving: false,\n canBeEdited: false,\n };\n }\n\n componentDidMount() {\n this.extnsnApi = new API({ url: `/config-service/meta-data` });\n this.extnsnApi\n .get()\n .then((response) => {\n let config = response.data.config.entityMetaData.order;\n this.setState(\n {\n config,\n canBeEdited: true,\n },\n () => {\n this.setState((prevState) =>\n this.generateStateFromProps(this.props, this.state)\n );\n }\n );\n })\n .catch((error) => {\n console.error(error);\n });\n this.ignoreKeysInView = [\"pickupPersonContact\", \"pickupPersonName\"];\n }\n\n generateStateFromProps(props, state) {\n let newState = Object.assign({}, state);\n let config = newState.config;\n let { data } = props;\n let values = {};\n config &&\n Object.entries(config).forEach(([key, type], index) => {\n values[key] = data && data[key];\n });\n newState.values = values;\n return cloneMutables(newState);\n }\n\n onSubmit(formData) {\n let data = Object.assign({}, formData);\n if (this.props.onChange) {\n this.setState(\n {\n saving: true,\n },\n () => {\n this.props\n .onChange(data)\n .then(\n (response) => {\n this.setState({\n error: false,\n });\n },\n (error) => {\n this.setState({\n error: error,\n });\n if (error.code === 401) {\n throw error;\n }\n }\n )\n .then(() =>\n this.setState({\n editing: false,\n saving: false,\n })\n );\n }\n );\n }\n }\n componentWillUnmount() {\n this.extnsnApi && this.extnsnApi.cancel();\n }\n\n render() {\n const { editing, config, saving } = this.state;\n const { Form } = this.components;\n const { SubmitButton } = this.buttons;\n const { data } = this.props;\n const canBeEdited = hasPermissions(\"order\", \"order\", \"put\");\n return (\n \n setViewButton(false)}\n >\n {fileType && fileType === \"pdf\" ? (\n setViewButton(true)}\n onTouchEnd={() => setViewButton(true)}\n />\n ) : (\n setViewButton(true)}\n alt=\"file\"\n />\n )}\n {showViewButton && (\n
\n \n \n
\n )}\n \n {editing ? (\n \n ) : (\n
\n );\n }\n}\n\nexport default OrderMetaData;\n","import React from \"react\";\nimport { BaseForm, Radio, Select } from \"../../../../../components/Form\";\nimport Loader from \"../../../../../components/Loader\";\nimport Table, { Header, Row, Cell } from \"../../../../../components/Table\";\n\nimport API from \"../../../../../lib/api\";\nimport { getMessage } from \"../../../../../lib/translator\";\n\nimport \"./style.css\";\n\nconst getWastageReasons = (wastageReasons) => {\n return wastageReasons.map((reason) => ({\n text: reason.name.toLowerCase(),\n value: reason.id,\n }));\n};\n\nconst resolutionOptions = [\n {\n text: getMessage(\"return.toStore\"),\n value: \"STORE\",\n },\n {\n text: getMessage(\"return.markasWastage\"),\n value: \"WASTAGE\",\n },\n];\n\nclass ReturnsFrom extends BaseForm {\n constructor(props) {\n super(props);\n this.state.wastageReasons = getWastageReasons(props.wastageReasons);\n this.state.loading = false;\n }\n\n componentDidMount() {\n this.setState({\n loading: true,\n });\n const api = new API({\n url: `/order-service/order/${this.props.referenceNumber}/returns`,\n });\n // const api = new API({ url: 'https://api.myjson.com/bins/obvhy' })\n api\n .get()\n .then(\n (response) => {\n let returns = response.data.returns;\n this.setState({\n values: {\n returns,\n },\n loading: false,\n });\n },\n (error) => {\n this.setState({\n formError: error,\n loading: false,\n });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n onSubmit(formData) {\n this.setState({\n submitting: true,\n });\n let data = Object.assign({}, formData);\n let returns = data.returns;\n let returnToStoreItems = [];\n let wastageItems = [];\n returns.forEach((item) => {\n if (item.resolution === \"WASTAGE\") {\n wastageItems.push({\n orderReturnId: item.id,\n quantity: item.quantity,\n wastageReasonId:\n item.wastageReasonId ||\n (this.state.wastageReasons && this.state.wastageReasons[0].value),\n });\n } else if (item.resolution === \"STORE\") {\n returnToStoreItems.push({\n orderReturnId: item.id,\n quantity: item.quantity,\n });\n }\n });\n if (returnToStoreItems.length > 0) {\n const storeApi = new API({\n url: `/order-service/order/${this.props.referenceNumber}/return-to-store`,\n });\n let params = {};\n params.items = returnToStoreItems;\n params.storeId = this.props.storeId;\n storeApi\n .put(params)\n .then(\n (response) => {\n this.props.onSuccess();\n },\n (error) => {\n this.setState({\n formError: error,\n submitting: false,\n });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n if (wastageItems.length > 0) {\n const wastageApi = new API({\n url: `/order-service/order/${this.props.referenceNumber}/wastage`,\n });\n let params = {};\n params.items = wastageItems;\n params.storeId = this.props.storeId;\n wastageApi\n .put(params)\n .then(\n (response) => {\n this.props.onSuccess();\n },\n (error) => {\n this.setState({\n formError: error,\n submitting: false,\n });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n }\n\n render() {\n const { Form } = this.components;\n const { SubmitButton } = this.buttons;\n const { returns } = this.state.values;\n let defaultWastageValue =\n this.state.wastageReasons && this.state.wastageReasons[0].value;\n return this.state.loading ? (\n \n
\n )}\n \n this.setState({ editing: true })}\n />\n ) : null}\n
\n {config &&\n Object.entries(config)\n .map(([key, type], index) => {\n if (data && data[key]) {\n if (type.type === \"file\" && !data[key]?.url) return false;\n if (this.ignoreKeysInView.indexOf(key) > -1) {\n return false;\n }\n return (\n Custom Fields Details
\n {this.props.editable ? (\n\n \n {key}:{\" \"}\n \n {data[key] === true ? (\n \"Yes\"\n ) : type.type === \"file\" && data[key].accessUrl ? (\n
\n );\n }\n return null;\n })\n .filter(Boolean)}\n \n \n
\n );\n }\n}\n\nexport default ReturnsFrom;\n","import React from \"react\";\nimport { BaseForm, Input } from \"../../../../components/Form\";\nimport { getMessage } from \"../../../../lib/translator\";\n\nclass ReturnFilters extends BaseForm {\n render() {\n const { Form } = this.components;\n const { SubmitButton } = this.buttons;\n return (\n \n );\n }\n}\n\nexport default ReturnFilters;\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport ListingPage, { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport StoreSelector, {\n getDefaultStore,\n} from \"../../../containers/StoreSelector\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\nimport { Popup } from \"../../../components/Popup\";\nimport ReturnsForm from \"./Form/ReturnResolution\";\nimport ReturnsFilter from \"./Filters\";\n\nimport { getMessage } from \"../../../lib/translator\";\nimport { getPrintableTime } from \"../../../lib/datetime\";\nimport { isExtensionEnabled } from \"../../../lib/auth\";\nimport API from \"../../../lib/api\";\n\nimport EmptyIcon from \"./returns-empty.svg\";\nimport \"./style.css\";\n\nconst WastageContext = React.createContext(\"wastage\");\n\nconst emptyState = (props) => {\n return {\n icon: EmptyIcon,\n message: getMessage(\"returns.emptyMessage\"),\n actions: ({ apiParams, onAction }) => (\n \n {createdAt ? getPrintableTime(createdAt).split(\", \")[0] : null}\n
\n \n {createdAt && getPrintableTime(createdAt).split(\", \")[1]}\n \n \n this.setState({ refundValue: value })}\n required\n />\n
\n {this.state.errorMessage && (\n \n this.refundAmountCall()}\n disabled={!this.state.refundValue}\n >\n {getMessage(\"return.refund.button.save\")}\n \n
\n \n \n
\n {view}\n {this.state.loading ? \n {getMessage(\"order.details.heading\")}\n {this.state.data &&\n (this.state.data.clientId\n ? getMessage(\"order.table.clientId.prefix\")\n : getMessage(\"order.table.referenceNumber.prefix\"))}\n \n {this.state.data && (this.state.data.clientId || referenceNumber)}\n \n
\n {contentLoaded ? (\n\n \n {getMessage(\"order.details.complete.optionText\")}\n \n ) : (\n \n \n {getMessage(\"order.details.complete.optionText\")}\n \n \n ))}\n {hideOptionForSeller &&\n canbeReturned &&\n hasAccessToAction?.includes(\"RETURN_ORDER\") && (\n \n \n {getMessage(\"order.details.returm.optionText\")}\n \n \n )}\n {refundAmount > 0 && (\n \n this.showRefundPopup()}\n >\n {getMessage(\"return.refund.option.refundAmount\")}\n \n \n )}\n {canBeDisputed && (\n \n \n {getMessage(\"order.details.dispute.optionText\")}\n \n \n )}\n {hideOptionForSeller &&\n canBeCancelled &&\n hasAccessToAction?.includes(\"CANCEL_ORDER\") && (\n \n {getMessage(\"order.details.cancel.optionText\")}\n \n )}\n {hideOptionForSeller && canShowTripDetails && (\n \n \n {getMessage(\"order.actions.trips\")}\n \n \n )}\n {canBePending && (\n \n {getMessage(\"order.action.moveToPending\")}\n \n )}\n {hideOptionForSeller &&\n isStatusPacked &&\n packedOrderEdit &&\n fromOperations &&\n hasAccessToAction?.includes(\"EDIT_ORDER\") && (\n \n \n {getMessage(\"order.action.editPackedOrder\")}\n \n \n )}\n \n )}\n
\n ) : null}\n \n \n \n {getMessage(\n \"order.details.invoice.printButtonText\"\n )}\n \n \n )}\n\n \n \n {getMessage(\"order.details.invoice.buttonText\")}\n \n \n \n )}\n \n \n \n \n
\n \n {hasAccessToInvoice && (\n <>\n {!showConfig() ? (\n <>\n \n {getMessage(\"order.details.invoice.printButtonText\")}\n \n \n {getMessage(\"order.details.invoice.buttonText\")}\n \n \n ) : (\n <>\n {invoiceSocketData?.referenceNumber && (\n \n {getMessage(\"order.details.invoice.indicator\")}\n \n )}\n {invoices?.length > 1 && (\n â–¼\n )}\n {isStatusComplete && (\n <>\n 1\n ? \"order-action-invoice-dropdown invoice-button invoice-button-dropdown\"\n : \"order-invoice-dropdown invoice-button invoice-button-dropdown\"\n }\n icon={\"Invoice\"}\n onClick={this.getInvoices}\n >\n {invoices &&\n invoices?.length > 1 &&\n invoices?.map((data, index) => {\n const { metaData, url } = data;\n const { invoiceNumber = \"\" } = metaData || {};\n\n if (invoiceNumber.includes(\"R\")) {\n const tag = invoiceNumber?.indexOf(\"R\");\n return (\n {\n e.stopPropagation();\n this.handleInvoice(url);\n }}\n >\n {getMessage(\n \"order.details.return.optionText\"\n )}{\" \"}\n {invoices?.length > 2 &&\n invoiceNumber?.substring(tag + 1)}\n \n );\n }\n return (\n {\n e.stopPropagation();\n this.handleInvoice(url);\n }}\n >\n {getMessage(\n \"order.details.original.optionText\"\n )}\n \n );\n })}\n \n \n )}\n \n )}\n \n )}\n \n
\n {showDropdown && (\n \n {getMessage(\"order.details.errors.onLoad\")}\n
\n ) : null}\n {contentLoaded ? (\n \n {invoiceUrl && this.state.invoiceShown ? (\n this.setState({ invoiceShown: false })}\n handlePrint={this.handlePrint}\n />\n ) : (\n this.setState({ invoiceShown: false })}\n data={this.state.data}\n addressSequence={this.state.addressSequence}\n />\n )}\n \n \n this.setState({\n isMetaDataCollapsed: !this.state.isMetaDataCollapsed,\n })\n }\n className=\"component-collapse\"\n >\n {isMetaDataCollapsed ? \"+\" : \"-\"}\n \n {isMetaDataCollapsed && (\n
\n ) : (\n \"\"\n )}\n {(!isMobileView || (isMobileView && !isMetaDataCollapsed)) &&\n isExtensionEnabled(\"EntityMetaData\") &&\n (this.state.data.status === \"COMPLETED\" ||\n this.state.data.status === \"CANCELLED\"\n ? this.metaDataExists()\n : true) &&\n !Array.isArray(this.state.orderMeta) && (\n \n \n \n this.setState({\n isOrderViewItemCollapsed:\n !this.state.isOrderViewItemCollapsed,\n })\n }\n className=\"component-collapse\"\n >\n {isOrderViewItemCollapsed ? \"+\" : \"-\"}\n \n {isOrderViewItemCollapsed && (\n
\n ) : (\n \"\"\n )}\n {(!isMobileView ||\n (isMobileView && !isOrderViewItemCollapsed)) && (\n \n -1 &&\n hasOrderEditPermission &&\n hasAccessToAction?.includes(\"EDIT_ORDER\")\n }\n onChange={this.handleAddressChange}\n error={this.state.error}\n communicationConfig={this.state.communicationConfig}\n orderConfig={this.state.orderConfig}\n org={this.organization}\n referenceNumber={this.props.router.match.params.id}\n />\n
\n {isMobileView ? (\n \n {getMessage(\"order.details.itemsTable.title\")}\n \n ({(this.state.data.items || []).length})\n \n
\n )}\n{getMessage(\"Custom Fields Details\")}
\n )}\n{getMessage(\"order.details.payment.heading\")}
\n )}\n \n ) : (\n \"\"\n )}\n {(!isMobileView ||\n (isMobileView && !isPaymentDetailsCollapsed)) &&\n this.state.data.payment &&\n this.state.data.payment.length > 0 && (\n{getMessage(\"Refund Details\")}
\n )}\n \n ) : (\n \"\"\n )}\n {(!isMobileView || (isMobileView && !isRefundDetailsCollapsed)) &&\n this.state.data.refund &&\n this.state.data.refund.length > 0 && (\n;\n }\n return
\n
\n \n {getMessage(\n \"order.courier.dispatch.table.header.delivery.estimate\"\n )}\n
\n ) : (\n \"\"\n )}\n {pickupEstimate ? (\n <>\n \n {getPrintableTime(\n getStandradDateTime(utcToLocalTime, pickupEstimate)\n )}\n
\n \n {\n getPrintableTime(\n getStandradDateTime(utcToLocalTime, pickupEstimate)\n ).split(\",\")[1]\n }\n \n \n ) : (\n {getMessage(\"banners.table.na\")}
\n )}\n \n {getMessage(\n \"order.courier.dispatch.table.header.delivery.estimate\"\n )}\n
\n ) : (\n \"\"\n )}\n {deliveryEndEstimate ? (\n <>\n \n {getPrintableTime(\n getStandradDateTime(utcToLocalTime, deliveryEndEstimate)\n )}\n
\n \n {\n getPrintableTime(\n getStandradDateTime(utcToLocalTime, deliveryEndEstimate)\n ).split(\",\")[1]\n }\n \n \n ) : (\n {getMessage(\"banners.table.na\")}
\n )}\n \n {vendorsList && (\n \n
\n )}\n
\n );\n};\n","import React from \"react\";\nimport { getSession } from \"../../lib/auth\";\nimport {\n getPrintableTime,\n getStandradDateTime,\n utcToLocalTime,\n} from \"../../lib/datetime\";\nimport { getMessage } from \"../../lib/translator\";\n\nexport const DunzoDetails = (props) => {\n const { data } = props;\n const { shippingCost, deliveryEndEstimate, pickupEstimate } = data;\n const organization = (getSession() || {}).organization || {};\n return (\n \n
\n );\n};\n","import React from \"react\";\nimport { BaseForm, Radio } from \"../Form\";\nimport Loader from \"../Loader\";\nimport API from \"../../lib/api\";\nimport { getMessage } from \"../../lib/translator\";\nimport AuthenticatedPage from \"../../containers/AuthenticatedPage\";\nimport { Dialog } from \"../Popup\";\nimport \"./style.css\";\nimport { Link } from \"react-router-dom\";\nimport { getSession } from \"../../lib/auth\";\nimport { OtherCourierForm } from \"./OtherCourierForm\";\nimport DropdownIcon from \"./dropdown.svg\";\nimport { VendorsTable } from \"./Table\";\nimport { DunzoDetails } from \"./DunzoDetails\";\n\nexport default class CourierDispatch extends BaseForm {\n constructor(props) {\n super(props);\n this.state.showSuccessDialog = false;\n this.state.showErrorDialog = false;\n this.state.formError = \"\";\n this.state.logisticsServiceProviders = [];\n this.state.courierVendors = [];\n this.state.showShipRocket = false;\n this.state.showFedEx = false;\n this.otherLogisticsProvider = [\n {\n id: \"OTHER\",\n name: \"Other Courier\",\n },\n {\n id: \"SELF\",\n name: \"Self\",\n },\n ];\n }\n\n componentDidMount() {\n this.setState({ providersLoading: true });\n this.allProvidersApi = new API({\n url: \"/logistics-service/logistics-provider\",\n });\n this.websiteConfigApi = new API({\n url: \"/config-service/config/logistics\",\n });\n this.courierEligibilityApi = new API({\n url: \"/logistics-service/courier-eligibility\",\n });\n const id = this.props.match.params.id;\n const params = { orderId: id };\n Promise.all([\n this.allProvidersApi.get(),\n this.websiteConfigApi.get(),\n this.courierEligibilityApi.get(params),\n ])\n .then(\n ([\n allProvidersResponse,\n websiteConfigResponse,\n courierEligibilityResponse,\n ]) => {\n const vendors = courierEligibilityResponse.data?.courierVendor;\n\n const availableLogisticsProvider =\n websiteConfigResponse.data?.logistics?.logisticsServiceProviders;\n const logisticsProvider =\n allProvidersResponse.data?.logisticsProvider || [];\n let useableLogisticsProvider = [];\n if (\n logisticsProvider?.length > 0 &&\n availableLogisticsProvider?.length > 0\n ) {\n useableLogisticsProvider = logisticsProvider.filter((obj) =>\n availableLogisticsProvider.includes(obj.id)\n );\n }\n\n this.setState({\n providersList: allProvidersResponse.data,\n logisticsServiceProviders: useableLogisticsProvider,\n courierVendors: vendors,\n formError: \"\",\n });\n }\n )\n .catch((error) => {\n this.setState({\n formError: error.message,\n showErrorDialog: true,\n });\n console.error(error);\n })\n .finally(() => {\n this.setState({ providersLoading: false });\n });\n }\n componentDidUpdate(prevProps, prevState) {\n if (\n this.state.values?.vendor !== \"OTHER\" &&\n this.state.validations?.courierName\n ) {\n const validations = Object.assign({}, this.state.validations);\n delete validations.courierName;\n delete validations.courierCharges;\n delete validations.courierTrackingId;\n\n this.setState({\n validations: validations,\n });\n }\n }\n\n onSubmit = (data) => {\n if (!data.vendor) {\n this.setState({ dispatchError: true });\n return;\n }\n if (data.vendor === \"OTHER\" && !data.courierName) {\n return;\n }\n this.setState({\n submitting: true,\n });\n const id = this.props.match.params.id;\n let OtherCourierFormData;\n const isVendorSelf = data.vendor === \"SELF\";\n if (data.vendor === \"OTHER\" || data.vendor === \"SELF\") {\n OtherCourierFormData = {\n metaData: {\n courierName: isVendorSelf ? \"SELF\" : data.courierName,\n ...(!isVendorSelf && {\n courierCharge: data.courierCharges,\n trackURL: data.courierTrackingId,\n }),\n },\n };\n }\n\n let shipRocketVendorData;\n const shipRocketVendor = this.state.courierVendors?.find(\n (obj) => obj.name === data.vendor && obj.provider === \"SHIPROCKET\"\n );\n if (shipRocketVendor) {\n shipRocketVendorData = {\n vendor: \"SHIPROCKET\",\n courierVendorId: shipRocketVendor.courierVendorId,\n };\n }\n let fedExVendorData;\n const fedExVendor = this.state.courierVendors?.find(\n (obj) => obj.name === data.vendor && obj.provider === \"FEDEX\"\n );\n if (fedExVendor) {\n fedExVendorData = {\n vendor: \"FEDEX\",\n courierVendorId: fedExVendor.courierVendorId,\n };\n }\n const organizationId = getSession()?.organization?.id?.toString();\n const courierApi = new API({ url: \"/logistics-service/courier\" });\n const vendorName = isVendorSelf ? \"OTHER\" : data.vendor;\n const params = {\n organizationId,\n orderId: id.toString(),\n vendor: vendorName,\n ...OtherCourierFormData,\n ...shipRocketVendorData,\n ...fedExVendorData,\n };\n courierApi\n .post(params)\n .then((response) => {\n this.setState({\n formError: \"\",\n showSuccessDialog: true,\n });\n })\n .catch((error) => {\n this.setState({\n formError: error.message,\n showErrorDialog: true,\n });\n console.error(error);\n })\n .finally(() => {\n this.setState({ submitting: false });\n });\n };\n\n closeDialogs = () => {\n this.setState(\n {\n showSuccessDialog: false,\n showErrorDialog: false,\n },\n () => {\n if (!this.state.formError)\n this.props.history.push(\"/operations/orders\");\n }\n );\n };\n getOptionList = () => {\n // remove SHIPROCKET from option list\n let useableLogisticsProvider = this.state.logisticsServiceProviders.filter(\n (obj) => obj.id !== \"SHIPROCKET\" && obj.id !== \"FEDEX\"\n );\n\n // check availabilit of DUNZO from courierEligibilityApi\n let vendorDunzo = this.state.courierVendors?.filter(\n (obj) => obj.provider === \"DUNZO\"\n );\n if (!vendorDunzo || vendorDunzo?.length === 0) {\n useableLogisticsProvider = [];\n }\n\n useableLogisticsProvider = [\n ...useableLogisticsProvider,\n ...this.otherLogisticsProvider,\n ];\n return useableLogisticsProvider.map((data) => {\n const { name, id, image } = data;\n\n return {\n text: (\n \n
\n {getMessage(\"order.table.courierCharge\")}
\n\n {getMessage(\"order.courier.dispatch.table.header.pickup.estimate\")}\n
\n\n {getMessage(\"order.courier.dispatch.table.header.delivery.estimate\")}\n
\n\n
\n \n {((organization.currency && organization.currency.symbol) || \"\") +\n shippingCost.toFixed(2)}\n
\n {pickupEstimate && (\n\n
\n )}\n {deliveryEndEstimate && (\n \n {getPrintableTime(\n getStandradDateTime(utcToLocalTime, pickupEstimate)\n )}\n
\n\n {\n getPrintableTime(\n getStandradDateTime(utcToLocalTime, pickupEstimate)\n ).split(\",\")[1]\n }\n
\n\n
\n )}\n \n {getPrintableTime(\n getStandradDateTime(utcToLocalTime, deliveryEndEstimate)\n )}\n
\n\n {\n getPrintableTime(\n getStandradDateTime(utcToLocalTime, deliveryEndEstimate)\n )[1]\n }\n
\n\n \n
\n {this.state?.values?.vendor &&\n this.state?.values?.vendor === \"OTHER\" &&\n id === \"OTHER\" && \n {image && }\n {name}\n
\n \n
\n \n )}\n \n {getMessage(\"order.courier.select.heading\")}\n
\n {this.state.providersLoading ? (\n\n {getMessage(\"input.value.missing\")}\n
\n \n )}\n \n \n {getMessage(\"order.action.dispatch\")}\n \n \n \n {getMessage(\"order.details.packed.cancelText\")}\n \n \n
\n \n \n )}\n \n {heading}
\n\n 
\n
\n);\n\nconst SimplePieChart = ({\n header,\n data,\n dataKey = \"count\",\n nameKey = \"medium\",\n toolTipContent,\n}) => (\n Looks like there is no data yet
\n {header}
\n\n {data.length > 0 ? (\n \n \n \n {data.map((entry, index) => (\n | \n ))}\n \n \n \n ) : (\n
\n \n
\n);\n\nconst OrderCountHeaderTag = ({ orderCount }) => (\n \n \n {currency} {getAccumulatedRevenue(orderRevenue)}\n \n Total Revenue\n
\n \n
\n);\n\nclass CsAnalytics extends Component {\n constructor(props) {\n super(props);\n this.state = {\n orderNumber: null,\n orderSearch: false,\n dateRange: {\n startDate: moment().subtract(30, \"d\").format(\"YYYY-MM-DD\"),\n endDate: moment().format(\"YYYY-MM-DD\"),\n },\n orderRevenue: [],\n orderCount: [],\n mediumDistribution: [],\n paymentDistribution: [],\n };\n }\n\n transformDataForChart = (data) => {\n return (\n data\n ?.sort(function (a, b) {\n return dateToNum(a.date) - dateToNum(b.date);\n })\n // converting date to MM/DD format\n .map((d) => ({ ...d, date: d.date.split(\"-\").slice(1).join(\"/\") }))\n );\n };\n\n fetchChartData = () => {\n const { dateRange } = this.state;\n const apis = apiEndPoints.map(\n (url) =>\n new API({\n url: `${commonEndpoint}${url}?start=${dateRange.startDate}T00%3A00%3A00Z&end=${dateRange.endDate}T00%3A00%3A00Z`,\n })\n );\n\n Promise.all(apis.map((api) => api.get()))\n .then(\n ([\n orderRevenueResponse,\n orderCountResponse,\n mediumDistributionResponse,\n paymentDistributionResponse,\n ]) => {\n const newStateValue = {\n orderRevenue: this.transformDataForChart(\n orderRevenueResponse.data.salesAmount\n ),\n orderCount: this.transformDataForChart(\n orderCountResponse.data.orderCount\n ),\n mediumDistribution: mediumDistributionResponse.data\n .mediumWiseOrderCount\n ? mediumDistributionResponse.data.mediumWiseOrderCount\n : [],\n paymentDistribution: paymentDistributionResponse.data\n .modeWisePaymentAmount\n ? paymentDistributionResponse.data.modeWisePaymentAmount\n : [],\n };\n\n this.setState(newStateValue);\n }\n )\n .catch((error) => {\n console.error(error);\n });\n };\n\n handleDateChange = (dates) => {\n let dateRange = JSON.parse(JSON.stringify(this.state.dateRange));\n dateRange.startDate = dates && dates.startDate;\n dateRange.endDate = dates && dates.endDate;\n\n this.setState({\n dateRange,\n });\n };\n\n renderRevenueTooltip = ({ active, payload }) => {\n const currency = getSession().organization.currency.symbol;\n if (active && payload) {\n const { value } = payload[0];\n return (\n \n {getAccumulatedOrders(orderCount)}\n Total Orders\n
\n \n
\n );\n }\n return null;\n };\n\n renderOrdersTooltip = ({ active, payload }) => {\n if (active && payload) {\n const { value } = payload[0];\n return (\n {currency}
\n {value}
\n \n
\n );\n }\n return null;\n };\n\n renderPieDeviceTooltip = ({ active, payload }) => {\n if (active) {\n const { value } = payload[0];\n return (\n {value}
\n {value > 1 ? \"Orders\" : \"Order\"}
\n \n
\n );\n }\n return null;\n };\n\n renderPiePaymentTooltip = ({ active, payload }) => {\n const currency = getSession().organization.currency.symbol;\n if (active) {\n const { value } = payload[0];\n return (\n {value}
\n {value > 1 ? \"Orders\" : \"Order\"}
\n \n
\n );\n }\n return null;\n };\n\n componentDidUpdate(prevProps, prevState) {\n const { dateRange: oldDateRange } = prevState;\n const dateRange = this.state.dateRange;\n if (\n (dateRange.startDate !== oldDateRange.startDate ||\n dateRange.endDate !== oldDateRange.endDate) &&\n dateRange.startDate &&\n oldDateRange.endDate\n ) {\n this.fetchChartData();\n }\n }\n\n componentDidMount() {\n this.fetchChartData();\n }\n\n render() {\n const {\n dateRange,\n mediumDistribution,\n paymentDistribution,\n orderRevenue,\n orderCount,\n } = this.state;\n const currency = getSession().organization.currency.symbol;\n return (\n {value}
\n {currency}
\n Order Analytics
\n\n
\n \n );\n }\n}\n\nexport default CsAnalytics;\n","import moment from \"moment\";\n\nexport const TYPES = {\n DATE: \"Date\",\n STORE: \"Store\",\n STORES: \"Stores\",\n START_DATE: \"startDate\",\n END_DATE: \"endDate\",\n};\n\nconst handleValueWithComma = (val) =>\n val && val.includes(\",\") ? `\"${val}\"` : val;\n\nexport const downloadCSV = (data = [], name) => {\n let csv = data.reduce((acc, curr) => {\n let line = curr.map(handleValueWithComma).join(\",\");\n line += \"\\n\";\n acc += line;\n return acc;\n }, \"\");\n\n var hiddenElement = document.createElement(\"a\");\n const csvData = new Blob([csv], { type: \"text/csv\" });\n const href = URL.createObjectURL(csvData);\n hiddenElement.href = href;\n hiddenElement.target = \"_blank\";\n hiddenElement.download = name ? `${name}.csv` : `report.csv`;\n hiddenElement.click();\n};\n\nexport const getRenderParams = (params) => {\n const storeConfig = params?.filter(({ type }) => type === TYPES.STORE)[0];\n const dateConfig = params?.filter(({ type }) => type === TYPES.DATE);\n const multiStoreConfig = params?.filter(\n ({ type }) => type === TYPES.STORES\n )[0];\n const startDateConfig = dateConfig?.filter(\n ({ key }) => key === TYPES.START_DATE\n )[0];\n const endDateConfig = dateConfig?.filter(\n ({ key }) => key === TYPES.END_DATE\n )[0];\n const otherDateConfigs = dateConfig?.filter(\n ({ key }) => ![TYPES.START_DATE, TYPES.END_DATE].includes(key)\n );\n\n return { storeConfig, startDateConfig, endDateConfig, otherDateConfigs, multiStoreConfig };\n};\n\nexport const isValid = (data, params) => {\n let valid = true;\n params &&\n params.forEach(({ key }) => {\n valid = valid && Boolean(data[key]);\n });\n\n if (valid && data.startDate && data.endDate) {\n valid = valid && moment(data.endDate).isAfter(data.startDate);\n }\n\n return valid;\n};\n\nexport const createThirtyDaysTimeSpanHandler = (startDate) => (day) => {\n const diff = moment(startDate).diff(day, \"day\");\n return !(diff < 0 && diff >= -30);\n};\n","import React, { Component, useState, useEffect, Fragment } from \"react\";\nimport moment from \"moment\";\nimport AuthenticatedPage from \"../../../containers/AuthenticatedPage\";\nimport { Checkbox, MultiSelect, SingleDatePicker } from \"../../../components/Form\";\nimport Select from \"../../../components/Form/Inputs/Select\";\nimport { Dialog, Popup } from \"../../../components/Popup\";\nimport Loader from \"../../../components/Loader\";\n\nimport API from \"../../../lib/api\";\nimport { getMessage } from \"../../../lib/translator\";\nimport {\n canAccessReports,\n getStores,\n isERCOrComplete,\n} from \"../../../lib/auth\";\n\nimport \"./style.css\";\nimport {\n downloadCSV,\n getRenderParams,\n isValid,\n createThirtyDaysTimeSpanHandler,\n} from \"./helpers\";\nimport { get } from \"../../../lib/storage\";\n\nconst reportEndpoint = \"/report-service/reports\";\n\nconst dateRangeOptions = [\"Day\", \"Week\", \"Month\", \"Custom\"];\n\nconst getStoreOptions = () => {\n return [...JSON.parse(get(\"stores\"))].map((store) => {\n return { text: store.name, value: store.id };\n });\n};\n\nconst DownloadReportForm = ({ handleClose, selectedReport, _this }) => {\n const [data, setData] = useState({});\n const [dateRangeType, setDateRangeType] = useState(\"Month\");\n const [isProcessing, setIsProcessing] = useState(false);\n const [selectAll, setSelectAll] = useState(false);\n\n const storeOptions = getStoreOptions();\n\n const handleDateRangeTypeChange = (e) => {\n setDateRangeType(e.target.value);\n };\n\n const handleSubmit = (key) => {\n setIsProcessing(true);\n const reportId = selectedReport?.id;\n const url = `${reportEndpoint}/${reportId}`;\n const params = Object.keys(data).reduce((acc, curr) => {\n acc[curr] = encodeURIComponent(data[curr]);\n if (curr === \"startDate\") {\n acc[curr] += \" 00:00:00\";\n } else if (curr === \"endDate\") {\n acc[curr] += \" 23:59:59\";\n }\n return acc;\n }, {});\n params.requestType = key;\n const api = new API({ url });\n api\n .get(params)\n .then((resp) => {\n handleClose();\n if (key === \"download\") {\n downloadCSV(resp.data, selectedReport?.name);\n }\n if (key === \"email\") {\n _this.setState({\n formError: \"\",\n successMessage: resp.data,\n showSuccessDialog: true,\n });\n }\n })\n .catch((error) => console.error(error))\n .finally(() => {\n setIsProcessing(false);\n });\n };\n\n const createDataChangeHandler = (key) => (date) => {\n const newData = { ...data, [key]: date };\n if (multiStoreConfig?.key === key) {\n if (date?.length !== storeOptions?.length) {\n setSelectAll(false);\n } else {\n setSelectAll(true);\n }\n }\n setData(newData);\n };\n\n /* Recalculate the date-range whenever different timespan is selected*/\n useEffect(() => {\n const { startDateConfig, endDateConfig } = getRenderParams(\n selectedReport?.params\n );\n\n if (startDateConfig && endDateConfig) {\n if (dateRangeType !== \"Custom\") {\n let numOfDays = 30;\n if (dateRangeType === \"Day\") {\n numOfDays = 1;\n } else if (dateRangeType === \"Week\") {\n numOfDays = 7;\n }\n\n const newDates = {\n startDate: moment().subtract(numOfDays, \"d\").format(\"YYYY-MM-DD\"),\n endDate: moment().format(\"YYYY-MM-DD\"),\n };\n\n setData((data) => ({ ...data, ...newDates }));\n }\n }\n }, [dateRangeType, selectedReport]);\n\n // Reset endDate is selected span is more than 30 days\n useEffect(() => {\n if (data.startDate && data.endDate) {\n if (moment(data.startDate).diff(data.endDate, \"day\") < -30) {\n setData((data) => ({ ...data, endDate: undefined }));\n }\n }\n }, [data.startDate, data.endDate]);\n\n const allStores = getStores()\n ?.filter((store) => store.hasPicking || store.hasClickCollect)\n .map((store) => ({ text: store.name, value: store.id }));\n\n const { storeConfig, startDateConfig, endDateConfig, otherDateConfigs, multiStoreConfig } =\n getRenderParams(selectedReport?.params);\n\n const canbeSubmitted = !isProcessing && isValid(data, selectedReport?.params);\n\n const handleSelectAll = (key, value) => {\n let storeIds;\n if (value) {\n storeIds = storeOptions?.map((store) => store.value);\n } else {\n storeIds = [];\n }\n const newData = { ...data, [key]: storeIds };\n setData(newData);\n setSelectAll(value);\n };\n\n return (\n \n date > new Date()}\n label=\"Select Dates\"\n onChange={this.handleDateChange}\n displayFormat={() => \"MMM D YYYY\"}\n value={dateRange}\n />\n
\n \n
\n \n
\n \n \n
\n )}\n {multiStoreConfig && (\n \n \n {getMessage(\"analytics.report.dateRange\")}\n \n
\n )}\n \n {dateRangeOptions.map((val) => (\n
\n \n
\n ))}\n \n {startDateConfig && (\n moment().diff(day) < 0}\n label={startDateConfig.name}\n onChange={createDataChangeHandler(startDateConfig.key)}\n displayFormat={() => \"MMM D YYYY\"}\n value={data[startDateConfig.key]}\n disabled={dateRangeType !== \"Custom\"}\n />\n )}\n {startDateConfig && endDateConfig && (\n -\n )}\n {endDateConfig && (\n \"MMM D YYYY\"}\n value={data[endDateConfig.key]}\n disabled={dateRangeType !== \"Custom\"}\n />\n )}\n {otherDateConfigs &&\n otherDateConfigs.map((param, index) => (\n moment().diff(day) < 0}\n label={param.name}\n onChange={createDataChangeHandler(param.key)}\n displayFormat={() => \"MMM D YYYY\"}\n value={data[param.key]}\n key={\"other-date-\" + index}\n />\n ))}\n
\n \n {selectedReport?.requestTypes?.map((requestTypes) => (\n handleSubmit(requestTypes?.name)}\n >\n {getMessage(\n isProcessing\n ? \"analytics.report.processing\"\n : requestTypes === \"download\"\n ? \"analytics.report.modal.title\"\n : \"analytics.report.send.email\"\n )}\n \n ))}\n
\n \n );\n};\n\nclass AnalyticsReport extends Component {\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n fetchReports = () => {\n this.setState({ loading: true });\n const api = new API({ url: reportEndpoint });\n\n api\n .get()\n .then((reports) => {\n const modifiedResp = Object.keys(reports.data).reduce((acc, curr) => {\n return [...acc, { ...reports.data[curr], id: curr }];\n }, []);\n this.setState({ reports: modifiedResp, loading: false });\n })\n .catch((error) => {\n console.error(error);\n });\n };\n\n handleShowModal = (report) => {\n this.setState({ showModal: true, selectedReport: report });\n };\n\n closeModal = () => {\n this.setState({ showModal: false });\n };\n\n closeDialogs = () => {\n this.setState({\n showSuccessDialog: false,\n showErrorDialog: false,\n });\n };\n\n componentDidMount() {\n this.fetchReports();\n }\n\n render() {\n const {\n reports,\n showModal,\n selectedReport,\n loading,\n showSuccessDialog,\n showErrorDialog,\n formError,\n successMessage,\n } = this.state;\n\n const isERCorComplete = isERCOrComplete();\n return (\n {getMessage(\"analytics.reports.heading\")}
\n {loading ? (\n\n {getMessage(\"analytics.report.recent\")}\n
\n\n {reports?.map((report, index) => {\n const shouldRender =\n (isERCorComplete && canAccessReports(report?.name)) ||\n !isERCorComplete;\n\n if (shouldRender) {\n return (\n this.handleShowModal(report)}\n >\n \n {report.name}\n
\n );\n }\n return null;\n })}\n \n ;\n }\n return
\n {brandName || \"\"} {\" \"}\n {variantName\n ? variantName\n : getMessage(\n \"order.details.itemsTable.itemsInOrder.unavailabelText\"\n )}\n
\n }\n \n \n
\n \n 
\n
\n \n {quantity}\n
\n \n 
\n
\n \n {getMessage(\"order.details.itemsTable.header.mrp\")}\n
\n ) : (\n \"\"\n )}\n {`${currency.symbol} ${mrp}`}\n \n {getMessage(\"order.details.itemsTable.header.discount\")}\n
\n ) : (\n \"\"\n )}\n \n {`${currency.symbol} ${discount}`}\n \n \n {getMessage(\"order.details.itemsTable.header.amount\")}\n
\n ) : (\n \"\"\n )}\n \n \n {currency.symbol}\n {amount}\n \n
\n \n 
\n
\n \n {productsList && (\n \n
\n )}\n
\n );\n }\n}\n","import React, { Component } from \"react\";\nimport { getMessage } from \"../../../../../lib/translator\";\n\nimport \"./style.css\";\n\nclass InvoiceSummary extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isOpen: false,\n };\n this.togglePricingDetails = this.togglePricingDetails.bind(this);\n }\n\n togglePricingDetails() {\n this.setState((prevState) => {\n return {\n isOpen: !prevState.isOpen,\n };\n });\n }\n\n render() {\n let { amount: payableAmount, discount, shipping } = this.props.data;\n const { isOpen } = this.state;\n let total = Number(payableAmount) + Number(shipping);\n return (\n \n
\n {isOpen && (\n \n
\n \n {getMessage(\"order.details.summary.totalAmount\")}:\n
\n \n {this.props.currency.symbol} \n {total.toFixed(2)}\n
\n \n \n {\"View Pricing Details\"}\n
\n \n
\n )}\n \n );\n }\n}\n\nexport default InvoiceSummary;\n","import React, { Component } from \"react\";\nimport MetaDataFormFields from \"../../../../../components/MetaDataFormFields\";\nimport API from \"../../../../../lib/api\";\nimport {\n getEntityMetaData,\n saveEntityMetaData,\n isExtensionEnabled,\n} from \"../../../../../lib/auth\";\n\nimport \"./style.css\";\n\nclass OrderMetaData extends Component {\n constructor(props) {\n super(props);\n this.metaDataWithType = {};\n this.getOrderMetaData = this.getOrderMetaData.bind(this);\n }\n\n setValuesToEmpty(obj) {\n let object = Object.assign({}, obj);\n obj && Object.keys(obj).forEach((key, index) => (object[key] = \"\"));\n return object;\n }\n\n getOrderMetaData() {\n let metaData = getEntityMetaData().order;\n const filteredMetaData = {};\n for (let key in metaData) {\n filteredMetaData[key] = metaData[key];\n }\n this.props.initializeMetaData(this.setValuesToEmpty(filteredMetaData));\n this.metaDataWithType = Object.assign({}, filteredMetaData);\n this.metaData = Object.assign({}, this.props.metaData);\n if (!this.metaData) {\n Object.entries(metaData).forEach(([key, type]) => {\n metaData[key] = \"\";\n });\n this.metaData = metaData;\n }\n this.setState({\n values: metaData,\n });\n }\n\n componentDidMount() {\n let orderKeys = getEntityMetaData() && getEntityMetaData().order;\n if (\n (!orderKeys ||\n (Array.isArray(orderKeys) && !orderKeys.length) ||\n (orderKeys.constructor === Object && !Object.keys(orderKeys).length)) &&\n isExtensionEnabled(\"EntityMetaData\")\n ) {\n const api = new API({ url: `/config-service/meta-data` });\n api\n .get()\n .then((response) => {\n let details = response.data.config.entityMetaData;\n saveEntityMetaData(details);\n this.getOrderMetaData();\n })\n .catch((error) => {\n console.error(error);\n });\n } else {\n if (isExtensionEnabled(\"EntityMetaData\")) {\n this.getOrderMetaData();\n }\n }\n }\n\n render() {\n const { metaData, onChange } = this.props;\n return (\n Object.keys(this.metaDataWithType).length > 0 && (\n \n
\n \n {getMessage(\"order.details.summary.orderAmount\")}\n
\n \n {this.props.currency.symbol} \n \n {Number(payableAmount + discount).toFixed(2)}\n \n
\n \n
\n \n {getMessage(\"order.details.summary.shippingCharge\")}\n
\n \n {this.props.currency.symbol} \n \n {Number(shipping).toFixed(2)}\n \n
\n \n
\n \n {getMessage(\"order.details.summary.discount\")}\n
\n \n {this.props.currency.symbol} \n \n {Number(discount).toFixed(2)}\n \n
\n \n
\n \n );\n }\n\n promisifySetState(state) {\n return new Promise((resolve) => {\n this.setState(state, resolve);\n });\n }\n\n addProductToList(newProduct) {\n if (!newProduct) {\n return;\n }\n const { amount, discount } = formatOrderDetails(\n newProduct.storeSpecificData\n );\n const values = { ...this.state.values };\n let { products } = { ...values };\n if (!products || !products[newProduct[\"id\"]]) {\n if (!products) {\n products = {};\n }\n products[newProduct[\"id\"]] = newProduct;\n products[newProduct[\"id\"]][\"quantity\"] = 1;\n } else {\n products[newProduct[\"id\"]][\"quantity\"] =\n products[newProduct[\"id\"]][\"quantity\"] + 1;\n }\n values[\"products\"] = products;\n this.setState((prevState) => {\n return {\n values,\n totalAmount: prevState.totalAmount + amount,\n totalDiscount: prevState.totalDiscount + discount,\n };\n });\n }\n\n removeProduct(productId) {\n const values = { ...this.state.values };\n let { products } = { ...values };\n if (products && products[productId]) {\n const { amount, discount } = formatOrderDetails(\n products[productId].storeSpecificData\n );\n const productQuantity = products[productId][\"quantity\"];\n delete products[productId];\n const productsLength = Object.keys(products).length;\n if (productsLength === 0) {\n products = null;\n }\n values[\"products\"] = products;\n this.setState((prevState) => {\n return {\n values,\n totalAmount:\n productsLength > 0\n ? prevState.totalAmount - amount * productQuantity\n : 0,\n totalDiscount:\n productsLength > 0\n ? prevState.totalDiscount - discount * productQuantity\n : 0,\n };\n });\n }\n }\n\n goBack() {\n this.props.history.goBack();\n }\n\n // quantity is -1 for decrease in quantity and +1 is for increase in quantity\n updateQuantity(productId, quantity) {\n const values = { ...this.state.values };\n let { products } = { ...values };\n if (products && products[productId]) {\n const { amount, discount } = formatOrderDetails(\n products[productId].storeSpecificData\n );\n products[productId][\"quantity\"] =\n products[productId][\"quantity\"] + quantity;\n if (products[productId][\"quantity\"] <= 0) {\n delete products[productId];\n }\n const productsLength = Object.keys(products).length;\n if (productsLength === 0) {\n products = null;\n }\n values[\"products\"] = products;\n this.setState((prevState) => {\n return {\n values,\n totalAmount:\n productsLength > 0 ? prevState.totalAmount + quantity * amount : 0,\n totalDiscount:\n productsLength > 0\n ? prevState.totalDiscount + quantity * discount\n : 0,\n };\n });\n }\n }\n\n updateMetaData(key, value) {\n const values = Object.assign({}, this.state.values);\n let { metaData } = { ...values };\n if (metaData) {\n metaData[key] = value;\n }\n values[\"metaData\"] = metaData;\n this.setState({\n values,\n });\n }\n\n initializeMetaData(metaDataToInitialize) {\n const values = { ...this.state.values };\n values.metaData = metaDataToInitialize;\n this.setState({\n values,\n });\n }\n\n closeErrorDialog() {\n this.setState({\n showErrorDialog: false,\n formError: \"\",\n });\n }\n\n showAddressModal() {\n this.setState({\n showAddressModal: true,\n });\n }\n\n closeAddressModal() {\n this.setState({\n showAddressModal: false,\n });\n }\n\n orderCreate(formData, params, cart) {\n params[\"cart\"] = JSON.stringify(cart);\n if (formData.metaData && Object.keys(formData.metaData).length > 0) {\n params[\"metaData\"] = formData.metaData;\n } else {\n delete formData.metaData;\n }\n const storeDetails = this.getCurrStoreDetails();\n if (formData[\"type\"] === \"DELIVERY\") {\n params[\"storeId\"] = this.props.storeId;\n if ([0, false].includes(storeDetails?.hasPicking)) {\n params[\"pickingStoreId\"] = storeDetails?.pickingStoreId;\n }\n delete params[\"pickupLocationId\"];\n } else {\n params[\"pickupLocationId\"] =\n (this.state.values && this.state.values[\"pickupLocationId\"]) ||\n this.props.storeId;\n }\n const api = new API({ url: \"/order-service/order\" });\n api\n .post(params)\n .then(\n (response) => {\n if (response.data && response.data.order) {\n const order = response.data.order;\n if (this.state.cashTendered > 0) {\n const paymentApi = new API({\n url: \"/order-service/order-payment\",\n });\n let paymentParams = {};\n paymentParams[\"amount\"] = Math.min(\n this.state.cashTendered,\n this.state.totalAmount\n );\n paymentParams[\"orderReferenceNumber\"] = order.referenceNumber;\n paymentParams[\"mode\"] = \"COD\";\n paymentParams[\"status\"] = \"COMPLETED\";\n paymentApi.post(paymentParams).then(\n (response) => {\n this.props.history.push(\n `/operations/orders/${order.referenceNumber}`\n );\n },\n (error) => {\n this.setState({\n formError: error.message,\n showErrorDialog: true,\n submitting: false,\n });\n }\n );\n } else {\n this.props.history.push(\n `/operations/orders/${order.referenceNumber}`\n );\n }\n }\n },\n (error) => {\n this.setState({\n formError: error.message,\n showErrorDialog: true,\n submitting: false,\n });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n onSubmit(formData) {\n const customerDetails = this.props.customerDetails;\n let cart = [];\n let params = {};\n let { products } = formData;\n if (!products) {\n return false;\n }\n this.setState({\n submitting: true,\n });\n for (let key in products) {\n cart.push({ id: products[key].id, q: products[key].quantity });\n }\n if (formData.preferredDate && isExtensionEnabled(\"DeliverySlots\")) {\n params[\"preferredDate\"] = this.state.preferredDate;\n params[\"preferredSlotId\"] = Number(formData.preferredSlotId);\n }\n params[\"type\"] = formData.type;\n params[\"paymentMode\"] = formData.paymentMode;\n\n if (customerDetails !== null) {\n // Existing customer. Send only customer ID\n params[\"customerId\"] = customerDetails.id;\n } else {\n // New customer. Address and customer details need to be sent\n params[\"name\"] = formData.name;\n params[\"phone\"] = formData.phone;\n params[\"email\"] = formData.email;\n params[\"address\"] = formData.address;\n params[\"city\"] = formData.address && formData.address.city;\n params[\"landmark\"] = formData.address && formData.address.landmark;\n params[\"pincode\"] = formData.address && formData.address.pincode;\n }\n if (formData.selectedAddressId && formData.type === \"DELIVERY\") {\n params[\"addressId\"] = formData.selectedAddressId;\n }\n this.orderCreate(formData, params, cart);\n }\n\n addNewAddress(text, response) {\n this.closeAddressModal();\n let values = { ...this.state.values };\n if (response.addresses) {\n values.customerDetails = response;\n this.setState({\n values,\n });\n this.props.addAddressInCustomerDetails(response.addresses[0], response);\n } else {\n values.selectedAddressId = response.id;\n this.setState({\n values,\n });\n this.props.addAddressInCustomerDetails(response);\n }\n }\n\n async deliveryApi() {\n let values = JSON.parse(JSON.stringify(this.state.values));\n values[\"name\"] = this.props.customerDetails\n ? this.props.customerDetails.name\n : null;\n values[\"email\"] =\n this.props.customerDetails &&\n this.props.customerDetails.emails?.length > 0\n ? this.props.customerDetails.emails?.[0].email\n : null;\n values[\"phone\"] = this.props.phoneNumber || null;\n\n await this.promisifySetState({ values: values });\n\n if (\n !values.selectedAddressId &&\n this.props.customerDetails &&\n this.props.customerDetails.addresses &&\n this.props.customerDetails.addresses.length > 0\n ) {\n values[\"selectedAddressId\"] = this.props.customerDetails.addresses[0].id;\n }\n\n const customerAddress =\n this.props.customerDetails &&\n this.props.customerDetails.addresses &&\n this.props.customerDetails.addresses.length > 0\n ? {\n address: this.props.customerDetails.addresses[0].address,\n landmark: this.props.customerDetails.addresses[0].landmark,\n city: this.props.customerDetails.addresses[0].city,\n pincode: this.props.customerDetails.addresses[0].pincode,\n }\n : { address: null, landmark: null, city: null, pincode: null };\n if (\n this.props.customerDetails &&\n this.props.customerDetails.addresses &&\n this.props.customerDetails.addresses.length > 0 &&\n isExtensionEnabled(\"DeliverySlots\")\n ) {\n const api = new API({ url: \"/order-service/slot-availability\" });\n const addressId =\n this.state.values.selectedAddressId ||\n this.props.customerDetails.addresses[0].id;\n let params = this.getAddressParams(\n addressId,\n this.props.customerDetails,\n this.props.storeId\n );\n await api\n .get(params)\n .then((response) => {\n let transformedResponse = sortSlotsAvailability(response.data.slots);\n let slots = {};\n transformedResponse &&\n transformedResponse.map((slot) => {\n if (!slots.hasOwnProperty(slot.date)) {\n slots[slot.date] = [];\n }\n slots[slot.date].push(slot);\n return null;\n });\n values[\"addressSlotMap\"][\"DELIVERY\"][addressId] = slots;\n values[\"selectedAddressId\"] = addressId;\n values[\"preferredDate\"] =\n Object.keys(slots).length > 0 ? Object.keys(slots)[0] : null;\n this.addressNotServed[addressId] = false;\n if (\n !transformedResponse ||\n Object.keys(transformedResponse).length === 0\n ) {\n this.addressNotServed[addressId] = true;\n }\n values = {\n ...values,\n ...customerAddress,\n };\n this.setState({\n values,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n }\n async pickupLocationApi() {\n if (this.props.pickuplocations && this.props.pickuplocations.length > 0) {\n this.slotApi = new API({ url: \"/order-service/slot-availability\" });\n let params = this.getPickupParams(this.props.pickuplocationDetails[0].id);\n await this.slotApi\n .get(params)\n .then((response) => {\n let transformedResponse = sortSlotsAvailability(response.data.slots);\n let slots = {};\n transformedResponse &&\n transformedResponse.map((slot) => {\n if (!slots.hasOwnProperty(slot.date)) {\n slots[slot.date] = [];\n }\n slots[slot.date].push(slot);\n return null;\n });\n\n let values = JSON.parse(JSON.stringify(this.state.values));\n values[\"addressSlotMap\"][\"PICKUP\"][\n this.props.pickuplocations[0].value\n ] = slots;\n this.setState({\n values,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n }\n\n async componentDidUpdate(prevProps, prevState) {\n if (prevProps.phoneNumber !== this.props.phoneNumber) {\n let values = JSON.parse(JSON.stringify(this.state.values));\n values[\"products\"] = null;\n values[\"type\"] =\n this.props.pickuplocations && this.state.pickupSupported\n ? \"PICKUP\"\n : \"DELIVERY\";\n values[\"paymentMode\"] = \"COD\";\n values[\"pickupLocationId\"] =\n this.props.pickuplocations && this.props.pickuplocations.length > 0\n ? this.props.pickuplocations[0].value\n : null;\n values[\"phone\"] = this.props.phoneNumber || null;\n values[\"name\"] = this.props.customerDetails\n ? this.props.customerDetails.name\n : null;\n if (this.props.showNewCustomerForm) {\n delete values.name;\n delete values.email;\n delete values.address;\n delete values.landmark;\n delete values.pincode;\n delete values.city;\n }\n await this.promisifySetState({ values: values });\n }\n\n if (prevProps.storeId !== this.props.storeId) {\n let values = JSON.parse(JSON.stringify(this.state.values));\n if (isExtensionEnabled(\"DeliverySlots\")) {\n values[\"addressSlotMap\"][\"DELIVERY\"] = {};\n values[\"preferredSlotId\"] = null;\n }\n if (values.type === \"DELIVERY\") {\n values.products = null;\n }\n await this.promisifySetState({ values: values });\n\n if (isExtensionEnabled(\"DeliverySlots\") && this.props.customerDetails) {\n this.deliveryApi();\n }\n }\n\n if (\n isExtensionEnabled(\"DeliverySlots\") &&\n this.props.customerDetails &&\n this.props.customerDetails !== prevProps.customerDetails\n ) {\n this.deliveryApi();\n }\n\n if (this.props.pickuplocations !== prevProps.pickuplocations) {\n let values = JSON.parse(JSON.stringify(this.state.values));\n values[\"pickupLocationId\"] = this.props.pickuplocations\n ? this.props.pickuplocations.length > 0 &&\n this.props.pickuplocations[0].value\n : null;\n\n await this.promisifySetState({ values: values });\n\n if (\n isExtensionEnabled(\"DeliverySlots\") &&\n this.state.visibleDaysForSlots\n ) {\n this.pickupLocationApi();\n }\n }\n\n if (\n this.state.visibleDaysForSlots !== prevState.visibleDaysForSlots &&\n isExtensionEnabled(\"DeliverySlots\")\n ) {\n this.pickupLocationApi();\n }\n\n if (prevProps.showNewCustomerForm !== this.props.showNewCustomerForm) {\n const validations = JSON.parse(JSON.stringify(this.state.validations));\n if (!this.props.showNewCustomerForm) {\n delete validations[\"name\"];\n this.setState({\n validations,\n });\n }\n }\n if (this.state.values.type === \"PICKUP\") {\n const validations = { ...this.state.validations };\n if (validations && validations[\"address\"]) {\n delete validations[\"address\"];\n delete validations[\"landmark\"];\n delete validations[\"pincode\"];\n delete validations[\"city\"];\n this.setState({\n validations,\n });\n }\n } else {\n let prevValues = Object.assign({}, prevState.values);\n let values = Object.assign({}, this.state.values);\n if (\n prevValues.selectedAddressId !== values.selectedAddressId &&\n values.addressSlotMap &&\n values.addressSlotMap.DELIVERY[values.selectedAddressId] &&\n values.addressSlotMap.DELIVERY[values.selectedAddressId].length < 1\n ) {\n this.addressNotServed[values.selectedAddressId] = true;\n }\n if (\n prevValues.selectedAddressId !== values.selectedAddressId &&\n values.addressSlotMap &&\n values.addressSlotMap.DELIVERY[values.selectedAddressId] &&\n (values.addressSlotMap.DELIVERY[values.selectedAddressId].length > 0 ||\n Object.keys(values.addressSlotMap.DELIVERY[values.selectedAddressId])\n .length > 0)\n ) {\n this.addressNotServed[values.selectedAddressId] = false;\n }\n }\n }\n\n async componentDidMount() {\n this.configApi = new API({ url: \"/account-service/config/order\" });\n await this.configApi\n .get()\n .then((response) => {\n const orderTypes = response.data.config.order.orderTypes;\n if (orderTypes && orderTypes.includes(\"PICKUP\")) {\n this.setState({\n pickupSupported: true,\n });\n }\n if (orderTypes && orderTypes.includes(\"DELIVERY\")) {\n this.setState({\n deliverySupported: true,\n });\n }\n })\n .catch((error) => {\n console.error(error);\n });\n\n const deliverySlotsEnabled = isExtensionEnabled(\"DeliverySlots\");\n if (deliverySlotsEnabled) {\n if (this.state.validations) {\n let validations = JSON.parse(JSON.stringify(this.state.validations));\n validations.preferredSlotId = {};\n validations.preferredSlotId.valid = false;\n this.setState({ validations });\n }\n let extId = getExtensionDetails(\"DeliverySlots\").id;\n const api = new API({ url: `/account-service/extension/${extId}` });\n await api\n .get()\n .then((response) => {\n let transformedResponse = response.data.extension.config.globalConfig;\n let values = Object.assign({}, this.state.values);\n values.addressSlotMap = {\n DELIVERY: {},\n PICKUP: {},\n };\n this.setState({\n visibleDaysForSlots: transformedResponse.visibleDaysForSlot || 0,\n values,\n });\n })\n .catch((err) => console.error(err));\n\n if (!this.props.customerDetails) {\n const { storeId } = this.props;\n const { visibleDaysForSlots } = this.state;\n let slotApi = new API({ url: `/order-service/slot-availability` });\n let params = {};\n if (storeId) {\n params[\"storeId\"] = storeId;\n params[\"searchInterval\"] =\n moment().toISOString() +\n \"/\" +\n moment().add(visibleDaysForSlots, \"days\").toISOString();\n }\n await slotApi\n .get(params)\n .then((response) => {\n let transformedResponse = sortSlotsAvailability(\n response.data.slots\n );\n let values = JSON.parse(JSON.stringify(this.state.values));\n let slots = {};\n transformedResponse &&\n transformedResponse.map((slot) => {\n if (!slots.hasOwnProperty(slot.date)) {\n slots[slot.date] = [];\n }\n slots[slot.date].push(slot);\n return null;\n });\n\n values.preferredDate =\n Object.keys(slots).length > 0 ? Object.keys(slots)[0] : null;\n values.preferredSlotId = null;\n let options = {};\n if (slots) {\n options = generateOptions(slots);\n }\n this.setState({\n slots,\n values,\n options,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n }\n\n if (\n isExtensionEnabled(\"EntityMetaData\") &&\n isExtensionEnabled(\"DeliveryAreaSupport\")\n ) {\n this.addressSequenceApi = new API({\n url: \"/config-service/config/customers\",\n });\n this.addressSequenceApi\n .get()\n .then((response) => {\n this.setState({\n addressSequence: response.data.customers.addressSequence,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n }\n\n getAddressParams(addressId, customerDetails) {\n let params = {};\n let { visibleDaysForSlots } = this.state;\n let { storeId } = this.props;\n const today = moment().toISOString();\n const endDay = moment().add(visibleDaysForSlots, \"days\").toISOString();\n params[\"startDate\"] = today;\n params[\"endDate\"] = endDay;\n params[\"orderType\"] = \"DELIVERY\";\n params[\"searchInterval\"] = params[\"startDate\"] + \"/\" + params[\"endDate\"];\n if (storeId) {\n params[\"storeId\"] = storeId;\n }\n params[\"addressId\"] = addressId;\n let customer = customerDetails || this.props.customerDetails;\n let selectedAddress = customer.addresses.filter(\n (address) => address.id === Number(addressId)\n )[0];\n params[\"address[address]\"] = selectedAddress[\"address\"];\n params[\"address[city]\"] = selectedAddress[\"city\"];\n params[\"address[landmark]\"] = selectedAddress[\"landmark\"];\n params[\"address[pincode]\"] = selectedAddress[\"pincode\"];\n params[\"address[latitude]\"] = selectedAddress[\"latitude\"];\n params[\"address[longitude]\"] = selectedAddress[\"longitude\"];\n delete params[\"startDate\"];\n delete params[\"endDate\"];\n return params;\n }\n\n getPickupParams(pickupLocationId) {\n let params = {};\n let { visibleDaysForSlots } = this.state;\n const today = moment().toISOString();\n const endDay = moment().add(visibleDaysForSlots, \"days\").toISOString();\n params[\"startDate\"] = today;\n params[\"endDate\"] = endDay;\n params[\"storeId\"] = pickupLocationId || this.props.storeId;\n params[\"searchInterval\"] = params[\"startDate\"] + \"/\" + params[\"endDate\"];\n delete params[\"startDate\"];\n delete params[\"endDate\"];\n params[\"orderType\"] = \"PICKUP\";\n return params;\n }\n\n getSlotDetails(addressId) {\n const deliverySlotsEnabled = isExtensionEnabled(\"DeliverySlots\");\n if (deliverySlotsEnabled) {\n if (\n this.state.values.addressSlotMap &&\n !this.state.values.addressSlotMap.DELIVERY[addressId]\n ) {\n const api = new API({ url: \"/order-service/slot-availability\" });\n let params = this.getAddressParams(addressId);\n api\n .get(params)\n .then(\n (response) => {\n let transformedResponse = sortSlotsAvailability(\n response.data.slots\n );\n let values = JSON.parse(JSON.stringify(this.state.values));\n let slots = {};\n transformedResponse &&\n transformedResponse.map((slot) => {\n if (!slots.hasOwnProperty(slot.date)) {\n slots[slot.date] = [];\n }\n slots[slot.date].push(slot);\n return null;\n });\n values.addressSlotMap.DELIVERY[addressId] = slots;\n this.addressNotServed[addressId] = false;\n if (\n !transformedResponse ||\n Object.keys(transformedResponse).length === 0\n ) {\n this.addressNotServed[addressId] = true;\n }\n\n this.setState({\n values,\n });\n },\n (error) => {\n this.setState({\n formError: error,\n });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n }\n let values = Object.assign({}, this.state.values);\n values.selectedAddressId = addressId;\n values.preferredSlotId = null;\n this.setState({\n values,\n });\n }\n\n async getPickupSlotDetails(pickupLocationId) {\n const values = Object.assign({}, this.state.values);\n values.pickupLocationId = pickupLocationId;\n values.preferredSlotId = null;\n values.products = null;\n\n await this.promisifySetState({ values: values });\n\n let deliverySlotsEnabled = isExtensionEnabled(\"DeliverySlots\");\n if (deliverySlotsEnabled) {\n if (\n this.state.values.addressSlotMap &&\n !this.state.values.addressSlotMap.PICKUP[pickupLocationId]\n ) {\n const api = new API({ url: \"/order-service/slot-availability\" });\n let params = this.getPickupParams(pickupLocationId);\n api\n .get(params)\n .then(\n (response) => {\n let transformedResponse = sortSlotsAvailability(\n response.data.slots\n );\n let values = JSON.parse(JSON.stringify(this.state.values));\n let slots = {};\n transformedResponse &&\n transformedResponse.map((slot) => {\n if (!slots.hasOwnProperty(slot.date)) {\n slots[slot.date] = [];\n }\n slots[slot.date].push(slot);\n return null;\n });\n values.addressSlotMap.PICKUP[pickupLocationId] = slots;\n let noPickupSlots = false;\n if (Object.keys(slots).length === 0) {\n noPickupSlots = true;\n }\n this.setState({\n values,\n noPickupSlots,\n });\n },\n (error) => {\n this.setState({\n formError: error,\n });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n }\n }\n\n changeDate(date) {\n let values = JSON.parse(JSON.stringify(this.state.values));\n let validations = JSON.parse(JSON.stringify(this.state.validations));\n values.preferredDate = date;\n values.preferredSlotId = null;\n if (validations.preferredSlotId) validations.preferredSlotId.valid = false;\n this.setState({\n values,\n validations,\n preferredSlotIdError: false,\n });\n }\n\n selectSlot(slotId, slotVal, preferredDate) {\n slotVal.forEach((val) => {\n if (`${val.value}` === slotId) {\n const timeArr = val.text.split(\" \");\n if (timeArr.includes(\"Within\")) {\n let currentLocal = moment(\n localTimeToUtc(moment().local().format(\"YYYY-MM-DD HH:mm:ss\"))\n ).format(\"YYYY-MM-DD HH:mm:ss\");\n this.setState({\n preferredDate: currentLocal.split(\" \")[0].trim(),\n });\n } else {\n this.setState({\n preferredDate: moment(\n localTimeToUtc(\n moment(\n `${preferredDate} ${convertToMilitaryTime(\n timeArr[0],\n timeArr[1]\n )}`\n ).format(\"YYYY-MM-DD HH:mm:ss\")\n )\n )\n .format(\"YYYY-MM-DD, HH:mm:ss\")\n .split(\",\")[0],\n });\n }\n }\n });\n let values = JSON.parse(JSON.stringify(this.state.values));\n let validations = JSON.parse(JSON.stringify(this.state.validations));\n if (validations.preferredSlotId) validations.preferredSlotId.valid = true;\n values.preferredSlotId = slotId;\n this.setState({\n values,\n validations,\n preferredSlotIdError: false,\n });\n }\n\n beforeSubmit() {\n let values = JSON.parse(JSON.stringify(this.state.values));\n if (values.preferredSlotId === null) {\n this.setState({ preferredSlotIdError: true });\n }\n }\n\n onTypeChange(value) {\n this.updateState([\"type\"], value);\n this.setState((prevState) => {\n let newState = JSON.parse(JSON.stringify(prevState));\n newState.preferredSlotIdError = true;\n if (newState.validations.preferredSlotId)\n newState.validations.preferredSlotId.valid = false;\n newState.values.preferredSlotId = null;\n newState.values.products = null;\n return newState;\n });\n }\n getCurrStoreDetails = () => {\n const { storeId, pickuplocationDetails } = this.props;\n const currStore = pickuplocationDetails.filter(\n ({ id }) => id?.toString() === storeId?.toString()\n );\n return currStore?.[0];\n };\n getInventoryStoreId = (deliveryType) => {\n const storeDetails = this.getCurrStoreDetails();\n if (deliveryType === \"DELIVERY\") {\n if ([0, false].includes(storeDetails?.hasPicking))\n return storeDetails?.pickingStoreId;\n return this.props.storeId;\n }\n return this.state.values.pickupLocationId;\n };\n render() {\n const {\n values,\n totalAmount,\n totalDiscount,\n formError,\n showErrorDialog,\n showAddressModal,\n cashTendered,\n slots,\n pickupSupported,\n deliverySupported,\n } = this.state;\n const { pickuplocations, customerDetails, showNewCustomerForm } =\n this.props;\n const {\n products,\n name,\n phone,\n type,\n metaData,\n addressSlotMap,\n selectedAddressId,\n preferredDate,\n preferredSlotId,\n pickupLocationId,\n } = values;\n const { SubmitButton } = this.buttons;\n const { Form } = this.components;\n const currency = getSession().organization.currency;\n const data = {\n amount: totalAmount,\n discount: totalDiscount,\n shipping: 0,\n };\n let orderTypeOptions = [];\n if (pickuplocations && pickupSupported) {\n orderTypeOptions.push({\n text: getMessage(\"order.form.orderType.pickup\"),\n value: \"PICKUP\",\n });\n }\n if (deliverySupported) {\n orderTypeOptions.push({\n text: getMessage(\"order.form.paymentMode.delivery\"),\n value: \"DELIVERY\",\n });\n }\n let slotError = null;\n if (\n this.state.preferredSlotIdError &&\n this.state.pressedSubmitWithCurrentData &&\n this.state.values &&\n this.state.values.preferredSlotId === null\n ) {\n slotError = (\n \n {getMessage(\"order.form.slots.error.message\")}\n \n );\n }\n\n return (\n \n {item.brand && {item.brand.name} }\n {item[nameKey]}\n
\n \n \n {currency} {amount}{\" \"}\n \n {discount > 0 && {mrp}}\n
\n \n \n
\n ))}\n \n {type === \"PICKUP\" &&\n pickupSupported &&\n pickuplocations &&\n pickuplocations.length > 0 && (\n \n {getMessage(\"order.form.addressnotserved\")}\n
\n )}\n \n
\n \n
\n )}\n \n
\n \n
\n \n
\n {cashTendered > totalAmount && (\n {`${getMessage(\n \"order.form.cash.tendered\"\n )} (${currency.symbol})`}
\n \n
\n )}\n \n {getMessage(\"order.form.balanceAmount\")}\n
\n \n {currency.symbol}\n \n {(cashTendered - totalAmount).toFixed(2)}\n \n
\n \n {isEntityMetaDataEnabled && name && phone && (\n
\n \n \n );\n }\n}\n\nexport default withRouter(OrderAddForm);\n\nexport { formatOrderDetails };\n","import React from \"react\";\nimport {\n BaseForm,\n VALIDATION_TYPES,\n Phone,\n} from \"../../../../../components/Form\";\nimport API from \"../../../../../lib/api\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport \"./style.css\";\nimport Loader from \"../../../../../components/Loader\";\n\nexport default class PhoneNumberForm extends BaseForm {\n onSubmit(formData) {\n const api = new API({ url: \"/customer-service/customer\" });\n api\n .get(formData, { \"X-API-VERSION\": 2 })\n .then(\n (response) => {\n let customerDetails = null;\n if (response.data.count > 0) {\n customerDetails = response.data.customer[0];\n this.customerDetailsApi = new API({\n url: `/customer-service/customer/${customerDetails.id}`,\n });\n this.customerDetailsApi\n .get(\"\", { \"X-API-VERSION\": 2 })\n .then((response) => {\n this.props.setCustomerDetails(\n response.data.customer,\n formData[\"phone\"]\n );\n })\n .catch((error) => {\n console.error(error);\n });\n } else {\n this.props.setCustomerDetails(customerDetails, formData[\"phone\"]);\n }\n },\n (error) => {\n if (error.code === 401) {\n throw error;\n }\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n componentDidMount() {\n this.setState({\n loading: true,\n });\n const api = new API({ url: \"/account-service/country\" });\n api\n .get()\n .then((response) => {\n let country = response.data.country.isoCode;\n this.setState({\n loading: false,\n countryCode: country,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n\n render() {\n const { Form } = this.components;\n const { SubmitButton } = this.buttons;\n return this.state.loading ? (\n \n
\n )}\n {products && (\n \n
\n \n \n {getMessage(\"order.form.cancel.text\")}\n \n \n {getMessage(\"order.form.submit.text\")}\n \n
\n )}\n \n {customerDetails.image && }\n
\n );\n}\n\nclass CreateOrder extends Component {\n constructor(props) {\n super(props);\n this.state = {\n customerDetails: null,\n showNewCustomerForm: false,\n pickuplocations: null,\n phoneNumber: null,\n storeId: get(\"store\") || getDefaultStore(props.stores).storeId,\n showStoreSelctor: false,\n };\n this.setCustomerDetails = this.setCustomerDetails.bind(this);\n this.addAddressInCustomerDetails =\n this.addAddressInCustomerDetails.bind(this);\n this.updateStoreId = this.updateStoreId.bind(this);\n }\n\n setCustomerDetails(customerDetails, phoneNumber) {\n this.setState({\n customerDetails,\n showNewCustomerForm: !customerDetails,\n phoneNumber,\n });\n }\n\n addAddressInCustomerDetails(address) {\n let newCustomerDetails = JSON.parse(\n JSON.stringify(this.state.customerDetails)\n ); // TODO : Use Immutable here\n if (\n !newCustomerDetails.addresses ||\n newCustomerDetails.addresses.length === 0\n ) {\n newCustomerDetails.addresses = [];\n }\n newCustomerDetails.addresses.push(address);\n this.setState({\n customerDetails: newCustomerDetails,\n });\n }\n\n componentDidMount() {\n this.setState({\n showStoreSelctor: true,\n });\n const locations = getStores();\n if (locations?.length > 0) {\n const pickuplocations = locations\n .filter((store) => store.hasClickCollect)\n .reduce((acc, location) => {\n acc.push({ value: location.id, text: location.name });\n return acc;\n }, []);\n this.setState({\n pickuplocations,\n pickuplocationDetails: locations,\n });\n }\n }\n\n updateStoreId(storeId) {\n this.setState({\n storeId,\n });\n }\n\n render() {\n const {\n customerDetails,\n showNewCustomerForm,\n pickuplocations,\n phoneNumber,\n storeId,\n showStoreSelctor,\n } = this.state;\n const { stores } = this.props;\n return (\n \n
\n {customerDetails.name}
\n \n {customerDetails.emails?.length > 0 && (\n
\n {customerDetails.emails?.[0].email}
\n )}\n \n
\n );\n }\n}\n\nconst StoreDependentOrders = makestoreDependentComponent(CreateOrder);\n\nconst CreateOrderWrapper = (props) => {\n return (\n \n
\n {getMessage(\"order.form.add.heading\")}
\n\n {showStoreSelctor && isExtensionEnabled(\"MultiStoreSupport\") && (\n
\n \n
\n \n {location?.label?.location}\n {\", \"}\n {location?.label?.time}\n
\n \n \n {this.state.dataLoading && \n this.fetchLatLngLocation(vehicleLastInfo)}\n />\n )}\n {showRealRoutes ? (\n <>\n {vehicleRoute &&\n vehicleRoute.map((route, index) => {\n return (\n
\n );\n }\n}\n\nexport default MapWithPath;\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport Loader from \"../Loader\";\nimport MapWithPath from \"../MapWithPath\";\nimport {\n getPrintableTime,\n formatDate,\n getStandradDateTime,\n utcToLocalTime,\n} from \"../../lib/datetime\";\nimport EmptyState from \"../../components/EmptyState\";\nimport API from \"../../lib/api\";\nimport { getSession, hasPermissions, isExtensionEnabled } from \"../../lib/auth\";\nimport { getMessage } from \"../../lib/translator\";\nimport \"./style.css\";\nimport AuthenticatedPage from \"../../containers/AuthenticatedPage\";\nimport emptyIcon from \"./order-log-empty.svg\";\nimport { getAsapDuration, getDisplayAddress } from \"../../lib/commonlyused\";\n\nexport default class OrderLog extends Component {\n constructor(props) {\n super(props);\n this.state = {\n showLoader: false,\n orderLog: [],\n };\n }\n\n componentDidMount() {\n this.setState({\n showLoader: true,\n });\n\n this.api = new API({ url: \"/order-service/order-log\" });\n let params = {};\n params.orderReferenceNumber = this.props.match.params.id;\n this.api\n .get(params)\n .then((response) => {\n let orderLog = response.data.orderlog;\n let log = orderLog.filter(\n (log) => log.action === \"ORDER_DISPATCHED\"\n )[0];\n let tripId = false;\n if (log && orderLog[0].action === \"ORDER_DISPATCHED\") {\n tripId = log.details && log.details.tripId;\n }\n this.clientId = response.data.order && response.data.order.clientId;\n if (tripId) {\n this.getTripDetails(tripId);\n }\n if (isExtensionEnabled(\"EntityMetaData\")) {\n this.addressApi = new API({\n url: \"/config-service/config/customers\",\n });\n this.addressApi.get().then((response) => {\n this.setState({\n addressSequence: response.data.customers.addressSequence,\n });\n });\n }\n this.setState({\n orderLog: response.data.orderlog,\n showLoader: false,\n tripId,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n\n componentWillUnmount() {\n this.api && this.api.cancel();\n this.addressApi && this.addressApi.cancel();\n }\n\n getTripDetails(id) {\n const api = new API({ url: `/logistics-service/tripLocations` });\n const tripDetailsApi = new API({ url: `/logistics-service/trip/${id}` });\n Promise.all([tripDetailsApi.get(), api.get({ tripId: id })])\n .then(([tripDetailsRes, tripLocationResponse]) => {\n let locations = tripLocationResponse.data;\n let length = locations?.length;\n let vehicleCoordinates =\n length > 0\n ? locations?.sort(\n (a, b) =>\n new Date(getPrintableTime(a.time)) -\n new Date(getPrintableTime(b.time))\n )\n : [];\n\n let tripDetails = tripDetailsRes.data.trip;\n let orders = tripDetails.orders;\n let orderLocations = orders.map(({ address }) => ({\n latitude: address.latitude,\n longitude: address.longitude,\n }));\n let storeLocation =\n orders.length > 0\n ? {\n latitude: orders[0].store.latitude,\n longitude: orders[0].store.longitude,\n }\n : null;\n this.setState({\n vehicleCoordinates,\n orderLocations,\n showMap: true,\n storeLocation,\n });\n })\n .catch((error) => {\n console.error(error);\n if (error.code === 401) {\n throw error;\n }\n });\n }\n\n render() {\n const {\n orderLog,\n showLoader,\n vehicleCoordinates,\n showMap,\n orderLocations,\n storeLocation,\n } = this.state;\n const count = orderLog && orderLog.length;\n return (\n {marker.labels.join(\", \")}
\n \n ))}\n {this.props.showStore && (\n {getMessage(\"order.logs.heading\")}
\n\n
\n \n {`${getMessage(\"order.logs.orderRef\")} `}\n \n {!showLoader && (this.clientId ? \"#\" : \"Z\")}\n \n {!showLoader &&\n (hasPermissions(\"order\", \"order\", \"get\") ? (\n \n {this.clientId || this.props.match.params.id}\n \n ) : (\n this.clientId || this.props.match.params.id\n ))}\n
\n {orderLog &&\n orderLog[0] &&\n orderLog[0].details &&\n orderLog[0].details.status &&\n orderLog[0].details.status.newValue && (\n {`${getMessage(\n \"order.logs.status\"\n )}: ${\n orderLog[0].details.status.newValue &&\n orderLog[0].details.status.newValue.charAt(0) +\n orderLog[0].details.status.newValue.slice(1).toLowerCase()\n }`}\n )}\n\n {showLoader ? (\n
\n \n
\n )}\n \n {getMessage(\"order.log.slot.changed\")}{\" \"}\n {item.slotStartTime.oldValue && getMessage(\"order.log.from\")}\n \n {item.slotType && item.slotType.oldValue === \"ASAP\"\n ? getAsapDuration(\n item.slotStartTime.oldValue,\n item.slotEndTime.oldValue\n )\n : \" \" + slotTime}{\" \"}\n \n {getMessage(\"order.log.to\")}{\" \"}\n \n {item.slotType && item.slotType.newValue === \"ASAP\"\n ? getAsapDuration(\n item.slotStartTime.newValue,\n item.slotEndTime.newValue\n )\n : `${\n getPrintableTime(\n getStandradDateTime(\n utcToLocalTime,\n `${new Date().toISOString().split(\"T\")[0]} ${\n item.slotStartTime.newValue\n }`\n )\n ).split(\",\")[1]\n } - ${\n getPrintableTime(\n getStandradDateTime(\n utcToLocalTime,\n `${new Date().toISOString().split(\"T\")[0]} ${\n item.slotEndTime.newValue\n }`\n )\n ).split(\",\")[1]\n }`}\n \n
\n );\n }\n return (\n (props.data.action !== \"RECALCULATE_PAYMENT_STATUS\" ||\n (props.data.action === \"RECALCULATE_PAYMENT_STATUS\" &&\n !!Object.keys(item).length)) && (\n \n
\n \n )\n );\n};\n\nconst Table = function (props) {\n const theadData = props.data.properties;\n const tbodyData = props.data.tableData;\n const { itemChanges } = props.data;\n return (\n \n
\n \n {\n getPrintableTime(\n getStandradDateTime(utcToLocalTime, props.data.createdAt)\n ).split(\",\")[0]\n }\n
\n \n {\n getPrintableTime(\n getStandradDateTime(utcToLocalTime, props.data.createdAt)\n ).split(\",\")[1]\n }\n \n \n \n \n )}\n\n {item.itemChanges && (\n
\n \n {props.data.action === \"ORDER_RETURN\" && (\n {`${metadata}: ${item.metaData.newValue[metadata]}`}
\n ))}\n\n {props.data.action === \"ORDER_DISPATCHED\" && showMap && (\n \n {getMessage(\"order.log.return\")}\n
\n )}\n\n {props.data.action === \"STATUS_CHANGE\" &&\n props.data.details.status &&\n props.data.details.status.newValue === \"COMPLETED\" &&\n props.data.details.leftAtDoorStep && (\n \n {getMessage(\"order.log.leftAtDoorStep\")}\n
\n )}\n\n {props.data.action === \"CUSTOMER_NOT_AVAILABLE\" && (\n {getMessage(\"order.log.customerNA\")}
\n )}\n\n {item.status ? (\n props.data.user ? (\n \n {item.status.newValue &&\n item.status.newValue\n .toLowerCase()\n .split(\"_\")\n .map((t) => t[0].toUpperCase() + t.substr(1, t.length))\n .join(\" \")\n .toString()}\n {props.data.user.name ? (\n \n \n {\" \"}\n {getMessage(\"order.log.user\")}\n {\" \"}\n {props.data.user.name}\n
\n {props.data.user.designation?.name}\n \n ) : (\n \n \n {\" \"}\n {getMessage(\"order.log.user\")}\n \n ‒\n \n )}\n
\n ) : (\n item.status.newValue &&\n item.status.oldValue && (\n \n {props.data.user.designation?.name}\n \n ) : (\n \n \n {\" \"}\n {getMessage(\"order.log.user\")}\n \n ‒\n \n )}\n
\n {getMessage(\"order.log.status.changed\")}{\" \"}\n {getMessage(\"order.log.from\")}{\" \"}\n {` ${\n item.status.oldValue &&\n item.status.oldValue\n .toLowerCase()\n .split(\"_\")\n .map((t) => t[0].toUpperCase() + t.substr(1, t.length))\n .join(\" \")\n .toString()\n }`}{\" \"}\n {getMessage(\"order.log.to\")}{\" \"}\n {`${\n item.status.newValue &&\n item.status.newValue\n .toLowerCase()\n .split(\"_\")\n .map((t) => t[0].toUpperCase() + t.substr(1, t.length))\n .join(\" \")\n .toString()\n }`}\n
\n )\n )\n ) : (\n props.data.user && (\n \n {getMessage(\"order.log.editedBy\")}\n {props.data.user.name ? (\n \n {getMessage(\"order.log.user\")}{\" \"}\n {props.data.user.name}\n \n ) : (\n \n {getMessage(\"order.log.user\")}\n ‒\n \n )}\n
\n )\n )}\n\n {item.placedFrom ? (\n \n \n {getMessage(\"order.log.placedfrom\")}\n \n : {item.placedFrom}\n
\n ) : null}\n\n {item.paymentStatus && (\n \n {getMessage(\"order.log.payment.changed\")}:{\" \"}\n {getMessage(\"order.log.from\")}{\" \"}\n \n {item.paymentStatus.oldValue &&\n item.paymentStatus.oldValue\n .toLowerCase()\n .split(\"_\")\n .map((t) => t[0].toUpperCase() + t.substr(1, t.length))\n .join(\" \")\n .toString()}\n {\" \"}\n {getMessage(\"order.log.to\")}{\" \"}\n \n {item.paymentStatus.newValue\n .toLowerCase()\n .split(\"_\")\n .map((t) => t[0].toUpperCase() + t.substr(1, t.length))\n .join(\" \")\n .toString()}\n \n
\n )}\n\n {item.address && item.address.newValue && (\n \n {getMessage(\"order.log.address.changed\")}:{\" \"}\n {`${getDisplayAddress(\n item.address.newValue,\n props.addressSequence\n )}`}\n
\n )}\n\n {item.preferredDate && (\n \n {getMessage(\"order.log.date.changed\")}{\" \"}\n {item.preferredDate.oldValue && getMessage(\"order.log.from\")}{\" \"}\n \n {item.preferredDate.oldValue &&\n formatDate(item.preferredDate.oldValue)}\n {\" \"}\n {getMessage(\"order.log.to\")}\n \n {\" \"}\n {formatDate(item.preferredDate.newValue)}\n \n
\n )}\n\n {slotTime}\n\n {item.shipping && (\n \n {getMessage(\"order.log.shipping.charges\")}:{\" \"}\n {item.shipping.newValue}\n
\n )}\n\n {item.type && (\n \n {getMessage(\"order.log.type.changed\")}:{\" \"}\n {getMessage(\"order.log.from\")}{\" \"}\n \n {item.type.oldValue.name.toLowerCase()}\n {\" \"}\n {getMessage(\"order.log.to\")}{\" \"}\n \n {item.type.newValue.name.toLowerCase()}\n \n
\n )}\n\n {item.metaData &&\n Object.keys(item.metaData.newValue).map((metadata, i) => (\n \n {getMessage(\"order.log.tripId\")}\n {hasPermissions(\"logistics\", \"trips\", \"get\") ? (\n \n #{item.tripId}\n \n ) : (\n item.tripId\n )}\n
\n \n
\n )}\n\n {item.amount && item.amount.oldValue && item.amount.newValue && (\n \n {getMessage(\"order.log.amount.changed\")}:{\" \"}\n {getMessage(\"order.log.from\")}{\" \"}\n {` ${\n getSession().organization.currency.symbol\n }${item.amount.oldValue}`}{\" \"}\n {getMessage(\"order.log.to\")}{\" \"}\n {`${\n getSession().organization.currency.symbol\n }${item.amount.newValue}`}\n
\n )}\n\n {item.payment && (\n \n \n {getMessage(\"order.log.payment.initiated\")}\n \n {\" for \"}\n {getSession().organization.currency.symbol + \"\" + item.amount}\n {item.paymentService ? \" via \" + item.paymentService : \"\"}\n {item.paymentMode && (\n \n Mode: {item.paymentMode}\n \n )}\n
\n ) : null}\n {props.data.action === \"PAYMENT_CANCELLATION\" ? (\n \n \n {getMessage(\"order.log.payment.cancelled\")}\n \n {\" for \"}\n {getSession().organization.currency.symbol + \"\" + item.amount}\n {item.paymentMode && (\n \n Mode: {item.paymentMode}\n \n )}\n
\n ) : null}\n {props.data.action === \"PAYMENT_COMPLETION\" ? (\n \n \n {getMessage(\"order.log.payment.completed\")}\n \n {\" for \"}\n {getSession().organization.currency.symbol + \"\" + item.amount}\n {item.paymentMode && (\n \n Mode: {item.paymentMode}\n \n )}\n
\n ) : null}\n {props.data.action === \"REFUND_INITIATION\" ? (\n \n \n {getMessage(\"order.log.refund.initiated\")}\n \n {\" for \"}\n {getSession().organization.currency.symbol + \"\" + item.amount}\n {item.paymentMethod && (\n \n Mode: {item.paymentMethod}\n \n )}\n
\n ) : null}\n \n {props.data.header && \n \n
\n
\n );\n};\n","import React from \"react\";\nimport { SelectSearch, MultiSelect } from \"../Form\";\nimport { getMessage } from \"../../lib/translator\";\n\nexport default function SelectStoresSearch(props) {\n let {\n _this,\n stores,\n stateKey,\n label,\n placeholder,\n secondaryLabel,\n readOnly,\n dontDisplaySelected,\n required,\n } = props;\n let formattedStores = stores?.map((store) => {\n return {\n text: store.name,\n value: store.id,\n };\n });\n\n if (stores.length < 5) {\n return (\n {props.data.header}
}\n| \n {getMessage(`order.log.${cell}`)}\n | \n ))}\n|
|---|---|
| \n {row.metaData[cell]}\n | \n );\n }\n return (\n\n {isNaN(row[cell])\n ? cell === \"status\"\n ? row[cell] &&\n row[cell].charAt(0) + row[cell].slice(1).toLowerCase()\n : row[cell]\n : row[cell] % 1 !== 0 ||\n (itemChanges && (i === 1 || i === 2))\n ? Number(row[cell]).toFixed(2)\n : row[cell]}\n | \n );\n })}\n
\n \n
\n );\n }\n}\n","import React from \"react\";\nimport {\n BaseForm,\n Searchable,\n Select,\n VALIDATION_TYPES,\n Input,\n} from \"../../../../components/Form\";\n\nimport { getMessage } from \"../../../../lib/translator\";\n\nexport default class UserShiftForm extends BaseForm {\n render() {\n const { SubmitButton, ClearButton } = this.buttons;\n const { Form } = this.components;\n const { stores, multiStoreEnabled } = this.props.options;\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport {\n BaseForm,\n Input,\n VALIDATION_TYPES,\n} from \"../../../../../components/Form\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport API from \"../../../../../lib/api\";\nimport HidePassword from \"../../../../../components/Form/icons/HidePassword\";\nimport ShowPassword from \"../../../../../components/Form/icons/ShowPassword\";\nimport \"./style.css\";\n\nclass ResetPassword extends BaseForm {\n constructor(props) {\n super(props);\n this.state.submitting = false;\n this.state.showNewPassword = false;\n this.state.showConfirmPassword = false;\n }\n\n onSubmit(formData) {\n let data = Object.assign({}, formData);\n const { newPassword, confirmPassword } = data;\n\n // new pass and confirm pass validation\n if (newPassword !== confirmPassword) {\n this.setState({\n formError: getMessage(\"shifts.passwords.dont.match\"),\n });\n return;\n }\n\n // Clear error if passwords match\n this.setState({\n formError: null,\n submitting: true,\n });\n\n const api = new API({\n url: `/account-service/employee/${this.props.id}/password`,\n });\n api\n .put(data)\n .then((response) => this.props.onSuccess())\n .catch((error) => {\n console.error(error);\n this.setState({\n formError: error.message,\n submitting: false,\n });\n });\n }\n\n handleShowPassword = (e, key) => {\n e.preventDefault();\n this.setState((prevState) => ({\n [key]: !prevState[key],\n }));\n };\n\n render() {\n const { Form } = this.components;\n const { SubmitButton } = this.buttons;\n const { showNewPassword, showConfirmPassword } = this.state;\n const NewPasswordIcon = showNewPassword ? ShowPassword : HidePassword;\n const ConfirmPasswordIcon = showConfirmPassword\n ? ShowPassword\n : HidePassword;\n\n return (\n \n );\n }\n}\n\nexport default ResetPassword;\n","import React, { Component } from \"react\";\nimport ListingPage, { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\nimport Image from \"../../../components/Image\";\nimport { Dialog, Popup } from \"../../../components/Popup\";\nimport { AttendanceButton } from \"../../operations/Pickers\";\nimport customerImagePlaceholder from \"./customer-image-placeholder.svg\";\n\nimport API from \"../../../lib/api\";\nimport { getMessage } from \"../../../lib/translator\";\nimport { isExtensionEnabled, hasPermissions } from \"../../../lib/auth\";\nimport {\n formatTime,\n getPrintableTime,\n getStandradDateTime,\n localTimeToUtc,\n utcToLocalTime,\n} from \"../../../lib/datetime\";\n\nimport UserShiftsForm from \"./Form\";\nimport UserShiftsFilter from \"./Filters\";\nimport ResetPasswordForm from \"./Form/ResetPassword\";\n\nimport \"./style.css\";\n\nimport emptyIcon from \"./employeeEmpty.svg\";\nimport { get } from \"../../../lib/storage\";\n\nconst emptyState = {\n icon: emptyIcon,\n message: getMessage(\"shifts.empty.message\"),\n actions: ({ onAction }) => (\n \n onAction(TABLE_ACTIONS.EDIT, { id })}\n >\n {name}\n
\n {designation && designation.name && (\n {designation.name}\n )}\n \n \n {weeklyOff.map((day) => `${getMessage(day)}`).join(\", \")}\n
\n ) : (\n -/-
\n )}\n {stores && stores.length > 0 ? (\n {stores.length}
\n ) : (\n 0
\n )}\n \n {designation &&\n designation.timingType === \"FIXED\" &&\n shiftStart &&\n shiftEnd\n ? `${formatTime(`${shiftStart}`)} - ${formatTime(shiftEnd)}`\n : \"\"}\n
\n ) : (\n -/-
\n )}\n {attendance && attendance.createdAt ? (\n \n {getPrintableTime(attendance.createdAt)}\n
\n ) : designation ? (\n designation.timingType !== \"FLEXI\" ? (\n \n {getMessage(\"attendance.label.notCheckedIn\")}\n
\n ) : (\n -/-
\n )\n ) : (\n \n {getMessage(\"attendance.label.noDesignation\")}\n
\n )}\n \n
\n \n {getMessage(\"employee.checkedInAt\") +\n \": \" +\n getPrintableTime(attendance.createdAt)}\n
\n \n onAction(TABLE_ACTIONS.EDIT, { id })}\n >\n {name}\n
\n \n {phone &&\n phone.phone &&\n (Object.keys(parse(phone.phone)).length > 0\n ? format(parse(phone.phone), \"International\")\n : phone.phone)}\n \n \n \n {weeklyOff.map((day) => `${getMessage(day)}`).join(\", \")}\n
\n )}\n \n {formatTime(`${shiftStart}`)} - {formatTime(shiftEnd)}\n
\n ) : null}\n {isCheckedIn ? (\n \n {getPrintableTime(attendance.createdAt)}\n
\n ) : null}\n \n \n {getMessage(\"pickers.today.slot.estimate.time\") +\n moment(estimatedTime).format(\"hh:mm A\")}\n \n
\n )}\n \n \n \n {getMessage(\"pickers.today.slot.starttime\")}\n {moment(startTime).format(\"hh:mm A\")}\n \n \n {!isOverTime\n ? getMessage(\"pickers.today.slot.current.time\") +\n moment().format(\"hh:mm:ss A\")\n : getMessage(\"pickers.today.slot.estimate.time\") +\n moment(estimatedTime).format(\"hh:mm A\")}\n \n
\n \n {getMessage(\"pickers.active.header\")}\n
\n \n {activeEmployees.map((employee, index) => {\n for (let index = 0; index < pickers.length; index++) {\n if (pickers[index].pickerId === employee.id) {\n picker = pickers[index];\n }\n }\n let lateTime =\n moment(employee.attendance.expectedIn) <\n moment(employee.attendance.createdAt);\n return (\n \n | \n | \n
\n );\n })}\n
\n \n
\n \n
\n \n {employee.imageUrl ? (\n
\n {employee.shiftStart && employee.shiftEnd && (\n \n {employee ? employee.name : \"\"}\n
\n \n {employee && !!employee.phones.length && (\n
\n \n \n {employee && !!employee.phones.length && (\n
\n {getMessage(\"pickers.today.slot\")}\n {employee.shiftStart\n ? formatTime(employee.shiftStart)\n : \"\"}\n - \n {employee.shiftEnd ? formatTime(employee.shiftEnd) : \"\"}\n
\n )}\n \n {getMessage(\"pickers.today.checkin.time\")}\n {\n getPrintableTime(employee.attendance.createdAt).split(\n \",\"\n )[1]\n }\n {lateTime && (\n \n {getMessage(\"pickers.today.late\")}\n \n )}\n
\n \n {picker.currentOrder.slotStartTime &&\n picker.currentOrder.slotEndTime && (\n \n {picker.currentOrder.clientId\n ? `#${picker.currentOrder.clientId}`\n : `Z${picker.currentOrder.referenceNumber}`}{\" \"}\n \n ) : (\n \"\"\n )}\n \n\n
\n \n {picker.currentOrder.slotStartTime &&\n picker.currentOrder.slotEndTime &&\n getMessage(\"pickers.today.order.slot\")}\n {picker.currentOrder.slotStartTime &&\n formatIsoTime(picker.currentOrder.slotStartTime)}\n - \n {picker.currentOrder.slotEndTime &&\n formatIsoTime(picker.currentOrder.slotEndTime)}\n
\n )}\n \n {getMessage(\"picker.today.order\")}\n {picker.currentOrder ? (\n \n {picker.currentOrder.processName === \"PICKING\"\n ? getMessage(\"pickers.today.picking.item\")\n : picker.currentOrder.processName === \"CHECKING\"\n ? getMessage(\"pickers.today.checking.item\")\n : picker.currentOrder.processName === \"PACKING\"\n ? getMessage(\"pickers.today.packing.item\")\n : getMessage(\"pickers.today.packed.item\")}\n {picker.currentOrder.numOfOrderItems || 0}\n {getMessage(\"pickers.today.picking.item2\")}\n
\n \n {getMessage(\"pickers.idle.header\")}\n
\n ) : (\n \"\"\n )}\n \n {idleEmployees.length ? (\n idleEmployees.map((employee, index) => {\n let lateTime =\n moment(employee.attendance.expectedIn) <\n moment(employee.attendance.createdAt);\n return (\n
\n \n
\n );\n })\n ) : pickers.length ? null : (\n \n {employee.imageUrl ? (\n
\n {employee.shiftStart && employee.shiftEnd && (\n \n {employee ? employee.name : \"\"}\n
\n \n {employee && !!employee.phones.length && (\n
\n \n \n {employee && !!employee.phones.length && (\n
\n {getMessage(\"pickers.today.slot\")}\n {employee.shiftStart ? formatTime(employee.shiftStart) : \"\"}\n - \n {employee.shiftEnd ? formatTime(employee.shiftEnd) : \"\"}\n
\n )}\n \n
\n \n {getMessage(\"pickers.today.checkin.time\")}\n {\n getPrintableTime(employee.attendance.createdAt).split(\n \",\"\n )[1]\n }\n {lateTime && (\n \n {getMessage(\"pickers.today.late\")}\n \n )}\n
\n \n
\n );\n }\n}\n\nexport default TotalPickers;\n","import React, { Component } from \"react\";\nimport API from \"../../../lib/api\";\nimport ActivePickers from \"./ActivePickers\";\nimport IdlePickers from \"./IdlePickers\";\nimport TotalPickers from \"./TotalPickers\";\nimport AuthenticatedPage from \"../../../containers/AuthenticatedPage\";\nimport Loader from \"../../../components/Loader\";\nimport { Link } from \"react-router-dom\";\nimport { getMessage } from \"../../../lib/translator\";\nimport emptyStateIcon from \"./svg/picker-empty.svg\";\nimport settingImage from \"./svg/settings-inactive.svg\";\nimport StoreSelector from \"../../../containers/StoreSelector\";\nimport { getStandradDateTime, utcToLocalTime } from \"../../../lib/datetime\";\n\nimport \"./style.css\";\nimport { get } from \"../../../lib/storage\";\n\nconst EmptyState = () => {\n return (\n \n {totalPickers}\n
\n {getMessage(\"pickers.today.total.pickers\")}\n
\n
\n
\n \n {getMessage(\"pickers.today.total.pickers\")}\n
\n
\n
\n \n {activePickers}\n
\n {getMessage(\"pickers.today.active.pickers\")}\n
\n \n {getMessage(\"pickers.today.active.pickers\")}\n
\n {idlePickers}\n
\n {getMessage(\"pickers.today.idle.pickers\")}\n
\n \n {getMessage(\"pickers.today.idle.pickers\")}\n
\n 
\n {getMessage(\"pickers.empty\")}\n
\n \n {getMessage(\"pickers.today.title\")}\n \n \n \n
\n {!(pickerLoading || employeeLoading) ? (\n employees.length ? (\n Loading ? (\n\n
\n );\n }\n}\n","import React, { Component } from \"react\";\n\nimport Upload from \"../../../../components/FileUpload\";\nimport API from \"../../../../lib/api\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport csvIcon from \"../../../operations/Customers/CustomerImport/csv-icon.svg\";\nimport uploadIcon from \"../../../operations/Customers/CustomerImport/import-customers.svg\";\nimport infoIcon from \"../../../operations/Customers/CustomerImport/info-icon.svg\";\nimport \"./style.css\";\n\nfunction downloadCsv(data) {\n let csv = \"\";\n csv += data.join(\",\");\n csv += \"\\n\";\n var hiddenElement = document.createElement(\"a\");\n hiddenElement.href = \"data:text/csv;charset=utf-8,\" + encodeURI(csv);\n hiddenElement.target = \"_blank\";\n hiddenElement.download = \"seller.csv\";\n hiddenElement.click();\n}\n\nexport default class SellerUpload extends Component {\n constructor(props) {\n super(props);\n this.getSampleCsv = this.getSampleCsv.bind(this);\n }\n\n getSampleCsv(e) {\n e && e.preventDefault();\n const api = new API({ url: \"/account-service/seller-upload\" });\n api\n .get()\n .then(\n (response) => {\n downloadCsv(response.data.fileUpload || []);\n },\n (error) => {\n this.setState({ uploadError: error.message });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n render() {\n return (\n \n
\n );\n }\n}\n","import React from \"react\";\nimport {\n BaseForm,\n Radio,\n Input,\n VALIDATION_TYPES,\n} from \"../../../../components/Form\";\n\nimport { getMessage } from \"../../../../lib/translator\";\n\nexport default class SellerFiltersForm extends BaseForm {\n render() {\n const { SubmitButton, ClearButton } = this.buttons;\n const { Form } = this.components;\n return (\n \n );\n }\n}\n","import React, { Component, useEffect, useState } from \"react\";\nimport { DropDownItem, ICONS, DropDown } from \"../../../components/DropDown\";\nimport { getMessage } from \"../../../lib/translator\";\nimport { Link } from \"react-router-dom\";\nimport emptyIcon from \"./seller-empty.svg\";\nimport Image from \"../../../components/Image\";\n\nimport ListingPageWithRoutes from \"../../../containers/ListingPage/listingRouter\";\n\nimport SellerForm from \"./Form\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport \"./style.css\";\nimport { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport userImage from \"../userImage.svg\";\nimport { Popup } from \"../../../components/Popup\";\nimport SellerUpload from \"./SellersUpload\";\nimport SellerFiltersForm from \"./Filters\";\n\nconst getStatus = (status) => {\n return status === \"ACTIVE\" ? \"INACTIVE\" : \"ACTIVE\";\n};\n\nclass SellerActions extends Component {\n render() {\n const { id, status, onAction } = this.props;\n const action = getStatus(status);\n return (\n \n
\n \n \n
\n \n \n NOTE\n
\n \n
\n Note:
\n \n * The phone numbers must be prepended with (+) followed by\n country code.\n
\n \n {\" \"}\n Eg: Phone number with country code 91 must be +911234567890\n
\n \n \n
\n \n \n \n {getMessage(\"seller.status.edit\")}\n \n \n {\n onAction(TABLE_ACTIONS.DELETE, { id });\n }}\n >\n {getMessage(\"seller.status.delete\")}\n \n {\n onAction(TABLE_ACTIONS.UPDATE, { id }, { status: action });\n }}\n >\n {status === \"ACTIVE\"\n ? getMessage(\"seller.status.inactive\")\n : getMessage(\"seller.status.active\")}\n \n \n
\n );\n }\n}\n\nconst tableProperties = (isMobileView) => {\n return {\n headers: [\n getMessage(\"sellers.seller.table.action.name\"),\n getMessage(\"sellers.seller.table.action.contact\"),\n getMessage(\"sellers.seller.table.action.address\"),\n getMessage(\"sellers.seller.table.action.status\"),\n getMessage(\"sellers.seller.table.action.actions\"),\n ],\n row: ({ id, name, onAction, metaData, status, email, phone, logo }) => (\n \n
\n {name}
\n \n \n \n \n +{\" \"}\n \n {getMessage(\"seller.seller.form.add.text\")}\n \n \n }\n >\n \n \n {getMessage(\"sellers.seller.form.add.heading\")}\n \n \n \n {getMessage(\"sellers.seller.form.add.bulk.text\")}\n \n \n
\n );\n}\n\nconst emptyState = {\n icon: emptyIcon,\n message: getMessage(\"sellers.seller.helpItems.message\"),\n additionalViews: [AddSeller],\n};\n\nexport default function Sellers(props) {\n const [isMobileView, setIsMobileView] = useState(false);\n useEffect(() => {\n function handleResize() {\n setIsMobileView(window.screen.width <= 480);\n }\n handleResize();\n window.addEventListener(\"resize\", handleResize);\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n };\n }, []);\n return (\n \n \n
\n );\n }\n}\n","import React from \"react\";\nimport {\n BaseForm,\n Radio,\n Searchable,\n VALIDATION_TYPES,\n Input,\n} from \"../../../../components/Form\";\n\nimport { getMessage } from \"../../../../lib/translator\";\n\n// import \"./style.css\";\n\nexport default class UserFiltersForm extends BaseForm {\n render() {\n const { SubmitButton, ClearButton } = this.buttons;\n const { Form } = this.components;\n\n return (\n \n );\n }\n}\n","import React, { Component } from \"react\";\nimport { Dialog, Popup } from \"../../../components/Popup\";\nimport ListingPage, { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\nimport UserForm from \"./Form\";\nimport { getMessage } from \"../../../lib/translator\";\nimport \"./style.css\";\nimport ResetPasswordForm from \"../../hr/UserShifts/Form/ResetPassword\";\nimport Image from \"../../../components/Image\";\n\nimport emptyIcon from \"./user-empty.svg\";\nimport userImage from \"../userImage.svg\";\nimport UserFiltersForm from \"./Filter\";\n\nconst emptyState = {\n icon: emptyIcon,\n message: getMessage(\"sellers.user.add.nouser.text\"),\n actions: ({ onAction }) => (\n \n onAction(TABLE_ACTIONS.EDIT, { id })}\n >\n {name}\n
\n \n \n
\n \n \n {getMessage(\"vehicles.form.submitText\")}\n \n {getMessage(\"brand.form.cancelText\")} \n
\n \n \n );\n }\n}\n","import React from \"react\";\nimport {\n BaseForm,\n Input,\n Radio,\n Searchable,\n VALIDATION_TYPES,\n} from \"../../../../components/Form\";\nimport { getMessage } from \"../../../../lib/translator\";\n\n/**\n * *`VehiclesFiltersForm`*\n * : adds filtering to **`Vehicles`** component\n */\nexport default class VehiclesFiltersForm extends BaseForm {\n render() {\n const { SubmitButton, ClearButton } = this.buttons;\n const { Form } = this.components;\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport ListingPage, { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport { getDefaultStore } from \"../../../containers/StoreSelector\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\nimport VehicleForm from \"./Form\";\nimport VehiclesFilters from \"./Filters\";\nimport { getMessage } from \"../../../lib/translator\";\nimport { Link } from \"react-router-dom\";\nimport { hasPermissions } from \"../../../lib/auth\";\nimport Toggle from \"../../../components/Form/Inputs/Toggle\";\n\nimport \"./style.css\";\nimport emptyIcon from \"./vehicles-empty.svg\";\nimport twoWheelerIcon from \"./Form/2-wheeler.svg\";\nimport fourWheelerIcon from \"./Form/4-wheeler.svg\";\nimport dorneIcon from \"./Form/drone.svg\";\n\n/**\n * defines the state for the scenario where no vehicles are added.\n */\nconst emptyState = (props) => {\n return {\n icon: emptyIcon,\n message: getMessage(\"vehicles.emptyState.helperText\"),\n actions: ({ apiParams, onAction }) => (\n \n \n \n \n {hasPermissions(\"logistics\", \"vehicle\", \"post\") && (\n {\n onAction(TABLE_ACTIONS.ADD);\n }}\n >\n + {getMessage(\"vehicles.header.addText\")}\n \n )}\n
\n ),\n };\n};\n\n/**\n * defines the properties with which the header and the rows\n * of the table will be rendered.\n */\nconst tableProperties = () => {\n return {\n headers: [\n getMessage(\"vehicles.header.number\"),\n getMessage(\"vehicles.header.type\"),\n getMessage(\"vehicles.header.vendor\"),\n getMessage(\"vehicles.header.status\"),\n getMessage(\"vehicles.header.onAction\"),\n ],\n row: ({\n id,\n number,\n type,\n status,\n vendor,\n onAction,\n vehicleVendor,\n storeId,\n }) => (\n {number}
\n )}\n \n \n {(value) => {\n const editDate = this.props.value && this.props.value.date;\n let countOfCheckedIn =\n value &&\n value.checkedIn &&\n value.checkedIn.filter(\n (details) => details.date === editDate && !details.outTime\n ).length;\n let readOnly = countOfCheckedIn > 0;\n return (\n \n );\n }}\n \n
\n );\n }\n}\n","import React from \"react\";\nimport { BaseForm, Select } from \"../../../../components/Form\";\nimport { getMessage } from \"../../../../lib/translator\";\n\nexport default class VehicleReplaceForm extends BaseForm {\n render() {\n let { vehicles, availableVehicles } = this.props;\n let { Form } = this.components;\n let { SubmitButton } = this.buttons;\n return (\n \n \n
\n );\n }\n}\n","import React from \"react\";\nimport { BaseForm, Select } from \"../../../../components/Form\";\nimport API from \"../../../../lib/api\";\nimport { Consumer } from \"../Context\";\nimport { Dialog, Popup } from \"../../../../components/Popup\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../../components/DropDown\";\nimport { TABLE_ACTIONS } from \"../../../../containers/ListingPage\";\nimport VehicleReplaceForm from \"../VehicleReplaceForm\";\nimport moment from \"moment\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport vehicleIcon from \"../Form/4-wheeler.svg\";\nimport \"./style.css\";\nimport {\n getStandradDateTime,\n localTimeToUtc,\n utcToLocalTime,\n} from \"../../../../lib/datetime\";\n\nclass VehicleListContainer extends BaseForm {\n constructor(props) {\n super(props);\n this.state = {\n addVehicle: false,\n };\n this.getVehicleNumber = this.getVehicleNumber.bind(this);\n this.updateOnCheckIn = this.updateOnCheckIn.bind(this);\n this.replaceVehicle = this.replaceVehicle.bind(this);\n }\n getVehicleNumber(num) {\n this.setState({ vehicleNumber: num });\n }\n updateOnCheckIn() {\n let checkInApi = new API({ url: \"/logistics-service/vehicle-attendance\" });\n let params = {\n vehicleId: this.state.vehicleNumber,\n shiftStart: getStandradDateTime(\n localTimeToUtc,\n `${new Date().toISOString().split(\"T\")[0]} ${this.props.shiftStart}`\n ).split(\" \")[1],\n shiftEnd: getStandradDateTime(\n localTimeToUtc,\n `${new Date().toISOString().split(\"T\")[0]} ${this.props.shiftEnd}`\n ).split(\" \")[1],\n regularityType: this.props.type === \"Adhoc\" ? \"ADHOC\" : \"REGULAR\",\n };\n if (this.props.storeId) {\n params.storeId = this.props.storeId;\n }\n checkInApi\n .post(params)\n .then((response) => {\n this.props.updateOnCheckIn(\n this.state.vehicleNumber,\n response.data.vehicleattendance\n );\n this.setState({ addVehicle: false, vehicleNumber: null });\n })\n .catch((error) => {\n console.error(error);\n this.setState({\n formError: error.message,\n showDialog: true,\n });\n });\n }\n updateOnCheckOut(index) {\n let checkOutApi = new API({\n url: `/logistics-service/vehicle-attendance/${this.props.vehicles[index].id}`,\n });\n let params = this.props.vehicles && {\n id: this.props.vehicles[index].id,\n vehicleId: this.props.vehicles[index].vehicleId,\n };\n checkOutApi\n .put(params)\n .then((response) => {\n this.props.updateOnCheckOut(response.data.vehicleattendance);\n })\n .catch((error) => {\n console.error(error);\n this.setState({\n formError: error.message,\n showDialog: true,\n });\n });\n }\n replaceVehicle(formData) {\n const pathId = this.props.vehicles.filter(\n (vehicle) => vehicle.vehicleId === parseInt(formData.vehicleId, 10)\n )[0].id;\n let checkOutApi = new API({\n url: `/logistics-service/vehicle-attendance/${pathId}`,\n });\n let params = formData && {\n id: pathId,\n vehicleId: formData.vehicleId,\n replacedBy: formData.replacedBy,\n };\n if (this.props.storeId) {\n params.storeId = this.props.storeId;\n }\n checkOutApi\n .put(params)\n .then((response) => {\n this.setState({ showReplaceForm: false });\n this.props.updateOnReplace(response.data.vehicleattendance);\n })\n .catch((error) => {\n console.error(error);\n this.setState({ formError: error.message, showDialog: true });\n });\n }\n render() {\n let { vehicles, type, availableVehicles, count, date } = this.props;\n let { Form } = this.components;\n return (\n \n
\n \n
\n {count}
\n \n {getMessage(\"vehiclePlanner.vehicleShift.vehilceCount\", {\n type,\n })}\n
\n \n {vehicles.length ? (\n this.setState({ addVehicle: true })}\n >\n {getMessage(\"vehiclePlanner.checkin.button\")}\n \n )}\n {count !== 0 &&\n vehicles.length === count &&\n date === moment().format(\"YYYY-MM-DD\") && (\n
\n )}\n {this.state.addVehicle && (\n \n )}\n \n {vehicles.map((vehicle, index) => (\n
\n ) : (\n \n this.updateOnCheckOut(index)}\n >\n {getMessage(\"vehiclePlanner.checkout.button\")}\n \n
\n ))}\n {vehicle.number}
\n \n
\n )}\n {!this.state.addVehicle && (\n \n {getMessage(\"vehiclePlanner.vehicleList.novehicle\", {\n type,\n })}\n
\n \n this.setState({ showReplaceForm: true })}\n >\n {getMessage(\"vehiclePlanner.vehicleList.replace\")}\n
\n \n
\n );\n }}\n \n
\n \n {\n onAction(TABLE_ACTIONS.EDIT, { id });\n }}\n >\n {getMessage(\"vehiclePlanner.action.edit\")}\n \n {\n onAction(TABLE_ACTIONS.DELETE, { id });\n }}\n >\n {getMessage(\"vehiclePlanner.action.delete\")}\n \n \n
\n {`Shift ${index + 1}`}
\n \n
\n \n {getMessage(\"vehiclePlanner.vehicleShift.startTime\", {\n time: moment(shiftStart, [\"hh:mm\"]).format(\"hh:mm A\"),\n })}\n
\n \n {getMessage(\"vehiclePlanner.vehicleShift.endTime\", {\n time: moment(shiftEnd, [\"hh:mm\"]).format(\"hh:mm A\"),\n })}\n
\n \n
\n \n {isExtensionEnabled(\"MultiStoreSupport\") && (\n {\n onAction(TABLE_ACTIONS.SET_API_PARAMS, { storeId });\n }}\n />\n )}\n {\n onAction(TABLE_ACTIONS.ADD);\n }}\n >\n + {getMessage(\"vehiclePlanner.addShift.button\")}\n \n
\n ),\n };\n};\n\n/**\n * defines the properties with which the header and the rows\n * of the table will be rendered.\n */\nconst tableProperties = {\n row: (props) => \n {\n onAction(TABLE_ACTIONS.ADD);\n }}\n >\n +{\" \"}\n \n {getMessage(\"vehiclePlanner.addShift.button\")}\n \n \n
\n )}\n storeDependent\n addNewItemToLast\n tableProperties={tableProperties}\n form={{\n component: AddShiftForm,\n transformSubmit: (formData) => {\n const final = getStandradDateTime(\n localTimeToUtc,\n `${formData.date} ${formData.shiftStart}`\n ).split(\" \");\n let params = {\n date: final[0],\n shiftStart: final[1],\n shiftEnd: getStandradDateTime(\n localTimeToUtc,\n `${formData.date} ${formData.shiftEnd}`\n ).split(\" \")[1],\n regularCount: Number(formData.regularCount),\n };\n if (formData.adhocCount && formData.adhocCount !== \"\") {\n params.adhocCount = Number(formData.adhocCount);\n }\n return params;\n },\n overwriteWithApiParams: false,\n filterBeforeAdding: (response, _this) => {\n if (\n _this.state.data.filters.date === response.date ||\n _this.state.apiParams.date === response.date\n ) {\n return response;\n } else {\n return null;\n }\n },\n }}\n filters={{\n component: VehilcePlannerFilterForm,\n transformSubmit: (formData) => {\n if (!formData.date) {\n formData.date = moment().format(\"YYYY-MM-DD\");\n }\n return formData;\n },\n forceShow: true,\n }}\n />\n \n \n
\n );\n }\n}\n","import React from \"react\";\nimport {\n BaseForm,\n Input,\n Radio,\n VALIDATION_TYPES,\n} from \"../../../../components/Form\";\nimport { getMessage } from \"../../../../lib/translator\";\n\n/**\n * *`VehicleVendorFiltersForm`*\n * : adds filtering to **`Vehicles`** component\n */\nexport default class VehicleVendorsFiltersForm extends BaseForm {\n render() {\n const { SubmitButton } = this.buttons;\n const { Form } = this.components;\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport ListingPage, { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\nimport { getMessage } from \"../../../lib/translator\";\nimport VehicleForm from \"./Form\";\nimport VehicleVendorsFilter from \"./Filter\";\nimport { Link } from \"react-router-dom\";\nimport Toggle from \"../../../components/Form/Inputs/Toggle\";\n\nimport \"./style.css\";\nimport emptyIcon from \"../Vehicles/vehicles-empty.svg\";\n\n/**\n * defines the state for the scenario where no vehicle vendor is added.\n */\nconst emptyState = (props) => {\n return {\n icon: emptyIcon,\n message: getMessage(\"vehicles.emptyState.helperText\"),\n actions: ({ apiParams, onAction }) => (\n \n \n \n \n {\n onAction(TABLE_ACTIONS.ADD);\n }}\n >\n + {getMessage(\"vehicles.vendor.addButton\")}\n \n
\n ),\n };\n};\n\n/**\n * defines the properties with which the header and the rows\n * of the table will be rendered.\n */\nconst tableProperties = {\n headers: [\n getMessage(\"vehicles.vendor.heading.name\"),\n getMessage(\"vehicles.vendor.heading.status\"),\n getMessage(\"vehicles.vendor.heading.action\"),\n ],\n row: ({ id, name, status, onAction }) => (\n {name}
\n {status}
\n {getMessage(\"order.register.payments\")}
\n {loading ? (\n\n \n
\n )}\n \n \n \n {this.state.paymentsForm && (\n \n {(value) => (\n \n )}\n \n \n {getMessage(`trips.action.close`)}\n \n )}\n {hasEditPermissions && status === \"CLOSE\" && (\n \n {getMessage(`trips.action.fin_close`)}\n \n )}\n \n \n {getMessage(\"trips.action.viewDetails\")}\n \n \n \n
\n );\n }\n}\n\nconst tableProperties = () => {\n return {\n headers: [\n getMessage(\"trips.header.id\"),\n getMessage(\"trips.header.deliveryAgent\"),\n getMessage(\"trips.header.type\"),\n getMessage(\"trips.header.startTime\"),\n getMessage(\"trips.header.endTime\"),\n getMessage(\"trips.header.status\"),\n getMessage(\"trips.header.actions\"),\n ],\n row: (props) => {\n const {\n id,\n apiParams,\n deliveryAgent = {},\n startTime,\n endTime,\n status,\n vehicle,\n onAction,\n hubId,\n } = props;\n return (\n \n {`${id}`}\n
\n \n {deliveryAgent?.name}\n
\n \n
\n \n {vehicle?.number}\n
\n \n
\n {`${getMessage(\n \"trips.header.startTime\"\n )}: `}
\n \n {startTime\n ? `${getPrintableTime(startTime).split(\", \")[0]} `\n : null}\n \n {startTime\n ? getPrintableTime(startTime).split(\", \")[1]\n : null}\n \n
\n \n
\n {`${getMessage(\n \"trips.header.endTime\"\n )}: `}
\n \n {endTime\n ? `${getPrintableTime(endTime).split(\", \")[0]} `\n : null}\n \n {endTime ? getPrintableTime(endTime).split(\", \")[1] : null}\n \n
\n \n \n \n {this.state.paymentsForm && (\n \n {(value) => (\n \n )}\n \n this.setState({ showOdometerImage: false })}\n >\n \n {getMessage(`trips.action.close`)}\n \n )}\n {hasPermissions(\"logistics\", \"trip\", \"put\") && status === \"CLOSE\" && (\n \n {getMessage(`trips.action.fin_close`)}\n \n )}\n {showOdometerImage &&\n (vehicleStartOdometerImage || vehicleEndOdometerImage) && (\n \n {getMessage(`trips.action.vehicleOdometer`)}\n \n )}\n \n
\n );\n }\n}\n\nfunction storeLocation(stores, storeId) {\n let storesArr = JSON.parse(stores);\n var found = storesArr.find((store) => {\n return store.id === storeId;\n });\n return found;\n}\n\nfunction calcTotalCollectableAmount(orders = []) {\n let amountArr =\n orders && orders.map((order) => parseFloat(order.invoiceAmount));\n if (!amountArr) {\n return 0;\n }\n return amountArr.reduce((total, val) => total + val, 0).toFixed(2);\n}\n\nclass DeliveryguyDetails extends Component {\n render() {\n let data = this.props.data;\n let agentMobileNumber =\n data.deliveryAgent.phones &&\n data.deliveryAgent.phones.length &&\n data.deliveryAgent.phones[0].phone\n ? Object.keys(parse(data.deliveryAgent.phones[0].phone)).length > 0\n ? format(parse(data.deliveryAgent.phones[0].phone), \"International\")\n : data.deliveryAgent.phones[0].phone\n : null;\n return (\n \n
\n \n
\n {getMessage(\"trips.startOdometer\")}
\n{startKm && `${startKm} ${getMessage(\"trip.details.km\")}`}
\n\n
\n {getMessage(\"trip.endOdometer\")}
\n{endKm && `${endKm} ${getMessage(\"trip.details.km\")}`}
\n\n
\n \n \n
\n );\n }\n}\n\nclass CustomerSignature extends Component {\n constructor(props) {\n super(props);\n this.state = {\n showSignature: false,\n };\n }\n render() {\n const { showSignature } = this.state;\n const { signature } = this.props;\n return (\n \n
\n \n 
\n
\n \n {data.endTime && (\n \n {\" \"}\n 
\n CLOSED\n
\n )}\n \n
\n \n \n 
\n {data.vehicle.number}\n \n
\n \n \n 
\n {getSession().organization.currency.symbol}\n {calcTotalCollectableAmount(data.orders)}{\" \"}\n \n
\n \n \n \n )}\n {data.endTime && (\n
\n \n {data.startTime && 
}\n
\n \n {data.startKm ? (\n Trip Started at {data.startKm} Km\n ) : (\n Trip Started\n )}\n {data.startTime && (\n \n {data.startTime\n ? getPrintableTime(data.startTime).split(\", \")[1]\n : null}\n ,{\" \"}\n {data.startTime\n ? getPrintableTime(data.startTime).split(\", \")[0]\n : null}\n \n )}\n
\n {data.vehicleStartTime && (\n \n \n
\n \n Vehicle Started\n {data.vehicleStartTime && (\n \n {data.vehicleStartTime\n ? getPrintableTime(data.vehicleStartTime).split(\", \")[1]\n : null}\n ,{\" \"}\n {data.vehicleStartTime\n ? getPrintableTime(data.vehicleStartTime).split(\", \")[0]\n : null}\n \n )}\n
\n \n \n
\n )}\n {data.endTime && (\n \n {data.endKm ? (\n Trip Ended at {data.endKm} Km\n ) : (\n Trip Ended\n )}\n \n {data.endTime\n ? getPrintableTime(data.endTime).split(\", \")[1]\n : null}\n ,{\" \"}\n {data.endTime\n ? getPrintableTime(data.endTime).split(\", \")[0]\n : null}\n \n
\n )}\n \n
\n \n 
\n
\n {storeLocation(get(\"stores\"), data.storeId) && (\n \n \n {storeLocation(get(\"stores\"), data.storeId).address &&\n storeLocation(get(\"stores\"), data.storeId).address.split(\n \",\"\n )[0]}\n {storeLocation(get(\"stores\"), data.storeId).address.split(\n \",\"\n )[1] && ,}\n \n \n {storeLocation(get(\"stores\"), data.storeId).address &&\n storeLocation(get(\"stores\"), data.storeId).address.split(\n \",\"\n )[1]}\n \n
\n )}\n \n {getMessage(\"trips.details.orderList.serialNumber\")}\n
\n ) : (\n \"\"\n )}\n {id}
\n \n {getMessage(\"trips.details.orderList.referenceNumber\")}\n
\n ) : (\n \"\"\n )}\n \n {clientId ? \"#\" : \"Z\"}\n \n {clientId ? `${clientId}` : `${referenceNumber}`}\n \n
\n \n \n {getCurrency().symbol}{\" \"}\n {invoiceAmount && Number(invoiceAmount).toFixed(2)}\n \n \n \n {getMessage(\"trips.header.status\")}\n
\n ) : (\n \"\"\n )}\n \n {[\"OPEN\", \"CLOSE\", \"FIN_CLOSE\"].indexOf(status) > -1\n ? getMessage(`trips.status.${status.toLowerCase()}`)\n : (status || \"\").toLowerCase()}\n
\n \n {completedAt ? (\n moment(completedAt).format(\"hh:mm A\")\n ) : eta ? (\n \"ETA: \" + moment(eta).format(\"hh:mm A\")\n ) : (\n \n )}{\" \"}\n {eta && completedAt ? null : eta && timediff(eta, moment().utc())}\n
\n \n {getMessage(\"trips.details.orderList.orderTime\")}\n
\n ) : (\n \"\"\n )}\n \n {createdAt ? getPrintableTime(createdAt).split(\", \")[1] : null}\n
\n \n {createdAt ? getPrintableTime(createdAt).split(\", \")[0] : null}\n \n \n {getMessage(\"trips.details.orderList.preferredSlot\")}\n
\n ) : (\n \"\"\n )}\n \n {slotStartTime && slotEndTime && slotType !== \"ASAP\"\n ? formatTime(slotStartTime) + \" - \" + formatTime(slotEndTime)\n : getAsapDuration(slotStartTime, slotEndTime)}\n
\n \n {preferredDate\n ? getPrintableTime(preferredDate).split(\", \")[0]\n : null}\n \n \n {getMessage(\"trips.details.orderList.view.on.map\")}\n
\n ) : (\n \"\"\n )}\n \n {address && (\n
\n \n {customerSignatureImage ? (\n
\n \n
\n {details && details.orders && (\n \n
\n )}\n \n {\" \"}\n {`${ordersCount} ${orderHeading} ${getMessage(\n \"trip.details.orderList.withthistrip\"\n )}`}\n
\n\n \n {details.orders.length && orderListTableProperties().headers ? (\n
\n
\n \n \n {(value) => {\n return [\"OPEN\", \"CLOSE\"].indexOf(this.state.data.status) >\n -1 ||\n (value.showOdometerImage &&\n (this.state.data.vehicleEndOdometerImage ||\n this.state.data.vehicleStartOdometerImage)) ? (\n \n }{\" \"}\n \n
\n {`${getMessage(\"trips.details.heading\", {\n id: props.match.params.id,\n })}`}
\n \n {\n\n
\n {`${getMessage(\"trips.details.heading\", {\n id: props.match.params.id,\n })}`}
\n\n \n \n \n {clientId ? \"#\" : \"Z\"}\n \n {clientId ? `${clientId}` : `${id}`}\n \n
\n \n {Object.keys(metaData).map((orderMetaKey) => (\n
\n \n
\n ))}\n \n {toTitleCase(\n orderMetaKey.split(/(?=[A-Z])/).join(\" \")\n )}\n
\n \n {ISO_RE.test(modifiedMetadata[orderMetaKey])\n ? getPrintableTime(\n getStandradDateTime(\n utcToLocalTime,\n modifiedMetadata[orderMetaKey]\n )\n )\n : isBoolean(modifiedMetadata[orderMetaKey])\n ? modifiedMetadata[orderMetaKey]\n ? \"Yes\"\n : \"No\"\n : modifiedMetadata[orderMetaKey]}\n
\n {status}
\n {`${\n this.props.data.slot &&\n getPrintableTime(\n getStandradDateTime(\n utcToLocalTime,\n `${\n new Date().toISOString().split(\"T\")[0]\n } ${this.props.data.slot.split(\"-\")[0].trim()}`\n )\n ).split(\",\")[1]\n } \n -\n ${\n getPrintableTime(\n getStandradDateTime(\n utcToLocalTime,\n `${\n new Date().toISOString().split(\"T\")[0]\n } ${this.props.data.slot.split(\"-\")[1].trim()}`\n )\n ).split(\",\")[1]\n }`}
\n \n {address &&\n address.pincode &&\n address.pincode !== \"0\" &&\n address.pincode.toString().padStart(6, \"0\")}\n
\n {/* {\n packing\n ? \n
: null\n } */}\n \n \n {provided.placeholder}\n \n )}\n \n {\n Object.keys(packing[0].details).map((type, index) => (\n
\n \n
\n ))\n }\n {getMessage(`order.packing.${type}`)} :
\n {packing[0].details[type].join(', ')}
\n \n {\n this.props.onStart &&\n this.props.onStart(\n readyOrders,\n droppableId,\n recommendedVehicle,\n zone\n );\n }}\n disabled={!this.areOrdersReady(orders)}\n >\n {isActiveHubTrip ? \"Start Hub Trip\" : \"Start\"}\n \n {startTime &&\n endTime &&\n startTime !== \"0001-01-01T00:00:00Z\" &&\n endTime !== \"0001-01-01T00:00:00Z\" && (\n
\n \n
\n )}\n \n order.ignoreForTrip === true)}\n totalOrders={orders.length}\n showDeliveryLocation={this.props.showDeliveryLocation}\n />\n
\n \n )}\n \n
\n \n
\n {heading}
\n \n {count} {unit}\n
\n \n
\n \n {\n this.contentRef = node;\n }}\n >\n {currentVehicles &&\n currentVehicles.length !== 0 &&\n currentVehicles.map((elm, index) => (\n \n
\n ))}\n {currentRunners &&\n currentRunners.length !== 0 &&\n currentRunners.map((elm, index) => (\n \n
\n \n \n {`${elm.number} (`}\n {` ${elm.tripId} `}\n )\n
\n {elm.vehicleStart &&\n elm.vehicleStart.split(\" \").length > 1 && (\n \n {\n getPrintableTime(\n getStandradDateTime(\n utcToLocalTime,\n elm.vehicleStart\n )\n ).split(\",\")[1]\n }\n
\n )}\n \n
\n \n \n ))}\n {data &&\n data.length &&\n data.map((elm, index) => (\n \n {`${elm.name} (`}\n {` ${elm.tripId} `}\n )\n
\n {elm.startTime && elm.startTime.split(\" \").length > 1 && (\n \n {\n getPrintableTime(\n getStandradDateTime(utcToLocalTime, elm.startTime)\n ).split(\",\")[1]\n }\n
\n )}\n \n
\n \n \n ))}\n \n \n \n );\n }\n}\n\nexport default ExpandingStats;\n","import React, { Component } from \"react\";\nimport API from \"../../../../lib/api\";\n// import { Select } from '../../../../components/Form/Inputs'\nimport ExpandingStats from \"../ExpandingStats\";\n// import {getMessage} from '../../../../lib/translator'\n\n/*\n TODO: Remove comments after full feature is implemented\n*/\n\nimport \"./style.css\";\n\nclass TripStatistics extends Component {\n constructor() {\n super();\n this.state = {\n zone: \"all\",\n trips: null,\n };\n this.getOrderStats = this.getOrderStats.bind(this);\n this.getOpenTrips = this.getOpenTrips.bind(this);\n }\n\n getOrderStats() {\n let totalOrders;\n if (this.state.zone === \"all\") {\n totalOrders = this.props.data.reduce((accumulator, currentZone) => {\n return accumulator.concat(currentZone.orders);\n }, []);\n } else {\n totalOrders = this.props.data.filter(\n ({ name }) => name === this.state.zone\n )[0].orders;\n }\n return totalOrders;\n }\n\n getOpenTrips() {\n this.tripApi = new API({\n url: \"/logistics-service/trip\",\n });\n let params = {};\n if (this.props.storeId) {\n params.storeId = this.props.storeId;\n }\n params.status = \"OPEN\";\n this.tripApi\n .get(params)\n .then((response) => {\n this.setState({\n trips: response.data.trip,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n componentDidMount() {\n this.getOpenTrips();\n }\n componentDidUpdate(prevProps) {\n if (this.props.storeId !== prevProps.storeId) {\n this.getOpenTrips();\n }\n }\n componentWillUnmount() {\n this.tripApi && this.tripApi.cancel();\n }\n render() {\n // let zones = this.props.data\n // let orders = this.getOrderStats()\n if (!this.state.trips) {\n return null;\n }\n return (\n \n {this.props.unit === \"RE\" ? elm.name : elm.number}\n
\n {elm.shiftIn && (\n \n {\n getPrintableTime(\n getStandradDateTime(\n utcToLocalTime,\n `${new Date().toISOString().split(\"T\")[0]} ${\n elm.shiftIn\n }`\n )\n ).split(\",\")[1]\n }\n \n Rem :{\" \"}\n {getRemainingTime(\n moment().utc().format(\"HH:mm:ss\"),\n elm.shiftOut\n )}\n \n
\n )}\n \n {/* \n {\n return Object.assign(\n {\n tripId: trip.id,\n startTime: trip.startTime,\n vehicleStart: trip.vehicleStartTime,\n },\n trip.vehicle\n );\n })\n : null\n }\n unit=\"Vehicle\"\n className=\"vehicles\"\n />\n {\n return Object.assign(\n { tripId: trip.id, startTime: trip.startTime },\n trip.deliveryAgent\n );\n })\n : null\n }\n unit=\"RE\"\n className=\"runner-executive\"\n />\n
\n );\n }\n}\n\nexport default TripStatistics;\n","import React, { Component } from \"react\";\nimport API from \"../../../../lib/api\";\nimport Loader from \"../../../../components/Loader\";\nimport { Link } from \"react-router-dom\";\nimport agentIcon from \"./agent-icon.svg\";\nimport moment from \"moment\";\n\nimport \"./style.css\";\n\nconst OrderItemDeliveryStatus = (props) => {\n return (\n \n
*/}\n \n
\n \n { this.setState({ zone }) }}\n options={[{text: 'All Zones', value: 'all'}, ...zones.map(({ name }) => ({\n text: name,\n value: name\n }))]}\n />\n
\n Orders
\n {getMessage('tripPlanner.orderCount', { count: orders.length })}
\n \n
\n \n
\n \n Slot\n Pend\n Store\n Disp\n Comp\n
\n \n \n
\n );\n};\nclass OpenTripListItem extends Component {\n constructor(props) {\n super(props);\n this.state = {\n expanded: false,\n data: null,\n };\n this.toggleExpand = this.toggleExpand.bind(this);\n this.getOrders = this.getOrders.bind(this);\n }\n toggleExpand(e) {\n e.target.classList.toggle(\"active\");\n this.setState({ expanded: !this.state.expanded });\n }\n getOrders() {\n let { orders } = this.props;\n if (!orders) {\n return null;\n }\n let delivered = orders.filter((order) => {\n return order.status === \"COMPLETED\";\n }).length;\n let total = orders.length;\n return {\n delivered,\n total,\n };\n }\n render() {\n let contentStyle = {\n maxHeight: this.state.expanded ? this.contentRef.offsetHeight + \"px\" : 0,\n };\n let etaResponse = Boolean(this.props.eta);\n let totalDiff =\n this.props.eta && moment.duration(moment(this.props.eta).diff(moment()));\n let eta = totalDiff && Math.ceil(totalDiff.asMinutes());\n let delayed = eta < 0;\n eta = eta > 0 ? eta : Math.abs(eta);\n let hours = Number(eta) > 60 ? Math.floor(Number(eta) / 60) : 0;\n let minutes = eta ? Math.ceil(Number(eta) % 60) : 0;\n return (\n \n {props.clientId ? \"#\" : \"Z\"}\n \n {props.clientId ? `${props.clientId}` : `${props.referenceNumber}`}\n \n
\n \n {props.status === \"COMPLETED\"\n ? \"Delivered\"\n : props.status.charAt(0).toUpperCase() +\n props.status.slice(1).toLowerCase()}\n
\n \n
\n \n \n );\n }\n}\nclass OpenTrips extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: null,\n trips: [],\n tripETAs: null,\n };\n this.getOpenTrips = this.getOpenTrips.bind(this);\n this.getTripsETA = this.getTripsETA.bind(this);\n }\n getOpenTrips() {\n this.tripApi = new API({\n url: \"/logistics-service/trip\",\n });\n let params = {};\n if (this.props.storeId) {\n params.storeId = this.props.storeId;\n }\n params.status = \"OPEN\";\n params.paginated = \"false\";\n this.tripApi\n .get(params)\n .then((response) => {\n this.setState(\n {\n data: response.data,\n },\n () => {\n if (!response.data?.trip?.length) {\n this.setState({ trips: [] });\n return;\n }\n this.getTripsETA();\n response.data.trip.forEach((el) => {\n const api = new API({ url: `/logistics-service/trip/${el.id}` });\n let params = {};\n if (this.props.storeId) {\n params.storeId = this.props.storeId;\n }\n params.id = el.id;\n api\n .get(params)\n .then((response) => {\n this.setState({\n trips: [...this.state.trips, response.data.trip],\n });\n })\n .catch((error) => {\n console.error(error);\n });\n });\n }\n );\n })\n .catch((error) => {\n console.error(error);\n });\n }\n getTripsETA() {\n if (!(this.state.data && this.state.data.count)) {\n return null;\n }\n let tripIds = this.state.data.trip.map((eachTrip) => {\n return eachTrip.id;\n });\n let paramStr = `storeId=${this.props.storeId}&`;\n if (tripIds.length) {\n tripIds.forEach((id, i) => {\n paramStr += `${i ? \"&\" : \"\"}tripId=${id}`;\n });\n }\n this.tripEtaApi = new API({\n url: `/logistics-service/trip-eta?${paramStr}`,\n });\n this.tripEtaApi\n .get()\n .then((response) => {\n this.setState({\n tripETAs: response.data,\n });\n })\n .catch((error) => {\n console.error(error);\n if (error.code === 401 || error.code === 403) {\n throw error;\n }\n });\n }\n componentDidMount() {\n this.getOpenTrips();\n }\n componentDidUpdate(prevProps) {\n if (this.props.storeId !== prevProps.storeId) {\n this.getOpenTrips();\n }\n }\n\n componentWillUnmount() {\n this.tripApi && this.tripApi.cancel();\n this.tripEtaApi && this.tripEtaApi.cancel();\n }\n\n render() {\n if (!this.state.data) {\n return \n \n {this.props.tripId}\n \n {this.getOrders() && (\n
\n {`${this.getOrders().delivered}/${\n this.getOrders().total\n } Delivered`}
\n )}\n \n
\n {etaResponse && !delayed && (\n \n Ends in\n {hours\n ? ` ${hours} Hour${hours > 1 ? \"s\" : \"\"} ${minutes} `\n : null}\n {!hours && ` ${eta} `}Minutes\n
\n )}\n {etaResponse && delayed && (\n \n Delayed by\n {hours\n ? ` ${hours} Hour${hours > 1 ? \"s\" : \"\"} ${minutes} `\n : null}\n {!hours && ` ${eta} `}Minutes\n
\n )}\n \n {\n this.contentRef = node;\n }}\n >\n {this.props.orders &&\n this.props.orders.map((order, i) => {\n return (\n
\n \n
\n )\n );\n }\n}\n\nexport default OpenTrips;\n","import React, { Component } from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport {\n getPrintableTime,\n utcToLocalTime,\n getStandradDateTime,\n} from \"../../../../../lib/datetime\";\n\nclass TripSequenceOrders extends Component {\n constructor(props) {\n super(props);\n this.state = {\n orders: this.props.orders,\n };\n this.onDragEnd = this.onDragEnd.bind(this);\n }\n onDragStart(data) {}\n onDragEnd(result) {\n // dropped outside the list\n if (!result.destination) {\n return;\n }\n let { orders } = this.reorder(\n this.state.orders,\n result.source,\n result.destination\n );\n this.props.updateTripSequence(orders);\n }\n reorder(orders, source, destination) {\n let itemToMove = orders.splice(source.index, 1)[0];\n orders.splice(destination.index, 0, itemToMove);\n return { orders };\n }\n render() {\n let { orders } = this.state;\n return (\n Open Trips
\n \n {this.state.data &&\n this.state.data.trip.map((el, i) => {\n let obj =\n this.state.tripETAs &&\n this.state.tripETAs.find((ETAObj) => {\n return ETAObj.tripId === el.id;\n });\n let eta = obj ? obj.ETA : null;\n let trip = this.state.trips.find((trip) => {\n return trip.id === el.id;\n });\n return (\n
\n \n
\n )}\n \n ))}\n {provided.placeholder}\n \n \n )}\n \n \n \n \n );\n }\n}\n\nexport default TripSequenceOrders;\n","import React from \"react\";\nimport { BaseForm } from \"../../../../components/Form\";\nimport { Select } from \"../../../../components/Form/Inputs\";\nimport TripSequenceOrders from \"./TripSequenceOrders\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport MapWithPath from \"../../../../components/MapWithPath\";\nimport API from \"../../../../lib/api\";\nimport { Dialog } from \"../../../../components/Popup\";\n\nimport \"./style.css\";\n\nclass TripSequence extends BaseForm {\n constructor(props) {\n super(props);\n this.state = {\n deliveryData: props.deliveryData,\n coordinates: this.getCoordinates(props.deliveryData),\n vehicleId: props.recommendedVehicle && props.recommendedVehicle.id,\n zopsmartMapUrls: this.props.zopsmartMapUrls,\n };\n this.getCoordinates = this.getCoordinates.bind(this);\n this.updateTripSequence = this.updateTripSequence.bind(this);\n this.getDistance = this.getDistance.bind(this);\n this.onSubmit = this.onSubmit.bind(this);\n this.getStoreLocation = this.getStoreLocation.bind(this);\n this.getMarkersCoordinates = this.getMarkersCoordinates.bind(this);\n this.getAddressString = this.getAddressString.bind(this);\n this.getTripDistance = this.getTripDistance.bind(this);\n }\n\n getTripDistance(addresses) {\n const api = new API({\n url:\n `${this.state.zopsmartMapUrls}/route/?points_encoded=false` +\n addresses +\n \"&locale=en-US&vehicle=car&weighting=fastest&elevation=false&layer=OpenStreetMap\",\n });\n api\n .get()\n .then((response) => {\n this.getDistance(response.paths[0].distance);\n })\n .catch((error) => {\n console.error(error);\n this.setState({\n showErrorDialog: true,\n formError: error.message,\n });\n });\n }\n\n getAddressString() {\n let coordinates = this.getMarkersCoordinates();\n let vehiclePath = this.state.coordinates;\n let deliveryLocations = !vehiclePath\n ? coordinates &&\n coordinates\n .map(\n (location) =>\n location.latitude &&\n location.longitude &&\n `&point=${location.latitude},${location.longitude}`\n )\n .filter(Boolean)\n : vehiclePath\n .map(\n (location) =>\n location.latitude &&\n location.longitude &&\n `&point=${location.latitude},${location.longitude}`\n )\n .filter(Boolean);\n return deliveryLocations;\n }\n\n getCoordinates(orders) {\n const { hubTrip } = this.props?.currentTripHub || {};\n let storeLocation = this.getStoreLocation();\n if (hubTrip === true) {\n const hubLocation = this.getHubLocation();\n return storeLocation.concat(hubLocation).concat(storeLocation);\n }\n let deliveryLocations = orders\n .map(\n ({ address }) =>\n address.location &&\n address.location.lat && {\n latitude: address.location.lat,\n longitude: address.location.long,\n }\n )\n .filter(Boolean);\n\n return storeLocation.concat(deliveryLocations).concat(storeLocation);\n }\n\n updateTripSequence(orders) {\n this.setState({\n deliveryData: orders,\n coordinates: this.getCoordinates(orders),\n });\n this.getTripDistance(this.getAddressString());\n }\n\n getDistance(distance) {\n distance = Number.parseFloat(distance / 1000).toFixed(2) + \" KM\";\n this.setState({ tripDistance: distance });\n }\n\n getMarkersCoordinates() {\n return (\n this.state.coordinates &&\n this.state.coordinates.slice(1, this.state.coordinates.length - 1)\n );\n }\n\n getStore() {\n let { storeId, storeData } = this.props;\n let store = storeData.filter(\n (store) => store.id === parseInt(storeId, 10)\n )[0];\n return store;\n }\n\n getStoreLocation() {\n let { storeId, storeData } = this.props;\n let storeLocation;\n if (!this.props.storeLocation) {\n let store = storeData.filter(\n (store) => store.id === parseInt(storeId, 10)\n );\n storeLocation = store.length\n ? [{ latitude: store[0].latitude, longitude: store[0].longitude }]\n : [];\n } else {\n storeLocation = [\n {\n latitude: this.props.storeLocation.lat,\n longitude: this.props.storeLocation.lng,\n },\n ];\n }\n return storeLocation;\n }\n getHubLocation() {\n const { hub } = this.props?.currentTripHub || {};\n if (hub) {\n return [{ latitude: hub.location.lat, longitude: hub.location.long }];\n }\n return [];\n }\n\n onSubmit() {\n const { hubTrip, hub } = this.props?.currentTripHub || {};\n let orderNumbers = this.state.deliveryData\n ? this.state.deliveryData.map((order) => order.id)\n : [];\n let params = {};\n params.orderNumbers = orderNumbers;\n params.storeId = this.props.storeId;\n params.vehicleId = this.state.vehicleId;\n params.deliveryAgentId = this.state.deliveryAgentId;\n if (hubTrip === true) {\n params.hubId = hub?.id;\n }\n\n this.startTrip(params);\n }\n startTrip(params) {\n let api = new API({ url: \"/logistics-service/trip\" });\n this.setState({ submitting: true });\n api\n .post(params)\n .then((response) => {\n // TODO: Response should be added to 'Open trips' state\n\n this.setState({\n submitting: false,\n successMessage: getMessage(\"tripPlanner.trip.started\"),\n });\n this.props.modifyState(\n params.orderNumbers,\n params.vehicleId,\n params.deliveryAgentId\n );\n })\n .catch((error) => {\n console.error(error);\n this.setState({\n submitting: false,\n error: error.message,\n });\n });\n }\n\n componentDidMount() {\n this.getTripDistance(this.getAddressString());\n }\n\n closeDialogs = () => {\n this.setState({\n showErrorDialog: false,\n });\n };\n\n render() {\n let { Form } = this.components;\n let { SubmitButton, CancelButton } = this.buttons;\n let storeLocation = this.getStoreLocation()[0];\n const store = this.getStore();\n let statuses = [\"PACKED\"];\n\n if (store?.hasPicking === false || store?.hasPicking === 0) {\n statuses = [\"AT-HUB\"];\n }\n\n const orderReadyToBeDispatched =\n this.state.deliveryData &&\n this.state.deliveryData.reduce(\n (ready, order) => ready && statuses.includes(order.status),\n true\n );\n\n return !(storeLocation.latitude && storeLocation.longitude) ? (\n Orders
\n\n \n \n {(provided, snapshot) => (\n \n \n {orders.map((order, index) => (\n \n {(provided, snapshot) => (\n
\n {provided.placeholder}\n \n {orders.map((order, index) => (\n {index + 1}\n ))}\n
\n \n \n \n
\n \n
\n \n {order.clientId\n ? `#${order.clientId}`\n : `Z${order.id}`}\n
\n {order.status}
\n \n {`${\n order.slot &&\n getPrintableTime(\n getStandradDateTime(\n utcToLocalTime,\n `${\n new Date().toISOString().split(\"T\")[0]\n } ${order.slot.split(\"-\")[0].trim()}`\n )\n ).split(\",\")[1]\n } - ${\n getPrintableTime(\n getStandradDateTime(\n utcToLocalTime,\n `${\n new Date().toISOString().split(\"T\")[0]\n } ${order.slot.split(\"-\")[1].trim()}`\n )\n ).split(\",\")[1]\n }`}\n
\n \n {getMessage(\"tripPlanner.trip.storeLocation.error\")}\n
\n ) : (\n \n
\n );\n }\n}\n\nexport default TripSequence;\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport AuthenticatedPage from \"../../../containers/AuthenticatedPage\";\nimport { DragDropContext } from \"react-beautiful-dnd\";\nimport TripContainer from \"./TripContainer\";\nimport Loader from \"../../../components/Loader\";\nimport API from \"../../../lib/api\";\nimport { isExtensionEnabled } from \"../../../lib/auth\";\nimport { getMessage } from \"../../../lib/translator\";\nimport StoreSelector, {\n getDefaultStore,\n makestoreDependentComponent,\n} from \"../../../containers/StoreSelector\";\nimport EmptyState from \"../../../components/EmptyState\";\nimport { Popup, Dialog } from \"../../../components/Popup\";\nimport Mapform from \"../../operations/Customers/Details/AddressCard/MapForm\";\nimport TripStatistics from \"./Statistics\";\nimport OpenTrips from \"./OpenTrips\";\nimport TripSequence from \"./TripSequence\";\nimport moment from \"moment\";\nimport { registerSocket } from \"../../../registerSocket\";\nimport { ZOPSMART_MAPS_URL } from \"../../../config/app\";\nimport emptyStateIcon from \"./no-trips.svg\";\nimport \"./style.css\";\n\nclass InterfaceContainer extends Component {\n constructor(props) {\n super(props);\n this.state = Object.assign(\n {\n data: null,\n submittingZoneIndexes: [],\n unassignedOrders: [],\n config: {\n interZoneDnD: true,\n sameZoneDnd: false,\n sameTripDnd: false,\n },\n },\n getDefaultStore(this.props.stores)\n );\n\n this.getPlannedTrips = this.getPlannedTrips.bind(this);\n this.onDragStart = this.onDragStart.bind(this);\n this.onDragEnd = this.onDragEnd.bind(this);\n this.changeStore = this.changeStore.bind(this);\n this.showTripMap = this.showTripMap.bind(this);\n this.getStoreLocation = this.getStoreLocation.bind(this);\n this.modifyState = this.modifyState.bind(this);\n this.updateOrder = this.updateOrder.bind(this);\n this.getDeliveryAreas = this.getDeliveryAreas.bind(this);\n this.showDeliveryLocation = this.showDeliveryLocation.bind(this);\n this.hideMap = this.hideMap.bind(this);\n this.showSuccessDialog = this.showSuccessDialog.bind(this);\n this.onSuccess = this.onSuccess.bind(this);\n this.handleSuccessClose = this.handleSuccessClose.bind(this);\n this.zopsmartMapUrls = ZOPSMART_MAPS_URL;\n }\n getPlannedTrips() {\n let socket = registerSocket();\n if (socket) {\n socket.onmessage = this.updateOrder;\n }\n this.logisticsAutomationApi = new API({\n url: \"/logistics-service/automation\",\n });\n let params = {};\n params.refreshPlannedTrips = window.localStorage.getItem(\n \"refreshPlannedTrips\"\n );\n if (this.state.storeId) {\n params.storeId = this.state.storeId;\n }\n params.date = moment().format(\"YYYY-MM-DD\");\n this.logisticsAutomationApi\n .get(params)\n .then((response) => {\n this.setState({\n data: response.data,\n });\n })\n .catch((error) => {\n // if user is unauthorized redirect to login screen\n if (error.code === 401) throw error;\n console.error(error);\n });\n }\n onDragStart(data) {}\n onDragEnd(result) {\n // dropped outside the list\n if (!result.destination) {\n return;\n }\n this.setState((prevState) => {\n let { zone, unassignedOrders } = this.reorder(\n prevState.data.zone,\n result.source,\n result.destination,\n prevState.unassignedOrders,\n prevState.config\n );\n let nextState = {\n data: Object.assign({}, prevState.data, {\n zone,\n }),\n unassignedOrders,\n };\n return nextState;\n });\n }\n reorder(zone, source, destination, unassignedOrders, config) {\n let sourceLocation = source.droppableId.match(/\\d+/g).map(Number);\n let destinationLocation = destination.droppableId.match(/\\d+/g).map(Number);\n let sourceZoneIndex = sourceLocation[0];\n let destinationZoneIndex = destinationLocation[0];\n let notReadyRegExp = new RegExp(\"^not-ready\");\n if (\n notReadyRegExp.test(source.droppableId) ||\n notReadyRegExp.test(destination.droppableId)\n ) {\n zone = this.toggleTripOrders(\n zone,\n source,\n destination,\n unassignedOrders,\n config\n );\n } else {\n let sourceTripIndex = sourceLocation[1];\n let destinationTripIndex = destinationLocation[1];\n if (config.interZoneDnD) {\n let itemToMove = zone[sourceZoneIndex].plannedTrips[\n sourceTripIndex\n ].orders.splice(source.index, 1)[0];\n zone[destinationZoneIndex].plannedTrips[\n destinationTripIndex\n ].orders.splice(destination.index, 0, itemToMove);\n } else if (config.sameZoneDnd) {\n if (sourceZoneIndex === destinationZoneIndex) {\n let itemToMove = zone[sourceZoneIndex].plannedTrips[\n sourceTripIndex\n ].orders.splice(source.index, 1)[0];\n zone[destinationZoneIndex].plannedTrips[\n destinationTripIndex\n ].orders.splice(destination.index, 0, itemToMove);\n }\n } else if (config.sameTripDnd) {\n if (\n sourceZoneIndex === destinationZoneIndex &&\n sourceTripIndex === destinationTripIndex\n ) {\n let itemToMove = zone[sourceZoneIndex].plannedTrips[\n sourceTripIndex\n ].orders.splice(source.index, 1)[0];\n zone[destinationZoneIndex].plannedTrips[\n destinationTripIndex\n ].orders.splice(destination.index, 0, itemToMove);\n }\n }\n }\n // zone = zone.filter(this.getOrderNumbersForZone)\n return { zone, unassignedOrders };\n }\n toggleTripOrders(zone, source, destination, unassignedOrders, config) {\n let sourceLocation = source.droppableId.match(/\\d+/g).map(Number);\n let destinationLocation = destination.droppableId.match(/\\d+/g).map(Number);\n let sourceZoneIndex = sourceLocation[0];\n let sourceTripIndex = sourceLocation[1];\n let destinationZoneIndex = destinationLocation[0];\n let tripRegExp = new RegExp(\"^trip\");\n let notReadyRegExp = new RegExp(\"^not-ready\");\n\n let readyOrders = [];\n let notReadyOrders = [];\n zone[sourceZoneIndex].plannedTrips[sourceTripIndex].orders.forEach(\n (element) => {\n if (element.ignoreForTrip !== true) {\n readyOrders.push(element);\n } else {\n notReadyOrders.push(element);\n }\n }\n );\n\n if (sourceZoneIndex === destinationZoneIndex) {\n if (\n tripRegExp.test(source.droppableId) &&\n notReadyRegExp.test(destination.droppableId)\n ) {\n // Moving from tripContainer to not-ready\n let itemToMove = readyOrders.splice(source.index, 1)[0];\n itemToMove.ignoreForTrip = true;\n notReadyOrders.splice(destination.index, 0, itemToMove);\n } else if (\n notReadyRegExp.test(source.droppableId) &&\n tripRegExp.test(destination.droppableId)\n ) {\n // Moving from not-ready to tripContainer\n let itemToMove = notReadyOrders.splice(source.index, 1)[0];\n itemToMove.ignoreForTrip = false;\n readyOrders.splice(destination.index, 0, itemToMove);\n } else if (\n notReadyRegExp.test(source.droppableId) &&\n notReadyRegExp.test(destination.droppableId)\n ) {\n // Moving within not-ready\n let itemToMove = notReadyOrders.splice(source.index, 1)[0];\n notReadyOrders.splice(destination.index, 0, itemToMove);\n }\n }\n zone[sourceZoneIndex].plannedTrips[sourceTripIndex].orders =\n readyOrders.concat(notReadyOrders);\n return zone;\n }\n changeStore(storeId) {\n this.setState({ storeId }, this.getPlannedTrips);\n }\n showTripMap(orders, droppableId, recommendedVehicle, hub) {\n this.setState({\n showTripMap: true,\n tripMapData: orders,\n currentTripHub: hub,\n zoneTripDetails: droppableId,\n recommendedVehicle,\n });\n }\n onSuccess(lat, lng) {\n this.hideMap();\n this.showSuccessDialog();\n let zoneTripIndex = this.state.zoneTripDetails.match(/\\d+/g).map(Number);\n let orderIndex = this.state.data.zone[zoneTripIndex[0]].plannedTrips[\n zoneTripIndex[1]\n ].orders.findIndex((order) => order.id === this.state.orderId);\n let newState = { ...this.state.data };\n let item = newState.zone[zoneTripIndex[0]].plannedTrips[\n zoneTripIndex[1]\n ].orders.splice(orderIndex, 1)[0];\n item.address.location.lat = parseFloat(lat);\n item.address.location.long = parseFloat(lng);\n newState.zone[zoneTripIndex[0]].plannedTrips[\n zoneTripIndex[1]\n ].orders.splice(orderIndex, 0, item);\n this.setState({ data: newState });\n }\n showSuccessDialog() {\n this.setState({\n showSuccessDialog: true,\n });\n }\n handleSuccessClose() {\n this.setState({\n showSuccessDialog: false,\n });\n }\n showDeliveryLocation(orderId, droppableId) {\n let zoneTripIndex = droppableId.match(/\\d+/g).map(Number);\n let order = this.state.data.zone[zoneTripIndex[0]].plannedTrips[\n zoneTripIndex[1]\n ].orders.filter((order) => order.id === orderId);\n order = order[0];\n let fullAddress = [\n order.address.address,\n order.address.city,\n order.address.landmark,\n order.address.pincode,\n ]\n .filter((el) => !!el || el === 0)\n .join(\", \");\n let coordinates = {\n lat: order.address.location.lat,\n lng: order.address.location.long,\n };\n let addressId = order.address.id;\n this.setState({\n showMap: true,\n orderId,\n address: fullAddress,\n coordinates,\n addressId,\n customerId: order.customerId,\n zoneTripDetails: droppableId,\n });\n }\n hideMap() {\n this.setState({\n showMap: false,\n });\n }\n getStoreLocation() {\n this.accountConfigApi = new API({\n url: \"/account-service/config/basic\",\n });\n this.accountConfigApi\n .get()\n .then((response) => {\n this.setState({\n storeLocation: {\n lat: response.data.config.basic.latitude,\n lng: response.data.config.basic.longitude,\n },\n });\n })\n .catch((error) => {\n // if user is unauthorized redirect to login screen\n if (error.code === 401) throw error;\n console.error(error);\n });\n }\n getOrderNumbersForZone(zone) {\n let totalOrders = zone.plannedTrips\n .map((trip) => trip.orders)\n .reduce((accOrder, currentOrders) => accOrder.concat(currentOrders), []);\n return totalOrders.length;\n }\n modifyState(orderNumbers, vehicleId, deliveryAgentId) {\n let newState = { ...this.state.data };\n newState.vehicles = newState.vehicles.filter(\n (vehicle) => vehicle.id !== parseInt(vehicleId, 10)\n );\n newState.executives = newState.executives.filter(\n (re) => re.id !== parseInt(deliveryAgentId, 10)\n );\n let zoneTripIndex = this.state.zoneTripDetails.match(/\\d+/g).map(Number);\n let zoneIndex = zoneTripIndex[0];\n let tripIndex = zoneTripIndex[1];\n newState.zone[zoneIndex].plannedTrips[tripIndex].orders = newState.zone[\n zoneIndex\n ].plannedTrips[tripIndex].orders.filter(\n (order) => !orderNumbers.includes(order.id)\n );\n newState.zone = newState.zone.filter(this.getOrderNumbersForZone);\n this.setState({\n data: newState,\n showTripStarted: true,\n showTripMap: false,\n });\n }\n\n getDeliveryAreas() {\n if (isExtensionEnabled(\"DeliveryAreaSupport\")) {\n const deliveryAreaApi = new API({\n url: `/logistics-service/delivery-area`,\n });\n deliveryAreaApi\n .get({ paginated: \"false\" })\n .then((response) => {\n this.setState({\n deliveryAreas: response.data.deliveryarea,\n });\n })\n .catch((error) => {\n // if user is unauthorized redirect to login screen\n if (error.code === 401) throw error;\n console.error(error);\n });\n }\n }\n\n getMapUrls = () => {\n let configApi = new API({ url: \"/config-service/config/backOffice\" });\n configApi\n .get()\n .then((res) => {\n this.zopsmartMapUrls = res?.data?.backOffice?.mapsUrl;\n })\n .catch((error) => {\n console.error(error);\n });\n };\n\n componentDidMount() {\n this.getPlannedTrips();\n this.getMapUrls();\n if (!(this.props && this.props.stores)) {\n this.getStoreLocation();\n }\n this.getDeliveryAreas();\n }\n\n componentWillUnmount() {\n this.accountConfigApi && this.accountConfigApi.cancel();\n this.logisticsAutomationApi && this.logisticsAutomationApi.cancel();\n }\n\n updateOrder(msg) {\n if (!this) {\n return;\n }\n let data = msg.data;\n if (typeof data === \"string\") {\n data = JSON.parse(data);\n }\n let stateData = Object.assign({}, this.state.data);\n if (\n stateData &&\n stateData.zone &&\n stateData.zone.length > 0 &&\n Number(this.state.storeId) === Number(data.storeId)\n ) {\n let zones = Object.assign([], stateData.zone);\n zones.forEach((zone) => {\n zone.plannedTrips &&\n zone.plannedTrips.forEach((plannedTrip) => {\n plannedTrip.orders &&\n plannedTrip.orders.forEach((order) => {\n if (Number(order.id) === Number(data.referenceNumber)) {\n order.status = data.newStatus;\n }\n });\n });\n });\n stateData.zone = zones;\n this.setState({\n data: stateData,\n });\n }\n }\n\n render() {\n if (!this.state.data) {\n return \n
\n {`${getMessage(\n \"tripPlanner.start\"\n )}`}
\n \n
\n \n
\n \n Total Trip Distance: {this.state.tripDistance}\n
\n \n \n
\n \n ) : null}\n \n \n {getMessage(\"tripPlanner.tableView\")}\n \n ) : null}\n
\n {getMessage(\"tripPlanner.heading\")}
\n {isExtensionEnabled(\"MultiStoreSupport\") && (\n\n \n -1}\n showDeliveryLocation={this.showDeliveryLocation}\n totalOrders={trip.orders.length}\n startTime={trip.startTime ? trip.startTime : null}\n endTime={trip.endTime ? trip.endTime : null}\n onDragStart={this.onDragStart}\n onDragEnd={this.onDragEnd}\n />\n ))}\n
\n );\n }\n )}\n \n {zone.map(\n ({ name = \"\", plannedTrips = [], ...zone }, zoneIndex) => {\n return (\n \n \n {name === \"NO_ZONE\" ? \"NO ZONE\" : name}\n
\n {plannedTrips.map((trip, tripIndex) => (\n \n \n {getMessage(\"tripPlanner.download.summary.text\")}\n \n )\n )}\n
\n {this.state.loading ? (\n {getMessage(\"tripPlanner.table.heading\")}
\n {this.state.loading ? (\n\n \n
\n
\n )}\n {getMessage(\"logistics.config.heading\")}
\n {this.state.formError && (\n{this.state.formError}
\n )}\n {this.state.loading ? (\n \n 
\n
\n );\n }\n return (\n \n {props.data.title && \n
\n );\n}\n","import React from \"react\";\n\nexport default function LayoutGreenCard({ className }) {\n return (\n {props.data.title}
}\n {props.data.subtitle &&{props.data.subtitle}
}\n\n \n {imageUrl1 ? (\n \n \n \n \n {imageUrl2 ? (\n \n \n \n
\n );\n}\n","export const fontSizes = [\n {\n text: \"42\",\n value: \"42px\",\n },\n {\n text: \"40\",\n value: \"40px\",\n },\n {\n text: \"38\",\n value: \"38px\",\n },\n {\n text: \"36\",\n value: \"36px\",\n },\n {\n text: \"34\",\n value: \"34px\",\n },\n {\n text: \"32\",\n value: \"32px\",\n },\n {\n text: \"30\",\n value: \"30px\",\n },\n {\n text: \"28\",\n value: \"28px\",\n },\n {\n text: \"26\",\n value: \"26px\",\n },\n {\n text: \"24\",\n value: \"24px\",\n },\n {\n text: \"22\",\n value: \"22px\",\n },\n {\n text: \"20\",\n value: \"20px\",\n },\n {\n text: \"18\",\n value: \"18px\",\n },\n {\n text: \"16\",\n value: \"16px\",\n },\n];\n\nexport const specialLayout = [\"footer\", \"Splash Screen\"];\n\nexport const WYSWYG_Layouts = [\"Highlights\"]; // ZS components layouts\n","import React from \"react\";\nimport { BaseForm, Checkbox } from \"../../../components/Form\";\nimport API from \"../../../lib/api\";\nimport Loader from \"../../../components/Loader\";\nimport { isExtensionEnabled } from \"../../../lib/auth\";\nimport { WYSWYG_Layouts } from \"./constants\";\n\nfunction trimQueryString(str) {\n return str.split(\"&\").filter(Boolean).join(\"&\");\n}\n\nexport default class Layout extends BaseForm {\n constructor(props) {\n super(props);\n this.preview =\n this.props.preview ||\n (() => {\n return null;\n });\n this.fields =\n this.props.fields ||\n (() => {\n return null;\n });\n this.state.values = this.props.data;\n this.state.values.showOriginal = this.props.data?.showOriginal;\n this.state.uploadLoader = false;\n this.getValueLayouts = {\n CategoryCollection: {\n name: \"category\",\n key: \"categoryIds\",\n },\n BrandCollection: {\n name: \"brand\",\n key: \"brandIds\",\n },\n BlogCollection: {\n name: \"blog\",\n key: \"blogIds\",\n },\n };\n }\n componentDidMount() {\n const name = this.props.name;\n let data = this.props.data;\n let layout = this.getValueLayouts[name];\n if (layout && data[layout.key] && data[layout.key].length > 0) {\n this.setState({\n loading: true,\n });\n let param = \"\";\n let cparam = \"\";\n let tparam = \"\";\n data[layout.key] &&\n data[layout.key].forEach((id) => {\n if (layout.name === \"category\") {\n if (Number(id)) {\n cparam += `id=${id}&`;\n } else {\n let type = id && id[0] && id[0].toString();\n if (type === \"C\") {\n cparam += `id=${id && id.toString().slice(1)}&`;\n } else if (type === \"T\") {\n tparam += `id=${id && id.toString().slice(1)}&`;\n }\n }\n } else {\n param += `id=${id}&`;\n }\n });\n // trim extra & at the end\n param = trimQueryString(param);\n cparam = trimQueryString(cparam);\n tparam = trimQueryString(tparam);\n\n if (layout.name === \"category\") {\n cparam += \"&paginate=false\";\n tparam += \"&paginate=false\";\n const categoryApi = cparam\n ? new API({ url: `/catalogue-service/category?${cparam}` })\n : null;\n const tagApi =\n tparam && isExtensionEnabled(\"ProductTagSupport\")\n ? new API({ url: `/catalogue-service/tag?${tparam}` })\n : null;\n Promise.all([categoryApi && categoryApi.get(), tagApi && tagApi.get()])\n .then(([categoryResponse, tagResponse]) => {\n let categories =\n (categoryResponse &&\n categoryResponse.data &&\n categoryResponse.data.category) ||\n [];\n categories = (categories || []).map((category) => {\n category.id = `C${category.id}`;\n return category;\n });\n let tags =\n (tagResponse && tagResponse.data && tagResponse.data.tag) || [];\n tags = (tags || []).map((tag) => {\n tag.name = `T ${tag.name}`;\n tag.id = `T${tag.id}`;\n return tag;\n });\n categories = [...categories, ...tags];\n let data = categories;\n let sortedData = [];\n // We are sorting the get incoming data based on the props data categoryIds\n if (this.props.sortable) {\n this.props.data &&\n this.props.data[layout.key] &&\n this.props.data[layout.key].map((id) => {\n data.map((item) => {\n if (item.id === id) {\n sortedData.push(item);\n }\n return null;\n });\n return null;\n });\n }\n let values = Object.assign({}, this.state.values);\n values[layout.name] = this.props.sortable ? sortedData : data;\n this.setState({\n values,\n loading: false,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n } else if (layout.name === \"blog\") {\n param += \"&paginate=false\";\n const blogApi = param\n ? new API({ url: `/blog-service/blog?${cparam}` })\n : null;\n\n blogApi\n .get()\n .then((response) => {\n let blogs = response?.data?.blog || [];\n blogs = (blogs || []).map((blog) => {\n blog.id = `${blog.id}`;\n return blog;\n });\n\n let data = blogs;\n let sortedData = [];\n // We are sorting the get incoming data based on the props data categoryIds\n if (this.props.sortable) {\n this.props.data &&\n this.props.data[layout.key] &&\n this.props.data[layout.key].map((id) => {\n data.map((item) => {\n if (item.id === id) {\n sortedData.push(item);\n }\n return null;\n });\n return null;\n });\n }\n let values = Object.assign({}, this.state.values);\n values[layout.name] = this.props.sortable ? sortedData : data;\n this.setState({\n values,\n loading: false,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n } else {\n // this is for brand collection\n if (layout.name === \"brand\") {\n param += `&paginate=false`;\n }\n const api = new API({\n url: `/catalogue-service/${layout.name}?${param}`,\n });\n const sortedKeys = data[layout.key];\n api\n .get()\n .then((response) => {\n let data = response.data[layout.name];\n let values = Object.assign({}, this.state.values);\n\n // sort the response in the same order as sortedKeys\n data =\n data &&\n data.sort(\n (a, b) => sortedKeys.indexOf(a.id) - sortedKeys.indexOf(b.id)\n );\n\n values[layout.name] = data;\n this.setState({\n values,\n loading: false,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n }\n if (name === \"ProductCollection\") {\n let entityObj = {};\n let promises = [];\n if (data.category) {\n const api = new API({\n url: `/catalogue-service/category?slug=${data.category}`,\n });\n if (data.category === \"CURRENT\") {\n entityObj.category = {\n id: new Date().getTime(),\n name: \"current\",\n displayName: \"current\",\n slug: \"CURRENT\",\n };\n } else {\n promises.push(api.get());\n }\n }\n if (data.brand && isExtensionEnabled(\"MultiBrandSupport\")) {\n const api = new API({\n url: `/catalogue-service/brand?slug=${data.brand}`,\n });\n if (data.brand === \"CURRENT\") {\n entityObj.brand = {\n id: new Date().getTime(),\n name: \"current\",\n displayName: \"current\",\n slug: \"CURRENT\",\n };\n } else {\n promises.push(api.get());\n }\n }\n if (data.tag && isExtensionEnabled(\"ProductTagSupport\")) {\n const api = new API({ url: `/catalogue-service/tag?slug=${data.tag}` });\n if (data.tag === \"CURRENT\") {\n entityObj.tag = {\n id: new Date().getTime(),\n name: \"current\",\n displayName: \"current\",\n slug: \"CURRENT\",\n };\n } else {\n promises.push(api.get());\n }\n }\n Promise.all(promises)\n .then((responseArr) => {\n let values = JSON.parse(JSON.stringify(this.state.values));\n responseArr.map((response) => {\n if (response.data.category) {\n entityObj.category = response.data.category[0];\n }\n if (response.data.brand) {\n entityObj.brand = response.data.brand[0];\n }\n if (response.data.tag) {\n entityObj.tag = response.data.tag[0];\n }\n return null;\n });\n values = { ...values, ...entityObj };\n\n this.setState({ values });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n }\n\n handleChangeOriginal = (value) => {\n this.setState({\n values: { ...this.state.values, showOriginal: value },\n });\n };\n\n handleUpdateData = (data) => {\n this.setState({\n values: {\n ...this.state.values,\n ...data,\n },\n });\n };\n\n uploadContent = (file, uploadCallBack) => {\n this.setState({\n uploadLoader: true,\n });\n let data;\n if (file) {\n data = new window.FormData();\n if (file?.type === \"image/gif\") {\n data.append(\"fileUpload\", file);\n data.append(\"bucketType\", \"public\");\n const api = new API({ url: \"/media-service/file\" });\n api\n .post(data)\n .then(\n (response) => {\n uploadCallBack({\n imageUpload: {\n url: response.data.url,\n },\n });\n },\n (error) => {\n if (error.code === 401) {\n throw error;\n }\n }\n )\n .finally(() => {\n this.setState({\n uploadLoader: false,\n });\n });\n } else {\n data.append(\"imageUpload\", file);\n const api = new API({ url: \"/media-service/image-upload\" });\n api\n .post(data)\n .then(\n (response) => {\n //passing response.data to onChange if we have different resized images for different resolutions\n uploadCallBack({\n imageUpload: {\n url: response?.data?.imageUpload?.url,\n },\n });\n },\n (error) => {\n if (error.code === 401) {\n throw error;\n }\n }\n )\n .finally(() => {\n this.setState({\n uploadLoader: false,\n });\n });\n }\n }\n };\n\n shouldPassDataAsProps = () => {\n let stateKeys = Object.keys(this.state.values);\n stateKeys = stateKeys?.filter(\n (key) => ![\"name\", \"showOriginal\"].includes(key)\n );\n if (stateKeys.length > 1) return true;\n return false;\n };\n\n render() {\n let { Form } = this.components;\n let { SubmitButton, CancelButton } = this.buttons;\n let Preview = this.preview;\n const styles = {\n transform: `translate3d(0, ${this.props.top - 65}px, 0)`, // 65px to accommodate for the page heading\n };\n const { validations: { layoutBackground: { backgroundColor } = {} } = {} } =\n this.state;\n const disableSubmit = backgroundColor ? !backgroundColor?.valid : false;\n const loading = this.state.loading;\n const isOriginalAvailable = [\n \"ImageSlideShow\",\n \"CategoryCollection\",\n ].includes(this.props.name);\n return loading ? (\n {title1}
\n {subtitle1}
\n {title2}
\n {subtitle2}
\n \n \n
\n );\n }\n const slides = props.data.images;\n const slideAmount = slideElements\n .slice(0, state.activeSlide)\n .reduce((width, currentSlide) => width + currentSlide.offsetWidth, 0);\n const slideStyles = {\n transform: `translate3d(${-1 * slideAmount}px, 0, 0)`,\n };\n return (\n \n
\n \n {slides.map((slide, index) => {\n return (\n {\n slideElements[index] = el;\n }}\n key={index}\n className={\n (Number(state.activeSlide) === index ? \"active \" : \"\") +\n \"slide\"\n }\n >\n 
\n
\n );\n })}\n \n {slides.map((slide, index) => {\n return (\n {\n this.slideTo(index);\n }}\n />\n );\n })}\n {/* \n */}\n
\n \n {slides.map((slide, index) => (\n
\n \n );\n }\n}\n","import React from \"react\";\nimport { Input, Upload } from \"../../../../components/Form\";\nimport Tabs from \"../../../../components/Tabs\";\nimport ImageSlideshow from \"../../../../components/Layout/ImageSlideshow\";\nimport { getMessage } from \"../../../../lib/translator\";\n\nconst ImageSlideShow = () => {\n return {\n preview: ImageSlideshow,\n fields: ({ getState, updateState, parent }) => {\n const activeIndex = Number(getState([\"activeIndex\"])) || 0;\n const emptySlide = {\n gifUrl: \"\",\n imageUrl: \"\",\n text: \"\",\n link: \"\",\n };\n const slides = getState([\"images\"]) || [emptySlide];\n const currentSlide = slides[activeIndex] || emptySlide;\n\n if (!getState([\"images\"])) {\n updateState([\"images\"], slides); // TODO: Move this to componentWillMount of layout\n }\n\n // Since updateStateRecursively had some issues with this structure\n const newState = (key, value) => {\n parent.setState((prevState) => {\n const newState = Object.assign({}, prevState);\n newState.values.images[activeIndex][key] = value;\n return prevState;\n });\n };\n const showDelete = slides && slides.length > 1;\n return (\n \n
\n ))}\n {slide.text}
\n{slide.subtitle}
\n\n
\n );\n },\n };\n};\nexport default ImageSlideShow;\n","import React from \"react\";\nimport Image from \"../../Image\";\nimport \"./style.css\";\nimport img from \"./image.png\";\n\nexport default function ImageWithText(props) {\n var textPosition = props.textPosition || \"bottom\";\n var className = `${textPosition} ImageWithText`;\n if (!props.data) {\n return (\n \n (\n \n slide {index + 1}\n {showDelete && (\n {\n slides.splice(index, 1);\n updateState(\n [\"activeIndex\"],\n index !== 0 && index === slides.length\n ? index - 1\n : index\n );\n }}\n >\n ×\n \n )}\n \n ))}\n default={activeIndex}\n active={activeIndex}\n onClick={(value) => {\n updateState([\"activeIndex\"], value);\n }}\n />\n {\n e.preventDefault();\n const slidesCount = slides.length;\n updateState([\"images\"], slides.concat(emptySlide));\n updateState([\"activeIndex\"], slidesCount);\n }}\n >\n + {getMessage(\"imageSlideShow.addSlide\")}\n \n
\n \n
\n \n {\n newState(\"text\", value);\n }}\n />\n {\n newState(\"subtitle\", value);\n }}\n />\n {\n newState(\"link\", value);\n }}\n />\n
\n \n {\n const fileUrl = newValue?.url\n if (fileUrl && fileUrl?.toLowerCase()?.endsWith(\".gif\")) {\n newState(\"gifUrl\", fileUrl);\n newState(\"imageUrl\", \"\"); \n } else {\n newState(\"imageUrl\", newValue);\n newState(\"gifUrl\", \"\"); \n }\n }}\n />\n
\n \n \n
\n );\n }\n return (\n \n \n \n \n \n
\n );\n}\n","import React from \"react\";\nimport { Input, Upload, Textarea } from \"../../../../components/Form\";\nimport ImageWithText from \"../../../../components/Layout/ImageWithText\";\n\n// lower case t is used in Text because it iis dependent on a module whose name is imageWithText with an Upper case T\nconst ImageWithTextLayout = () => {\n return {\n preview: ImageWithText,\n fields: ({ getState, updateState }) => (\n {props.data.title}
\n{props.data.subtitle}
\n{props.data.description}
\n\n
\n ),\n };\n};\nexport default ImageWithTextLayout;\n","import React from \"react\";\nimport ProductCollection from \"../../../../components/Layout/ProductCollection\";\nimport {\n Input,\n Select,\n CheckboxGroup,\n Radio,\n CategorySearch,\n BrandSearch,\n Searchable,\n} from \"../../../../components/Form\";\nimport { isExtensionEnabled } from \"../../../../lib/auth\";\nimport { getMessage } from \"../../../../lib/translator\";\nconst ProductCollectionLayout = (selectOptions, defaultOption) => {\n return {\n preview: ProductCollection,\n fields: function ({ getState, updateState, page }) {\n const showOnly = [\n {\n text: getMessage(\"themes.offers\"),\n value: \"hasOffers\",\n },\n {\n text: getMessage(\"themes.images\"),\n value: \"hasImage\",\n },\n {\n text: getMessage(\"themes.stock\"),\n value: \"hasStock\",\n },\n ];\n let showOnlyValue = [];\n\n showOnly.forEach((option) => {\n if (getState([option.value]) === 1) {\n showOnlyValue.push(option.value);\n }\n });\n return (\n \n {\n updateState([\"title\"], value);\n }}\n />\n {\n updateState([\"imageUrl\"], value);\n }}\n />\n {\n updateState([\"link\"], value);\n }}\n />\n
\n \n {\n updateState([\"subtitle\"], value);\n }}\n />\n {\n updateState([\"description\"], value);\n }}\n />\n
\n \n
\n );\n },\n };\n};\n\nexport default ProductCollectionLayout;\n","import React from \"react\";\nimport { Input, Upload, Textarea, Select } from \"../../../../components/Form\";\nimport { BannerWithText } from \"zopsmart-ui\";\nimport { fontSizes } from \"../constants.js\";\n\n// lower case t is used in Text because it iis dependent on a module whose name is imageWithText with an Upper case T\nconst BannerWithTextLayout = () => {\n return {\n preview: BannerWithText,\n fields: ({ getState, updateState }) => {\n let buttonTextInput = \"\";\n let buttonLinkInput = \"\";\n if (getState([\"button\"])) {\n buttonTextInput = (\n \n
\n \n
\n \n
\n {isExtensionEnabled(\"ProductTagSupport\") && (\n \n \n (page === \"tag\"\n ? [\n {\n id: new Date().getTime(),\n name: \"current\",\n slug: \"CURRENT\",\n },\n ]\n : []\n ).concat(response.data.tag)\n }\n {...this.generateStateMappers({\n stateKeys: [\"tag\"],\n })}\n />\n
\n )}\n \n
\n \n {isExtensionEnabled(\"MultiBrandSupport\") && (\n
\n \n
\n )}\n \n
\n \n
\n \n {\n const irrellevant = showOnlyValue.filter(\n (option) => values.indexOf(option) < 0\n );\n const yes = showOnlyValue.filter(\n (option) => values.indexOf(option) >= 0\n );\n irrellevant.forEach((option) => {\n updateState([option], \"\");\n });\n yes.forEach((option) => {\n updateState([option], 1);\n });\n }}\n />\n
\n \n
\n \n
\n \n
\n );\n },\n };\n};\nexport default BannerWithTextLayout;\n","import React from \"react\";\nimport { Input, Upload, Textarea, Select } from \"../../../../components/Form\";\nimport { BannerWithMultipleButtons } from \"zopsmart-ui\";\nimport { fontSizes } from \"../constants.js\";\n\n// lower case t is used in Text because it iis dependent on a module whose name is imageWithText with an Upper case T\nconst BannerWithMultipleButtonsLayout = () => {\n return {\n preview: BannerWithMultipleButtons,\n fields: ({ getState, updateState }) => {\n return (\n \n {\n updateState([\"title\"], value);\n }}\n />\n {\n updateState([\"fontSizeForTitle\"], value);\n }}\n />\n {\n updateState([\"src\"], value);\n }}\n />\n {\n updateState([\"fontSizeForDescription\"], value);\n }}\n />\n {\n updateState([\"link\"], value);\n }}\n />\n {buttonTextInput}\n
\n \n {\n updateState([\"subtitle\"], value);\n }}\n />\n {\n updateState([\"textColorForTitle\"], value);\n }}\n />\n {\n updateState([\"details\"], value);\n }}\n />\n {\n updateState([\"textColorForDescription\"], value);\n }}\n />\n {buttonLinkInput}\n
\n \n
\n );\n },\n };\n};\nexport default BannerWithMultipleButtonsLayout;\n","import React from \"react\";\nimport { Input, Select } from \"../../../../components/Form\";\nimport Tabs from \"../../../../components/Tabs\";\nimport { VideoCardCarousel } from \"zopsmart-ui\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport { fontSizes } from \"../constants.js\";\n\nconst VideoCarouselLayout = () => {\n return {\n preview: VideoCardCarousel,\n fields: ({ getState, updateState, parent }) => {\n const activeIndex = Number(getState([\"activeIndex\"])) || 0;\n const emptySlide = {\n src: \"\",\n details: \"\",\n };\n const slides = getState([\"videoCards\"]) || [emptySlide];\n const currentSlide = slides[activeIndex] || emptySlide;\n\n const newState = (key, value) => {\n parent.setState((prevState) => {\n const newState = Object.assign({}, prevState);\n if (!newState.values.videoCards) {\n newState.values.videoCards = [];\n newState.values.videoCards.push(slides[activeIndex]);\n }\n newState.values.videoCards[activeIndex][key] = value;\n return prevState;\n });\n };\n const showDelete = slides && slides.length > 1;\n return (\n \n {\n updateState([\"title\"], value);\n }}\n />\n {\n updateState([\"fontSizeForTitle\"], value);\n }}\n />\n {\n updateState([\"src\"], value);\n }}\n />\n {\n updateState([\"fontSizeForDescription\"], value);\n }}\n />\n {\n updateState([\"action1\"], value);\n }}\n />\n {\n updateState([\"action2\"], value);\n }}\n />\n {\n updateState([\"link\"], value);\n }}\n />\n
\n \n {\n updateState([\"subtitle\"], value);\n }}\n />\n {\n updateState([\"textColorForTitle\"], value);\n }}\n />\n {\n updateState([\"details\"], value);\n }}\n />\n {\n updateState([\"textColorForDescription\"], value);\n }}\n />\n {\n updateState([\"link1\"], value);\n }}\n />\n {\n updateState([\"link2\"], value);\n }}\n />\n
\n \n
\n );\n },\n };\n};\nexport default VideoCarouselLayout;\n","import React from \"react\";\nimport ProductCollection from \"../../../../components/Layout/ProductCollection\";\nimport {\n Input,\n Radio,\n Checkbox,\n Searchable,\n} from \"../../../../components/Form\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport { isExtensionEnabled } from \"../../../../lib/auth\";\n\nconst getChain = (category) => {\n let chain = [];\n let reference = category;\n while (reference) {\n chain.push(reference.name);\n reference = reference.parentCategory;\n }\n return chain.reverse().join(\" > \");\n};\n\nfunction renderListElement(suggestion, valueKey, nameKey, onSelect) {\n return (\n \n (\n \n slide {index + 1}\n {showDelete && (\n {\n slides.splice(index, 1);\n updateState(\n [\"activeIndex\"],\n index !== 0 && index === slides.length\n ? index - 1\n : index\n );\n }}\n >\n ×\n \n )}\n \n ))}\n default={activeIndex}\n active={activeIndex}\n onClick={(value) => {\n updateState([\"activeIndex\"], value);\n }}\n />\n {\n e.preventDefault();\n const slidesCount = slides.length;\n updateState([\"videoCards\"], slides.concat(emptySlide));\n updateState([\"activeIndex\"], slidesCount);\n }}\n >\n + {getMessage(\"videoCarousel.addSlide\")}\n \n
\n \n
\n \n {\n newState(\"src\", value);\n }}\n />\n {activeIndex === 0 && (\n {\n updateState([\"fontSizeForDescription\"], value);\n }}\n />\n )}\n {\n newState(\"details\", value);\n }}\n />\n
\n \n {\n updateState([\"subtitle\"], value);\n }}\n />\n {activeIndex === 0 && (\n {\n updateState([\"textColorForDescription\"], value);\n }}\n />\n )}\n
\n \n
\n );\n },\n };\n};\n\nexport default CategoryCollectionLayout;\n","import React from \"react\";\nimport ProductCollection from \"../../../../components/Layout/ProductCollection\";\nimport {\n Input,\n BrandSearch,\n Radio,\n Checkbox,\n} from \"../../../../components/Form\";\nimport { getMessage } from \"../../../../lib/translator\";\n\nconst BrandCollection = () => {\n return {\n preview: ProductCollection,\n fields: ({ getState, updateState, parent }) => {\n return (\n \n
\n \n {\n updateState([\"title\"], e);\n }}\n />\n
\n \n {\n updateState([\"subtitle\"], e);\n }}\n />\n
\n \n {\n updateState([\"layoutType\"], e);\n }}\n />\n
\n \n {\n {\n return getChain(category)\n ? category.type\n ? category.name\n : `C ${getChain(category)}`\n : \"\";\n }}\n renderListElement={renderListElement}\n transformRequest={(searchText, paramsDefault) => {\n let params = Object.assign({}, paramsDefault);\n params.name = `%${params.name}`;\n return params;\n }}\n transformResponse={(response) => {\n let categories = response.data.category;\n categories = (categories || []).map((category) => {\n category.displayName = `C ${getChain(category)}`;\n // category.name = `C ${category.name}`\n category.id = `C${category.id}`;\n return category;\n });\n return categories;\n }}\n value={getState([\"category\"])}\n onChange={(e) => {\n updateState([\"category\"], e);\n }}\n />\n }\n {isExtensionEnabled(\"ProductTagSupport\") && (\n {\n let tags = response.data.tag || [];\n tags = (tags || []).map((tag) => {\n tag.name = `T ${tag.name}`;\n tag.id = `T${tag.id}`;\n return tag;\n });\n return tags;\n }}\n multiple\n displaySelectedValue={(category) => {\n return getChain(category)\n ? category.type\n ? category.name\n : `C ${getChain(category)}`\n : \"\";\n }}\n renderListElement={renderListElement}\n value={getState([\"category\"])}\n onChange={(e) => {\n updateState([\"category\"], e);\n }}\n />\n )}\n {/* {page === 'category' &&
\n \n {\n updateState(['subcategories'], e)\n }}\n />\n
} */}\n \n
\n \n {\n updateState(['showSubCategoryLinks'], e)\n }}\n /> */}\n {\n updateState([\"showProductCount\"], e);\n }}\n />\n {\n updateState([\"fullImage\"], e);\n }}\n />\n
\n {getMessage(\"themes.cc.config\")}
\n {/*\n
\n );\n },\n };\n};\n\nexport default BrandCollection;\n","import React from \"react\";\nimport ProductCollection from \"../../../../components/Layout/ProductCollection\";\nimport { Input, Radio, Checkbox } from \"../../../../components/Form\";\nimport { getMessage } from \"../../../../lib/translator\";\n\nconst SubCategoryCollectionLayout = () => {\n return {\n preview: ProductCollection,\n fields: ({ getState, updateState, parent, page }) => {\n return (\n \n
\n \n {\n updateState([\"title\"], e);\n }}\n />\n
\n \n {\n updateState([\"subtitle\"], value);\n }}\n />\n
\n \n {\n updateState([\"layoutType\"], e);\n }}\n />\n
\n \n {\n updateState([\"showProductCount\"], e);\n }}\n />\n
\n {getMessage(\"themes.cc.config\")}
\n\n
\n \n {\n updateState([\"brand\"], e);\n }}\n />\n
\n \n
\n );\n },\n };\n};\n\nexport default SubCategoryCollectionLayout;\n","import React from \"react\";\n\nexport default function GreenImage({ className }) {\n return (\n \n
\n \n {\n updateState([\"title\"], e);\n }}\n />\n
\n \n {\n updateState([\"subtitle\"], e);\n }}\n />\n
\n \n {\n updateState([\"layoutType\"], e);\n }}\n />\n
\n \n
\n \n {\n updateState([\"showProductCount\"], e);\n }}\n />\n {\n updateState([\"showSubCategoryLinks\"], e);\n }}\n />\n {\n updateState([\"fullImage\"], e);\n }}\n />\n
\n {getMessage(\"themes.cc.config\")}
\n\n \n {imageUrl1 ? (\n \n \n {imageUrl2 ? (\n \n
\n );\n}\n","import React from \"react\";\nimport { Input, Upload } from \"../../../../components/Form\";\nimport DualImageBanner from \"../../../../components/Layout/DualImageBanner\";\nimport { getMessage } from \"../../../../lib/translator\";\n\nconst DualImageBannerLayout = () => {\n return {\n preview: DualImageBanner,\n fields: ({ getState, updateState }) => (\n \n
\n {title}
\n {subTitle}
\n {link && (\n \n )}\n \n
\n ),\n };\n};\nexport default DualImageBannerLayout;\n","import React from \"react\";\nimport img from \"./form_place_holder.svg\";\n\nexport default function Image(props) {\n return (\n \n {\n updateState([\"imageUrl1\"], value);\n }}\n />\n {\n updateState([\"title\"], value);\n }}\n />\n {\n updateState([\"link\"], value);\n }}\n />\n
\n \n {\n updateState([\"imageUrl2\"], value);\n }}\n />\n {\n updateState([\"subTitle\"], value);\n }}\n />\n
\n \n \n
\n );\n}\n","import React from \"react\";\nimport { Input } from \"../../../../components/Form\";\nimport AppointmentForm from \"../../../../components/Layout/AppointmentForm\";\nimport { getMessage } from \"../../../../lib/translator\";\n\nconst captchaAdminURL = \"https://www.google.com/recaptcha/admin\";\n\nconst AppointmentFormLayout = () => {\n return {\n preview: AppointmentForm,\n fields: ({ getState, updateState }) => {\n return (\n \n
\n );\n },\n };\n};\nexport default AppointmentFormLayout;\n","import React from \"react\";\nimport { Input, Upload } from \"../../../../components/Form\";\nimport DualImageGrid from \"../../../../components/Layout/DualImageGrid\";\nimport { getMessage } from \"../../../../lib/translator\";\n\n// lower case t is used in Text because it iis dependent on a module whose name is imageWithText with an Upper case T\nconst DualImageLayout = () => {\n return {\n preview: DualImageGrid,\n fields: ({ getState, updateState }) => (\n \n {\n updateState([\"googleCaptchaKey\"], value);\n }}\n />\n {\n updateState([\"googleCaptchaSecret\"], value);\n }}\n />\n
\n \n {`If you do not have both keys. You can create from`}\n \n Here\n \n
\n \n
\n ),\n };\n};\nexport default DualImageLayout;\n","import React from \"react\";\nimport ProductCollection from \"../../../../components/Layout/ProductCollection\";\nimport { Input, Radio, Searchable } from \"../../../../components/Form\";\nimport { getMessage } from \"../../../../lib/translator\";\n\nconst getChain = (blog) => {\n let chain = [];\n let reference = blog;\n while (reference) {\n chain.push(reference.title);\n reference = reference.url;\n }\n return chain.reverse().join(\" > \");\n};\n\nfunction renderListElement(suggestion, valueKey, nameKey, onSelect) {\n return (\n \n {\n updateState([\"title1\"], value);\n }}\n />\n {\n updateState([\"subtitle1\"], value);\n }}\n />\n {\n updateState([\"imageUrl1\"], value);\n }}\n />\n {\n updateState([\"link1\"], value);\n }}\n />\n
\n \n {\n updateState([\"title2\"], value);\n }}\n />\n {\n updateState([\"subtitle2\"], value);\n }}\n />\n {\n updateState([\"imageUrl2\"], value);\n }}\n />\n {\n updateState([\"link2\"], value);\n }}\n />\n
\n \n
\n );\n },\n };\n};\n\nexport default BlogCollectionLayout;","import React from \"react\";\n\nconst LeftArrow = ({ ...props }) => (\n \n
\n \n {\n updateState([\"title\"], e);\n }}\n />\n
\n \n {\n updateState([\"subtitle\"], e);\n }}\n />\n
\n \n {\n updateState([\"layoutType\"], e);\n }}\n />\n
\n \n {\n {\n return getChain(blog) ? blog.title : `${getChain(blog)}`;\n }}\n renderListElement={renderListElement}\n transformRequest={(searchText, paramsDefault) => {\n let params = Object.assign({}, paramsDefault);\n params.title = `%${params.title}`;\n return params;\n }}\n transformResponse={(response) => {\n let blogs = response.data.blog;\n blogs = (blogs || []).map((blog) => {\n blog.displayName = `${blog.title}`;\n blog.id = `${blog.id}`;\n return blog;\n });\n return blogs;\n }}\n value={getState([\"blog\"])}\n onChange={(e) => {\n updateState([\"blog\"], e);\n }}\n />\n }\n
\n \n
\n );\n }\n const { slides, title = \"\", subtitle = \"\", activeIndex = 0 } = data || {};\n const {\n attribute = \"\",\n authorImage = \"\",\n authorName = \"\",\n testimonial = \"\",\n } = slides?.[activeIndex] || {};\n const isMultiSlides = Boolean(data?.slides?.length > 1 ?? false);\n return (\n \n
}\n
\n );\n}\n","import React from \"react\";\nimport { Input, Textarea, Upload } from \"../../../../components/Form\";\nimport Tabs from \"../../../../components/Tabs\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport Testimonial from \"../../../../components/Layout/Testimonial\";\n\nconst TestimonialLayout = ({ getState, updateState, parent }) => {\n // ----------------------------------------------------------\n // -------------------------sliders--------------------------\n const activeIndex = Number(getState([\"activeIndex\"])) || 0;\n const emptySlide = {\n testimonial: \"\",\n authorName: \"\",\n };\n const slides = getState([\"slides\"]) || [emptySlide];\n const currentSlide = slides[activeIndex] || emptySlide;\n\n if (!getState([\"slides\"])) {\n updateState([\"slides\"], slides); // TODO: Move this to componentWillMount of layout\n }\n\n // Since updateStateRecursively had some issues with this structure\n const newState = (key, value) => {\n parent.setState((prevState) => {\n const newState = Object.assign({}, prevState);\n newState.values.slides[activeIndex][key] = value;\n return prevState;\n });\n };\n const showDelete = slides && slides.length > 1;\n\n return (\n <>\n {title}
\n{subtitle}
\n {subtitle &&}\n
\n {isMultiSlides && (\n
\n \n
\n )}\n \n
\n {isMultiSlides && (\n \n 
\n
\n {testimonial}
\n \n
\n {authorName}
\n {authorName && attribute && , }\n {attribute && {attribute}
}\n \n
\n )}\n \n
\n\n \n {\n updateState([\"title\"], value);\n }}\n />\n
\n \n {\n updateState([\"subtitle\"], value);\n }}\n />\n
\n \n
\n \n );\n};\nconst TestimonialLayoutWrp = () => {\n return {\n preview: Testimonial,\n fields: ({ getState, updateState, parent, registerValidation }) => (\n \n (\n \n Slide {index + 1}\n {showDelete && (\n {\n slides.splice(index, 1);\n updateState(\n [\"activeIndex\"],\n index !== 0 && index === slides.length\n ? index - 1\n : index\n );\n }}\n >\n ×\n \n )}\n \n ))}\n default={activeIndex}\n active={activeIndex}\n onClick={(value) => {\n updateState([\"activeIndex\"], value);\n }}\n />\n {\n e.preventDefault();\n const slidesCount = slides.length;\n updateState([\"slides\"], slides.concat(emptySlide));\n updateState([\"activeIndex\"], slidesCount);\n }}\n >\n + {getMessage(\"imageSlideShow.addSlide\")}\n \n
\n \n
\n \n {\n newState(\"authorName\", value);\n }}\n />\n {\n newState(\"testimonial\", value);\n }}\n />\n
\n \n {\n newState(\"attribute\", value);\n }}\n />\n {\n newState(\"authorImage\", value);\n }}\n />\n
\n \n
\n );\n }\n const { questions, arrowsPosition, layoutBackground = {} } = data || {};\n const { question, description } = questions?.[0] || {};\n const btnAlignCenter = arrowsPosition === \"CENTER\";\n const isMultiQuestion = Boolean(data?.questions?.length > 1 ?? false);\n\n const styleBgImg = {\n backgroundImage: `url(\"${layoutBackground?.backgroundImage || \"\"}\")`,\n backgroundPosition: \"center\",\n backgroundSize: \"cover\",\n backgroundRepeat: \"no-repeat\",\n };\n const styleBgColor = {\n backgroundColor: layoutBackground?.backgroundColor || \"#fbfcfc\",\n };\n const bgType = layoutBackground?.backgroundType || \"COLOR\";\n return (\n {question}
\n\n
\n )}\n \n
\n {btnAlignCenter && isMultiQuestion && (\n {description}
\n \n
\n )}\n \n\n {!btnAlignCenter && isMultiQuestion && (\n \n
\n )}\n \n );\n}\n","import React, { useEffect } from \"react\";\nimport { Input, Radio, Textarea, Upload } from \"../../../../components/Form\";\nimport Tabs from \"../../../../components/Tabs\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport Carousel from \"../../../../components/Layout/Carousel\";\n\nconst COLOR_PATTERN = /^#([A-F0-9]{3}|[A-F0-9]{6})$/i;\n\nconst CarouselLayout = ({\n getState,\n updateState,\n parent,\n registerValidation,\n}) => {\n // -------------------------sliders--------------------------\n const activeIndex = Number(getState([\"activeIndex\"])) || 0;\n const emptySlide = {\n question: \"\",\n description: \"\",\n };\n const slides = getState([\"questions\"]) || [emptySlide];\n const currentSlide = slides[activeIndex] || emptySlide;\n\n if (!getState([\"questions\"])) {\n updateState([\"questions\"], slides); // TODO: Move this to componentWillMount of layout\n }\n\n // Since updateStateRecursively had some issues with this structure\n const newState = (key, value) => {\n parent.setState((prevState) => {\n const newState = Object.assign({}, prevState);\n newState.values.questions[activeIndex][key] = value;\n return prevState;\n });\n };\n const showDelete = slides && slides.length > 1;\n\n // -------------------------img & color--------------------------\n useEffect(() => {\n if (!getState([\"layoutBackground\", \"backgroundType\"])) {\n updateState([\"layoutBackground\", \"backgroundType\"], \"IMAGE\");\n }\n handleThemeColorValidator(\n getState([\"layoutBackground\", \"backgroundColor\"]) || \"#000000\"\n );\n // eslint-disable-next-line\n }, []);\n const handleThemeColorValidator = (value) => {\n const error = {\n patternMismatch: !COLOR_PATTERN.test(value),\n valid: COLOR_PATTERN.test(value),\n };\n registerValidation([\"layoutBackground\", \"backgroundColor\"], error);\n };\n const isColorOption =\n getState([\"layoutBackground\", \"backgroundType\"]) === \"COLOR\";\n const colorVal = getState([\"layoutBackground\", \"backgroundColor\"]);\n const isColorError = !COLOR_PATTERN.test(colorVal);\n return (\n <>\n {\"<\"}
\n {\">\"}
\n \n
\n \n (\n \n Slide {index + 1}\n {showDelete && (\n {\n slides.splice(index, 1);\n updateState(\n [\"activeIndex\"],\n index !== 0 && index === slides.length\n ? index - 1\n : index\n );\n }}\n >\n ×\n \n )}\n \n ))}\n default={activeIndex}\n active={activeIndex}\n onClick={(value) => {\n updateState([\"activeIndex\"], value);\n }}\n />\n {\n e.preventDefault();\n const slidesCount = slides.length;\n updateState([\"questions\"], slides.concat(emptySlide));\n updateState([\"activeIndex\"], slidesCount);\n }}\n >\n + {getMessage(\"imageSlideShow.addSlide\")}\n \n
\n \n
\n \n {\n newState(\"question\", value);\n }}\n />\n {\n newState(\"description\", value);\n }}\n />\n
\n \n
\n \n );\n};\nconst CarouselLayoutWrp = () => {\n return {\n preview: Carousel,\n fields: ({ getState, updateState, parent, registerValidation }) => (\n \n {\n updateState([\"arrowsPosition\"], value);\n }}\n />\n
\n \n {\n updateState([\"layoutBackground\", \"backgroundType\"], value);\n }}\n />\n {isColorOption ? (\n {\n updateState([\"layoutBackground\", \"backgroundImage\"], value);\n }}\n />\n )}\n
\n \n {\n updateState([\"layoutBackground\", \"backgroundColor\"], value);\n handleThemeColorValidator(value);\n }}\n siblings={{\n after: (\n {\n updateState(\n [\"layoutBackground\", \"backgroundColor\"],\n value\n );\n handleThemeColorValidator(value);\n }}\n showErrors={isColorError}\n pattern={COLOR_PATTERN}\n validationStrings={{\n patternMismatch: \"Please enter valid color\",\n }}\n />\n ),\n }}\n />\n
\n ) : (\n \n 
\n
\n );\n}\n","import React, { useState } from \"react\";\nimport { useEffect } from \"react\";\nimport {\n Input,\n Upload,\n Radio,\n Toggle,\n} from \"../../../../components/Form\";\nimport RichText from \"../../../../components/Layout/RichText\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport RichEditor from \"../../../../components/RichEditor\";\nconst COLOR_PATTERN = /^#([A-F0-9]{3}|[A-F0-9]{6})$/i;\n\nconst RichTextLayout = (props) => {\n const [islayoutBackgroundEnabled, setIsLayoutBackgroundEnabled] =\n useState(false);\n const { getState, updateState, registerValidation } = props;\n useEffect(() => {\n const backgroundType = getState([\"layoutBackground\", \"backgroundType\"]);\n \n const isEnabled = !!backgroundType;\n setIsLayoutBackgroundEnabled(isEnabled);\n \n if (!backgroundType) {\n updateState([\"layoutBackground\", \"backgroundType\"], \"IMAGE\");\n }\n \n handleThemeColorValidator(\n getState([\"layoutBackground\", \"backgroundColor\"]) || \"#000000\"\n );\n \n // eslint-disable-next-line\n }, []);\n \n const handleThemeColorValidator = (value) => {\n const error = {\n patternMismatch: !COLOR_PATTERN.test(value),\n valid: COLOR_PATTERN.test(value),\n };\n registerValidation([\"layoutBackground\", \"backgroundColor\"], error);\n };\n\n const handleToggleChange = () => {\n setIsLayoutBackgroundEnabled((prev) => {\n const newState = !prev;\n \n if (newState) {\n if (!getState([\"layoutBackground\", \"backgroundType\"])) {\n updateState([\"layoutBackground\", \"backgroundType\"], \"IMAGE\");\n }\n } else {\n resetBackgroundType(); \n }\n \n return newState;\n });\n };\n \n \n const resetBackgroundType = () => {\n updateState([\"layoutBackground\", \"backgroundType\"], \"\");\n updateState([\"layoutBackground\", \"backgroundColor\"], \"\");\n updateState([\"layoutBackground\", \"backgroundImage\"], \"\");\n };\n \n const isColorOption =\n getState([\"layoutBackground\", \"backgroundType\"]) === \"COLOR\";\n const colorVal = getState([\"layoutBackground\", \"backgroundColor\"]);\n const isColorError = !COLOR_PATTERN.test(colorVal);\n return (\n \n
\n );\n};\nconst RichTextLayoutWrp = () => {\n return {\n preview: RichText,\n fields: ({ getState, updateState, registerValidation }) => (\n \n {\n updateState([\"title\"], value);\n }}\n />\n
\n \n {\n updateState([\"subtitle\"], value);\n }}\n />\n
\n \n {\n updateState([\"description\"], value);\n }}\n />\n
\n \n {getMessage(\"Layout Background\")}\n
\n {islayoutBackgroundEnabled && (\n \n {\n updateState([\"layoutBackground\", \"backgroundType\"], value);\n if (value === \"IMAGE\") {\n updateState([\"layoutBackground\", \"backgroundColor\"], \"\");\n }else{\n updateState([\"layoutBackground\", \"backgroundImage\"], \"\");\n }\n }}\n />\n\n {isColorOption ? (\n {\n updateState([\"layoutBackground\", \"backgroundImage\"], value);\n updateState([\"layoutBackground\", \"backgroundColor\"], \"\");\n }}\n />\n )}\n
\n )}\n \n {\n updateState([\"layoutBackground\", \"backgroundColor\"], value);\n handleThemeColorValidator(value);\n }}\n siblings={{\n after: (\n {\n updateState(\n [\"layoutBackground\", \"backgroundColor\"],\n value\n );\n handleThemeColorValidator(value);\n }}\n showErrors={isColorError}\n pattern={COLOR_PATTERN}\n validationStrings={{\n patternMismatch: \"Please enter valid color\",\n }}\n />\n ),\n }}\n />\n
\n ) : (\n \n
\n );\n};\n\nconst SplashScreenWrapper = () => {\n return {\n preview: SplashScreen,\n fields: (props) => \n
\n );\n },\n };\n};\n\nexport default SellerCollectionLayout;\n","import React, { Component } from \"react\";\nimport img from \"./gridBlank.png\";\n\nexport default class extends Component {\n render() {\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n );\n }\n}\n","import React from \"react\";\nimport { Input, Upload } from \"../../../../components/Form\";\nimport Tabs from \"../../../../components/Tabs\";\nimport GridCollectionLayout from \"../../../../components/Layout/GridCollection\";\nimport { getMessage } from \"../../../../lib/translator\";\n\nconst GridCollection = (props) => {\n const { getState, updateState, parent } = props;\n\n const activeIndex = Number(getState([\"activeIndex\"])) || 0;\n const emptySlide = {\n imageUrl: \"\",\n imgText: \"\",\n link: \"\",\n linkText: \"\",\n bannerText: \"\",\n };\n const slides = getState([\"images\"]) || [emptySlide];\n const currentSlide = slides[activeIndex] || emptySlide;\n\n if (!getState([\"images\"])) {\n updateState([\"images\"], slides); // TODO: Move this to componentWillMount of layout\n }\n\n // Since updateStateRecursively had some issues with this structure\n const newState = (key, value) => {\n parent.setState((prevState) => {\n const newState = Object.assign({}, prevState);\n newState.values.images[activeIndex][key] = value;\n return prevState;\n });\n };\n const showDelete = slides && slides.length > 1;\n return (\n <>\n \n \n
\n \n
\n \n {\n updateState([\"title\"], value);\n }}\n />\n
\n \n
\n \n );\n};\nconst GridCollectionWrp = () => {\n return {\n preview: GridCollectionLayout,\n fields: ({ getState, updateState, parent }) => (\n \n (\n \n image {index + 1}\n {showDelete && (\n {\n slides.splice(index, 1);\n updateState(\n [\"activeIndex\"],\n index !== 0 && index === slides.length\n ? index - 1\n : index\n );\n }}\n >\n ×\n \n )}\n \n ))}\n default={activeIndex}\n active={activeIndex}\n onClick={(value) => {\n updateState([\"activeIndex\"], value);\n }}\n />\n {\n e.preventDefault();\n const slidesCount = slides.length;\n updateState([\"images\"], slides.concat(emptySlide));\n updateState([\"activeIndex\"], slidesCount);\n }}\n >\n + {getMessage(\"imageCollection.addImage\")}\n \n
\n \n
\n \n {\n newState(\"imgText\", value);\n }}\n />\n {\n newState(\"link\", value);\n }}\n />\n {\n newState(\"linkText\", value);\n }}\n />\n {\n newState(\"bannerText\", value);\n }}\n />\n
\n \n {\n newState(\"imageUrl\", value);\n }}\n />\n
\n \n
\n );\n },\n };\n};\n\nexport default InfluencerCollection;\n","import React, { Component } from \"react\";\nimport debounce from \"lodash.debounce\";\nimport FooterImg from \"../SplashScreen/image.png\"\n\nexport default class FooterLayout extends Component {\n constructor(props) {\n super(props);\n this.handleResize = debounce(this.handleResize.bind(this), 400);\n }\n\n handleResize() {\n this.setState(this.state);\n }\n\n componentDidMount() {\n window.addEventListener(\"resize\", this.handleResize);\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.handleResize);\n }\n\n render() {\n return (\n \n
\n \n
\n \n
\n \n
\n );\n }\n}\n","import React from \"react\";\nimport { Input, Upload } from \"../../../../components/Form\";\nimport Tabs from \"../../../../components/Tabs\";\nimport FooterLayout from \"../../../../components/Layout/Footer\";\nimport { getMessage } from \"../../../../lib/translator\";\n// import \"./style.css\";\n\nconst Footer = props => {\n const { getState, updateState } = props;\n\n const emptyItem = { text: \"\", url: \"\", image: \"\" };\n const emptySection = { text: \"\", items: [emptyItem] };\n const sections = getState([\"sections\"]) || [emptySection];\n const activeSectionIndex = Number(getState([\"activeSectionIndex\"])) || 0;\n const activeItemIndex = Number(getState([\"activeItemIndex\"])) || 0;\n\n const activeSection = sections[activeSectionIndex] || emptySection;\n const activeItem = activeSection.items[activeItemIndex] || emptyItem;\n\n // Section Management\n const addSection = () => {\n const newSections = [...sections, { text: \"\", items: [emptyItem] }];\n updateState([\"sections\"], newSections);\n updateState([\"activeSectionIndex\"], newSections.length - 1);\n updateState([\"activeItemIndex\"], 0);\n };\n\n const deleteSection = index => {\n const updatedSections = sections.filter((_, i) => i !== index);\n updateState([\"sections\"], updatedSections);\n updateState([\"activeSectionIndex\"], Math.max(0, index - 1));\n updateState([\"activeItemIndex\"], 0);\n };\n\n const updateSectionText = text => {\n const updatedSections = [...sections];\n updatedSections[activeSectionIndex].text = text;\n updateState([\"sections\"], updatedSections);\n };\n\n // Item Management within a Section\n const addItem = () => {\n const updatedSections = [...sections];\n updatedSections[activeSectionIndex].items.push(emptyItem);\n updateState([\"sections\"], updatedSections);\n updateState(\n [\"activeItemIndex\"],\n updatedSections[activeSectionIndex].items.length - 1\n );\n };\n\n const deleteItem = index => {\n const updatedSections = [...sections];\n updatedSections[activeSectionIndex].items.splice(index, 1);\n updateState([\"sections\"], updatedSections);\n updateState([\"activeItemIndex\"], Math.max(0, index - 1));\n };\n\n const updateItem = (key, value) => {\n const updatedSections = [...sections];\n updatedSections[activeSectionIndex].items[activeItemIndex][key] = value;\n updateState([\"sections\"], updatedSections);\n };\n\n return (\n <>\n {/* Section Tabs */}\n \n 
\n
\n \n (\n \n {`Section ${index + 1}`}\n {sections.length > 1 && (\n deleteSection(index)}\n >\n ×\n \n )}\n \n ))}\n default={activeSectionIndex}\n active={activeSectionIndex}\n onClick={value => {\n updateState([\"activeSectionIndex\"], value);\n updateState([\"activeItemIndex\"], 0); // Reset item index on section change\n }}\n />\n {\n e.preventDefault();\n addSection();\n }}\n >\n + {getMessage(\"footer.addSection\")}\n \n
\n\n {/* Section Content */}\n \n
\n\n {/* Item Tabs */}\n \n updateSectionText(value)}\n required\n />\n
\n \n (\n \n {`Item ${index + 1}`}\n {activeSection.items.length > 1 && (\n deleteItem(index)}>\n ×\n \n )}\n \n ))}\n default={activeItemIndex}\n active={activeItemIndex}\n onClick={value => updateState([\"activeItemIndex\"], value)}\n />\n {\n e.preventDefault();\n addItem();\n }}\n >\n + {getMessage(\"footer.addItem\")}\n \n
\n\n {/* Item Content */}\n \n
\n \n );\n};\n\nconst FooterWrapper = () => {\n return {\n preview: FooterLayout,\n fields: ({ getState, updateState }) => (\n \n ),\n };\n};\n\nexport default FooterWrapper;\n","import React, { Component } from \"react\";\nimport debounce from \"lodash.debounce\";\nimport img from './ImageCollection.png'\n\nexport default class extends Component {\n constructor(props) {\n super(props);\n this.handleResize = debounce(this.handleResize.bind(this), 400);\n }\n\n handleResize() {\n this.setState(this.state);\n }\n\n componentDidMount() {\n window.addEventListener(\"resize\", this.handleResize);\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.handleResize);\n }\n\n render() {\n return (\n \n updateItem(\"text\", value)}\n required\n />\n
\n \n updateItem(\"url\", value)}\n required\n />\n
\n \n updateItem(\"image\", value)}\n />\n
\n \n
\n );\n }\n}\n","// eslint-disable-next-line\nimport React from \"react\";\nimport { CheckboxGroup } from \"../../../../../components/Form\";\nimport { getMessage } from \"../../../../../lib/translator\";\n\nexport default function LayoutVisibility({\n stateKey = \"allowedPlatforms\",\n getState,\n updateState,\n className,\n ...props\n}) {\n return (\n <>\n \n \n
\n \n
\n \n );\n}\n","import React, { useEffect } from \"react\";\nimport { Input, Upload } from \"../../../../components/Form\";\nimport Tabs from \"../../../../components/Tabs\";\nimport ImagecollectionLayout from \"../../../../components/Layout/ImageCollection\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport { Radio } from \"../../../../components/Form\";\nimport LayoutVisibility from \"./HelperComponents/LayoutVisibility\";\n\nconst ImageCollection = (props) => {\n const { getState, updateState, parent } = props;\n\n const activeIndex = Number(getState([\"activeIndex\"])) || 0;\n const emptySlide = {\n imageUrl: \"\",\n text: \"\",\n link: \"\",\n };\n const slides = getState([\"images\"]) || [emptySlide];\n const currentSlide = slides[activeIndex] || emptySlide;\n\n if (!getState([\"images\"])) {\n updateState([\"images\"], slides); // TODO: Move this to componentWillMount of layout\n }\n\n // Since updateStateRecursively had some issues with this structure\n const newState = (key, value) => {\n parent.setState((prevState) => {\n const newState = Object.assign({}, prevState);\n newState.values.images[activeIndex][key] = value;\n return prevState;\n });\n };\n const showDelete = slides && slides.length > 1;\n\n useEffect(() => {\n if (!getState([\"layoutType\"])) {\n updateState([\"layoutType\"], \"GRID\");\n }\n if (!getState([\"loadMoreType\"])) {\n updateState([\"loadMoreType\"], \"INFINITE\");\n }\n // eslint-disable-next-line\n }, [slides]);\n return (\n <>\n \n {\n updateState([stateKey], value);\n }}\n className={\"\"}\n />\n
\n {props.children}
\n \n
\n \n {\n updateState([\"title\"], value);\n }}\n />\n {\n updateState([\"layoutType\"], value);\n }}\n />\n
\n \n {\n updateState([\"subtitle\"], value);\n }}\n />\n {\n updateState([\"loadMoreType\"], value);\n }}\n />\n
\n \n
\n \n );\n};\nconst ImageCollectionWrp = () => {\n return {\n preview: ImagecollectionLayout,\n fields: ({ getState, updateState, parent }) => (\n \n (\n \n image {index + 1}\n {showDelete && (\n {\n slides.splice(index, 1);\n updateState(\n [\"activeIndex\"],\n index !== 0 && index === slides.length\n ? index - 1\n : index\n );\n }}\n >\n ×\n \n )}\n \n ))}\n default={activeIndex}\n active={activeIndex}\n onClick={(value) => {\n updateState([\"activeIndex\"], value);\n }}\n />\n {\n e.preventDefault();\n const slidesCount = slides.length;\n updateState([\"images\"], slides.concat(emptySlide));\n updateState([\"activeIndex\"], slidesCount);\n }}\n >\n + {getMessage(\"imageCollection.addImage\")}\n \n
\n \n
\n \n {\n newState(\"link\", value);\n }}\n />\n {\n newState(\"text\", value);\n }}\n />\n
\n \n
\n \n {\n newState(\"imageUrl\", value);\n }}\n />\n
\n \n {isShowLayout && (\n <>\n \n
\n {\n element = el;\n }}\n >\n
\n \n )}\n \n );\n});\n\nconst SortableList = SortableContainer((props) => {\n return (\n \n \n {value.name.replace(/([A-Z])/g, \" $1\").trim()}\n \n
\n \n {![\"MarketingBanners\"].includes(value.name) && (\n {\n onEditClick(layoutIndex, element.offsetTop);\n }}\n >\n Edit\n \n )}\n {\n e.preventDefault();\n onRemoveClick(layoutIndex);\n }}\n >\n Remove\n \n
\n \n {Array.isArray(props.items) &&\n props.items.map((value, index) => (\n
\n );\n});\n\n// Support only for Fashion Trends theme as of now\nconst dualImageLayouts = [\"DualImageBanner\", \"DualImage\"];\n\n// Layout components mapping with their names\nconst availableComponents = {\n \"E-commerce\": {\n ProductCollection: ProductCollection,\n CategoryCollection: ProductCollection,\n BrandCollection: ProductCollection,\n SearchResults: ProductCollection,\n DualImage: DualImageGrid,\n },\n Images: {\n ImageWithText: ImageWithText,\n },\n Text: {\n RichText: RichText,\n },\n};\n\nconst DragHandle = SortableHandle((props) => (\n {props.children}\n));\n\nexport default class BlogForm extends BaseForm {\n constructor(props) {\n super(props);\n this.domain = getSession().organization.domain;\n this.state.showImageEdit = false;\n this.state.editingIndex = null;\n this.state.showLayoutPopup = false;\n this.state.showDialog = false;\n this.state.currentComponent = \"E-commerce\";\n this.pages = [\"blog\"];\n this.data = [];\n this.currentLayout = {};\n this.selectOptionsData = {\n categories: [],\n tags: [],\n brands: [],\n };\n }\n\n getSelectOptionsData(selectField, dataFor) {\n const api = new API({\n url: `/catalogue-service/${selectField}`,\n });\n\n api\n .get()\n .then((response) => {\n if (response.status === \"ERROR\") {\n console.error(`Error in fetching details of ${dataFor}`);\n return;\n }\n this.selectOptionsData[dataFor] = [];\n if (!response.data[selectField]) {\n response.data[selectField] = [];\n }\n this.selectOptionsData[dataFor] = response.data[selectField].map(\n function (field) {\n return { text: field.name, value: field.slug };\n }\n );\n this.selectOptionsData[dataFor].push(\n { text: `All ${dataFor}`, value: \"ALL\" },\n { text: `Current ${selectField}`, value: \"CURRENT\" }\n );\n const state = `${dataFor}DataLoaded`;\n this.setState({\n loaded: true,\n [state]: true,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n\n fetchScheduledLayout() {\n this.setState({\n loaded: false,\n });\n const page = this.pages[0];\n let url = `/website-service/layout`;\n let params = { id: \"blog\", url: this.state.values.url };\n\n if (this.state[page]) {\n params.url = this.state[page];\n }\n\n const api = new API({\n url: url,\n });\n api.get(params).then((response) => {\n if (response.status === \"ERROR\") {\n console.error(`Error in fetching details for ${page}`); // Todo: Handle this error\n return;\n }\n if (!response.data?.page?.length) {\n this.data = [];\n this.setState({ loaded: true });\n return;\n }\n if (page !== \"search\") {\n delete availableComponents[\"E-commerce\"][\"SearchResults\"];\n } else {\n availableComponents[\"E-commerce\"][\"SearchResults\"] = ProductCollection;\n }\n\n if (page !== \"category\") {\n delete availableComponents[\"E-commerce\"][\"SubCategoryCollection\"];\n } else {\n availableComponents[\"E-commerce\"][\"SubCategoryCollection\"] =\n ProductCollection;\n }\n this.pageId = response.data?.page?.[0].pageId;\n this.data = this.formatResponse(response.data.page[0].layouts);\n this.originalData = this.data;\n\n if (!this.state.categoryDataLoaded) {\n this.getSelectOptionsData(\"category\", \"categories\");\n }\n if (this.pages.includes(\"tag\")) {\n if (!this.state.tagDataLoaded) {\n this.getSelectOptionsData(\"tag\", \"tags\");\n }\n }\n if (this.pages.includes(\"brand\")) {\n if (!this.state.brandDataLoaded) {\n this.getSelectOptionsData(\"brand\", \"brands\");\n }\n }\n });\n }\n\n componentDidMount() {\n this.fetchScheduledLayout();\n }\n\n addLayout = (layoutName, data) => {\n const layout = {\n name: layoutName,\n data: data,\n };\n this.data.push(layout);\n this.setState({\n showLayoutPopup: false,\n });\n };\n\n showDelete = (index) => {\n this.setState({\n showDelete: true,\n deleteIndex: index,\n });\n };\n\n onSortEnd = ({ oldIndex, newIndex }) => {\n this.data = arrayMove(this.data, oldIndex, newIndex);\n this.forceUpdate();\n };\n\n onSubmit = (values) => {\n this.setState(\n (prevState) => Object.assign({}, prevState, { values }),\n this._submitHandler\n );\n };\n\n getRespectiveComponents = (component) => {\n this.setState({\n currentComponent: component,\n });\n };\n\n onEditClick = (layoutIndex, top) => {\n const layout = this.data[layoutIndex];\n Object.assign(this.currentLayout, layout);\n this.currentLayout.top = top;\n this.setState({\n editing: true,\n layoutIndex,\n });\n };\n\n onRemoveClick = (index) => {\n this.saveLayouts(index);\n this.setState({\n showPrompt: false,\n deleteIndex: \"\",\n });\n };\n\n showPrompt = (index) => {\n this.setState({\n showPrompt: true,\n deleteIndex: index,\n });\n };\n\n onAddClick = () => {\n this.setState({\n showLayoutPopup: true,\n });\n };\n\n listView = () => {\n const View = () => {\n if (this.state.loaded) {\n return (\n <>\n \n —————————\n \n ————————\n
\n \n );\n }\n return \n
\n );\n };\n\n formatResponse(response) {\n let newResponse = Object.assign([], response);\n const page = this.pages[this.state.page];\n newResponse.forEach((layout) => {\n if (\n layout.name === \"CategoryCollection\" ||\n layout.name === \"BrandCollection\"\n ) {\n let key = layout.name === \"CategoryCollection\" ? \"category\" : \"brand\";\n let collection = (layout.value && layout.value.collection) || [];\n collection = collection.map((val) => val[key]);\n layout[\"data\"][key] = collection;\n layout.value && delete layout.value.collection;\n }\n if (\n layout.name === \"CategoryCollection\" &&\n layout.data &&\n layout.data.subcategories &&\n page === \"category\"\n ) {\n layout.name = \"SubCategoryCollection\";\n }\n });\n return newResponse;\n }\n\n saveLayouts = (index, formData = null) => {\n this.setState({\n submitting: true,\n });\n // if (formData && formData.name === AppointmentFormLayout) {\n // this.appointmentForm(formData);\n // return;\n // }\n\n let data = this.data;\n if (!formData) {\n data =\n index !== undefined\n ? this.data.filter((_, idx) => idx !== index)\n : this.data;\n } else {\n data = data.filter((_, i) => i !== index);\n let layoutname = formData.name;\n delete formData.name;\n data.splice(index, 0, { name: layoutname, data: { ...formData } });\n }\n if (!index && index !== 0) {\n data = this.data;\n }\n const page = this.pages[0];\n let url = `/website-service/layout/${page}`;\n data &&\n data.forEach((layout, i) => {\n const layoutName = layout.name;\n if (layoutName === \"SubCategoryCollection\") {\n layout.name = \"CategoryCollection\";\n layout.data.subcategories = true;\n }\n\n if (layoutName === \"CategoryCollection\") {\n if (formData && i === index) {\n layout.data.categoryIds =\n layout.data.category &&\n layout.data.category\n .map((category) => category.id)\n .filter(Boolean);\n delete layout.data.category;\n }\n }\n if (layoutName === \"BlogCollection\") {\n if (formData && i === index) {\n layout.data.blogIds =\n layout.data.blog &&\n layout.data.blog.map((blog) => blog.id).filter(Boolean);\n delete layout.data.blog;\n }\n }\n if (layoutName === \"BrandCollection\") {\n if (formData && i === index) {\n layout.data.brandIds =\n layout.data.brand &&\n layout.data.brand.map((brand) => brand.id).filter(Boolean);\n }\n delete layout.data.brand;\n }\n if (layoutName === \"ProductCollection\") {\n layout.data && delete layout.data.collection;\n if (layout.data.hasImage === -1) {\n layout.data.hasImage = \"\";\n }\n if (layout.data.hasStock === -1) {\n layout.data.hasStock = \"\";\n }\n if (layout.data.hasOffers === -1) {\n layout.data.hasOffers = \"\";\n }\n if (\n layout.data.category &&\n typeof layout.data.category === \"object\"\n ) {\n layout.data.category = layout.data.category.slug;\n }\n if (layout.data.brand && typeof layout.data.brand === \"object\") {\n layout.data.brand = layout.data.brand.slug;\n }\n if (layout.data.tag && typeof layout.data.tag === \"object\") {\n layout.data.tag = layout.data.tag.slug;\n }\n }\n if (layout.name === \"ImageSlideShow\") {\n layout.data &&\n layout.data.activeIndex &&\n delete layout.data.activeIndex;\n }\n\n // if (layout.name === AppointmentFormLayout) {\n // layout.data = {};\n // }\n\n delete layout.value;\n layout.data && delete layout.data.collection;\n });\n\n const api = new API({\n url: url,\n });\n let params = {\n layouts: data,\n url: this.state.values?.url,\n };\n\n // if (page === 'tag' && !this.state.hideFilter) {\n // params.hideFilter = true\n // }\n\n if (page === \"tag\") {\n params.showFilter = this.state.showFilter;\n }\n if (\n page !== \"home\" &&\n this.state[page] !== \"\" &&\n this.state[page] !== \"ALL\" &&\n this.state[page]\n ) {\n params.url = `${this.state[page]}`;\n }\n\n api.put(params).then(\n (response) => {\n this.data = this.formatResponse(response.data.page.layouts);\n this.originalData = this.data;\n this.pageId = response.data.page.pageId;\n this.setState({\n editing: false,\n submitting: false,\n showDialog: true,\n error: false,\n errors: {},\n });\n },\n (error) => {\n this.setState({\n showDialog: true,\n error: error.message,\n submitting: false,\n });\n }\n );\n };\n\n reorderLayout = () => {\n this.saveLayouts();\n };\n\n cancelReordering = () => {\n this.data = this.originalData;\n this.forceUpdate();\n };\n render() {\n const { CancelButton } = this.buttons;\n const { Form } = this.components;\n\n const View = () => {\n if (this.state.editing) {\n const layout = this.data[this.state.layoutIndex];\n const layoutInfo =\n getLayout(\n this.state.page,\n layout.name,\n this.pages,\n this.selectOptionsData\n ) || {};\n const top = this.currentLayout.top;\n return (\n \n \n {getMessage(\"order.form.cancel.text\")}\n \n \n save\n \n
\n )}\n \n
\n \n {\n e.preventDefault();\n let updates = {\n isDraft: false,\n };\n if (!this.state.values.publishTime) {\n let now = new Date();\n updates.publishTime = `${now.getFullYear()}-${String(\n now.getMonth() + 1\n ).padStart(2, \"0\")}-${String(now.getDate()).padStart(\n 2,\n \"0\"\n )} ${now.toTimeString().split(\" \")[0]}`;\n }\n this.onSubmit(\n Object.assign({}, cloneMutables(this.state.values), updates)\n );\n }}\n >\n {getMessage(\"marketing.blog.form.submitText\")}\n \n {/* */}\n {getMessage(\"cancel.text\")} \n
\n \n \n );\n }\n}\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport ListingPageWithRoutes from \"../../../containers/ListingPage/listingRouter\";\nimport { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport BlogForm from \"./Form\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\nimport { Dialog } from \"../../../components/Popup\";\nimport API from \"../../../lib/api\";\nimport { getMessage } from \"../../../lib/translator\";\nimport { getPrintableTime } from \"../../../lib/datetime\";\nimport moment from \"moment\";\nimport { getSiteURL } from \"../../../lib/commonlyused\";\n\nimport \"./style.css\";\nimport emptyIcon from \"./blogs-empty.svg\";\n\nclass BlogActions extends Component {\n constructor(props) {\n super(props);\n this.state = {\n statusAction: null,\n };\n this.showStatusActionDialog = this.showStatusActionDialog.bind(this);\n this.hideStatusActionDialog = this.hideStatusActionDialog.bind(this);\n }\n showStatusActionDialog(statusAction) {\n this.setState({ statusAction });\n }\n hideStatusActionDialog() {\n this.setState({ statusAction: null });\n }\n componentWillReceiveProps() {\n this.setState({ statusAction: false });\n }\n setPublishStatus(isDraft) {\n let id = this.props.id;\n let api = new API({ url: `/blog-service/blog/${id}` });\n let publishTime = isDraft\n ? null\n : moment().utc().format(\"YYYY-MM-DD HH:mm:ss\");\n return api\n .put({ isDraft, publishTime })\n .then((response) => {\n this.props.onAction(\n TABLE_ACTIONS.REFRESH,\n { id },\n { isDraft, publishTime }\n );\n }, console.error)\n .catch((error) => {\n console.error(error);\n });\n }\n render() {\n let { id, isDraft, url } = this.props;\n const siteUrl = getSiteURL();\n let blogLink = `${siteUrl}/blog/${url}`;\n return (\n \n {\n this.props.isDraft\n ? this.setPublishStatus(false)\n : this.setPublishStatus(true);\n }}\n close={this.hideStatusActionDialog}\n closeText={getMessage(\"cancel.text\")}\n okText={\n isDraft\n ? getMessage(\"marketing.blog.form.submitText\")\n : getMessage(\"marketing.blog.table.action.unpublish\")\n }\n />\n \n \n {getMessage(\"marketing.action.edit.text\")}\n \n \n \n {\n this.showStatusActionDialog(id);\n }}\n >\n {isDraft\n ? getMessage(\"marketing.blog.form.submitText\")\n : getMessage(\"marketing.blog.table.action.unpublish\")}\n
\n \n \n \n +{\" \"}\n {getMessage(\"marketing.blog.add.text\")}\n \n
\n );\n}\n\nconst emptyState = {\n icon: emptyIcon,\n message: getMessage(\"marketing.blog.helpItems.message\"),\n additionalViews: [AddBlog],\n};\n\nconst tableProperties = {\n headers: [\n getMessage(\"marketing.title.heading.text\"),\n getMessage(\"marketing.table.heading.publishTime\"),\n getMessage(\"marketing.table.heading.author\"),\n // getMessage('marketing.table.heading.interaction'),\n getMessage(\"marketing.actions.text\"),\n ],\n row: ({ id, title, publishTime, author, isDraft, onAction, url }) => (\n \n
\n )}\n \n \n {publishTime\n ? getPrintableTime(publishTime).split(\",\")[0]\n : null}\n \n
\n \n \n {publishTime\n ? getPrintableTime(publishTime).split(\",\")[1]\n : null}\n \n
\n \n {getMessage(headingKey)}\n
\n \n
\n );\n }\n}\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport ListingPageWithRoutes from \"../../../containers/ListingPage/listingRouter\";\nimport { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport RecipeForm from \"./Form\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\nimport { Dialog } from \"../../../components/Popup\";\nimport { getMessage } from \"../../../lib/translator\";\nimport { exportText, importText } from \"../../../components/RichEditor\";\nimport API from \"../../../lib/api\";\nimport { get } from \"../../../lib/storage\";\n\nimport \"./style.css\";\nimport emptyIcon from \"./recipe-empty.svg\";\n\nclass RecipeActions extends Component {\n constructor(props) {\n super(props);\n this.state = {\n statusAction: null,\n };\n this.showStatusActionDialog = this.showStatusActionDialog.bind(this);\n this.hideStatusActionDialog = this.hideStatusActionDialog.bind(this);\n }\n showStatusActionDialog(statusAction) {\n this.setState({ statusAction });\n }\n hideStatusActionDialog() {\n this.setState({ statusAction: false });\n }\n setPublishStatus(isDraft) {\n let id = this.props.id;\n let api = new API({ url: `/recipe-service/recipe/${id}` });\n return api\n .put({ isDraft })\n .then((response) => {\n this.props.onAction(TABLE_ACTIONS.EDIT, { id }, { isDraft });\n this.hideStatusActionDialog();\n }, console.error)\n .catch((error) => {\n console.error(error);\n });\n }\n render() {\n let { id, isDraft } = this.props;\n return (\n \n {\n this.props.isDraft\n ? this.setPublishStatus(false)\n : this.setPublishStatus(true);\n }}\n close={this.hideStatusActionDialog}\n closeText={getMessage(\"cancel.text\")}\n okText={\n isDraft\n ? getMessage(\"marketing.recipe.table.action.publish\")\n : getMessage(\"marketing.recipe.table.action.unpublish\")\n }\n />\n \n \n {getMessage(\"marketing.action.edit.text\")}\n \n \n \n {\n this.showStatusActionDialog(id);\n }}\n >\n {isDraft\n ? getMessage(\"marketing.recipe.table.action.publish\")\n : getMessage(\"marketing.recipe.table.action.unpublish\")}\n
\n \n \n \n + \n {getMessage(\"marketing.recipe.add.text\")}\n \n
\n );\n}\n\nconst emptyState = {\n icon: emptyIcon,\n message: getMessage(\"marketing.recipe.helpItems.message\"),\n additionalViews: [AddRecipe],\n};\n\nconst tableProperties = {\n headers: [\n getMessage(\"marketing.title.heading.text\"),\n getMessage(\"marketing.table.heading.recipe.description\"),\n getMessage(\"marketing.table.heading.status\"),\n getMessage(\"marketing.actions.text\"),\n ],\n row: ({ id, name, createdAt, author, isDraft, onAction, description, hasInfluencer }) => (\n \n deleteKey()}\n >\n {getMessage(\"delete\")}\n \n {renderInputAndSelect()}\n
\n );\n});\n\nconst SortableList = SortableContainer(\n ({ items, deleteKey, renderInputAndSelect, selectedTypes }) => {\n return (\n \n {items?.map((platform, index) => {\n return (\n deleteKey(index)}\n renderInputAndSelect={() =>\n renderInputAndSelect(index, selectedTypes)\n }\n />\n );\n })}\n
\n );\n }\n);\n\nexport default class InfluencerForm extends BaseForm {\n constructor(props) {\n super(props);\n this.direction = get(\"dataLang\") === \"ar\" ? \"rtl\" : \"ltr\";\n }\n\n addKey = () => {\n this.setState((prevState) => ({\n values: {\n ...prevState?.values,\n metaData: [\n ...(prevState?.values?.metaData || []),\n { socialMediaType: \"\", socialMediaId: \"\" },\n ],\n },\n }));\n };\n\n deleteKey = (index) => {\n this.setState((prevState) => {\n const updatedValuesMetaData = [...(prevState?.values?.metaData || [])];\n const deletedType = updatedValuesMetaData[index]?.socialMediaType;\n updatedValuesMetaData.splice(index, 1);\n const updatedDefault =\n prevState.values?.default === deletedType\n ? null\n : prevState.values?.default;\n\n return {\n values: {\n ...prevState?.values,\n metaData: updatedValuesMetaData,\n default: updatedDefault,\n },\n };\n });\n };\n\n onSortEnd = ({ oldIndex, newIndex }) => {\n this.setState((prevState) => {\n const updatedMetaData = arrayMove(\n prevState?.values?.metaData || [],\n oldIndex,\n newIndex\n );\n return {\n values: {\n ...prevState?.values,\n metaData: updatedMetaData,\n },\n };\n });\n };\n\n renderInputAndSelect = (index, selectedTypes) => {\n const selectedTypeOptions =\n this.state.values?.metaData?.[index]?.socialMediaType;\n\n const availableOptions = SOCIAL_MEDIA?.filter(\n ({ value }) =>\n !selectedTypes?.includes(value) || value === selectedTypeOptions\n );\n\n return (\n <>\n \n
\n );\n }\n}\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport ListingPageWithRoutes from \"../../../containers/ListingPage/listingRouter\";\nimport { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport InfluencerForm from \"./Form\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\nimport { Dialog } from \"../../../components/Popup\";\nimport { getMessage } from \"../../../lib/translator\";\nimport API from \"../../../lib/api\";\nimport { get } from \"../../../lib/storage\";\n\nimport \"./style.css\";\nimport emptyIcon from \"./influencer-empty.svg\";\n\nclass InfluencerActions extends Component {\n constructor(props) {\n super(props);\n this.state = {\n statusAction: null,\n };\n this.showStatusActionDialog = this.showStatusActionDialog.bind(this);\n this.hideStatusActionDialog = this.hideStatusActionDialog.bind(this);\n }\n showStatusActionDialog(statusAction) {\n this.setState({ statusAction });\n }\n hideStatusActionDialog() {\n this.setState({ statusAction: false });\n }\n setPublishStatus(status) {\n let id = this.props.id;\n let api = new API({ url: `/recipe-service/influencer/${id}` });\n return api\n .put({ status })\n .then((response) => {\n this.props.onAction(TABLE_ACTIONS.EDIT, { id }, { status });\n this.hideStatusActionDialog();\n }, console.error)\n .catch((error) => {\n console.error(error);\n });\n }\n render() {\n let { id, status } = this.props;\n const isEnabled = status === \"ENABLED\";\n return (\n \n {\n isEnabled\n ? this.setPublishStatus(\"HIDDEN\")\n : this.setPublishStatus(\"ENABLED\");\n }}\n close={this.hideStatusActionDialog}\n closeText={getMessage(\"cancel.text\")}\n okText={\n isEnabled\n ? getMessage(\"marketing.influencer.table.action.hide\")\n : getMessage(\"marketing.influencer.table.action.enable\")\n }\n />\n \n \n {getMessage(\"marketing.action.edit.text\")}\n \n \n \n {\n this.showStatusActionDialog(id);\n }}\n >\n {isEnabled\n ? getMessage(\"marketing.influencer.table.action.hide\")\n : getMessage(\"marketing.influencer.table.action.enable\")}\n
\n \n \n \n + \n \n {getMessage(\"marketing.influencer.add.text\")}\n \n \n
\n );\n}\n\nconst emptyState = {\n icon: emptyIcon,\n message: getMessage(\"marketing.influencer.helpItems.message\"),\n additionalViews: [AddInfluencer],\n};\n\nconst tableProperties = {\n headers: [\n getMessage(\"marketing.influencer.name\"),\n getMessage(\"marketing.influencer.description\"),\n getMessage(\"marketing.influencer.status\"),\n getMessage(\"marketing.influencer.action.text\"),\n ],\n row: ({ id, name, isDraft, onAction, description, status }) => (\n \n \n
\n );\n } else {\n return (\n {getMessage(\"Segments\")}
\n \n this.selectSegment(e)}\n readOnly={isDisabled}\n />\n
\n \n {segmentsLoaded &&\n tagsLoaded &&\n data &&\n data.map((segment, segmentIndex) => {\n const id = segment.id;\n const variables = this.segments[id];\n if (variables) {\n return (\n \n this.deleteSegment(segmentIndex)}\n >\n \n {getMessage(\"deleteText\")}\n \n
\n {getMessage(camelToReading(id))}
\n \n {Object.entries(variables)\n .reverse()\n .map(([key, type], index) => {\n let extraProps = {};\n if (key === \"endDate\") {\n extraProps = {\n allowAllDates: true,\n };\n } else {\n extraProps = {\n isOutsideRange: (day) => moment().diff(day) < 0,\n };\n }\n const obj = Components[id] || Components[type];\n const config = obj.config || {};\n if (obj) {\n const Component = obj.component;\n return (\n
\n \n
\n );\n }\n return null;\n })\n .filter(Boolean)}\n \n
\n );\n }\n })}\n \n );\n }\n}\n\nexport default SegmentsForm;\n","import React from \"react\";\nimport {\n BaseForm,\n Input,\n Radio,\n VALIDATION_TYPES,\n Textarea,\n CheckboxGroup,\n DateRangePicker,\n Select,\n} from \"../../../../components/Form\";\nimport SelectStoresSearch from \"../../../../components/SelectStoresSearch\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport { getCurrency } from \"../../../../lib/userDetails\";\nimport SegmentsForm from \"../../../../components/SegmentsForm\";\nimport { slotTimes } from \"../../../../lib/datetime\";\nimport \"./style.css\";\nimport moment from \"moment\";\n\nfunction checkForNegativeValue(value) {\n if (value && value < 0) {\n return getMessage(\"input.invalidNumber\");\n }\n return \"\";\n}\n\nexport default class CouponForm extends BaseForm {\n constructor(props) {\n super(props);\n const { value } = props;\n this.state.values.type = (value && value.type) || \"PERCENT\";\n this.state.values.discountType =\n (value && value.discountType) || \"DIRECT_DISCOUNT\";\n this.state.values.validOnDays = (value && value.validOnDays) || [\n \"MON\",\n \"TUE\",\n \"WED\",\n \"THU\",\n \"FRI\",\n \"SAT\",\n \"SUN\",\n ];\n this.state.values.userSet = (value && value.userSet) || { data: [] };\n this.state.tagsLoaded = true;\n }\n\n timeRangeDiable = (value) => {\n if (this.state?.values?.dateRange?.startDate) {\n if (\n `${this.state.values.dateRange.startDate} ${value}` <\n `${moment().format(\"YYYY-MM-DD HH:mm:ss\")}`\n ) {\n return true;\n }\n }\n return false;\n };\n\n render() {\n const { SubmitButton, CancelButton } = this.buttons;\n const { Form } = this.components;\n const { options } = this.props;\n const multiStores = options && options.multiStores;\n const bulk = options && options.bulk;\n const {\n discount,\n maxSingleRedemption,\n maxRedemption,\n minOrderAmount,\n maxDiscountAmount,\n } = this.state.values;\n const negDiscountErr = checkForNegativeValue(discount);\n const negSingleRedemptionErr = checkForNegativeValue(maxSingleRedemption);\n const negRedemptionErr = checkForNegativeValue(maxRedemption);\n const negOrderAmountErr = checkForNegativeValue(minOrderAmount);\n const negMaxDiscountErr = checkForNegativeValue(maxDiscountAmount);\n return (\n \n this.deleteSegment(segmentIndex)}\n >\n \n {getMessage(\"deleteText\")}\n \n
\n {getMessage(camelToReading(id))}
\n \n
\n \n \n {getMessage(\"coupon.form.submit.text\")}\n \n \n {getMessage(\"coupon.form.cancel.text\")}\n \n
\n \n \n );\n }\n}\n","import React from \"react\";\nimport {\n BaseForm,\n Input,\n Radio,\n VALIDATION_TYPES,\n} from \"../../../../components/Form\";\n\nimport { getMessage } from \"../../../../lib/translator\";\n\nexport default class CouponFiltersForm extends BaseForm {\n render() {\n const { SubmitButton, ClearButton } = this.buttons;\n const { Form } = this.components;\n return (\n \n );\n }\n}\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\n\nimport { Row, Cell } from \"../../../components/Table\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\nimport { Dialog, Popup } from \"../../../components/Popup\";\nimport { Input, BaseForm, Toggle } from \"../../../components/Form\";\n\nimport { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport ListingPageWithRoutes from \"../../../containers/ListingPage/listingRouter\";\n\nimport { getMessage } from \"../../../lib/translator\";\nimport { isExtensionEnabled, getStores } from \"../../../lib/auth\";\nimport { getCurrency } from \"../../../lib/userDetails\";\n\nimport API from \"../../../lib/api\";\n\nimport CouponForm from \"./Form\";\nimport CouponFilters from \"./Filters\";\nimport emptyIcon from \"./coupons-empty.svg\";\nimport downloadIcon from \"./download.svg\";\nimport { formatDataBeforeSubmit } from \"../../../components/SegmentsForm\";\nimport {\n utcToLocalTime,\n getPrintableTime,\n localTimeToUtc,\n getStandradDateTime,\n} from \"../../../lib/datetime\";\n\nimport \"./style.css\";\nimport moment from \"moment\";\n\nfunction AddCoupon() {\n return (\n \n \n + {getMessage(\"coupon.add.text\")}\n \n
\n );\n}\n\nconst emptyState = {\n icon: emptyIcon,\n message: getMessage(\"coupon.helpItems.message\"),\n additionalViews: [AddCoupon],\n};\n\nclass CouponActions extends Component {\n constructor(props) {\n super(props);\n this.state = {\n showDialog: false,\n };\n this.showDialog = this.showDialog.bind(this);\n this.hideDialog = this.hideDialog.bind(this);\n }\n\n showDialog(id) {\n this.setState({\n showDialog: id,\n });\n }\n\n hideDialog() {\n this.setState({\n showDialog: false,\n });\n }\n\n render() {\n const { id, status, route, onAction, startDate } = this.props;\n let dropDownItem = null;\n let currentDate = new Date();\n let startDateFormat = new Date(startDate);\n if (startDateFormat < currentDate) {\n dropDownItem = (\n \n \n \n {getMessage(\"coupon.action.edit\")}\n \n \n this.showDialog(id)}>\n {status === \"ENABLED\"\n ? getMessage(\"coupon.action.disable\")\n : getMessage(\"coupon.action.enable\")}\n \n {dropDownItem}\n \n {\n {\n onAction(TABLE_ACTIONS.UPDATE, { id }, { status: targetStatus });\n this.hideDialog();\n }}\n close={this.hideDialog}\n closeText={getMessage(\"coupon.dialog.cancelText\")}\n okText={getMessage(\"coupon.dialog.okText\")}\n />\n }\n
\n );\n }\n}\n\nconst tableProperties = (route, apiKey, isMobileView) => {\n return {\n headers: [\n getMessage(\"coupon.header.coupon\"),\n getMessage(\"coupon.header.discount\"),\n getMessage(\"coupon.header.limit\"),\n getMessage(\"coupon.header.validity\"),\n getMessage(\"coupon.header.status\"),\n getMessage(\"coupon.header.actions\"),\n ],\n row: ({\n id,\n couponCode,\n prefix,\n suffix,\n type,\n discount,\n discountType,\n maxRedemption,\n maxSingleRedemption,\n startDate,\n expiryDate,\n comment,\n minOrderAmount,\n maxDiscountAmount,\n validOnPayment,\n validOnUser,\n validOnDays,\n validOnSlots,\n status,\n onAction,\n }) => (\n \n
\n ) : (\n \n {type === \"PERCENT\"\n ? `${Math.round(discount)}%`\n : `${getCurrency().symbol} ${discount}`}\n
\n \n {discountType === \"DIRECT_DISCOUNT\"\n ? \"Cart Discount\"\n : \"Cashback\"}\n \n \n {`${getMessage(\n \"coupon.header.discount\"\n )}: `}\n\n
\n )}\n \n {type === \"PERCENT\"\n ? `${Math.round(discount)}%`\n : `${getCurrency().symbol} ${discount}`}\n
\n \n {discountType === \"DIRECT_DISCOUNT\"\n ? \"Cart Discount\"\n : \"Cashback\"}\n \n \n {maxDiscountAmount && (\n
\n ) : (\n {`${getCurrency().symbol} ${maxDiscountAmount}`}
\n )}\n {maxSingleRedemption && (\n {`${maxSingleRedemption} per user`}\n )}\n \n {`${getMessage(\n \"coupon.header.limit\"\n )}: `}\n {maxDiscountAmount && (\n
\n )}\n {`${\n getCurrency().symbol\n } ${maxDiscountAmount}`}
\n )}\n {maxSingleRedemption && (\n {`${maxSingleRedemption} per user`}\n )}\n \n
\n ) : (\n \n {getPrintableTime(startDate).split(\",\")[0]}\n {getPrintableTime(startDate).split(\",\")[1]}\n
\n \n {getPrintableTime(expiryDate).split(\",\")[0]}\n {getPrintableTime(expiryDate).split(\",\")[1]}\n \n \n {`${getMessage(\n \"coupon.header.validity\"\n )}: \n `}\n
\n )}\n \n {getPrintableTime(startDate).split(\",\")[0]}\n
\n \n {getPrintableTime(expiryDate).split(\",\")[0]}\n \n\n \n {getPrintableTime(startDate).split(\",\")[1]}\n
\n \n {getPrintableTime(expiryDate).split(\",\")[1]}\n
\n \n
\n \n \n {`+ ${getMessage(\n \"Add unique coupons\"\n )}`}\n \n \n {`+ ${getMessage(\n \"coupon.add.text\"\n )}`}\n \n
\n \n response.data.bulkCoupon,\n }}\n transformSubmit={(formData) => {\n const {\n validOnStores,\n comment,\n maxDiscountAmount,\n discountType,\n discount,\n type,\n validOnUser,\n validOnPayment,\n dateRange,\n validOnDays,\n minOrderAmount,\n userSet,\n timeRange,\n ...others\n } = formData;\n let response = Object.assign({}, others);\n response.coupon = {};\n response.coupon = {\n validOnStores,\n discount,\n discountType,\n type,\n validOnUser,\n validOnPayment,\n minOrderAmount,\n maxDiscountAmount,\n comment,\n userSet,\n };\n if (formData[\"validOnDays\"]) {\n delete response[\"validOnDays\"];\n let validOnDays = {};\n formData[\"validOnDays\"].forEach(function (key) {\n validOnDays[key] = \"1\";\n });\n response.coupon.validOnDays = validOnDays;\n }\n if (formData.dateRange && formData.timeRange) {\n response.coupon.startDate = getStandradDateTime(\n localTimeToUtc,\n `${formData.dateRange.startDate} ${formData.timeRange.startTime}`\n );\n response.coupon.expiryDate = getStandradDateTime(\n localTimeToUtc,\n `${formData.dateRange.endDate} ${formData.timeRange.endTime}`\n );\n delete response[\"dateRange\"];\n delete response[\"timeRange\"];\n }\n if (formData.userSet) {\n response.coupon.userSet.type = \"SEGMENTS\";\n }\n return response;\n }}\n menu={this.props.menu}\n bulk\n />\n
\n );\n }\n}\n\nexport default BulkCoupons;\n","import React from \"react\";\nimport img from \"./banner.svg\";\n\nexport default function Banner(props) {\n if (!props.data) {\n return (\n \n \n
\n );\n }\n return (\n \n {props.data.title && \n
\n );\n}\n","import React from \"react\";\nimport {\n SortableContainer,\n SortableElement,\n SortableHandle,\n arrayMove,\n} from \"react-sortable-hoc\";\nimport { BaseForm, Input, VALIDATION_TYPES } from \"../../../../components/Form\";\nimport { cloneMutables } from \"../../../../lib/stateManagement/\";\nimport { BannerWithText, BannerWithMultipleButtons } from \"zopsmart-ui\";\nimport { Popup, Dialog } from \"../../../../components/Popup\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport { getSession } from \"../../../../lib/auth\";\n\nimport Layout from \"../../../settings/Themes/layout\";\nimport getLayout from \"../../../settings/Themes/Layouts/getLayout\";\nimport Banner from \"../../../../components/Layout/Banner\";\nimport RichText from \"../../../../components/Layout/RichText\";\nimport ImageWithText from \"../../../../components/Layout/ImageWithText\";\nimport \"./style.css\";\nimport API from \"../../../../lib/api\";\nimport Loader from \"../../../../components/Loader\";\nimport { get } from \"../../../../lib/storage\";\n\nfunction getSlugFromText(text) {\n if (!text) {\n return \"\";\n }\n return text.toLowerCase().replace(/\\s+/g, \"-\");\n}\n\nconst SortableItem = SortableElement((props) => {\n const { value, layoutIndex, onEditClick, onRemoveClick } = props;\n let LayoutComponent = \"\";\n Object.keys(availableComponents).forEach(function (component, index) {\n if (availableComponents[component][value.name]) {\n LayoutComponent = availableComponents[component][value.name];\n }\n });\n let element = \"\";\n const isShowLayout = typeof LayoutComponent !== \"string\";\n return (\n {props.data.title}
}\n\n {isShowLayout && (\n <>\n \n
\n {\n element = el;\n }}\n >\n
\n \n )}\n \n );\n});\n\nconst SortableList = SortableContainer((props) => {\n return (\n \n \n {value.name.replace(/([A-Z])/g, \" $1\").trim()}\n \n
\n \n {![\"MarketingBanners\"].includes(value.name) && (\n {\n onEditClick(layoutIndex, element.offsetTop);\n }}\n >\n Edit\n \n )}\n {\n e.preventDefault();\n onRemoveClick(layoutIndex);\n }}\n >\n Remove\n \n
\n \n {Array.isArray(props.items) &&\n props.items.map((value, index) => (\n
\n );\n});\n\n// Support only for Fashion Trends theme as of now\nconst dualImageLayouts = [\"DualImageBanner\", \"DualImage\"];\n\nconst availableComponents = {\n Banners: {\n MarketingBanners: Banner,\n BannerWithText: BannerWithText,\n BannerWithButton: BannerWithText,\n BannerWithMultipleButtons: BannerWithMultipleButtons,\n },\n Images: {\n ImageWithText: ImageWithText,\n },\n Text: {\n RichText: RichText,\n },\n};\n\nconst DragHandle = SortableHandle((props) => (\n {props.children}\n));\n\nexport default class WebsitePageForm extends BaseForm {\n constructor(props) {\n super(props);\n this.domain = getSession().organization.domain;\n this.state.showDialog = false;\n this.direction = get(\"dataLang\") === \"ar\" ? \"rtl\" : \"ltr\";\n let layouts =\n this.state.values?.layouts && this.state.values?.layouts?.filter(Boolean);\n if (!layouts) {\n this.state.values = {\n layouts: [],\n };\n }\n this.state.showLayoutPopup = false;\n this.state.showDialog = false;\n this.state.currentComponent = \"Banners\";\n this.pages = [\"staticPage\"];\n this.data = [];\n this.currentLayout = {};\n this.selectOptionsData = {\n categories: [],\n tags: [],\n brands: [],\n };\n }\n getSelectOptionsData(selectField, dataFor) {\n const api = new API({\n url: `/catalogue-service/${selectField}`,\n });\n\n api\n .get()\n .then((response) => {\n if (response.status === \"ERROR\") {\n console.error(`Error in fetching details of ${dataFor}`);\n return;\n }\n this.selectOptionsData[dataFor] = [];\n if (!response.data[selectField]) {\n response.data[selectField] = [];\n }\n this.selectOptionsData[dataFor] = response.data[selectField].map(\n function (field) {\n return { text: field.name, value: field.slug };\n }\n );\n this.selectOptionsData[dataFor].push(\n { text: `All ${dataFor}`, value: \"ALL\" },\n { text: `Current ${selectField}`, value: \"CURRENT\" }\n );\n const state = `${dataFor}DataLoaded`;\n this.setState({\n loaded: true,\n [state]: true,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n\n fetchScheduledLayout() {\n this.setState({\n loaded: false,\n });\n const page = this.pages[0];\n let params = this.props?.resourceId ;\n const api = new API({ url: `/account-service/static-page/${params}` });\n api.get().then((response) => {\n if (response.status === \"ERROR\") {\n console.error(`Error in fetching details for ${page}`); // Todo: Handle this error\n return;\n }\n if (!response.data?.staticpage?.layouts?.length) {\n this.data = [];\n this.setState({ loaded: true });\n return;\n }\n this.data = this.formatResponse(response.data?.staticpage?.layouts);\n this.originalData = this.data;\n\n if (!this.state.categoryDataLoaded) {\n this.getSelectOptionsData(\"category\", \"categories\");\n }\n if (this.pages.includes(\"tag\")) {\n if (!this.state.tagDataLoaded) {\n this.getSelectOptionsData(\"tag\", \"tags\");\n }\n }\n if (this.pages.includes(\"brand\")) {\n if (!this.state.brandDataLoaded) {\n this.getSelectOptionsData(\"brand\", \"brands\");\n }\n }\n });\n }\n\n componentDidMount() {\n this.props.method === \"edit\" && this.fetchScheduledLayout();\n }\n\n addLayout = (layoutName, data) => {\n const layout = {\n name: layoutName,\n data: data,\n };\n this.data.push(layout);\n this.setState({\n showLayoutPopup: false,\n });\n };\n\n onSortEnd = ({ oldIndex, newIndex }) => {\n this.data = arrayMove(this.data, oldIndex, newIndex);\n this.forceUpdate();\n };\n\n onSubmit = (values) => {\n this.setState(\n (prevState) => Object.assign({}, prevState, { values }),\n this._submitHandler\n );\n };\n\n getRespectiveComponents = (component) => {\n this.setState({\n currentComponent: component,\n });\n };\n\n onEditClick = (layoutIndex, top) => {\n const layout = this.data[layoutIndex];\n Object.assign(this.currentLayout, layout);\n this.currentLayout.top = top;\n this.setState({\n editing: true,\n layoutIndex,\n });\n };\n\n onRemoveClick = (index) => {\n this.saveLayouts(index);\n this.setState({\n showPrompt: false,\n deleteIndex: \"\",\n });\n };\n\n showPrompt = (index) => {\n this.setState({\n showPrompt: true,\n deleteIndex: index,\n });\n };\n\n onAddClick = () => {\n this.setState({\n showLayoutPopup: true,\n });\n };\n\n listView = () => {\n const View = () => {\n if (this.state.loaded || this.props.method === \"add\") {\n return (\n <>\n \n —————————\n \n ————————\n
\n \n );\n }\n return \n
\n );\n };\n\n formatResponse(response) {\n let newResponse = Object.assign([], response);\n const page = this.pages[this.state.page];\n newResponse.forEach((layout) => {\n if (\n layout.name === \"CategoryCollection\" ||\n layout.name === \"BrandCollection\"\n ) {\n let key = layout.name === \"CategoryCollection\" ? \"category\" : \"brand\";\n let collection = (layout.value && layout.value.collection) || [];\n collection = collection.map((val) => val[key]);\n layout[\"data\"][key] = collection;\n layout.value && delete layout.value.collection;\n }\n if (\n layout.name === \"CategoryCollection\" &&\n layout.data &&\n layout.data.subcategories &&\n page === \"category\"\n ) {\n layout.name = \"SubCategoryCollection\";\n }\n });\n return newResponse;\n }\n\n saveLayouts = (index, formData = null) => {\n this.setState({\n submitting: true,\n });\n\n let data = this.data;\n if (!formData) {\n data =\n index !== undefined\n ? this.data.filter((_, idx) => idx !== index)\n : this.data;\n } else {\n data = data.filter((_, i) => i !== index);\n let layoutname = formData.name;\n delete formData.name;\n data.splice(index, 0, { name: layoutname, data: { ...formData } });\n }\n if (!index && index !== 0) {\n data = this.data;\n }\n data &&\n data.forEach((layout, i) => {\n const layoutName = layout.name;\n if (layoutName === \"SubCategoryCollection\") {\n layout.name = \"CategoryCollection\";\n layout.data.subcategories = true;\n }\n\n if (layoutName === \"CategoryCollection\") {\n if (formData && i === index) {\n layout.data.categoryIds =\n layout.data.category &&\n layout.data.category\n .map((category) => category.id)\n .filter(Boolean);\n delete layout.data.category;\n }\n }\n if (layoutName === \"BlogCollection\") {\n if (formData && i === index) {\n layout.data.blogIds =\n layout.data.blog &&\n layout.data.blog.map((blog) => blog.id).filter(Boolean);\n delete layout.data.blog;\n }\n }\n if (layoutName === \"BrandCollection\") {\n if (formData && i === index) {\n layout.data.brandIds =\n layout.data.brand &&\n layout.data.brand.map((brand) => brand.id).filter(Boolean);\n }\n delete layout.data.brand;\n }\n if (layoutName === \"ProductCollection\") {\n layout.data && delete layout.data.collection;\n if (layout.data.hasImage === -1) {\n layout.data.hasImage = \"\";\n }\n if (layout.data.hasStock === -1) {\n layout.data.hasStock = \"\";\n }\n if (layout.data.hasOffers === -1) {\n layout.data.hasOffers = \"\";\n }\n if (\n layout.data.category &&\n typeof layout.data.category === \"object\"\n ) {\n layout.data.category = layout.data.category.slug;\n }\n if (layout.data.brand && typeof layout.data.brand === \"object\") {\n layout.data.brand = layout.data.brand.slug;\n }\n if (layout.data.tag && typeof layout.data.tag === \"object\") {\n layout.data.tag = layout.data.tag.slug;\n }\n }\n if (layout.name === \"ImageSlideShow\") {\n layout.data &&\n layout.data.activeIndex &&\n delete layout.data.activeIndex;\n }\n\n delete layout.value;\n layout.data && delete layout.data.collection;\n });\n\n let params = {\n layouts: data,\n };\n\n this.data = params?.layouts\n\n this.setState(prevState => ({\n values: {\n ...prevState?.values,\n layouts: params?.layouts?.map((layout, index) => ({\n ...prevState?.values?.layouts[index], \n ...layout, \n data: {\n ...prevState?.values?.layouts[index]?.data,\n ...layout?.data, \n },\n })),\n },\n editing: false,\n submitting: false,\n showDialog: true,\n error: false,\n errors: {},\n }));\n };\n\n reorderLayout = () => {\n this.saveLayouts();\n };\n\n render() {\n const { CancelButton } = this.buttons;\n const { Form } = this.components;\n const View = () => {\n if (this.state.editing) {\n const layout = this.data[this.state.layoutIndex];\n const layoutInfo =\n getLayout(\n this.state.page,\n layout.name,\n this.pages,\n this.selectOptionsData\n ) || {};\n const top = this.currentLayout.top;\n return (\n \n \n {getMessage(\"order.form.cancel.text\")}\n \n \n save\n \n
\n )}\n \n
\n \n {\n e.preventDefault();\n let updates = {\n isDraft: false,\n };\n if (!this.state.values.publishTime) {\n let now = new Date();\n updates.publishTime = `${now.getFullYear()}-${String(\n now.getMonth() + 1\n ).padStart(2, \"0\")}-${String(now.getDate()).padStart(\n 2,\n \"0\"\n )} ${now.toTimeString().split(\" \")[0]}`;\n }\n this.onSubmit(\n Object.assign({}, cloneMutables(this.state.values), updates)\n );\n }}\n >\n {getMessage(\"marketing.blog.form.submitText\")}\n \n \n {getMessage(\"websitePage.form.cancelText\")}\n \n
\n \n \n );\n }\n}\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport ListingPageWithRoutes from \"../../../containers/ListingPage/listingRouter\";\nimport { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport WebsitePageForm from \"./Form\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\nimport { Dialog } from \"../../../components/Popup\";\nimport API from \"../../../lib/api\";\nimport { getMessage } from \"../../../lib/translator\";\nimport { getSession } from \"../../../lib/auth\";\n\nimport emptyIcon from \"./pages-empty.svg\";\n\nimport \"./style.css\";\nimport { get } from \"../../../lib/storage\";\n\nfunction getStatusText(status) {\n if (!status) {\n return \"\";\n }\n status = status.toLowerCase();\n switch (status) {\n case \"enabled\":\n case \"disabled\":\n return getMessage(`websitePage.status.${status}`);\n default:\n return status;\n }\n}\n\nclass PagesActions extends Component {\n constructor(props) {\n super(props);\n this.state = {\n statusActionID: null,\n };\n this.showStatusActionDialog = this.showStatusActionDialog.bind(this);\n this.hideStatusActionDialog = this.hideStatusActionDialog.bind(this);\n }\n showStatusActionDialog(statusActionID) {\n this.setState({ statusActionID });\n }\n hideStatusActionDialog() {\n this.setState({ statusActionID: null });\n }\n componentWillReceiveProps() {\n this.setState({ statusActionID: false });\n }\n modifyStatus(status) {\n let id = this.props.id;\n let api = new API({ url: `/account-service/static-page/${id}` });\n return api\n .put({ id, status })\n .then((response) => {\n this.props.onAction(TABLE_ACTIONS.EDIT, { id }, { status });\n }, console.error)\n .catch((error) => {\n console.error(error);\n });\n }\n render() {\n let { status, id } = this.props;\n return (\n \n {\n status === \"ENABLED\"\n ? this.modifyStatus(\"DISABLED\")\n : this.modifyStatus(\"ENABLED\");\n }}\n close={this.hideStatusActionDialog}\n closeText={getMessage(\"websitePage.dialogs.disable.cancelText\")}\n okText={getMessage(\"websitePage.dialogs.disable.okText\")}\n />\n \n \n {getMessage(\"websitePage.table.action.edit\")}\n \n \n \n {\n this.showStatusActionDialog(id);\n }}\n >\n {status === \"ENABLED\"\n ? getMessage(\"websitePage.table.action.disable\")\n : getMessage(\"websitePage.table.action.enable\")}\n
\n \n \n \n );\n }\n}\n\nfunction AddButton() {\n return (\n \n + {getMessage(\"websitePage.add.text\")}\n \n );\n}\n\nconst emptyState = {\n icon: emptyIcon,\n message: getMessage(\"websitePage.emptyList.message\"),\n submessage: getMessage(\"websitePage.emptyList.submessage\"),\n additionalViews: [AddButton],\n};\n\nconst tableProperties = (isMobileView) => {\n return {\n headers: [\n getMessage(\"websitePage.table.title\"),\n getMessage(\"websitePage.table.url\"),\n getMessage(\"websitePage.table.status\"),\n getMessage(\"websitePage.table.actions\"),\n ],\n row: ({ id, title, url, status, actions, onAction }) => (\n \n {getMessage(\"websitePage.table.title\")}\n
\n ) : (\n \"\"\n )}\n \n {title}\n \n \n {getMessage(\"websitePage.table.url\")}\n
\n ) : (\n \"\"\n )}\n \n {templateType === \"EMAIL\" && (\n
\n );\n};\n\nexport { PreviewElement };\n","import React from \"react\";\nimport {\n BaseForm,\n Input,\n VALIDATION_TYPES,\n Textarea,\n SingleDatePicker,\n Select,\n ImageUpload,\n RichTextEditorQuill,\n} from \"../../../../components/Form\";\nimport Loader from \"../../../../components/Loader\";\nimport SegmentsForm from \"../../../../components/SegmentsForm\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport Tabs from \"../../../../components/Tabs\";\nimport API from \"../../../../lib/api\";\nimport { PreviewElement } from \"./utils\";\nimport debounce from \"../../../../lib/debounce\";\nimport moment from \"moment\";\nimport { getTimes } from \"../../../../lib/commonlyused\";\n\nimport \"./style.css\";\n\nconst checkIfValidDateTime = (date, time) => {\n let dateTime = date + \" \" + moment(time, \"hh:mm\").format(\"HH:mm:00\");\n return moment(dateTime) >= moment();\n};\n\nexport default class CouponForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state.values.time = (props.value && props.value.time) || \"\";\n this.state.variables = [];\n this.state.mediums = [];\n this.state.showLoader = false;\n this.state.activeMediumId = null;\n this.state.lastFocussedElementId = null;\n this.state.lastCaretPosition = null;\n [\n \"updateMediumId\",\n \"updateLastFocussedElement\",\n \"variableClicked\",\n \"updateLastCaretPosition\",\n ].forEach((fn) => {\n this[fn] = this[fn].bind(this);\n });\n this.debouncedCaretPositionUpdate = debounce(\n this.debouncedCaretPositionUpdate.bind(this),\n 100\n );\n }\n\n variableClicked(e) {\n const variableName = e.target.getAttribute(\"data-variable\");\n const { lastFocussedElementId, lastCaretPosition } = this.state;\n if (\n lastFocussedElementId &&\n (lastFocussedElementId === \"emailBody\" ||\n lastFocussedElementId === \"emailSubject\" ||\n lastFocussedElementId === \"smsContent\") &&\n document.getElementById(lastFocussedElementId)\n ) {\n let values = { ...this.state.values };\n let prevValue = values[lastFocussedElementId];\n if (!prevValue) {\n prevValue = `{{${variableName}}}`;\n } else {\n if (lastCaretPosition == null) {\n prevValue += `{{${variableName}}}`;\n } else {\n prevValue =\n prevValue.slice(0, lastCaretPosition) +\n `{{${variableName}}}` +\n prevValue.slice(lastCaretPosition);\n }\n }\n values[lastFocussedElementId] = prevValue;\n this.setState({\n values,\n });\n }\n }\n\n debouncedCaretPositionUpdate(selectionStart) {\n this.setState({\n lastCaretPosition: selectionStart,\n });\n }\n\n updateLastCaretPosition(e) {\n this.debouncedCaretPositionUpdate(e.target.selectionStart);\n }\n\n updateLastFocussedElement({ e, id }) {\n this.setState({\n lastFocussedElementId: e ? e.target.id : id,\n });\n }\n\n componentDidMount() {\n this.setState({\n showLoader: true,\n });\n const mediumApi = new API({ url: \"/promo-service/medium\" });\n const variableApi = new API({ url: \"/promo-service/campaignVariable\" });\n Promise.all([mediumApi.get(), variableApi.get()])\n .then(\n ([mediumApiResponse, variableApiResponse]) => {\n const mediumsData = mediumApiResponse.data.medium;\n const activeMediumId =\n mediumApiResponse.data.medium.reverse()[0][\"id\"];\n const variables = variableApiResponse.data;\n this.setState({\n mediums: mediumsData,\n activeMediumId,\n showLoader: false,\n variables,\n });\n },\n () => {\n this.setState({ showLoader: false });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n updateMediumId(mediumId) {\n this.setState({\n activeMediumId: mediumId,\n });\n }\n\n render() {\n const { SubmitButton, CancelButton } = this.buttons;\n const { Form } = this.components;\n const { variables, values, activeMediumId, mediums } = this.state;\n const {\n emailSubject,\n emailBody,\n smsContent,\n date,\n time,\n pushImage,\n pushBody,\n pushSubject,\n pushUrl,\n status,\n } = values;\n let isDateTimeValid = true;\n if (date) {\n isDateTimeValid = checkIfValidDateTime(date, time);\n }\n const isDisabled = status === \"COMPLETED\";\n const EmailComponent = (\n \n
\n )}\n {templateType === \"SMS\" && {subject}
\n\n \n
\n {sms}
}\n {templateType === \"PUSH\" && (\n \n )}\n \n this.updateLastFocussedElement({ e })}\n onMouseUp={this.updateLastCaretPosition}\n onKeyPress={this.updateLastCaretPosition}\n {...this.generateStateMappers({\n stateKeys: [\"emailSubject\"],\n validationType: VALIDATION_TYPES.ONSUBMIT,\n loseEmphasisOnFill: true,\n })}\n readOnly={isDisabled}\n />\n
\n );\n\n const SMSComponent = (\n \n this.updateLastFocussedElement({ e })}\n onMouseUp={this.updateLastCaretPosition}\n onKeyPress={this.updateLastCaretPosition}\n {...this.generateStateMappers({\n stateKeys: [\"smsContent\"],\n loseEmphasisOnFill: true,\n })}\n readOnly={isDisabled}\n />\n
\n );\n\n const PushNotificationComponent = (\n \n {getMessage(\"campaign.form.maxcharacters.description\")}\n
\n \n this.updateLastFocussedElement({ e })}\n onMouseUp={this.updateLastCaretPosition}\n onKeyPress={this.updateLastCaretPosition}\n readOnly={isDisabled}\n {...this.generateStateMappers({\n stateKeys: [\"pushSubject\"],\n validationType: VALIDATION_TYPES.ONSUBMIT,\n loseEmphasisOnFill: true,\n })}\n />\n this.updateLastFocussedElement({ e })}\n onMouseUp={this.updateLastCaretPosition}\n onKeyPress={this.updateLastCaretPosition}\n readOnly={isDisabled}\n {...this.generateStateMappers({\n stateKeys: [\"pushBody\"],\n loseEmphasisOnFill: true,\n })}\n />\n this.updateLastFocussedElement({ e })}\n onMouseUp={this.updateLastCaretPosition}\n onKeyPress={this.updateLastCaretPosition}\n readOnly={isDisabled}\n {...this.generateStateMappers({\n stateKeys: [\"pushUrl\"],\n loseEmphasisOnFill: true,\n })}\n />\n \n {getMessage(\"product.form.variant.image.description\")}\n \n
\n );\n\n return (\n \n {this.state.showLoader ? (\n
\n )}\n {activeMediumId && mediums && mediums.length > 0 && (\n \n
\n )}\n \n
\n \n
\n \n {getMessage(\"campaign.form.preview.heading\")}\n
\n\n {activeMediumId === 1 && (\n
\n \n \n {getMessage(\"campaign.form.submit.text\")}\n \n \n {getMessage(\"campaign.form.cancel.text\")}\n \n
\n )}\n \n )}\n \n );\n }\n}\n","import React, { Component } from \"react\";\nimport ListingPageWithRoutes from \"../../../containers/ListingPage/listingRouter\";\nimport { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport { Link } from \"react-router-dom\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport { getMessage } from \"../../../lib/translator\";\nimport EmptyIcon from \"./campaigns-empty.svg\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\nimport CampaignsForm from \"./Form\";\nimport { formatDate } from \"../../../lib/datetime\";\nimport {\n localTimeToUtc,\n utcToLocalTime,\n getPrintableTime,\n getStandradDateTime,\n} from \"../../../lib/datetime\";\nimport moment from \"moment\";\nimport { formatDataBeforeSubmit } from \"../../../components/SegmentsForm\";\n\nimport \"./style.css\";\n\nfunction AddCampaign() {\n return (\n \n \n +{\" \"}\n {getMessage(\"campaign.add.text\")}\n \n
\n );\n}\n\nconst emptyState = {\n icon: EmptyIcon,\n message: getMessage(\"campaign.helpItems.message\"),\n additionalViews: [AddCampaign],\n};\n\nconst tableProperties = {\n headers: [\n getMessage(\"campaign.table.heading.name\"),\n getMessage(\"campaign.table.heading.status\"),\n getMessage(\"campaign.table.heading.runDate\"),\n getMessage(\"campaign.table.heading.actions\"),\n ],\n row: ({ id, name, comment, status, scheduledTime, onAction }) => (\n \n {getMessage(\"campaign.table.heading.status\")}\n
\n {status}\n \n {getMessage(\"campaign.table.heading.runDate\")}\n
\n \n
\n \n \n {scheduledTime ? formatDate(scheduledTime.split(\" \")[0]) : null}\n \n
\n \n \n {scheduledTime\n ? getPrintableTime(scheduledTime).split(\",\")[1]\n : null}\n \n
\n /g,\n \"\\n\"\n );\n } else if (data.mediumName === \"SMS\") {\n newCampaign[\"smsContent\"] = data.template.content;\n } else if (data.mediumName === \"PUSH\") {\n newCampaign[\"pushSubject\"] = data.template.title;\n newCampaign[\"pushBody\"] = data.template.message;\n newCampaign[\"pushImage\"] = data.template.image && [\n data.template.image,\n ];\n newCampaign[\"pushUrl\"] =\n data.template.deepLinkUrl && data.template.deepLinkUrl;\n }\n });\n if (campaign.scheduledTime) {\n const temp = getStandradDateTime(\n utcToLocalTime,\n campaign.scheduledTime\n ).split(\" \");\n newCampaign[\"date\"] = temp[0];\n newCampaign[\"time\"] = `${temp[1].split(\":\")[0]}:${\n temp[1].split(\":\")[1]\n }`;\n }\n const newDataArray = campaign?.userSet?.data?.map((userSetData) => {\n if (userSetData.date) {\n userSetData.date = getStandradDateTime(\n utcToLocalTime,\n userSetData.date\n ).split(\" \")[0];\n }\n\n if (userSetData.startDate) {\n userSetData.startDate = getStandradDateTime(\n utcToLocalTime,\n userSetData.startDate\n ).split(\" \")[0];\n }\n if (userSetData.endDate) {\n userSetData.endtDate = getStandradDateTime(\n utcToLocalTime,\n userSetData.endDate\n ).split(\" \")[0];\n }\n return userSetData;\n });\n\n newCampaign[\"userSet\"] = {\n ...campaign.userSet,\n data: newDataArray,\n };\n\n delete newCampaign[\"campaignData\"];\n return newCampaign;\n },\n transformSubmit: (formData) => {\n let newFormData = {\n name: formData.name,\n comment: formData.comment || \"\",\n };\n let campaignData = [];\n if (formData.emailSubject) {\n campaignData.push({\n mediumId: 1,\n template: {\n body: (formData.emailBody || \"\").replace(/\\n/g, \"
\"),\n subject: formData.emailSubject,\n },\n });\n }\n if (formData.smsContent) {\n campaignData.push({\n mediumId: 2,\n template: {\n content: formData.smsContent,\n },\n });\n }\n if (formData.pushSubject) {\n campaignData.push({\n mediumId: 3,\n template: {\n title: formData.pushSubject,\n message: formData.pushBody,\n image: formData.pushImage?.[0],\n deepLinkUrl: formData.pushUrl ?? \"\",\n },\n });\n }\n newFormData[\"campaignData\"] = campaignData;\n if (formData.date) {\n newFormData[\"scheduledTime\"] = moment(\n localTimeToUtc(`${formData.date} ${formData.time}`)\n ).format(\"YYYY-MM-DD HH:mm\");\n }\n\n if (formData?.userSet) {\n // date inside userSet should be sent in YYYY-MM-DD HH:mm:ss format\n const newUserSetData = formData.userSet.data.map(\n (userSetData) => {\n if (userSetData.date && userSetData.date.length === 10) {\n userSetData.date = getStandradDateTime(\n localTimeToUtc,\n `${userSetData.date} 00:00:00`\n );\n }\n if (\n userSetData.startDate &&\n userSetData.startDate.length === 10\n ) {\n userSetData.startDate =\n userSetData.startDate === moment().format(\"YYYY-MM-DD\")\n ? moment().format(\"YYYY-MM-DD HH:mm:ss\")\n : getStandradDateTime(\n localTimeToUtc,\n `${userSetData.startDate} 00:00:00`\n );\n }\n if (\n userSetData.endDate &&\n userSetData.endDate.length === 10\n ) {\n userSetData.endDate = getStandradDateTime(\n localTimeToUtc,\n `${userSetData.endDate} 23:59:59`\n );\n }\n return userSetData;\n }\n );\n\n newFormData.userSet = { data: newUserSetData };\n newFormData = formatDataBeforeSubmit(newFormData);\n }\n return newFormData;\n },\n }}\n />\n );\n }\n}\n\nexport default Campaigns;\n","import React, { Component } from \"react\";\nimport Table, { Header, Row, Cell } from \"../../../../components/Table\";\nimport Image from \"../../../../components/Image\";\nimport { Input, Select } from \"../../../../components/Form\";\nimport { getMessage } from \"../../../../lib/translator\";\n\nclass ItemTable extends Component {\n constructor(props) {\n super(props);\n this.state = {\n entityType: props.entityType,\n };\n this.imageKey = {\n product: \"images\",\n category: \"image\",\n brand: \"logo\",\n };\n this.onDiscountTypeChange = this.onDiscountTypeChange.bind(this);\n }\n\n onDiscountTypeChange(type, stateTypeKeys, stateValueKeys) {\n let { _this } = this.props;\n _this.updateState(stateTypeKeys, type);\n _this.updateState(stateValueKeys, \"\");\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.entityType !== this.props.entityType) {\n this.setState({\n entityType: this.props.entityType,\n });\n }\n }\n render() {\n const {\n comboDiscount,\n entityType,\n items,\n discountTypes,\n _this,\n buyAny,\n buy,\n buyKey,\n buyQty,\n hasOfferStarted,\n nestedKeys,\n } = this.props;\n let changeKey = \"product\";\n if (\n _this &&\n _this.state &&\n _this.state.values &&\n _this.state.values.type === \"BMINXGFG\" &&\n !buy &&\n this.props.changeKey &&\n this.props.nestedKeys\n ) {\n changeKey = this.props.changeKey;\n }\n\n let isChangeKeyArray = Array.isArray(changeKey);\n\n return (\n
\n
\n );\n }\n}\n\nexport default BANYATP;\n","import React, { Component } from \"react\";\nimport {\n ProductSearch,\n Input,\n Radio,\n Select,\n BrandSearch,\n CategorySearch,\n} from \"../../../../components/Form\";\nimport ItemTable from \"./ItemTable\";\nimport { isAllRulesValid } from \"../../../../lib/commonlyused\";\nimport deleteIcon from \"./delete.svg\";\n\nimport { getMessage } from \"../../../../lib/translator\";\n\nclass BMINXATP extends Component {\n constructor(props) {\n super(props);\n this.submitHandler = this.submitHandler.bind(this);\n this.validationHandler = this.validationHandler.bind(this);\n this.initData = this.initData.bind(this);\n this.handleAddRule = this.handleAddRule.bind(this);\n this.handleDeleteRule = this.handleDeleteRule.bind(this);\n }\n\n initData() {\n let { method, _this, onUpdateValues } = this.props;\n if (method === \"add\") {\n let { values } = _this && _this.state;\n if (!(values.rule && values.rule.elementGroups)) {\n onUpdateValues({\n ...values,\n rule: { ...values.rule, elementGroups: [{ total: {} }] },\n });\n }\n }\n }\n\n validationHandler(parent) {\n let validations = JSON.parse(JSON.stringify(parent.state.validations));\n parent.setState({\n validations,\n });\n }\n\n handleAddRule(e) {\n e && e.preventDefault();\n let { _this } = this.props;\n let { values } = _this.state;\n let { rule } = values || {};\n let { elementGroups } = rule || {};\n\n if (!elementGroups) {\n rule = { ...rule, elementGroups: [{ total: {} }] };\n }\n\n rule = { ...rule, elementGroups: [...rule.elementGroups, { total: {} }] };\n\n _this.setState({ pressedSubmitWithCurrentData: false });\n\n this.props.onUpdateValues({ ...values, rule });\n }\n\n handleDeleteRule(index) {\n let { _this } = this.props;\n let { values } = _this.state;\n let validations = JSON.parse(JSON.stringify(_this.state.validations));\n let validationsRule = validations.rule;\n let { rule } = values || {};\n\n if (rule && rule.elementGroups) {\n let elementGroups = rule.elementGroups.filter((_, idx) => idx !== index);\n rule = { ...rule, elementGroups };\n }\n\n if (validationsRule && validationsRule.elementGroups) {\n let elementGroups = validationsRule.elementGroups.filter(\n (_, idx) => idx !== index\n );\n validationsRule = { ...validationsRule, elementGroups };\n }\n\n this.props.onUpdateValues({ ...values, rule });\n this.props.onUpdateValidations({ ...validations, validationsRule });\n }\n\n submitHandler(formData) {\n let { method, oldFormat } = formData;\n let data = JSON.parse(JSON.stringify(formData));\n const entityType = data.entityType.toLowerCase();\n const isCombo =\n data.rule && data.rule.itemDiscountType === \"COMBO_DISCOUNT\";\n let newRule = {\n elementGroups: data.rule.elementGroups.map((eg) => ({\n ...eg,\n maxDiscount: eg.maxDiscount !== \"\" ? eg.maxDiscount : undefined,\n })),\n entity: {\n type: data.entityType === \"PRODUCT\" ? \"VARIANT\" : data.entityType,\n id: data.entityType === \"PRODUCT\" ? null : data[entityType].id,\n },\n };\n if (entityType === \"product\") {\n newRule.variants = data.product.map((pdt) => pdt.id).filter(Boolean);\n }\n if (oldFormat && method === \"edit\") {\n newRule = { ...newRule, ...newRule.elementGroups[0] };\n delete newRule.elementGroups;\n }\n newRule.limit = Number(newRule.limit);\n\n if (isCombo) {\n newRule.isCombo = true;\n } else {\n delete newRule.isCombo;\n }\n\n data.rule = newRule;\n // data.entityId = 1\n data.offerType = data.type;\n delete data.pwpTagId;\n delete data.quantity;\n delete data.minQuantity;\n delete data.product;\n delete data.category;\n delete data.brand;\n delete data.entity;\n delete data.includes;\n delete data.itemDiscountType;\n return data;\n }\n\n componentDidMount() {\n this.initData();\n }\n\n render() {\n let {\n entityType,\n discountTypes,\n _this,\n type,\n hasOfferStarted,\n itemDiscountTypes,\n method,\n } = this.props;\n const { values } = _this.state;\n const { itemDiscountType } = _this.state.values;\n entityType = this.props.entityTypeMap[entityType];\n const comboDiscount = itemDiscountType === \"COMBO_DISCOUNT\";\n const items = values[entityType];\n const itemsLength = items ? items.length : 0;\n\n const { rule } = values || {};\n const { elementGroups } = rule || {};\n\n return (\n \n {entityType === \"product\" && (\n
\n \n {itemsLength ? (\n
\n \n
\n );\n }\n}\n\nexport default BMINXATP;\n","import React, { Component } from \"react\";\nimport {\n Input,\n Radio,\n Select,\n ProductSearch,\n BrandSearch,\n CategorySearch,\n} from \"../../../../components/Form\";\nimport ItemTable from \"./ItemTable\";\nimport { getMessage } from \"../../../../lib/translator\";\n\nclass BANYGYD extends Component {\n constructor(props) {\n super(props);\n this.validationHandler = this.validationHandler.bind(this);\n this.submitHandler = this.submitHandler.bind(this);\n }\n\n validationHandler(parent) {\n let formData = JSON.parse(JSON.stringify(parent.state.values));\n let validations = JSON.parse(JSON.stringify(parent.state.validations));\n const comboDiscount = formData.itemDiscountType === \"COMBO_DISCOUNT\";\n const entityType = \"product\";\n if (comboDiscount && validations[entityType]) {\n validations[entityType].forEach((validation) => {\n delete validation.t;\n delete validation.v;\n });\n } else {\n if (validations.rule) {\n delete validations.rule.total;\n }\n }\n parent.setState({\n validations,\n });\n }\n\n submitHandler(formData, buyKey) {\n let data = Object.assign({}, formData);\n const comboDiscount = formData.itemDiscountType === \"COMBO_DISCOUNT\";\n const entityType = formData.entityType.toLowerCase();\n data.offerType = data.type;\n let get = {};\n if (!comboDiscount) {\n delete data.rule.total;\n }\n let rule = {};\n rule.limit = data.rule ? Number(data.rule.limit) : null;\n if (data.rule.quantity) {\n rule.quantity = Number(data.rule.quantity);\n }\n if (comboDiscount) {\n rule.total = data.rule.total;\n rule.total.v = Number(rule.total.v);\n }\n rule.entity = {\n type: data.entityType === \"PRODUCT\" ? \"VARIANT\" : formData.entityType,\n id:\n data.entityType === \"PRODUCT\"\n ? null\n : data[entityType] && data[entityType].id,\n };\n let getItems = data.product || [];\n getItems.forEach((item) => {\n let res = { q: Number(item.q) };\n if (!comboDiscount) {\n res.t = item.t;\n res.v = Number(item.v);\n }\n get[item.id] = res;\n });\n rule.get = get;\n data.rule = rule;\n // data[entityType] = data[`${buyKey}${entityType}`].map(item => item.id)\n if (entityType === \"product\") {\n rule.variants = (data[`${buyKey}${entityType}`] || [])\n .map((pdt) => pdt.id)\n .filter(Boolean);\n }\n delete data.product;\n delete data.category;\n delete data.brand;\n delete data[`${buyKey}product`];\n delete data[`${buyKey}category`];\n delete data[`${buyKey}brand`];\n return data;\n }\n\n render() {\n let {\n entityType,\n discountTypes,\n itemDiscountTypes,\n _this,\n buyKey,\n hasOfferStarted,\n } = this.props;\n const { values } = _this.state;\n const { itemDiscountType } = _this.state.values;\n entityType = this.props.entityTypeMap[entityType];\n const comboDiscount = itemDiscountType === \"COMBO_DISCOUNT\";\n const buyItems = values[`buy${entityType}`];\n const buyItemsLength = buyItems ? buyItems.length : 0;\n const items = values.product;\n const itemsLength = items ? items.length : 0;\n return (\n \n {entityType === \"product\" && (\n \n +\n \n )}\n
\n \n \n _this.handleDiscountChange(type, [\"elementGroups\", index])\n }\n readOnly={hasOfferStarted}\n />\n
\n ))}\n {method === \"add\" && (\n \n {Boolean(index) && (\n this.handleDeleteRule(index)}\n src={deleteIcon}\n alt=\"delete\"\n />\n )}\n
\n \n {itemsLength ? (\n
\n \n response.data.category}\n label={getMessage(`offer.${entityType}`)}\n placeholder={getMessage(`offer.${entityType}.placeholder`)}\n {..._this.generateStateMappers({\n stateKeys: [\"category\"],\n loseEmphasisOnFill: true,\n })}\n readOnly={hasOfferStarted}\n />\n )}\n
\n );\n }\n}\n\nexport default BANYGYD;\n","import React, { Component } from \"react\";\nimport {\n Radio,\n Select,\n Input,\n ProductSearch,\n} from \"../../../../components/Form\";\n\nimport { getMessage } from \"../../../../lib/translator\";\nimport ItemTable from \"./ItemTable\";\n\nclass BXATP extends Component {\n constructor(props) {\n super(props);\n this.submitHandler = this.submitHandler.bind(this);\n this.validationHandler = this.validationHandler.bind(this);\n this.selectOnEnter = this.selectOnEnter.bind(this);\n }\n\n selectOnEnter(e) {\n e && e.preventDefault();\n }\n validationHandler(parent) {\n let validations = JSON.parse(JSON.stringify(parent.state.validations));\n let formData = JSON.parse(JSON.stringify(parent.state.values));\n const comboDiscount = formData.itemDiscountType === \"COMBO_DISCOUNT\";\n const entityType = formData.entityType.toLowerCase();\n if (comboDiscount) {\n (validations[entityType] || []).forEach((validation) => {\n delete validation.t;\n delete validation.v;\n });\n } else {\n delete validations.rule;\n }\n parent.setState({\n validations,\n });\n }\n\n submitHandler(data) {\n let formData = Object.assign({}, data);\n const comboDiscount = formData.itemDiscountType === \"COMBO_DISCOUNT\";\n const entityType = formData.entityType.toLowerCase();\n let buy = {};\n data.offerType = data.type;\n formData[entityType].forEach((item) => {\n let res = { q: Number(item.q) };\n if (!comboDiscount) {\n res.t = item.t;\n res.v = Number(item.v);\n }\n buy[item.id] = res;\n });\n let total = comboDiscount && formData.rule.total;\n formData.rule = {\n buy: buy,\n // entity: {\n // type: formData.entityType === 'PRODUCT' ? 'VARIANT' : formData.entityType,\n // id: formData.entityType === 'PRODUCT' ? null : 0\n // },\n limit: formData.rule ? Number(formData.rule.limit) : null,\n };\n if (comboDiscount) {\n total.v = Number(total.v);\n formData.rule.total = total;\n }\n delete formData.product;\n delete formData.brand;\n delete formData.category;\n return formData;\n }\n render() {\n let {\n entityType,\n discountTypes,\n itemDiscountTypes,\n _this,\n hasOfferStarted,\n } = this.props;\n const { values } = _this.state;\n const { itemDiscountType } = _this.state.values;\n entityType = this.props.entityTypeMap[entityType];\n const comboDiscount = itemDiscountType === \"COMBO_DISCOUNT\";\n const items = values[entityType];\n const itemsLength = items ? items.length : 0;\n return (\n \n \n \n )}\n
\n {`Buy`}
\n {entityType === \"product\" && (\n\n {buyItemsLength ? (\n
\n Get
\n {\n\n {itemsLength ? (\n
\n \n
\n );\n }\n}\n\nexport default BXATP;\n","import React, { Component } from \"react\";\nimport {\n Input,\n Radio,\n Select,\n ProductSearch,\n} from \"../../../../components/Form\";\nimport ItemTable from \"./ItemTable\";\n\nimport { getMessage } from \"../../../../lib/translator\";\n\nclass BXGYD extends Component {\n constructor(props) {\n super(props);\n this.validationHandler = this.validationHandler.bind(this);\n this.submitHandler = this.submitHandler.bind(this);\n }\n\n validationHandler(parent) {\n let formData = JSON.parse(JSON.stringify(parent.state.values));\n let validations = JSON.parse(JSON.stringify(parent.state.validations));\n const comboDiscount = formData.itemDiscountType === \"COMBO_DISCOUNT\";\n const entityType = formData.entityType.toLowerCase();\n if (comboDiscount) {\n (validations[entityType] || []).forEach((validation) => {\n delete validation.t;\n delete validation.v;\n });\n } else {\n validations.rule && delete validations.rule;\n }\n parent.setState({\n validations,\n });\n }\n\n submitHandler(formData, buyKey) {\n let data = Object.assign({}, formData);\n const comboDiscount = formData.itemDiscountType === \"COMBO_DISCOUNT\";\n const entityType = formData.entityType.toLowerCase();\n data.offerType = data.type;\n let get = {};\n if (!comboDiscount) {\n data.rule && delete data.rule.total;\n }\n let rule = {};\n if (comboDiscount) {\n rule.total = data.rule.total;\n rule.total.v = Number(rule.total.v);\n }\n rule.entity = {\n type: data.entityType === \"PRODUCT\" ? \"VARIANT\" : formData.entityType,\n id: data.entityType === \"PRODUCT\" ? null : 0,\n };\n rule.limit = data.rule ? Number(data.rule.limit) : null;\n let getItems = data[entityType];\n getItems.forEach((item) => {\n let res = { q: Number(item.q) };\n if (!comboDiscount) {\n res.t = item.t;\n res.v = Number(item.v);\n }\n get[item.id] = res;\n });\n rule.get = get;\n rule.buy = {};\n data[`${buyKey}product`] &&\n data[`${buyKey}product`].forEach((item) => {\n rule.buy[item.id] = Number(item.q);\n });\n data.rule = rule;\n delete data.product;\n delete data.category;\n delete data.brand;\n delete data[`${buyKey}product`];\n delete data[`${buyKey}category`];\n delete data[`${buyKey}brand`];\n return data;\n }\n\n render() {\n let {\n entityType,\n discountTypes,\n itemDiscountTypes,\n _this,\n buyKey,\n hasOfferStarted,\n } = this.props;\n const { values } = _this.state;\n const { itemDiscountType } = _this.state.values;\n entityType = this.props.entityTypeMap[entityType];\n const comboDiscount = itemDiscountType === \"COMBO_DISCOUNT\";\n const buyItems = values[`buy${entityType}`];\n const buyItemsLength = buyItems ? buyItems.length : 0;\n const items = values[entityType];\n const itemsLength = items ? items.length : 0;\n return (\n \n \n \n )}\n
\n {entityType === \"product\" && (\n \n {itemsLength ? (\n
\n \n generateProducts(response.data.product)}\n onChange={_this.addItemBuy}\n />} */}\n {buyItemsLength === 0 && entityType === \"product\" && (\n generateProducts(response.data.product)}\n onChange={_this.addItem}\n />} */}\n {entityType === \"product\" && (\n
\n );\n }\n}\n\nexport default BXGYD;\n","import React, { Component } from \"react\";\nimport {\n Input,\n Radio,\n Select,\n ProductSearch,\n CategorySearch,\n BrandSearch,\n} from \"../../../../components/Form\";\n\nimport { getMessage } from \"../../../../lib/translator\";\nimport ItemTable from \"./ItemTable\";\n\nclass SF extends Component {\n constructor(props) {\n super(props);\n this.submitHandler = this.submitHandler.bind(this);\n this.validationHandler = this.validationHandler.bind(this);\n }\n\n validationHandler(parent) {\n const validations = JSON.parse(JSON.stringify(parent.state.validations));\n const formData = JSON.parse(JSON.stringify(parent.state.values));\n const comboDiscount = formData.itemDiscountType === \"COMBO_DISCOUNT\";\n const entityType = formData.entityType.toLowerCase();\n if (comboDiscount) {\n entityType === \"product\" &&\n (validations[entityType] || []).forEach((validation) => {\n delete validation.t;\n delete validation.v;\n });\n }\n if (!comboDiscount) {\n validations.rule && delete validations.rule;\n }\n switch (entityType) {\n case \"product\":\n delete validations.category;\n delete validations.brand;\n break;\n case \"category\":\n delete validations.product;\n delete validations.brand;\n break;\n case \"brand\":\n delete validations.product;\n delete validations.category;\n break;\n default:\n break;\n }\n parent.setState({\n validations: validations,\n });\n }\n\n submitHandler(formData) {\n const data = Object.assign({}, formData);\n const comboDiscount = formData.itemDiscountType === \"COMBO_DISCOUNT\";\n const entityType = formData.entityType.toLowerCase();\n let rule = {};\n if (!comboDiscount) {\n data.rule && delete data.rule.total;\n } else {\n rule.total = data.rule.total;\n rule.total.v = Number(rule.total.v);\n }\n delete data.total;\n rule.cartPrice = Number(data.cartPrice);\n delete data.cartPrice;\n rule.limit = data.rule ? Number(data.rule.limit) : null;\n rule.entity = {\n type: data.entityType === \"PRODUCT\" ? \"VARIANT\" : data.entityType,\n id: data.entityType === \"PRODUCT\" ? null : data[entityType].id, // TODO: change this for brands and category\n };\n let get = {};\n data.entityType === \"PRODUCT\" &&\n data[entityType].forEach((item) => {\n get[item.id] = {\n q: Number(item.q),\n };\n if (!comboDiscount) {\n get[item.id].t = item.t;\n get[item.id].v = (item.v && Number(item.v)) || 0;\n }\n });\n rule.get = get;\n data.rule = rule;\n delete data.product;\n delete data.category;\n delete data.brand;\n return data;\n }\n\n render() {\n let {\n entityType,\n discountTypes,\n itemDiscountTypes,\n _this,\n hasOfferStarted,\n } = this.props;\n const { values } = _this.state;\n const { itemDiscountType } = _this.state.values;\n entityType = this.props.entityTypeMap[entityType];\n const comboDiscount = itemDiscountType === \"COMBO_DISCOUNT\";\n const items = values[entityType];\n const itemsLength = items ? items.length : 0;\n return (\n \n \n \n )}\n
\n {`Buy`}
\n {/* {buyItemsLength === 0 && entityType === 'product' &&\n {buyItemsLength ? (\n
\n Get
\n {/* {entityType === 'product' &&\n {itemsLength ? (\n
\n \n \n generateProducts(response.data.product)}\n onChange={_this.addItem}\n />} */}\n \n )}\n
\n );\n }\n}\n\nexport default SF;\n","import React, { Component, Fragment } from \"react\";\nimport { Input, Select, MultiSelect } from \"../../../../components/Form\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport API from \"../../../../lib/api\";\nimport { getDisplaySlot, isAllRulesValid } from \"../../../../lib/commonlyused\";\nimport { isExtensionEnabled } from \"../../../../lib/auth\";\n\nimport deleteIcon from \"./delete.svg\";\n\nclass SFXGSD extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n slotOptions: [],\n };\n this.validationHandler = this.validationHandler.bind(this);\n this.submitHandler = this.submitHandler.bind(this);\n this.handleAddRule = this.handleAddRule.bind(this);\n this.handleDeleteRule = this.handleDeleteRule.bind(this);\n this.initData = this.initData.bind(this);\n }\n\n initData() {\n let { method, _this, onUpdateValues } = this.props;\n if (method === \"add\") {\n let { values } = _this && _this.state;\n if (!values.rule) {\n onUpdateValues({ ...values, rule: [{ total: {} }] });\n }\n }\n }\n\n validationHandler(parent) {\n let validations = JSON.parse(JSON.stringify(parent.state.validations));\n parent.setState({\n validations,\n });\n }\n\n submitHandler(formData) {\n let data = Object.assign({}, formData);\n\n delete data.ruleDetail;\n delete data.product;\n delete data.category;\n delete data.brand;\n delete data.total;\n delete data.entity;\n return data;\n }\n\n handleAddRule(e) {\n e && e.preventDefault();\n let { _this } = this.props;\n let { values } = _this.state;\n let { rule } = values || {};\n\n if (!rule) {\n rule = [{ total: {} }];\n }\n\n rule = [...rule, { total: {} }];\n\n _this.setState({ pressedSubmitWithCurrentData: false });\n\n this.props.onUpdateValues({ ...values, rule });\n }\n\n handleDeleteRule(index) {\n let { _this } = this.props;\n let { values } = _this.state;\n let { rule } = values || {};\n\n if (rule) {\n rule = rule.filter((_, idx) => idx !== index);\n }\n\n this.props.onUpdateValues({ ...values, rule });\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.type !== this.props.type) {\n this.initData();\n }\n }\n\n componentDidMount() {\n this.initData();\n if (isExtensionEnabled(\"DeliverySlots\")) {\n this.api = new API({ url: `/order-service/slot` });\n this.api\n .get({ paginated: \"false\" })\n .then((response) => {\n let slots = response.data.slot;\n let slotOptions = slots.map((slot) => {\n let ob = {};\n ob.text = getDisplaySlot(slot);\n ob.value = slot.id;\n return ob;\n });\n this.setState({\n slotOptions,\n });\n })\n .catch((err) => {\n console.error(err);\n if (err.code === 401) {\n throw err;\n }\n this.error = err;\n });\n }\n }\n\n render() {\n let { discountTypes, _this, hasOfferStarted, type, method } = this.props;\n const { values } = _this.state;\n const { rule } = values || {};\n\n return (\n \n {entityType === \"product\" && (\n \n \n )}\n
\n {entityType === \"product\" && (\n {getMessage(\"offer.get\")}
\nsmoe
\n {/* {entityType === 'product' &&\n {itemsLength ? (\n
\n \n {Boolean(index) && (\n this.handleDeleteRule(index)}\n src={deleteIcon}\n alt=\"delete\"\n />\n )}\n
\n \n \n _this.handleDiscountChange(type, [index])\n }\n disabled={hasOfferStarted}\n />\n
\n {isExtensionEnabled(\"DeliverySlots\") && type === \"SFXGCD\" && (\n \n
\n )}\n \n ))\n : null}\n {method === \"add\" && type === \"SFXGCD\" && (\n \n
\n );\n }\n}\n\nexport default PWP;\n","import React, { Component } from \"react\";\nimport {\n Input,\n Radio,\n Select,\n Checkbox,\n ProductSearch,\n BrandSearch,\n CategorySearch,\n} from \"../../../../components/Form\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport ItemTable from \"./ItemTable\";\nimport { isAllRulesValid } from \"../../../../lib/commonlyused\";\nimport deleteIcon from \"./delete.svg\";\n\nclass BMIN extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n slotOptions: [],\n };\n this.validationHandler = this.validationHandler.bind(this);\n this.submitHandler = this.submitHandler.bind(this);\n this.initData = this.initData.bind(this);\n this.handleAddRule = this.handleAddRule.bind(this);\n this.handleDeleteRule = this.handleDeleteRule.bind(this);\n }\n\n initData() {\n let { method, _this, onUpdateValues } = this.props;\n if (method === \"add\") {\n let { values } = _this && _this.state;\n if (!(values.rule && values.rule.elementGroups)) {\n onUpdateValues({\n ...values,\n rule: { ...values.rule, elementGroups: [{ total: {} }] },\n });\n }\n }\n }\n\n validationHandler(parent) {\n const validations = JSON.parse(JSON.stringify(parent.state.validations));\n parent.setState({\n validations,\n });\n }\n\n submitHandler(formData) {\n let data = JSON.parse(JSON.stringify(formData));\n const comboDiscount = data.rule.itemDiscountType === \"COMBO_DISCOUNT\";\n let nonEntity = false;\n if (!data.includes) {\n nonEntity = true;\n }\n const entityType = data.entityType.toLowerCase();\n const entityIds = Array.isArray(data[entityType])\n ? data[entityType].map((item) => item.id)\n : [data[entityType].id];\n const newRule = {\n elementGroups: data.rule.elementGroups.map((eg) => ({\n ...eg,\n maxDiscount: eg.maxDiscount !== \"\" ? eg.maxDiscount : undefined,\n })),\n entity: {\n type: data.entityType === \"PRODUCT\" ? \"VARIANT\" : data.entityType,\n },\n entityIds: entityIds,\n };\n\n if (nonEntity) {\n newRule[\"non-entity\"] = JSON.parse(JSON.stringify(newRule.entity));\n delete newRule.entity;\n }\n if (comboDiscount) {\n newRule.isCombo = true;\n }\n data.rule = newRule;\n delete data.includes;\n delete data.ruleDetail;\n delete data.product;\n delete data.category;\n delete data.brand;\n delete data.total;\n delete data.entity;\n return data;\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.type !== this.props.type) {\n this.initData();\n }\n }\n\n componentDidMount() {\n this.initData();\n }\n\n handleAddRule(e) {\n e && e.preventDefault();\n let { _this } = this.props;\n let { values } = _this.state;\n let { rule } = values || {};\n let { elementGroups } = rule || {};\n\n if (!elementGroups) {\n rule = { ...rule, elementGroups: [{ total: {} }] };\n }\n\n rule = { ...rule, elementGroups: [...rule.elementGroups, { total: {} }] };\n\n _this.setState({ pressedSubmitWithCurrentData: false });\n\n this.props.onUpdateValues({ ...values, rule });\n }\n\n handleDeleteRule(index) {\n let { _this } = this.props;\n let { values } = _this.state;\n let { rule } = values || {};\n\n if (rule && rule.elementGroups) {\n let elementGroups = rule.elementGroups.filter((_, idx) => idx !== index);\n rule = { ...rule, elementGroups };\n }\n\n this.props.onUpdateValues({ ...values, rule });\n }\n\n render() {\n let {\n discountTypes,\n itemDiscountTypes,\n _this,\n hasOfferStarted,\n type,\n method,\n } = this.props;\n const { values } = _this.state;\n const entityTypeLowerCase = values.entityType.toLowerCase();\n const includes = values.includes;\n let entityText = \"\";\n if (entityTypeLowerCase === \"product\") {\n entityText = \"Products\";\n } else if (entityTypeLowerCase === \"category\") {\n entityText = \"Categories\";\n } else {\n entityText = \"Brands\";\n }\n\n const items = values[entityTypeLowerCase];\n const itemsLength = items ? items.length : 0;\n\n const { rule } = values || {};\n\n const { elementGroups } = rule || {};\n\n return (\n \n
\n \n
\n );\n }\n}\n\nexport default BMIN;\n","import React, { Component } from \"react\";\nimport { Input, Select, Searchable } from \"../../../../components/Form\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport Loader from \"../../../../components/Loader\";\n\nclass BFXATP extends Component {\n constructor(props) {\n super(props);\n this.state = {\n options: [],\n selectedVal: [],\n };\n this.validationHandler = this.validationHandler.bind(this);\n this.submitHandler = this.submitHandler.bind(this);\n }\n validationHandler(parent) {\n let validations = JSON.parse(JSON.stringify(parent.state.validations));\n parent.setState({\n validations,\n });\n }\n\n submitHandler(formData) {\n let data = Object.assign({}, formData);\n let tagIds = data.tagIds && data.tagIds.map((tag) => tag.id);\n const newRule = {\n tagIds: tagIds,\n total: data.rule.total,\n };\n data.rule = newRule;\n delete data.ruleDetail;\n delete data.product;\n delete data.category;\n delete data.brand;\n delete data.total;\n delete data.entity;\n return data;\n }\n\n render() {\n let { discountTypes, _this, hasOfferStarted, isNewOffer } = this.props;\n const { values, tagsLoaded } = _this.state;\n return (\n \n {entityTypeLowerCase === \"product\" && (\n response.data.category}\n label={getMessage(`offer.${entityTypeLowerCase}`)}\n placeholder={getMessage(`offer.categories.placeholder`)}\n {..._this.generateStateMappers({\n stateKeys: [\"category\"],\n loseEmphasisOnFill: true,\n })}\n multiple\n readOnly={hasOfferStarted}\n />\n )}\n \n +\n \n )}\n
\n \n \n _this.handleDiscountChange(type, [\"elementGroups\", index])\n }\n disabled={hasOfferStarted}\n />\n
\n ))\n : null}\n {method === \"add\" && type === \"BMIN\" && (\n \n {Boolean(index) && (\n this.handleDeleteRule(index)}\n src={deleteIcon}\n alt=\"delete\"\n />\n )}\n
\n \n
\n ) : null}\n \n {includes\n ? `${entityText} ${getMessage(\"offer.includeText\")} :`\n : `${entityText} ${getMessage(\"offer.excludeText\")} :`}\n
\n\n
\n );\n }\n}\n\nexport default BFXATP;\n","import React, { Component } from \"react\";\nimport {\n Input,\n Radio,\n Select,\n ProductSearch,\n BrandSearch,\n CategorySearch,\n Checkbox,\n} from \"../../../../components/Form\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport { isAllRulesValid } from \"../../../../lib/commonlyused\";\nimport ItemTable from \"./ItemTable\";\nimport deleteIcon from \"./delete.svg\";\n\nclass BMINXGFG extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n slotOptions: [],\n };\n this.validationHandler = this.validationHandler.bind(this);\n this.submitHandler = this.submitHandler.bind(this);\n this.handleAddRule = this.handleAddRule.bind(this);\n this.handleDeleteRule = this.handleDeleteRule.bind(this);\n }\n\n initData() {\n let { method, _this, onUpdateValues } = this.props;\n if (method === \"add\") {\n let { values } = _this && _this.state;\n if (!(values.rule && values.rule.elementGroups)) {\n onUpdateValues({\n ...values,\n rule: { ...values.rule, elementGroups: [{ total: {} }] },\n });\n }\n }\n }\n\n validationHandler(parent) {\n let formData = JSON.parse(JSON.stringify(parent.state.values));\n const validations = JSON.parse(JSON.stringify(parent.state.validations));\n const comboDiscount = formData.itemDiscountType === \"COMBO_DISCOUNT\";\n if (comboDiscount) {\n ((validations.rule && validations.rule.elementGroups) || []).forEach(\n (group) => {\n group.product &&\n group.product.forEach((pdt) => {\n delete pdt.t;\n delete pdt.v;\n });\n }\n );\n } else {\n ((validations.rule && validations.rule.elementGroups) || []).forEach(\n (group) => {\n group.total && delete group.total;\n }\n );\n }\n parent.setState({\n validations,\n });\n }\n\n submitHandler(formData, buyKey) {\n let data = Object.assign({}, formData);\n const comboDiscount = formData.itemDiscountType === \"COMBO_DISCOUNT\";\n let nonEntity = false;\n if (!data.includes) {\n nonEntity = true;\n }\n if (!comboDiscount) {\n data.rule && delete data.rule.total;\n }\n\n const entityType = data.entityType.toLowerCase();\n // let getObject = {}\n let entityIds = [];\n if (entityType === \"product\") {\n Array.isArray(data[`${buyKey}product`]) &&\n data[`${buyKey}product`].map((item) => {\n entityIds.push(item.id);\n return null;\n });\n } else {\n Array.isArray(data[entityType]) &&\n data[entityType].map((item) => {\n entityIds.push(item.id);\n return null;\n });\n }\n\n // Array.isArray(data['product']) && data['product'].map(item => {\n // getObject[item.id] = {q: Number(item.q)}\n // if (!comboDiscount) {\n // getObject[item.id].t = item.t\n // getObject[item.id].v = Number(item.v)\n // }\n // return null\n // })\n\n const newRule = {\n minAmount: data.rule && data.rule.minAmount,\n entityIds: entityIds.length > 0 ? entityIds : undefined,\n entity:\n entityIds.length > 0\n ? {\n type: data.entityType === \"PRODUCT\" ? \"VARIANT\" : data.entityType,\n }\n : undefined,\n // get: {...getObject}\n elementGroups:\n data.rule.elementGroups &&\n data.rule.elementGroups.map((group) => {\n let getObject = {};\n group.product &&\n group.product.map((item) => {\n getObject[item.id] = { q: Number(item.q) };\n if (!comboDiscount) {\n getObject[item.id].t = item.t;\n getObject[item.id].v = Number(item.v);\n }\n return null;\n });\n group.get = getObject;\n delete group.product;\n !comboDiscount && delete group.total;\n return group;\n }),\n };\n // if (comboDiscount) {\n // newRule.total = data.rule.total\n // }\n if (nonEntity && entityIds.length > 0) {\n newRule[\"non-entity\"] = JSON.parse(JSON.stringify(newRule.entity));\n delete newRule.entity;\n }\n\n data.rule = newRule;\n delete data.itemDiscountType;\n delete data.pwpTagId;\n delete data.includes;\n delete data.ruleDetail;\n delete data.product;\n delete data.category;\n delete data.brand;\n delete data.entity;\n return data;\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.type !== this.props.type) {\n this.initData();\n }\n }\n\n componentDidMount() {\n this.initData();\n }\n\n handleAddRule(e) {\n e && e.preventDefault();\n let { _this } = this.props;\n let { values } = _this.state;\n let { rule } = values || {};\n let { elementGroups } = rule || {};\n\n if (!elementGroups) {\n rule = { ...rule, elementGroups: [{ total: {} }] };\n }\n\n rule = { ...rule, elementGroups: [...rule.elementGroups, { total: {} }] };\n\n _this.setState({ pressedSubmitWithCurrentData: false });\n\n this.props.onUpdateValues({ ...values, rule });\n }\n\n handleDeleteRule(index) {\n let { _this } = this.props;\n let { values } = _this.state;\n let validations = JSON.parse(JSON.stringify(_this.state.validations));\n let validationsRule = validations.rule;\n let { rule } = values || {};\n\n if (rule && rule.elementGroups) {\n let elementGroups = rule.elementGroups.filter((_, idx) => idx !== index);\n rule = { ...rule, elementGroups };\n }\n\n if (validationsRule && validationsRule.elementGroups) {\n let elementGroups = validationsRule.elementGroups.filter(\n (_, idx) => idx !== index\n );\n validationsRule = { ...validationsRule, elementGroups };\n }\n\n this.props.onUpdateValues({ ...values, rule });\n this.props.onUpdateValidations({ ...validations, validationsRule });\n }\n\n render() {\n let {\n discountTypes,\n itemDiscountTypes,\n _this,\n hasOfferStarted,\n buyKey,\n type,\n method,\n } = this.props;\n const { values } = _this.state;\n const { itemDiscountType } = _this.state.values;\n const includes = values.includes;\n const entityType = values.entityType.toLowerCase();\n const comboDiscount = itemDiscountType === \"COMBO_DISCOUNT\";\n const buyItems = values[`buy${entityType}`];\n const buyItemsLength = buyItems ? buyItems.length : 0;\n const items = values[entityType];\n const itemsLength = items ? items.length : 0;\n let entityText = \"\";\n if (entityType === \"product\") {\n entityText = \"Products\";\n } else if (entityType === \"category\") {\n entityText = \"Categories\";\n } else {\n entityText = \"Brands\";\n }\n\n const { rule } = values || {};\n const { elementGroups } = rule || {};\n\n return (\n \n {isNewOffer || (!isNewOffer && tagsLoaded) ? (\n {\n let tags = response.data.tag || [];\n tags = (tags || []).map((tag) => {\n tag.name = `${tag.name}`;\n tag.id = `${tag.id}`;\n return tag;\n });\n return tags;\n }}\n multiple\n {..._this.generateStateMappers({\n stateKeys: [\"tags\"],\n loseEmphasisOnFill: true,\n })}\n readOnly={hasOfferStarted}\n />\n ) : (\n
\n \n
\n );\n }\n}\n\nexport default BMINXGFG;\n","import React, { Component } from \"react\";\nimport { Input, Select, BrandSearch } from \"../../../../components/Form\";\nimport ItemTable from \"./ItemTable\";\n\nimport { getMessage } from \"../../../../lib/translator\";\n\nclass SFBGSD extends Component {\n constructor(props) {\n super(props);\n this.submitHandler = this.submitHandler.bind(this);\n this.validationHandler = this.validationHandler.bind(this);\n }\n\n validationHandler(parent) {\n let validations = JSON.parse(JSON.stringify(parent.state.validations));\n parent.setState({\n validations,\n });\n }\n\n submitHandler(formData) {\n let data = JSON.parse(JSON.stringify(formData));\n const entityType = data.entityType.toLowerCase();\n let rule = data.rule || {};\n if (rule && rule.total) {\n rule.total.v = Number(rule.total.v);\n }\n rule[\"entity\"] = {\n type: data.entityType === \"PRODUCT\" ? \"VARIANT\" : data.entityType,\n id: data.entityType === \"PRODUCT\" ? null : data[entityType].id, // TODO: change this for brands and category\n };\n rule.limit = Number(rule.limit);\n\n data.rule = rule;\n // data.entityId = 1\n data.offerType = data.type;\n delete data.pwpTagId;\n delete data.quantity;\n delete data.minQuantity;\n delete data.product;\n delete data.category;\n delete data.brand;\n delete data.entity;\n delete data.includes;\n delete data.itemDiscountType;\n return data;\n }\n render() {\n let { entityType, discountTypes, _this, type, hasOfferStarted } =\n this.props;\n const { values } = _this.state;\n entityType = this.props.entityTypeMap[entityType];\n const items = values[entityType];\n const itemsLength = items ? items.length : 0;\n return (\n \n \n +\n \n )}\n
\n \n response.data.category}\n label={\n includes\n ? `${entityText} ${getMessage(\"offer.includeText\")} :`\n : `${entityText} ${getMessage(\"offer.excludeText\")} :`\n }\n placeholder={getMessage(`offer.categories.placeholder`)}\n {..._this.generateStateMappers({\n stateKeys: [\"category\"],\n loseEmphasisOnFill: true,\n })}\n multiple\n readOnly={hasOfferStarted}\n />\n )}\n
\n {elementGroups\n ? elementGroups.map((_, index) => {\n const getProductItems =\n (values &&\n values.rule &&\n values.rule.elementGroups &&\n values.rule.elementGroups[index] &&\n values.rule.elementGroups[index].product) ||\n [];\n return (\n {getMessage(\"offer.buy\")}
\n {entityType === \"product\" && (\n\n
\n ) : null}\n {entityType === \"category\" && itemsLength ? (\n \n
\n ) : null}\n {buyItemsLength ? (\n \n
\n ) : null}\n \n \n _this.addItem(item, [\"elementGroups\", index])\n }\n readOnly={hasOfferStarted}\n />\n
\n );\n })\n : null}\n {method === \"add\" && type === \"BMINXGFG\" && (\n \n \n \n _this.handleDiscountChange(type, [\n \"elementGroups\",\n index,\n ])\n }\n readOnly={hasOfferStarted}\n />\n \n )}\n
\n \n {Boolean(index) && (\n this.handleDeleteRule(index)}\n src={deleteIcon}\n alt=\"delete\"\n />\n )}\n
\n {getMessage(\"offer.get\")}
\n\n {getProductItems.length > 0 ? (\n
\n \n
\n );\n }\n}\n\nexport default SFBGSD;\n","import React, { Component } from \"react\";\nimport {\n ProductSearch,\n Input,\n Select,\n BrandSearch,\n CategorySearch,\n} from \"../../../../components/Form\";\nimport ItemTable from \"./ItemTable\";\n\nimport { getMessage } from \"../../../../lib/translator\";\n\nclass SFEGSD extends Component {\n constructor(props) {\n super(props);\n this.submitHandler = this.submitHandler.bind(this);\n this.validationHandler = this.validationHandler.bind(this);\n }\n\n validationHandler(parent) {\n let validations = JSON.parse(JSON.stringify(parent.state.validations));\n parent.setState({\n validations,\n });\n }\n\n submitHandler(formData) {\n let data = JSON.parse(JSON.stringify(formData));\n const entityType = data.entityType.toLowerCase();\n let rule = data.rule || {};\n if (rule && rule.total) {\n rule.total.v = Number(rule.total.v);\n }\n if (rule.minAmount) {\n rule.minAmount = Number(rule.minAmount);\n }\n if (rule.minQuantity) {\n rule.minQuantity = Number(rule.minQuantity);\n delete rule.minQuantity;\n }\n rule[\"entity\"] = {\n type: data.entityType === \"PRODUCT\" ? \"VARIANT\" : data.entityType,\n id: data.entityType === \"PRODUCT\" ? null : data[entityType].id, // TODO: change this for brands and category\n };\n rule.limit = Number(rule.limit);\n\n if (entityType === \"product\") {\n rule.variants = data.product.map((pdt) => pdt.id).filter(Boolean);\n }\n\n // these should be enhanced later as it is made only for SFEGSD\n\n if (entityType === \"category\" && data?.type === \"SFEGSD\") {\n rule.variants = data.category.map((pdt) => pdt.id).filter(Boolean);\n }\n if (entityType === \"brand\" && data?.type === \"SFEGSD\") {\n rule.variants = data.brand.map((pdt) => pdt.id).filter(Boolean);\n }\n\n data.rule = rule;\n // data.entityId = 1\n data.offerType = data.type;\n delete data.pwpTagId;\n delete data.quantity;\n delete data.minQuantity;\n delete data.product;\n delete data.category;\n delete data.brand;\n delete data.entity;\n delete data.includes;\n delete data.itemDiscountType;\n return data;\n }\n render() {\n let { entityType, discountTypes, _this, type, hasOfferStarted } =\n this.props;\n const { values } = _this.state;\n const { itemDiscountType } = _this.state.values;\n entityType = this.props.entityTypeMap[entityType];\n const comboDiscount = itemDiscountType === \"COMBO_DISCOUNT\";\n const items = values[entityType];\n const itemsLength = items ? items.length : 0;\n return (\n \n {entityType === \"brand\" && (\n
\n \n {itemsLength ? (\n
\n \n
\n );\n }\n}\n\nexport default SFEGSD;\n","import React from \"react\";\nimport moment from \"moment\";\nimport {\n BaseForm,\n Radio,\n Select,\n SingleDatePicker,\n Input,\n Upload,\n Textarea,\n MultiSelect,\n Toggle,\n MultiTextInput,\n Checkbox,\n TimePicker,\n} from \"../../../../components/Form\";\nimport Tabs from \"../../../../components/Tabs\";\nimport SelectStoresSearch from \"../../../../components/SelectStoresSearch\";\nimport BANYATP from \"./BANYATP\";\nimport BMINXATP from \"./BMINXATP\";\nimport BANYGYD from \"./BANYGYD\";\nimport BXATP from \"./BXATP\";\nimport BXGYD from \"./BXGYD\";\nimport SF from \"./SF\";\nimport SFXGSD from \"./SFXGSD\";\nimport PWP from \"./PWP\";\nimport BMIN from \"./BMIN\";\nimport BFXATP from \"./BFXATP\";\nimport BMINXGFG from \"./BMINXGFG\";\nimport { withRouter } from \"react-router-dom\";\nimport \"./style.css\";\n\nimport { getMessage } from \"../../../../lib/translator\";\nimport API from \"../../../../lib/api\";\nimport SegmentsForm from \"../../../../components/SegmentsForm\";\nimport downloadIcon from \"../../Coupons/download.svg\";\nimport { Dialog } from \"../../../../components/Popup\";\nimport { isExtensionEnabled } from \"../../../../lib/auth\";\nimport MetaDataFormFields from \"../../../../components/MetaDataFormFields\";\nimport { getNestedValues } from \"../../../../lib/commonlyused\";\nimport checkHttpResponseCode from \"../../../../utils/isApiCallSuccessfull\";\nimport SFBGSD from \"./SFBGSD\";\nimport SFEGSD from \"./SFEGSD\";\n\nconst noop = () => {\n return null;\n};\n\nlet orderTypeOptions = [\n {\n text: getMessage(\"offer.ordertype.options.bulk\"),\n value: \"BULK\",\n },\n {\n text: getMessage(\"offer.ordertype.options.delivery\"),\n value: \"DELIVERY\",\n },\n {\n text: getMessage(\"offer.ordertype.options.pickup\"),\n value: \"PICKUP\",\n },\n {\n text: getMessage(\"offer.ordertype.options.offline\"),\n value: \"OFFLINE\",\n },\n];\n\nlet tabsList = [\n {\n text: \"Promotion\",\n },\n {\n text: \"Restrictions\",\n },\n {\n text: \"Override Content\",\n },\n];\n\nclass OfferForm extends BaseForm {\n constructor(props) {\n super(props);\n this.isNewOffer = this.props.method === \"add\";\n this.offerForm = {\n BANYATP: BANYATP,\n BMINXATP: BMINXATP,\n BANYGYD: BANYGYD,\n SFXGSD: SFXGSD,\n SFXGCD: SFXGSD,\n BXATP: BXATP,\n BXGYD: BXGYD,\n SF: SF,\n PWP: PWP,\n BMIN: BMIN,\n BFXATP: BFXATP,\n BMINXGFG: BMINXGFG,\n SFBGSD: SFBGSD,\n SFEGSD: SFEGSD,\n };\n this.entityType = {\n PRODUCT: \"product\",\n BRAND: \"brand\",\n CATEGORY: \"category\",\n };\n this.noMaxRedemption = [\"SFXGSD\", \"SFXGCD\", \"BMIN\", \"BFXATP\", \"BMINXGFG\"];\n this.buyKey = this.props.options.buyKey;\n const entityType = this.state.values.entityType;\n if (!entityType) {\n this.state.values.entityType = \"PRODUCT\";\n }\n if (!this.state.values.itemDiscountType) {\n this.state.values.itemDiscountType = \"COMBO_DISCOUNT\";\n }\n\n if (this.props.method === \"add\" && this.state.values) {\n this.state.values.status = \"ENABLED\";\n }\n this.freeDiscoutOffers = [\n \"SF\",\n \"BXGYD\",\n \"BANYGYD\",\n \"SFXGSD\",\n \"SFXGCD\",\n \"PWP\",\n \"SFBGSD\",\n \"SFEGSD\",\n ]; // offers that offer free pdts\n this.saveData = this.saveData.bind(this);\n this.addItem = this.addItem.bind(this);\n this.deleteItem = this.deleteItem.bind(this);\n this.addItemBuy = this.addItemBuy.bind(this);\n this.deleteBuyItem = this.deleteBuyItem.bind(this);\n this.handleEntityTypeOnchange = this.handleEntityTypeOnchange.bind(this);\n this.handleDiscountChange = this.handleDiscountChange.bind(this);\n this.fetchData = this.fetchData.bind(this);\n this.handleOfferTypeOnchange = this.handleOfferTypeOnchange.bind(this);\n this.handleImageClick = this.handleImageClick.bind(this);\n this.onClosePopup = this.onClosePopup.bind(this);\n this.noItemsOffers = [\"SFXGSD\", \"SFXGCD\", \"PWP\"];\n this.handleUniquePromocodeValidations =\n this.handleUniquePromocodeValidations.bind(this);\n this.changeTab = this.changeTab.bind(this);\n this.readyForSubmission = this.readyForSubmission.bind(this);\n this.handleCloneOffer = this.handleCloneOffer.bind(this);\n this.handleToggleClonePopup = this.handleToggleClonePopup.bind(this);\n this.closeErrorDialog = this.closeErrorDialog.bind(this);\n this.handleUpdateValues = this.handleUpdateValues.bind(this);\n this.handleUpdateValidations = this.handleUpdateValidations.bind(this);\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (prevProps.options.pwpTagId !== this.props.options.pwpTagId) {\n let values = JSON.parse(JSON.stringify(this.state.values));\n values.pwpTagId = this.props.options.pwpTagId;\n this.setState({\n values,\n });\n }\n if (\n this.state.values &&\n this.state.values.type === \"BMINXGFG\" &&\n this.state.values.stackable\n ) {\n let disableCheckbox = false;\n let isCombo =\n this.state.values &&\n this.state.values.itemDiscountType === \"COMBO_DISCOUNT\";\n if (isCombo) {\n disableCheckbox =\n this.state.values.rule &&\n this.state.values.rule.elementGroups &&\n this.state.values.rule.elementGroups.some(\n (group) => group.total && group.total.t === \"FIXED\"\n );\n } else {\n let items =\n (this.state.values.rule &&\n this.state.values.rule.elementGroups.reduce(\n (acc, group) => acc.concat(group.product || []),\n []\n )) ||\n [];\n items.length > 0 &&\n items.map((item) => {\n if (item.t === \"FIXED\") {\n disableCheckbox = true;\n }\n return null;\n });\n }\n\n if (disableCheckbox) {\n this.setState({\n values: { ...this.state.values, stackable: false },\n });\n disableCheckbox = false;\n }\n } else if (\n this.state.values &&\n this.state.values.type === \"BMINXATP\" &&\n this.state.values.stackable\n ) {\n let disableCheckbox = false;\n disableCheckbox =\n this.state.values.rule &&\n this.state.values.rule.elementGroups &&\n this.state.values.rule.elementGroups.some(\n (group) => group.total && group.total.t === \"FIXED\"\n );\n if (disableCheckbox) {\n this.setState({\n values: { ...this.state.values, stackable: false },\n });\n }\n } else {\n if (\n this.state.values &&\n this.state.values.itemDiscountType === \"COMBO_DISCOUNT\"\n ) {\n if (\n this.state.values &&\n this.state.values.rule &&\n this.state.values.rule.total &&\n this.state.values.rule.total.t &&\n this.state.values.rule.total.t === \"FIXED\" &&\n this.state.values.stackable\n ) {\n this.setState({\n values: { ...this.state.values, stackable: false },\n });\n }\n } else if (\n this.state.values &&\n this.state.values.itemDiscountType === \"INDIVIDUAL_DISCOUNT\" &&\n this.state.values.stackable\n ) {\n let items = this.state.values.product || [];\n let disableCheckbox = false;\n items.length > 0 &&\n items.map((item) => {\n if (item.t === \"FIXED\") {\n disableCheckbox = true;\n }\n return null;\n });\n\n if (disableCheckbox) {\n this.setState({\n values: { ...this.state.values, stackable: false },\n });\n disableCheckbox = false;\n }\n }\n }\n }\n\n componentDidMount() {\n const { state, props } = this;\n const { method } = props;\n const { values } = state;\n this.tabForms =\n method === \"add\" ? [false, false, true] : [\"true\", true, true];\n this.fetchData();\n\n // This is for cloning an offer. From the offer details page,\n // the values are stored in sessionStorage and user is redirected to add offers page\n // and in this page hydrate the state from sessionStorage\n if (method === \"add\") {\n let clonedOffer = JSON.parse(\n window.sessionStorage.getItem(\"clonedOffer\") || \"{}\"\n );\n clonedOffer = { ...values, ...clonedOffer };\n this.setState({ values: clonedOffer });\n }\n }\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.options.activeIndex !== this.props.options.activeIndex) {\n // this.fetchData()\n }\n }\n\n componentWillUnmount() {\n if (this.props.method === \"add\") {\n window.sessionStorage.removeItem(\"clonedOffer\");\n }\n }\n\n readyForSubmission() {\n let activeIndex = this.props.options.activeIndex;\n for (let i = 0; i < this.tabForms.length; i++) {\n if (activeIndex === i) {\n continue;\n } else {\n if (!this.tabForms[i]) {\n return { val: false, nextTabIndex: i };\n }\n }\n }\n\n return { value: true, nextTabIndex: undefined };\n }\n\n async fetchData() {\n this.hasOfferStarted =\n moment().diff(this.state.values.offerValidFrom) > 0 &&\n this.props.method === \"edit\";\n let entityId =\n this.state.values.rule &&\n this.state.values.rule.entity &&\n this.state.values.rule.entity.id;\n\n if (isExtensionEnabled(\"EntityMetaData\")) {\n const metaDataApi = new API({ url: \"/config-service/meta-data\" });\n metaDataApi\n .get()\n .then((response) => {\n let offerMetadata = response.data.config.entityMetaData.offer || {};\n this.setState({\n metadataFormTypes: offerMetadata,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n\n if (this.props.method !== \"add\") {\n const offerType = this.props.value.offerType;\n let cartPrice =\n this.props.value &&\n this.props.value.rule &&\n this.props.value.rule.cartPrice;\n const entityType = this.state.values.entityType.toLowerCase();\n let getParams = \"\";\n let multiTierGetParams = \"\";\n let multiTierGetPdts =\n offerType === \"BMINXGFG\" &&\n (this.props.value.rule.elementGroups || []).map((group) => group.get);\n if (multiTierGetPdts) {\n multiTierGetPdts.map((getPdts) => {\n (Object.keys(getPdts) || []).forEach((id) => {\n multiTierGetParams += `id=${Number(id)}&`;\n });\n return null;\n });\n }\n let getPdts = this.props.value.rule.get;\n if (getPdts) {\n if (offerType === \"PWP\") {\n const rule = this.props.value.rule;\n const id = rule && rule.get && rule.get.variantId;\n getParams = `id=${id}`;\n } else {\n (Object.keys(getPdts) || []).forEach((id) => {\n getParams += `id=${Number(id)}&`;\n });\n }\n }\n\n if (this.state.values.tagIds && this.state.values.tagIds.length > 0) {\n let queryString = \"\";\n let tags = [];\n this.state.values.tagIds.map((id, index) => {\n if (index > 0) {\n queryString += `&id=${id}`;\n } else {\n queryString += `id=${id}`;\n }\n return null;\n });\n const tagApi = new API({\n url: `/catalogue-service/tag/?${queryString}`,\n });\n await tagApi\n .get()\n .then((res) => {\n if (checkHttpResponseCode(res.code) && res.status === \"SUCCESS\") {\n tags = res.data && res.data.tag;\n }\n })\n .catch((err) => console.error(err));\n\n this.setState((prevState) => {\n return {\n values: { ...prevState.values, tags },\n tagsLoaded: tags.length > 0,\n };\n });\n }\n\n if (getParams) {\n const getProductsAPI = new API({\n url: `/catalogue-service/product?${getParams}`,\n });\n await getProductsAPI\n .get()\n .then((response) => {\n let products = response.data.product || [];\n let productsFromProp = this.props.value.rule.get;\n products = products.map((product) => {\n let newProduct = product;\n let productFromProp =\n productsFromProp && productsFromProp[product.id];\n newProduct.q = productFromProp && productFromProp.q;\n if (this.props.value.itemDiscountType === \"INDIVIDUAL_DISCOUNT\") {\n newProduct.t = productFromProp && productFromProp.t;\n newProduct.v = productFromProp && productFromProp.v;\n }\n return newProduct;\n });\n let values = Object.assign({}, this.state.values);\n values.product = products;\n if (cartPrice) {\n values.cartPrice = cartPrice;\n }\n if (offerType === \"PWP\") {\n let rule = values.rule;\n rule.total = rule.get;\n rule.total.variantId = products[0];\n values.rule = rule;\n }\n this.setState({\n values,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n if (multiTierGetParams) {\n const getProductsAPI = new API({\n url: `/catalogue-service/product?${multiTierGetParams}`,\n });\n await getProductsAPI\n .get()\n .then((response) => {\n let products = response.data.product || [];\n let values = Object.assign({}, this.state.values);\n let { rule } = values;\n let { elementGroups } = rule;\n let newElementGroups = elementGroups.map((group) => {\n group.product =\n group.get &&\n Object.keys(group.get)\n .map((getPdtId) => {\n let newProduct =\n products.find(\n (pdt) => Number(pdt.id) === Number(getPdtId)\n ) || null;\n if (newProduct) newProduct.q = group.get[getPdtId].q;\n if (\n newProduct &&\n this.props.value.itemDiscountType ===\n \"INDIVIDUAL_DISCOUNT\"\n ) {\n newProduct.t = group.get[getPdtId].t;\n newProduct.v = group.get[getPdtId].v;\n }\n return newProduct;\n })\n .filter(Boolean);\n delete group.get;\n return group;\n });\n rule.elementGroups = newElementGroups;\n values.rule = rule;\n this.setState({\n values,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n if (entityType === \"product\") {\n let pdtIds = this.props.value.rule.variants || [];\n let buyParams = \"\";\n let entityParams = \"\";\n pdtIds.forEach((id) => {\n buyParams += `id=${id}&`;\n });\n let buyPdts = this.props.value.rule.buy;\n let entityIds = [];\n if (\n this.props.value.offerType === \"BMIN\" ||\n this.props.value.offerType === \"BMINXGFG\"\n ) {\n entityIds = this.props.value.rule.entityIds || [];\n }\n\n if (this.props.value.offerType === \"SFEGSD\") {\n entityIds = this.props.value.rule.entity.ids;\n }\n\n if (buyPdts) {\n Object.keys(buyPdts).forEach((id) => {\n buyParams += `id=${Number(id)}&`;\n });\n }\n\n if (entityIds.length > 0) {\n entityIds.map((id, index) => {\n if (index === 0) {\n entityParams += `id=${Number(id)}`;\n } else {\n entityParams += `&id=${Number(id)}`;\n }\n return null;\n });\n }\n\n if (buyParams) {\n const buyProductsAPI = new API({\n url: `/catalogue-service/product?${buyParams}`,\n });\n await buyProductsAPI\n .get()\n .then((response) => {\n let products = response.data.product || [];\n products = products.map((product) => {\n let newProduct = product;\n let buyProduct = buyPdts && buyPdts[product.id];\n buyProduct =\n typeof buyProduct === \"object\"\n ? buyProduct\n : { q: buyProduct };\n if (buyProduct) {\n newProduct.q = buyProduct.q;\n newProduct.t = buyProduct.t;\n newProduct.v = buyProduct.v;\n }\n return newProduct;\n });\n let values = Object.assign({}, this.state.values);\n if (\n this.props.value.offerType === \"BXATP\" ||\n this.props.value.offerType === \"BMINXATP\" ||\n this.props.value.offerType === \"BANYATP\" ||\n this.props.value.offerType === \"PT\"\n ) {\n values.product = products;\n } else {\n values[`${this.props.options.buyKey}product`] = products;\n }\n this.setState({\n values,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n if (entityIds.length > 0) {\n const entityProductsApi = new API({\n url: `/catalogue-service/product?${entityParams}`,\n });\n await entityProductsApi\n .get()\n .then((response) => {\n if (\n checkHttpResponseCode(response.code) &&\n response.status === \"SUCCESS\"\n ) {\n let values = JSON.parse(JSON.stringify(this.state.values));\n if (\n this.props.value.offerType === \"BMIN\" ||\n this.props.value.offerType === \"SFEGSD\"\n ) {\n values[\"product\"] = response.data.product;\n this.setState({\n values,\n });\n }\n if (this.props.value.offerType === \"BMINXGFG\") {\n let products = response.data.product || [];\n products = products.map((product) => {\n let newProduct = product;\n let buyProduct = buyPdts && buyPdts[product.id];\n buyProduct =\n typeof buyProduct === \"object\"\n ? buyProduct\n : { q: buyProduct };\n if (buyProduct) {\n newProduct.q = buyProduct.q;\n newProduct.t = buyProduct.t;\n newProduct.v = buyProduct.v;\n }\n return newProduct;\n });\n\n let values = Object.assign({}, this.state.values);\n values[`${this.props.options.buyKey}product`] = products;\n this.setState({\n values,\n });\n }\n }\n })\n .catch((err) => console.error(err));\n }\n } else {\n let values = Object.assign({}, this.state.values);\n if (entityType === \"category\") {\n if (entityId) {\n this.api = new API({\n url: `/catalogue-service/category?id=${entityId}`,\n });\n this.api\n .get()\n .then((response) => {\n values.category =\n (Array.isArray(response.data.category) &&\n response.data.category[0]) ||\n null;\n if (cartPrice) {\n values.cartPrice = cartPrice;\n }\n this.setState({\n values,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n } else {\n let entityIds = this.props.value.rule.entityIds || [];\n if (offerType === \"SFEGSD\") {\n entityIds = this.props.value.rule.entity.ids || [];\n }\n let entityParams = \"\";\n if (entityIds.length > 0) {\n entityIds.map((id, index) => {\n if (index === 0) {\n entityParams += `id=${Number(id)}`;\n } else {\n entityParams += `&id=${Number(id)}`;\n }\n return null;\n });\n\n const entityCategoryApi = new API({\n url: `/catalogue-service/category?${entityParams}`,\n });\n entityCategoryApi\n .get()\n .then((response) => {\n if (\n checkHttpResponseCode(response.code) &&\n response.status === \"SUCCESS\"\n ) {\n let values = JSON.parse(JSON.stringify(this.state.values));\n values[\"category\"] = response.data.category;\n this.setState({\n values,\n });\n }\n })\n .catch((err) => console.error(err));\n }\n }\n } else if (entityType === \"brand\") {\n if (entityId) {\n this.api = new API({\n url: `/catalogue-service/brand?id=${entityId}`,\n });\n this.api\n .get()\n .then((response) => {\n values.brand =\n (Array.isArray(response.data.brand) &&\n response.data.brand[0]) ||\n null;\n if (cartPrice) {\n values.cartPrice = cartPrice;\n }\n this.setState({\n values,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n } else {\n let entityIds = this.props.value.rule.entityIds || [];\n if (offerType === \"SFEGSD\") {\n entityIds = this.props.value.rule.entity.ids || [];\n }\n let entityParams = \"\";\n if (entityIds.length > 0) {\n entityIds.map((id, index) => {\n if (index === 0) {\n entityParams += `id=${Number(id)}`;\n } else {\n entityParams += `&id=${Number(id)}`;\n }\n return null;\n });\n\n const entityBrandsApi = new API({\n url: `/catalogue-service/brand?${entityParams}`,\n });\n entityBrandsApi\n .get()\n .then((response) => {\n if (\n checkHttpResponseCode(response.code) &&\n response.status === \"SUCCESS\"\n ) {\n let values = JSON.parse(JSON.stringify(this.state.values));\n values[\"brand\"] = response.data.brand;\n this.setState({\n values,\n });\n }\n })\n .catch((err) => console.error(err));\n }\n }\n }\n }\n }\n }\n\n saveData(data) {\n let formData = { ...data, ...this.state.values };\n if (this.isFormValid()) {\n this.props.onSubmit(formData);\n } else {\n }\n }\n\n deleteCategoryBrandsItem(index, entityType) {\n let values = JSON.parse(JSON.stringify(this.state.values));\n let items = (values && values[entityType]) || [];\n items.splice(index, 1);\n let validations = JSON.parse(JSON.stringify(this.state.validations));\n let itemsValidation = (validations && validations[entityType]) || [];\n if (itemsValidation) {\n if (items.length > 0) {\n itemsValidation.valueMissing = true;\n itemsValidation.valid = false;\n } else {\n itemsValidation.valueMissing = undefined;\n itemsValidation.valid = true;\n }\n }\n this.setState({\n values,\n validations,\n });\n }\n\n addItem(newItem, nestedKeys, entityType = \"product\") {\n if (!newItem) {\n return;\n }\n let values = JSON.parse(JSON.stringify(this.state.values));\n\n let valuesRef =\n values &&\n (nestedKeys !== undefined\n ? getNestedValues(values, [\"rule\", ...nestedKeys])\n : values);\n\n if (!valuesRef[entityType]) {\n valuesRef[entityType] = [];\n }\n const index = valuesRef[entityType].filter(\n (item) => item.id === newItem.id\n ).length;\n if (index > 0) {\n return;\n }\n valuesRef[entityType].push(newItem);\n this.setState({\n values,\n });\n }\n\n addItemBuy(newItem) {\n if (!newItem) {\n return;\n }\n const entityType = \"product\";\n let values = Object.assign({}, this.state.values);\n const key = `${this.props.options.buyKey}${entityType}`;\n if (!values[key]) {\n values[key] = [];\n }\n const index = values[key].filter((item) => item.id === newItem.id).length;\n if (index > 0) {\n return;\n }\n values[key].push(newItem);\n this.setState({\n values,\n });\n }\n\n deleteBuyItem(index) {\n let values = Object.assign({}, this.state.values);\n const entityType = \"product\";\n let key = `${this.props.options.buyKey}${entityType}`;\n let items = values[key] || [];\n items.splice(index, 1);\n let validations = Object.assign({}, this.state.validations);\n let itemsValidation = (validations && validations[key]) || [];\n itemsValidation.splice(index, 1);\n this.setState({\n validations,\n values,\n });\n }\n\n deleteItem(index, nestedKeys) {\n let values = JSON.parse(JSON.stringify(this.state.values));\n const entityType = \"product\";\n let items = !nestedKeys\n ? values && values[entityType]\n : getNestedValues(values, [\"rule\", ...nestedKeys, entityType]);\n items = items || [];\n\n items.splice(index, 1);\n let validations = JSON.parse(JSON.stringify(this.state.validations));\n let itemsValidation = !nestedKeys\n ? validations && validations[entityType]\n : getNestedValues(validations, [\"rule\", ...nestedKeys, entityType]);\n itemsValidation = itemsValidation || [];\n\n itemsValidation.splice(index, 1);\n this.setState({\n values,\n validations,\n });\n }\n\n handleDiscountChange(type, nestedKeys) {\n if (nestedKeys === undefined) {\n this.updateState([\"rule\", \"total\", \"t\"]);\n } else {\n this.updateState([\"rule\", ...nestedKeys, \"total\", \"t\"]);\n }\n\n this.setState((prevState) => {\n let newState = JSON.parse(JSON.stringify(prevState));\n let ruleValue =\n newState &&\n newState.values &&\n (nestedKeys !== undefined\n ? getNestedValues(newState.values, [\"rule\", ...nestedKeys])\n : newState.values.rule);\n let ruleValidation =\n newState &&\n newState.validations &&\n (nestedKeys !== undefined\n ? getNestedValues(newState.validations, [\"rule\", ...nestedKeys])\n : newState.validations.rule);\n if (ruleValue) {\n if (\n type === \"FREE\" &&\n ruleValidation &&\n ruleValidation.total &&\n ruleValidation.total.v &&\n !ruleValidation.total.v.valid\n ) {\n ruleValidation.total.v.valid = true;\n } else if (\n type !== \"FREE\" &&\n ruleValidation &&\n ruleValidation.total &&\n ruleValidation.total.v\n ) {\n ruleValidation.total.v.valid = false;\n }\n ruleValue.total.t = type;\n ruleValue.total.v = \"\";\n }\n return newState;\n });\n }\n\n beforeSubmit() {\n let data = Object.assign({}, this.state.values);\n let offerType = data.type;\n let instance = new this.offerForm[offerType]();\n instance.validationHandler(this);\n }\n async _submitHandler(e) {\n e && e.preventDefault();\n await this.beforeSubmit();\n this.setState({\n pressedSubmitWithCurrentData: true,\n });\n let isValid = this.isFormValid();\n let activeIndex = this.props.options.activeIndex;\n if (isValid) {\n this.tabForms[activeIndex] = true;\n let result = this.readyForSubmission();\n if (result.value) {\n if (this.props.onSubmit) {\n let values = JSON.parse(JSON.stringify(this.state.values));\n this.props.onSubmit(values);\n } else {\n this.onSubmit(this.state.values);\n }\n } else {\n this.changeTab(result.nextTabIndex);\n }\n } else {\n this.tabForms[activeIndex] = false;\n }\n }\n handleEntityTypeOnchange(targetValue) {\n let { productOnlyOffers, brandOnlyOffers, offerMapping } =\n this.props.options;\n let values = JSON.parse(JSON.stringify(this.state.values));\n let validations = JSON.parse(JSON.stringify(this.state.validations));\n let offersArray = [...offerMapping];\n offersArray = offersArray.filter((el) => {\n return (\n productOnlyOffers.indexOf(el.value) < 0 &&\n brandOnlyOffers.indexOf(el.value) < 0\n );\n });\n let offerType = values.type;\n if (\n targetValue !== \"PRODUCT\" &&\n offersArray.findIndex((offer) => offer.value === offerType) === -1\n ) {\n values.type = null;\n }\n values.entityType = targetValue;\n if (values.entityType === \"PRODUCT\") {\n delete values[\"brand\"];\n delete values[\"category\"];\n delete validations[\"brand\"];\n delete validations[\"category\"];\n }\n\n if (values.entityType === \"BRAND\") {\n delete values[\"buyproduct\"];\n delete values[\"product\"];\n delete values[\"category\"];\n delete validations[\"product\"];\n delete validations[\"category\"];\n }\n\n if (values.entityType === \"CATEGORY\") {\n delete values[\"buyproduct\"];\n delete values[\"product\"];\n delete values[\"brand\"];\n delete validations[\"product\"];\n delete validations[\"brand\"];\n }\n this.setState({ values, validations });\n }\n handleOfferTypeOnchange(type) {\n let values = {\n type: type,\n status: this.state.values.status,\n entityType: this.state.values.entityType,\n itemDiscountType: \"COMBO_DISCOUNT\",\n pwpTagId: this.state.values.pwpTagId,\n };\n if (values.type === \"BMIN\" || values.type === \"BMINXATP\") {\n values.rule = { itemDiscountType: \"COMBO_DISCOUNT\" };\n }\n let validations = { type: this.state.validations.type };\n this.setState({ values, validations, pressedSubmitWithCurrentData: false });\n }\n\n handleImageClick() {\n this.setState({\n showPromoDownloadPopup: true,\n });\n this.api = new API({\n url: `/offer-service/offer/${this.props.resourceId}/promocode`,\n });\n this.api\n .get()\n .then((res) => {})\n .catch((error) => {\n console.error(error);\n if (error.code === 401 || error.code === 403) {\n throw error;\n }\n });\n }\n\n onClosePopup() {\n this.setState({\n showPromoDownloadPopup: false,\n });\n }\n\n handleUniquePromocodeValidations(val) {\n if (!val) {\n let validations = JSON.parse(JSON.stringify(this.state.validations));\n let values = JSON.parse(JSON.stringify(this.state.values));\n values[\"hasUniquePromocode\"] = val;\n delete validations.prefix;\n delete validations.suffix;\n delete validations.numberOfPromos;\n this.setState({\n validations,\n values,\n });\n } else {\n let values = JSON.parse(JSON.stringify(this.state.values));\n values[\"hasUniquePromocode\"] = val;\n this.setState({\n values,\n });\n }\n return val;\n }\n\n changeTab(val) {\n let isValid = this.isFormValid();\n let activeIndex = this.props.options.activeIndex;\n if (isValid) {\n this.tabForms[activeIndex] = true;\n } else {\n this.tabForms[activeIndex] = false;\n }\n let validations = { type: this.state.validations.type };\n this.setState({ validations }, () => this.props.options.changeTab(val));\n }\n\n // This method is for updating the values in state, whatever values\n // are being sent from the child component, the parent is gonna save it.\n // So, handle it with care inside child component\n handleUpdateValues(values) {\n this.setState({ values });\n }\n\n handleUpdateValidations(validations) {\n this.setState({ validations });\n }\n\n handleCloneOffer(onlyCopy = true) {\n let { state, props } = this;\n let { values } = state || {};\n if (!onlyCopy) {\n this.disableOffer(values)\n .then(async () => {\n let redemptionValues;\n redemptionValues = await this.fetchRedemptionCount(values.id);\n let totalRedemption = redemptionValues.redemptionLimit;\n let redeemedCount = Number(redemptionValues.redemptionCount || 0);\n\n values = { ...values, totalRedemption, redeemedCount };\n\n this.cloneOffer(values, onlyCopy);\n props.history.push(\"/marketing/offers/add\");\n })\n .catch((error) => {\n this.setState({\n showClonePopup: false,\n disableError: true,\n error: error,\n });\n console.error(error);\n });\n } else {\n values = {\n ...values,\n totalRedemption: null,\n redeemedCount: null,\n customerRedemptionLimit: null,\n };\n this.cloneOffer(values, onlyCopy);\n props.history.push(\"/marketing/offers/add\");\n }\n }\n\n handleToggleClonePopup() {\n this.setState({ showClonePopup: !this.state.showClonePopup });\n }\n\n disableOffer(values) {\n let { id } = values;\n let url = `/offer-service/offer/${id}`;\n let api = new API({ url });\n return api.put({ id, status: \"DISABLED\" });\n }\n\n cloneOffer(state = {}, onlyCopy) {\n let { id, ...newOfferState } = state;\n if (!onlyCopy) {\n newOfferState = { ...newOfferState, copyOf: id };\n }\n delete newOfferState.clientId;\n window.sessionStorage.setItem(\"clonedOffer\", JSON.stringify(newOfferState));\n }\n\n closeErrorDialog() {\n this.setState({ disableError: false });\n }\n\n async fetchRedemptionCount(id) {\n let url = `/offer-service/offer/${id}/redemption`;\n let api = new API({ url });\n let res = await api.get();\n let { data } = res;\n let { redemptionCount, redemptionLimit } = data || {};\n\n return { redemptionCount, redemptionLimit };\n }\n\n render() {\n const { Form } = this.components;\n const { SubmitButton, CancelButton } = this.buttons;\n const { entityIds, stores, itemDiscountTypes } = this.props.options;\n let {\n offerMapping,\n discountTypes,\n pwpTagId,\n productOnlyOffers,\n brandOnlyOffers,\n } = this.props.options;\n const { values } = this.state;\n const { type, entityType, tags, oldFormat } = values;\n const tagsLength = tags && tags.length > 0;\n const offerType = values && values.type;\n const redeemedCount = values && values.redeemedCount;\n const FormComponent = this.offerForm[offerType] || noop;\n const itemsCount =\n values &&\n entityType &&\n values[entityType.toLowerCase()] &&\n (Array.isArray(values[entityType.toLowerCase()])\n ? values[entityType.toLowerCase()].length\n : values[entityType.toLowerCase()]);\n let activeIndex = this.props.options.activeIndex || 0;\n let promomtionsTab = activeIndex === 0;\n let restrictionsTab = activeIndex === 1;\n let overrideTab = activeIndex === 2;\n if (this.isNewOffer) {\n offerMapping = offerMapping.filter((offer) => offer.value !== \"SF\");\n }\n let applicableOffers = offerMapping.slice();\n if (entityType !== \"PRODUCT\") {\n // Not all offers are applicable on category and brand entities\n applicableOffers = applicableOffers.filter((el) => {\n return productOnlyOffers.indexOf(el.value) < 0;\n });\n }\n if (entityType !== \"BRAND\") {\n // Not all offers are applicable on category and brand entities\n applicableOffers = applicableOffers.filter((el) => {\n return brandOnlyOffers.indexOf(el.value) < 0;\n });\n }\n let applicableDiscounts = discountTypes.slice();\n if (this.freeDiscoutOffers.indexOf(offerType) > -1) {\n applicableDiscounts.push({\n text: \"Free\",\n value: \"FREE\",\n });\n }\n\n let disableCheckbox = false;\n if (values && values.type === \"BMINXGFG\") {\n let product = (values && values.product) || [];\n product.length > 0 &&\n product.map((item) => {\n if (item.t === \"FIXED\") {\n disableCheckbox = true;\n }\n return null;\n });\n } else if (values && values.type !== \"BMINXGFG\") {\n if (values.itemDiscountType === \"COMBO_DISCOUNT\") {\n disableCheckbox =\n values &&\n values.rule &&\n values.rule.total &&\n values.rule.total.t &&\n values.rule.total.t === \"FIXED\";\n } else {\n let product = (values && values.product) || [];\n product.length > 0 &&\n product.map((item) => {\n if (item.t === \"FIXED\") {\n disableCheckbox = true;\n }\n return null;\n });\n }\n }\n\n let isDisabled = this.props.value && this.props.value.status === \"DISABLED\";\n\n let isClonedOfferWithContinuation =\n redeemedCount !== null && redeemedCount !== undefined;\n\n return (\n \n {entityType === \"product\" && (\n _this.addItem(item, undefined, entityType)}\n />\n )}\n {entityType === \"brand\" && (\n _this.addItem(item, undefined, entityType)}\n />\n )}\n
\n \n {itemsLength ? (\n
\n \n {!isDisabled && (\n \n )}\n \n
\n )}\n \n `${tab.text}`)}\n default={0}\n onClick={this.changeTab}\n active={this.props.options.activeIndex}\n />\n
\n \n {\n let status = !(this.getState([\"status\"]) === \"ENABLED\")\n ? \"ENABLED\"\n : \"DISABLED\";\n this.updateState([\"status\"], status);\n }}\n />\n
\n \n {this.state.showClonePopup && (\n \n \n
\n \n {description}\n
\n \n \n {offerValidFrom && offerValidTill\n ? `${getPrintableTime(offerValidFrom).split(\", \")[0]} - ${\n getPrintableTime(offerValidTill).split(\", \")[0]\n }`\n : null}\n \n \n {`${getMessage(\n \"offer.type\"\n )} : `}\n {OfferTypes[offerType]}\n
\n \n {props.viewData &&\n props.viewData.map((row, index) => (\n
\n );\n});\n\nclass DraggableListingPage extends React.Component {\n constructor(props) {\n super(props);\n let searchParams = Object.assign(\n {},\n ...this.props.router.location.search\n .slice(1)\n .split(\"&\")\n .filter(Boolean)\n .map((keystr) => {\n keystr = keystr.split(\"=\");\n return {\n [keystr[0]]: decodeURIComponent(keystr[1]),\n };\n })\n );\n if (Object.keys(searchParams).length > 0) {\n window.localStorage.setItem(this.props.className, 1);\n }\n let apiParams = {};\n if (props.api) {\n if (props.api.params) {\n apiParams = props.api.params;\n }\n if (props.storeDependent && isExtensionEnabled(\"MultiStoreSupport\")) {\n apiParams.storeId = get(\"store\") || getDefaultStore().storeId;\n }\n }\n this.state = {\n data: {\n items: null,\n paging: null,\n filters: searchParams || {}, // Corresponds to the filters applied to the API\n viewItems: null,\n },\n filters: {\n // Corresponds to the state of the 'filters' view\n shown: Object.keys(searchParams).length > 0,\n },\n apiParams: apiParams,\n loaders: {\n data: false,\n },\n form: {\n shown: false,\n rowIndex: -1, // The row being edited\n data: null,\n },\n deleteDialog: {\n shown: false,\n data: {},\n },\n errorDialog: {\n shown: false,\n message: \"\",\n title: \"\",\n },\n saveBanner: false,\n firstLoadDone: false, // Indicate that we have gotten results from API at least once\n };\n\n this.primaryKey = this.props.primaryKey || \"id\";\n\n if (props.api && props.api.url) {\n this.api = new API({ url: props.api.url });\n }\n\n /* Default hooks */\n // Method to extract data from the API call made\n this._transformResponse = (response) => response;\n this._transformSubmit = (form) => form;\n\n /* Hook overrides */\n if (props.api && props.api.transform) {\n this._transformResponse = props.api.transform;\n }\n if (props.form && props.form.transformSubmit) {\n this._transformSubmit = props.form.transformSubmit;\n }\n if (props.updateView) {\n this.updateView = this.updateView.bind(this);\n }\n\n this._showDataLoader = this._showDataLoader.bind(this);\n this._hideDataLoader = this._hideDataLoader.bind(this);\n this.changePage = this.changePage.bind(this);\n this.performAction = this.performAction.bind(this);\n this._showForm = this._showForm.bind(this);\n this._hideForm = this._hideForm.bind(this);\n this._showFilters = this._showFilters.bind(this);\n this._hideFilters = this._hideFilters.bind(this);\n this._toggleFilters = this._toggleFilters.bind(this);\n this.createResource = this.createResource.bind(this);\n this.modifyResource = this.modifyResource.bind(this);\n this.getResource = this.getResource.bind(this);\n this.applyFilters = this.applyFilters.bind(this);\n this.clearFilters = this.clearFilters.bind(this);\n this.confirmDelete = this.confirmDelete.bind(this);\n this.throwError = this.throwError.bind(this);\n this._showDeleteDialog = this._showDeleteDialog.bind(this);\n this._hideDeleteDialog = this._hideDeleteDialog.bind(this);\n this._showErrorDialog = this._showErrorDialog.bind(this);\n this._hideErrorDialog = this._hideErrorDialog.bind(this);\n this.onSortEnd = this.onSortEnd.bind(this);\n this.onDraggableSubmit = this.onDraggableSubmit.bind(this);\n this.onAddBanner = this.onAddBanner.bind(this);\n this.handleMove = this.handleMove.bind(this);\n this.closeDragDialog = this.closeDragDialog.bind(this);\n }\n // Some data lookup methods\n _getRow(data) {\n let result = {\n data: null,\n index: -1,\n };\n let { items } = this.state.data;\n for (let i = 0, len = items.length; i < len; i++) {\n let item = items[i];\n let matched = true;\n for (let key in data) {\n if (!(key in item) || item[key] !== data[key]) {\n matched = false;\n break;\n }\n }\n if (matched) {\n result.data = item;\n result.index = i;\n break;\n }\n }\n return result;\n }\n // Some utility methods to manage states\n _showDataLoader() {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.loaders.data = true;\n return newState;\n });\n }\n _hideDataLoader() {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.loaders.data = false;\n return newState;\n });\n }\n _showForm(rowIndex, data) {\n // If rowIndex is specified, then a particular row is being edited\n if (this.props.form && this.props.form.component) {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.form.shown = true;\n newState.form.rowIndex = isFinite(rowIndex) ? rowIndex : -1;\n if (data) {\n newState.form.data = data;\n }\n return newState;\n });\n }\n }\n _hideForm() {\n // Clear the form and hide it\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.form.shown = false;\n newState.form.rowIndex = -1;\n newState.form.data = null;\n return newState;\n });\n }\n _showFilters() {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.filters.shown = true;\n return newState;\n });\n }\n _hideFilters() {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.filters.shown = false;\n return newState;\n });\n }\n _toggleFilters() {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.filters.shown = !prevState.filters.shown;\n return newState;\n });\n }\n _hideDeleteDialog() {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.deleteDialog.shown = false;\n return newState;\n });\n }\n _showDeleteDialog() {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.deleteDialog.shown = true;\n return newState;\n });\n }\n _hideErrorDialog() {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.errorDialog.shown = false;\n newState.errorDialog.message = \"\";\n newState.errorDialog.title = \"\";\n return newState;\n });\n }\n _showErrorDialog() {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.errorDialog.shown = true;\n return newState;\n });\n }\n // Methods to manage data via API\n /**\n * Makes API call to create the resource\n * @param {object} data - Data to be created in DB\n * @return {Oject} newState - updated state [Immutated]\n */\n createResource(data) {\n let api = new API({\n url: this.props.api.url,\n });\n let params =\n this.props.form && this.props.form.overwriteWithApiParams === false\n ? Object.assign({}, this.state.apiParams, this._transformSubmit(data))\n : Object.assign({}, this._transformSubmit(data), this.state.apiParams);\n return api\n .post(params)\n .then(\n (response) => {\n let data = this._transformResponse(response);\n this.setState({\n pageType: data && data.pageType,\n id: data && data.id,\n });\n /* Show new entry at top of the table */\n if (this.props.form && this.props.form.filterBeforeAdding) {\n let filterBeforeAdding = this.props.form.filterBeforeAdding;\n data = filterBeforeAdding(data, this);\n }\n if (data) {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n let updatedItems = newState.data.items;\n this.props.addNewItemToLast\n ? updatedItems.push(data)\n : updatedItems.unshift(data);\n newState.data.items = updatedItems;\n const updatedPaging = newState.data.paging;\n updatedPaging.count = (updatedPaging.count || 0) + 1;\n newState.data.paging = updatedPaging;\n return newState;\n });\n }\n this.viewData = this.props.updateView\n ? this.state.data.viewItems && this.state.data.viewItems.length > 0\n ? this.state.data.viewItems\n : this.state.data.items\n : this.state.data.items;\n if (this.viewData) {\n this.onAddBanner();\n }\n this._hideForm();\n },\n (error) => {\n this.throwError(error);\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n modifyResource(data) {\n // Make an API call to update the resource\n let api = new API({\n url: this.props.api.url + \"/\" + data[this.primaryKey],\n });\n let params =\n this.props.form && this.props.form.overwriteWithApiParams === false\n ? Object.assign({}, this.state.apiParams, this._transformSubmit(data))\n : Object.assign({}, this._transformSubmit(data), this.state.apiParams);\n return api\n .put(params)\n .then(\n (response) => {\n /* Update the table row */\n if (this.props.form && this.props.form.filterBeforeAdding) {\n let filterBeforeAdding = this.props.form.filterBeforeAdding;\n data = filterBeforeAdding(data, this);\n }\n let updatedRow = this._transformResponse(response);\n let row = this._getRow({\n [this.primaryKey]: updatedRow[this.primaryKey],\n });\n if (data) {\n if (row.index > -1) {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n let updatedItems = newState.data.items;\n updatedItems.splice(row.index, 1, updatedRow);\n newState.data.items = updatedItems;\n return newState;\n });\n }\n } else {\n if (row.index > -1) {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n let updatedItems = newState.data.items;\n updatedItems.splice(row.index, 1);\n newState.data.items = updatedItems;\n const updatedPaging = newState.data.paging;\n updatedPaging.count = updatedPaging.count - 1;\n newState.data.paging = updatedPaging;\n return newState;\n });\n }\n }\n this.props.api &&\n this.props.api.afterSubmit &&\n this.props.api.afterSubmit(response);\n this.viewData = this.props.updateView\n ? this.state.data.viewItems && this.state.data.viewItems.length > 0\n ? this.state.data.viewItems\n : this.state.data.items\n : this.state.data.items;\n this._hideForm();\n },\n (error) => {\n this.throwError(error);\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n /**\n * Makes API call to delete the resource\n * @param {object} data - Data to be deleted from DB\n * @return {Oject} newState - updated state [Immutated]\n */\n deleteResource(data) {\n let api = new API({\n url: this.props.api.url + \"/\" + data[this.primaryKey],\n });\n let params = Object.assign({}, data, this.state.apiParams);\n api\n .delete(params)\n .then(\n (response) => {\n /* Update the table row */\n let row = this._getRow({\n [this.primaryKey]: data[this.primaryKey],\n });\n if (row.index > -1) {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n let updatedItems = newState.data.items;\n updatedItems.splice(row.index, 1);\n newState.data.items = updatedItems;\n const updatedPaging = newState.data.paging;\n updatedPaging.count = updatedPaging.count - 1;\n newState.data.paging = updatedPaging;\n return newState;\n });\n }\n this.viewData = this.props.updateView\n ? this.state.data.viewItems && this.state.data.viewItems.length > 0\n ? this.state.data.viewItems\n : this.state.data.items\n : this.state.data.items;\n },\n (error) => {\n this.throwError(error, getMessage(\"errorDialog.delete.error.title\"));\n }\n )\n .then(this._hideForm)\n .catch((error) => {\n console.error(error);\n });\n }\n\n getResource(data) {\n let api = new API({\n url: this.props.api.url + \"/\" + data[this.primaryKey],\n });\n let params = Object.assign(\n {},\n this._transformSubmit(data),\n this.state.apiParams\n );\n api\n .get(params)\n .then(\n (response) => {\n /* Update the table row */\n let updatedRow = this._transformResponse(response);\n let row = this._getRow({\n [this.primaryKey]: updatedRow[this.primaryKey],\n });\n if (row.index > -1) {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n let updatedItems = newState.data.items;\n updatedItems.splice(row.index, 1, updatedRow);\n newState.data.items = updatedItems;\n return newState;\n });\n }\n this.props.api &&\n this.props.api.afterSubmit &&\n this.props.api.afterSubmit(response);\n\n this._hideForm();\n },\n (error) => {\n this.throwError(error);\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n fetchTableData(params = {}) {\n if (!this.api) {\n return;\n }\n this._showDataLoader();\n if (Object.keys(params).length > 0) {\n params = Object.assign({}, this.state.apiParams, params);\n } else {\n params = Object.assign({}, params, this.state.apiParams);\n }\n return this.api\n .get(params)\n .then((response) => {\n this.setState(\n (prevState) => {\n let newState = Object.assign({}, prevState);\n newState.data.items = this._transformResponse(response);\n if (this.props.updateView) {\n newState.data.viewItems = this._transformResponse(response);\n }\n\n newState.data.paging = (({ count, limit, offset }) => ({\n count,\n limit,\n offset,\n }))(response.data);\n newState.firstLoadDone = true;\n return newState;\n },\n () => {\n this.viewData = this.props.updateView\n ? this.state.data.viewItems &&\n this.state.data.viewItems.length > 0\n ? this.state.data.viewItems\n : this.state.data.items\n : this.state.data.items;\n this.previousData = this.viewData;\n }\n );\n })\n .then(this._hideDataLoader)\n .catch((error) => {\n if (error.code === 404) {\n this.setState(\n (prevState) => {\n let newState = Object.assign({}, prevState);\n newState.data.items = [];\n return newState;\n },\n () => {\n this._hideDataLoader();\n }\n );\n } else if (error.code === 401) {\n throw error;\n }\n console.error(error);\n });\n }\n changePage(page) {\n window.localStorage.setItem(this.props.className, page); // necessary for pagination\n if (Object.keys(this.state.data.filters).length) {\n this.applyFilters(this.state.data.filters, page);\n } else {\n this.fetchTableData({ page });\n }\n }\n applyFilters(filters, page = 1) {\n this.setState({ saveBanner: false });\n window.localStorage.setItem(this.props.className, page); // necessary for pagination\n var transformedFilters = filters;\n if (this.props.filters && this.props.filters.transformSubmit) {\n transformedFilters = this.props.filters.transformSubmit(filters);\n }\n let params = Object.assign(\n {\n offset: 0, // Reset page to 1 if applying filters\n page: page,\n },\n transformedFilters\n );\n this.setState(\n (prevState) => {\n let newState = Object.assign({}, prevState);\n newState.data.filters = filters;\n return newState;\n },\n () => {\n this.fetchTableData(params);\n }\n );\n }\n clearFilters() {\n window.localStorage.setItem(this.props.className, 1);\n this.setState(\n (prevState) => {\n let newState = Object.assign({}, prevState);\n newState.data.filters = {};\n return newState;\n },\n () => {\n this.fetchTableData();\n }\n );\n }\n confirmDelete() {\n this.deleteResource(this.state.deleteDialog.data);\n this._hideDeleteDialog();\n }\n throwError(error, title) {\n if (error.code === 400) {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.errorDialog.message = error.message; // if string does not have a colon\n newState.errorDialog.title = title || \"\";\n return newState;\n }, this._showErrorDialog());\n } else {\n throw error;\n }\n }\n performAction(action, data, updates, deleteRow = false) {\n // action: (string) Action to perform\n // data: The data needed to search a specific a row\n // updates: The data to update the row with\n // deleteRow: delete the row from view without making api call\n if (action in TABLE_ACTIONS) {\n switch (action) {\n case TABLE_ACTIONS.ADD:\n if (this.props.form) {\n this._showForm(-1, data);\n }\n break;\n case TABLE_ACTIONS.EDIT:\n if (this.props.form) {\n // Lookup row number for given data and send that row number\n let row = this._getRow(data);\n if (row.index >= 0) {\n if (updates) {\n // If there are updates, just update row instead of showing form\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n let updatedItems = newState.data.items;\n updatedItems.splice(\n row.index,\n 1,\n Object.assign({}, row.data, updates)\n );\n newState.data.items = updatedItems;\n return newState;\n });\n } else {\n this._showForm(row.index);\n }\n }\n }\n break;\n case TABLE_ACTIONS.UPDATE:\n let row = this._getRow(data);\n if (row.index >= 0 && updates) {\n let params = Object.assign({}, data, updates);\n return this.modifyResource(params);\n }\n break;\n case TABLE_ACTIONS.DELETE:\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n newState.deleteDialog.data = data;\n return newState;\n });\n this._showDeleteDialog();\n break;\n case TABLE_ACTIONS.FILTER:\n // To the user, search & filters are mutually exclusive, but internally,\n // both are implemented as filters\n this.applyFilters(data);\n break;\n case TABLE_ACTIONS.REFRESH:\n let params = {};\n if (data && deleteRow) {\n // If data and delete row are not empty, simply delete the row from the view\n let row = this._getRow(data);\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n let updatedItems = newState.data.items.slice();\n updatedItems.splice(row.index, 1);\n newState.data.items = updatedItems;\n return newState;\n });\n return;\n } else if (data && updates) {\n // If 'data' and 'updates' are not empty, simply update the view by pushing 'updates' into the state\n let row = this._getRow(data);\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState);\n let updatedItems = newState.data.items;\n updatedItems.splice(\n row.index,\n 1,\n Object.assign({}, row.data, updates)\n );\n newState.data.items = updatedItems;\n return newState;\n });\n } else if (data) {\n // TODO: If 'data' is not empty, fetch details for that row and update the data for that row\n this.getResource(data);\n return;\n } else if (this.state.data && this.state.data.filters) {\n // if filters are applied on the table then refresh the page with filters\n params = Object.assign(\n {\n offset: 0, // Reset page to 1 if applying filters\n },\n this.state.data.filters\n );\n }\n this.fetchTableData(params);\n break;\n case TABLE_ACTIONS.SET_API_PARAMS:\n this.setState((prevState) => {\n return {\n apiParams: Object.assign({}, prevState.apiParams, data),\n };\n }, this.fetchTableData);\n break;\n default:\n break;\n }\n } else if (\n this.props.tableProperties.actions &&\n action in this.props.tableProperties.actions\n ) {\n // Perform custom action\n }\n }\n componentDidMount() {\n this.fetchTableData({\n ...this.state.data.filters,\n page: window.localStorage.getItem(this.props.className),\n });\n }\n\n componentWillUnmount() {\n this.api && this.api.cancel();\n }\n\n updateView(data, key) {\n if (this.props.updateView) {\n let newView = this.props.updateView(data, key);\n let newData = Object.assign({}, this.state.data);\n newData.viewItems = newView;\n this.setState({\n data: newData,\n });\n }\n }\n\n closeDragDialog() {\n this.setState({ isDrag: false });\n }\n\n onSortEnd({ oldIndex, newIndex }) {\n let beforeSwap = JSON.parse(JSON.stringify(this.viewData));\n this.viewData =\n this.viewData && arrayMove(this.viewData, oldIndex, newIndex);\n let afterSwap = JSON.parse(JSON.stringify(this.viewData));\n\n beforeSwap.map((ele, index) => {\n if (ele.id !== afterSwap[index].id) {\n this.setState({ saveBanner: true });\n }\n return null;\n });\n\n let updatedArray = afterSwap.map((banner, index) => {\n let newSequence = Object.assign(\n { ...banner },\n { sequence: beforeSwap[index].sequence }\n );\n return newSequence;\n });\n\n this.viewData = updatedArray;\n this.forceUpdate();\n }\n\n onAddBanner() {\n const filter =\n this.state?.data?.filters?.hasOwnProperty(\"pageType\") || false;\n\n const params = {\n pageType: this.state.pageType || \"HOME\",\n };\n\n const updateBannerSequences = (banners) => {\n const promises = banners.map((banner) => {\n if (this.state.id !== banner.id) {\n const api = new API({\n url: `${this.props.api.url}/${banner.id}`,\n });\n return api\n .put({ sequence: banner.sequence + 1 })\n .then((response) => {\n if (this.viewData) {\n this.viewData = this.viewData.map((data) =>\n response.data.banner.id === data.id\n ? { ...data, sequence: response.data.banner.sequence }\n : data\n );\n this.previousData = this.viewData;\n }\n })\n .catch((error) => {\n console.error(`Error updating banner ID: ${banner.id}`, error);\n });\n }\n return Promise.resolve();\n });\n return Promise.all(promises);\n };\n\n const isPageTypeMatching =\n (!filter && this.state.pageType === \"HOME\") ||\n (filter && this.state.data.filters.pageType === this.state.pageType);\n\n if (isPageTypeMatching) {\n this.setState({\n loaders: {\n data: true,\n },\n });\n\n const filteredData = (this.previousData || []).filter(\n (banner) => banner.pageType === this.state.pageType\n );\n\n updateBannerSequences(filteredData)\n .then(() => {\n this.setState({\n isDrag: true,\n loaders: {\n data: false,\n },\n });\n })\n .catch((error) => {\n console.error(\n \"Error during banner update in isPageTypeMatching:\",\n error\n );\n });\n } else {\n this.setState({\n loaders: {\n data: true,\n },\n });\n\n if (this.api) {\n this.api\n .get(params)\n .then((response) => this._transformResponse(response) || [])\n .then((response) => updateBannerSequences(response))\n .then(() => {\n this.setState({\n isDrag: true,\n loaders: {\n data: false,\n },\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n }\n }\n\n onDraggableSubmit() {\n const a = this.viewData;\n const b = this.previousData;\n\n if (a && b) {\n const promises = [];\n for (let index = 0; index < a.length; index++) {\n for (let index1 = 0; index1 < b.length; index1++) {\n if (\n a[index].id === b[index1].id &&\n a[index].sequence !== b[index1].sequence\n ) {\n const api = new API({\n url: `${this.props.api.url}/${a[index].id}`,\n });\n\n const promise = api\n .put({ sequence: a[index].sequence })\n .then(() => {})\n .catch((error) => {\n console.error(\n `Error updating banner ID: ${a[index].id}`,\n error\n );\n });\n\n promises.push(promise);\n }\n }\n }\n\n // Only proceed if there are promises to resolve\n if (promises.length > 0) {\n this.setState({\n loaders: {\n data: true,\n },\n });\n Promise.all(promises)\n .then(() => {\n this.setState({\n isDrag: true,\n loaders: {\n data: false,\n },\n });\n })\n .catch((error) => {\n console.error(\"Error during banner updates:\", error);\n });\n } else {\n console.log(\"No updates required.\");\n }\n } else {\n console.log(\"Invalid data for submission.\");\n }\n // Save the current state to previousData\n this.previousData = this.viewData;\n }\n\n handleMove(event) {\n if (window.innerHeight - event.clientY < 50) {\n window.scrollBy(0, 10);\n } else if (event.clientY < 50) {\n window.scrollBy(0, -10);\n }\n }\n\n render() {\n // TODO: Add support for replacing default messages with localized strings\n let { props } = this;\n let view = null;\n let data = this.state.data;\n let filtersCount = Object.keys(data.filters).filter((key) =>\n Boolean(data.filters[key])\n ).length;\n let filtersApplied = filtersCount > 0;\n let emptyStateShown = false;\n if (\n !this.api ||\n (data.paging &&\n data.paging.count === 0 &&\n !(data.items && data.items.length > 0)) ||\n (data.items && data.items.length === 0)\n ) {\n if (filtersApplied) {\n view = No results found
;\n } else {\n emptyStateShown = true;\n let emptyStateProps = Object.assign({}, props.emptyState);\n let emptyState = \n {emptyState}\n {helpItems}\n
\n );\n }\n } else if (data.items && props.tableProperties.row && this.viewData) {\n let Row = props.tableProperties.row;\n let { count, offset, limit } = data.paging;\n count = Number(count);\n offset = Number(offset);\n limit = Number(limit);\n let totalPages = Math.ceil(count / limit);\n const page = window.localStorage.getItem(this.props.className);\n if (\n this.state &&\n this.state.data &&\n Object.keys(this.state.data.filters).length === 0\n ) {\n this.viewData = this.viewData.filter((banner) => {\n return banner.pageType === \"HOME\";\n });\n }\n\n let emptyStateProps = Object.assign({}, props.emptyState);\n let emptyState = \n {emptyState}\n {helpItems}\n
\n ))\n : (view = (\n \n \n
\n\n
\n ));\n }\n let HeaderActions = this.props.headerActions || NullComponent;\n const Form = props.form\n ? props.form.component || NullComponent\n : NullComponent;\n const Filters = props.filters\n ? props.filters.component || NullComponent\n : NullComponent;\n const allowDelete = props.form && props.form.allowDelete; // to allow delete action from inside the form\n if (emptyStateShown) {\n HeaderActions =\n props.emptyState && props.emptyState.actions\n ? props.emptyState.actions\n : NullComponent;\n }\n let WrapperComponent = this.props.menu\n ? AuthenticatedPage\n : ({ menu, title, storeDependent, ...props }) => ;\n return (\n \n
\n {this.viewData &&\n this.viewData.length > 1 &&\n this.state.saveBanner && (\n {`${getMessage(\n \"pagination.text\"\n )} ${offset + 1} - ${\n limit > 0 && offset >= 0\n ? Math.min(offset + limit, count)\n : count\n } ${getMessage(\"pagination.helperText\")} ${count}`}
\n {totalPages > 1 ? (\n \n \n Save\n \n
\n )}\n \n
\n {this.props.additionalViews\n ? this.props.additionalViews.map((View, index) => (\n {props.title}
\n {(!emptyStateShown && this.state.firstLoadDone) ||\n (this.props.filters && this.props.filters.forceShow) ? (\n\n {this.props.filters ? (\n
\n ) : (\n emptyStateShown && (\n \n
\n ) : null}\n \n
\n )\n )}\n \n
\n \n {getMessage(\"banners.table.validity\")}\n {startTime && endTime ? (\n \n {\" \"}\n {`${formatDate(startTime.split(\" \")[0])}, ${formatTime(\n startTime.split(\" \")[1]\n )} - ${formatDate(endTime.split(\" \")[0])}, ${formatTime(\n endTime.split(\" \")[1]\n )}`}\n \n ) : (\n getMessage(\"banners.table.na\")\n )}\n
\n {scope && (\n \n {scope && {getMessage(\"banners.table.scope\")}}\n {scope === \"STORE\"\n ? window.localStorage.stores &&\n JSON.parse(window.localStorage.stores)\n .map((store) => {\n if (storeId.includes(store.id)) {\n return store.name;\n }\n return null;\n })\n .filter((name) => Boolean(name))\n .join(\", \")\n : \"Global\"}\n
\n )}\n \n {\n let bannerData = response.data.banner;\n if (Array.isArray(bannerData)) {\n bannerData = bannerData.map((banner) => {\n let url = [...banner.url];\n switch (banner.pageType) {\n case pageTypes.category:\n banner.categoryUrl = [...url];\n break;\n case pageTypes.brand:\n banner.brandUrl = [...url];\n break;\n case pageTypes.productTag:\n banner.productTagUrl = [...url];\n break;\n case pageTypes.search:\n banner.searchUrl = [...url];\n break;\n default:\n break;\n }\n if (banner.startTime) {\n banner.startTime = getStandradDateTime(\n utcToLocalTime,\n banner.startTime\n );\n }\n\n if (banner.endTime) {\n banner.endTime = getStandradDateTime(\n utcToLocalTime,\n banner.endTime\n );\n }\n return banner;\n });\n }\n if (bannerData.startTime) {\n bannerData.startTime = getStandradDateTime(\n utcToLocalTime,\n bannerData.startTime\n );\n }\n\n if (bannerData.endTime) {\n bannerData.endTime = getStandradDateTime(\n utcToLocalTime,\n bannerData.endTime\n );\n }\n return bannerData;\n },\n }}\n editHeading={getMessage(\"banners.editForm.header\")}\n addHeading={getMessage(\"banners.addForm.header\")}\n tableProperties={tableProperties}\n modalClassName={\"manage-banners-popup\"}\n form={{\n component: BannerEditForm,\n overwriteWithApiParams: false,\n allowDelete: true,\n options: {\n multiStoreEnabled: multiStoreEnabled,\n stores: stores,\n pages: pages,\n pageTypes: pageTypes,\n scopes: scopes,\n productTagEnabled: productTagEnabled,\n brandsEnabled: brandsEnabled,\n availableLangs: availableLangs,\n },\n filterBeforeAdding: (response, _this) => {\n if (\n _this &&\n _this.state &&\n _this.state.data &&\n Object.keys(_this.state.data.filters).length === 0\n ) {\n return response;\n }\n if (\n _this &&\n _this.state &&\n _this.state.data &&\n _this.state.data.filters &&\n _this.state.data.filters.pageType === response.pageType\n ) {\n return response;\n }\n if (\n _this &&\n _this.state &&\n _this.state.data &&\n _this.state.data.filters.storeId\n ) {\n return response;\n }\n return null;\n },\n transformSubmit: (formData) => {\n let params = Object.assign({}, formData);\n let url = [];\n params.url = url;\n params.linkUrl = \"/\" + params.linkUrl;\n if (params.pageType && params.pageType === pageTypes.category) {\n url =\n params.categoryUrl &&\n params.categoryUrl.map((obj) => {\n let value = obj.slug || obj;\n return value;\n });\n delete params.categoryUrl;\n } else if (\n params.pageType &&\n params.pageType === pageTypes.brand\n ) {\n url =\n params.brandUrl &&\n params.brandUrl.map((obj) => {\n let value = obj.slug || obj;\n return value;\n });\n delete params.brandUrl;\n } else if (\n params.pageType &&\n params.pageType === pageTypes.productTag\n ) {\n url =\n params.productTagUrl &&\n params.productTagUrl.map((obj) => {\n let value = obj.slug || obj;\n return value;\n });\n delete params.productTagUrl;\n } else if (\n params.pageType &&\n params.pageType === pageTypes.search\n ) {\n url =\n params.searchUrl &&\n params.searchUrl.map((value) => {\n return value;\n });\n delete params.searchUrl;\n }\n params.url = (url && [...url]) || [];\n\n if (\n params.pageType &&\n params.pageType === pageTypes.search &&\n params.searchTerm &&\n params.url\n ) {\n url = [...params.url];\n params.url.push(...url);\n }\n\n if (\n params.pageType === pageTypes.home ||\n params.pageType === undefined\n ) {\n delete params.url;\n }\n\n if (moment(params.startTime).isSame(Date.now(), \"day\")) {\n if (params.startTime) {\n let startDate =\n params.startTime.split(\" \") || params.startTime;\n if (startDate[1]) {\n params.startTime = startDate[0] + \" \";\n params.startTime += params.bannerStartTime\n ? params.bannerStartTime + \":00\"\n : startDate[1];\n } else {\n params.startTime = params.startTime + \" \";\n params.startTime += params.bannerStartTime\n ? params.bannerStartTime + \":00\"\n : \"00:00:00\";\n }\n }\n let isBefore = new Date() > new Date(params.startTime);\n if (isBefore) {\n params.startTime =\n params.startTime || moment().format(\"YYYY-MM-DD HH:mm:ss\");\n }\n params.startTime = getStandradDateTime(\n localTimeToUtc,\n params.startTime\n );\n } else {\n if (params.startTime) {\n let startDate =\n params.startTime.split(\" \") || params.startTime;\n if (startDate[1]) {\n params.startTime = startDate[0] + \" \";\n params.startTime += params.bannerStartTime\n ? params.bannerStartTime + \":00\"\n : startDate[1];\n } else {\n params.startTime = params.startTime + \" \";\n params.startTime += params.bannerStartTime\n ? params.bannerStartTime + \":00\"\n : \"00:00:00\";\n }\n params.startTime = getStandradDateTime(\n localTimeToUtc,\n params.startTime\n );\n }\n }\n\n if (params.endTime) {\n let endDate = params.endTime.split(\" \") || params.endTime;\n if (endDate[1]) {\n params.endTime = endDate[0] + \" \";\n params.endTime += params.bannerEndTime\n ? params.bannerEndTime + \":00\"\n : endDate[1];\n } else {\n params.endTime = params.endTime + \" \";\n params.endTime += params.bannerEndTime\n ? params.bannerEndTime + \":00\"\n : \"00:00:00\";\n }\n params.endTime = getStandradDateTime(\n localTimeToUtc,\n params.endTime\n );\n }\n\n if (params.bannerStartTime) {\n delete params.bannerStartTime;\n }\n\n if (params.bannerEndTime) {\n delete params.bannerEndTime;\n }\n\n if (params.startTime === null) {\n delete params.startTime;\n }\n\n if (params.endTime === null) {\n delete params.endTime;\n }\n\n params.sequence = params.sequence ? params.sequence : 1;\n params.scope = params.scope ? params.scope : scopes.global;\n if (params.scope === scopes.global) {\n params.storeId = [];\n }\n return params;\n },\n }}\n emptyState={emptyState}\n filters={{\n component: BannerFilters,\n forceShow: true,\n options: {\n multiStoreEnabled: multiStoreEnabled,\n stores: stores,\n pages: pages,\n availableLangs: availableLangs,\n },\n transformSubmit: (formData) => {\n let data = Object.assign({}, formData);\n let { pageType } = data;\n data.url = data[pageType] && data[pageType].slug;\n if (pageType === \"SEARCH\") data.url = data[\"SEARCH_TERM\"];\n delete data[\"CATEGORY\"];\n delete data[\"BRAND\"];\n delete data[\"PRODUCT_TAG\"];\n delete data[\"SEARCH_TERM\"];\n return data;\n },\n }}\n headerActions={({ onAction }) => (\n {\n onAction(TABLE_ACTIONS.ADD);\n }}\n >\n + {getMessage(\"banners.view.add.button\")}\n \n )}\n />\n
\n );\n }\n}\n\nexport default ManageBanners;\n","import React from \"react\";\n\nfunction FilledStar(props) {\n return (\n \n );\n}\n\nexport default FilledStar;\n","import React from \"react\";\n\nfunction EmptyStar(props) {\n return (\n \n );\n}\n\nexport default EmptyStar;\n","import React, { Component } from \"react\";\n\nimport FilledStar from \"../FilledStar\";\nimport EmptyStar from \"../EmptyStar\";\n\nfunction findMaxNumber(one, two, three, four, five) {\n return Math.max(one, two, three, four, five);\n}\n\nconst DataFormater = (number) => {\n if (number > 1000000000) {\n return (number / 1000000000).toString() + \"B\";\n } else if (number > 1000000) {\n return (number / 1000000).toString() + \"M\";\n } else if (number > 1000) {\n return (number / 1000).toString() + \"K\";\n } else {\n return number;\n }\n};\n\nclass RatingAndReviews extends Component {\n render() {\n let { totalRating, avgRating, noOfReviews } = this.props;\n const totalWidth = findMaxNumber(\n noOfReviews?.one,\n noOfReviews?.two,\n noOfReviews?.three,\n noOfReviews?.four,\n noOfReviews?.five\n );\n let one = (noOfReviews?.one * 100) / totalWidth;\n let two = (noOfReviews?.two * 100) / totalWidth;\n let three = (noOfReviews?.three * 100) / totalWidth;\n let four = (noOfReviews?.four * 100) / totalWidth;\n let five = (noOfReviews?.five * 100) / totalWidth;\n const totalNumberOne = DataFormater(noOfReviews?.one);\n const totalNumberTwo = DataFormater(noOfReviews?.two);\n const totalNumberThree = DataFormater(noOfReviews?.three);\n const totalNumberFour = DataFormater(noOfReviews?.four);\n const totalNumberFive = DataFormater(noOfReviews?.five);\n totalRating = DataFormater(totalRating);\n return (\n <>\n {totalRating > 0 && (\n \n
\n \n
\n \n
\n Total Ratings
{totalRating}\n\n
\n \n
\n Average Rating
\n\n {avgRating.toFixed(1)}\n
\n \n
\n \n
\n \n
\n {five > 0 && {totalNumberFive}}\n \n
\n {four > 0 && {totalNumberFour}}\n \n
\n {three > 0 && {totalNumberThree}}\n \n \n
\n {two > 0 && {totalNumberTwo}}\n \n \n
\n {one > 0 && {totalNumberOne}}\n \n \n \n )}\n \n );\n }\n}\n\nexport default RatingAndReviews;\n","/* eslint-disable react/jsx-no-literals */\nimport React from \"react\";\n\nfunction LeftArrow(props) {\n return (\n \n {\n onAction(TABLE_ACTIONS.UPDATE, { id }, { status: action });\n }}\n >\n {getMessage(`marketing.action.${action}.status`)}\n \n ))}\n \n
\n );\n }\n}\n\nclass Reviews extends Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: true,\n entity: \"orders\",\n index: 0,\n totalRating: 0,\n avgRating: 0,\n noOfReviews: null,\n reviews: null,\n productType: \"All\",\n productId: null,\n showIndividaulInfo: false,\n showAllIndivisualProductReview: false,\n setProductId: null,\n productImage: null,\n productName: null,\n showPopup: false,\n selectedImage: null,\n };\n this.tabHeaders = [\"orders\", \"products\"];\n this.changeTab = this.changeTab.bind(this);\n this.handleChange = this.handleChange.bind(this);\n this.handleShowIndivisualProduct =\n this.handleShowIndivisualProduct.bind(this);\n this.handlePopup = this.handlePopup.bind(this);\n }\n handlePopup = (image) => {\n this.setState((prevState) => ({\n ...prevState,\n showPopup: true,\n selectedImage: image,\n }));\n };\n\n hidePopup = () => {\n this.setState((prevState) => ({\n ...prevState,\n showPopup: false,\n selectedImage: null,\n }));\n };\n\n tableProperties = {\n headers: [\n getMessage(\"review.order.table.header.orderid\"),\n getMessage(\"review.order.table.header.rating\"),\n getMessage(\"review.order.table.header.date\"),\n getMessage(\"review.order.table.header.customer\"),\n ],\n row: (props) => {\n const {\n referenceNumber,\n rating,\n title,\n review,\n customer,\n createdAt,\n images,\n } = props;\n return (\n \n \n #{referenceNumber}\n \n
\n \n
\n \n
\n {title && {title}
}\n {review && {review}
}\n {images && images?.length > 0 && (\n \n {images.map((image) => {\n return (\n this.handlePopup(image)}\n >\n \n
\n );\n })}\n \n )}\n \n
\n \n Date \n
\n \n \n {\n getPrintableTime(\n getStandradDateTime(utcToLocalTime, createdAt)\n ).split(\",\")[0]\n }\n ,\n {\n getPrintableTime(\n getStandradDateTime(utcToLocalTime, createdAt)\n ).split(\",\")[1]\n }\n \n \n
\n \n \n \n {\n getPrintableTime(\n getStandradDateTime(utcToLocalTime, createdAt)\n ).split(\",\")[0]\n }\n ,\n {\n getPrintableTime(\n getStandradDateTime(utcToLocalTime, createdAt)\n ).split(\",\")[1]\n }\n \n \n
\n Customer\n
\n {customer?.name}\n
\n \n {customer?.name}\n
\n
\n \n
\n \n
\n \n
\n \n {title &&
\n {review && {title}
}\n \n {status === REVIEW_STATUS.APPROVED ? (\n
\n {review}
}\n {images && images?.length > 0 && (\n \n {images.map((image) => {\n return (\n this.handlePopup(image)}\n >\n \n
\n );\n })}\n \n )}\n \n Date \n
\n \n {\n getPrintableTime(\n getStandradDateTime(utcToLocalTime, createdAt)\n ).split(\",\")[0]\n }\n ,\n {\n getPrintableTime(\n getStandradDateTime(utcToLocalTime, createdAt)\n ).split(\",\")[1]\n }\n \n
\n \n \n {\n getPrintableTime(\n getStandradDateTime(utcToLocalTime, createdAt)\n ).split(\",\")[0]\n }\n ,\n {\n getPrintableTime(\n getStandradDateTime(utcToLocalTime, createdAt)\n ).split(\",\")[1]\n }\n \n
\n Customer\n
\n {customerName}\n
\n \n {customerName}\n
\n {status === REVIEW_STATUS.APPROVED ? (\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n ) : null}\n \n
\n {this.state.productName}\n \n
\n {title && {title}
}\n {review && {review}
}\n {images && images?.length > 0 && (\n \n {images.map((image) => {\n return (\n this.handlePopup(image)}\n >\n \n
\n );\n })}\n \n )}\n \n
\n \n Date \n
\n \n {\n getPrintableTime(\n getStandradDateTime(utcToLocalTime, createdAt)\n ).split(\",\")[0]\n }\n ,\n {\n getPrintableTime(\n getStandradDateTime(utcToLocalTime, createdAt)\n ).split(\",\")[1]\n }\n \n
\n \n \n {\n getPrintableTime(\n getStandradDateTime(utcToLocalTime, createdAt)\n ).split(\",\")[0]\n }\n ,\n {\n getPrintableTime(\n getStandradDateTime(utcToLocalTime, createdAt)\n ).split(\",\")[1]\n }\n \n
\n Customer\n
\n {customerName}\n
\n \n {customerName}\n
\n {\n this.setState({\n loading: false,\n totalRating: response.data.count,\n avgRating: response.data.averageRating,\n noOfReviews: response.data.noOfReviews,\n reviews: response.data.reviews,\n });\n return response.data.reviews;\n },\n }}\n tableProperties={this.tablePropertiesforIndividualProductDetails}\n tableDynamic\n additionalViews={[\n () => (\n
\n );\n }\n }\n\n fetchTabData() {\n if (this.state.index === 0) {\n return \n
\n ),\n ]}\n />\n \n
\n \n
\n \n {this.state.productName}\n \n {this.fetchData()}
;\n } else if (\n this.state.index === 1 &&\n this.state.showAllIndivisualProductReview\n ) {\n return (\n <>\n Back
\n \n{this.fetchData()}
\n \n );\n } else {\n return (\n <>\n {this.state.totalRating > 0 && (\n \n {\n this.handleChange(value);\n }}\n />\n
\n )}\n {this.fetchData()}\n \n );\n }\n }\n\n changeTab(index) {\n this.setState({\n index,\n showAllIndivisualProductReview: false,\n entity: this.tabHeaders[index],\n });\n }\n handleChange(value) {\n this.setState({\n productType: value,\n });\n }\n\n handleShowIndivisualProduct = (id = null, images = null, name = null) => {\n this.setState((prevState) => ({\n productName: name,\n productImage: images,\n setProductId: id,\n showAllIndivisualProductReview: !prevState.showAllIndivisualProductReview,\n }));\n };\n render() {\n const { loading, totalRating, index } = this.state;\n return (\n \n \n \n )}\n
\n {getMessage(\"menu.item.rating-reviews\")}
\n {loading ? (\n <>{this.fetchTabData()}\n ) : (\n <>\n\n {\n this.changeTab(index);\n }}\n />\n
\n {this.fetchTabData()}\n \n )}\n {totalRating === 0 && !loading && (\n \n
\n )}\n {this.state.showPopup && (\n \n
\n No Ratings to shows
\n\n 
\n
\n \n 
\n {`${Math.abs(Math.round(value))}%`}\n
\n );\n }\n return -;\n}\n\n// calculates last week average data for all sales and customer parameters\nfunction getLastWeekAverage(salesStats, customerStats) {\n const today = formatDate(new Date());\n let totalDays = 0;\n let avgData = {\n amount: 0,\n customersAcquired: 0,\n transactedCustomers: 0,\n count: 0,\n };\n for (let key in customerStats) {\n if (key !== today) {\n avgData.customersAcquired += customerStats[key];\n avgData.amount += salesStats[key] && salesStats[key].amount;\n avgData.transactedCustomers +=\n salesStats[key] && salesStats[key].transactedCustomers;\n avgData.count += salesStats[key] && salesStats[key].count;\n totalDays++;\n }\n }\n if (totalDays > 0) {\n for (let key in avgData) {\n avgData[key] = avgData[key] / totalDays;\n }\n }\n return avgData;\n}\n\nfunction getStatsTableData(salesStats, customerStats, currency) {\n let oneWeekAgo = new Date();\n oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);\n let yesterdayDate = new Date();\n yesterdayDate.setDate(yesterdayDate.getDate() - 1);\n\n const lastWeekDate = formatDate(oneWeekAgo);\n const today = formatDate(new Date());\n const yesterday = formatDate(yesterdayDate);\n\n const stats = {\n today: salesStats[today] || {},\n yesterday: salesStats[yesterday] || {},\n lastWeek: salesStats[lastWeekDate] || {},\n lastWeekAverage: getLastWeekAverage(salesStats, customerStats),\n };\n return [\n {\n name: getMessage(\"operations.dashboard.sales\"),\n color: \"green\",\n value: `${currency} ${\n isNaN(stats.today.amount) ? 0 : stats.today.amount\n }`,\n yesterdayPer: getPercentageChange(\n stats.today.amount,\n stats.yesterday.amount\n ),\n weeklyPer: getPercentageChange(\n stats.today.amount,\n stats.lastWeekAverage.amount\n ),\n lastWeekPer: getPercentageChange(\n stats.today.amount,\n stats.lastWeek.amount\n ),\n },\n {\n name: getMessage(\"operations.dashboard.customerAcquired\"),\n color: \"gray\",\n value: isNaN(customerStats[today]) ? 0 : customerStats[today],\n yesterdayPer: getPercentageChange(\n customerStats[today],\n customerStats[yesterday]\n ),\n weeklyPer: getPercentageChange(\n customerStats[today],\n stats.lastWeekAverage.customersAcquired\n ),\n lastWeekPer: getPercentageChange(\n customerStats[today],\n customerStats[lastWeekDate]\n ),\n },\n {\n name: getMessage(\"operations.dashboard.customersTransacted\"),\n color: \"red\",\n value: isNaN(stats.today.transactedCustomers)\n ? 0\n : stats.today.transactedCustomers,\n yesterdayPer: getPercentageChange(\n stats.today.transactedCustomers,\n stats.yesterday.transactedCustomers\n ),\n weeklyPer: getPercentageChange(\n stats.today.transactedCustomers,\n stats.lastWeekAverage.transactedCustomers\n ),\n lastWeekPer: getPercentageChange(\n stats.today.transactedCustomers,\n stats.lastWeek.transactedCustomers\n ),\n },\n {\n name: getMessage(\"operations.dashboard.orders\"),\n color: \"blue\",\n value: isNaN(stats.today.count) ? 0 : stats.today.count,\n yesterdayPer: getPercentageChange(\n stats.today.count,\n stats.yesterday.count\n ),\n weeklyPer: getPercentageChange(\n stats.today.count,\n stats.lastWeekAverage.count\n ),\n lastWeekPer: getPercentageChange(stats.today.count, stats.lastWeek.count),\n },\n ];\n}\n\nexport default function StatsTable(props) {\n const { customersStats, salesStats, currency } = props;\n const data = getStatsTableData(salesStats, customersStats, currency);\n return (\n \n {data.map((column, index) => (\n \n
\n ))}\n
\n );\n}\n","import React, { Component } from \"react\";\nimport moment from \"moment\";\nimport Table, { Row, Header, Cell } from \"../../../components/Table\";\nimport { SingleDatePicker } from \"../../../components/Form\";\nimport { Link } from \"react-router-dom\";\nimport {\n getMinutes,\n formatTime,\n formatDate,\n getStandradDateTime,\n utcToLocalTime,\n getPrintableTime,\n} from \"../../../lib/datetime\";\nimport { getMessage } from \"../../../lib/translator\";\nimport { get } from \"../../../lib/storage\";\nimport { isEqual } from \"lodash\";\n\nclass SlotOrderTable extends Component {\n constructor() {\n super();\n this.state = {\n total: {},\n fixedSlotColumn: [],\n asapSlotColumn: [],\n };\n this.generateStateFromProps = this.generateStateFromProps.bind(this);\n }\n\n generateStateFromProps() {\n const { asapSlots, fixedSlots, statuses } = this.props.data;\n let total = {};\n statuses &&\n statuses.map((status) => {\n total[status] = 0;\n return null;\n });\n\n let fixedSlotColumn =\n fixedSlots &&\n fixedSlots.map((object) => {\n let countOb = object.count;\n if (countOb) {\n Object.keys(countOb).map((status) => {\n total[status] += Number(countOb[status]);\n return null;\n });\n }\n return object.slot;\n });\n let asapSlotColumn =\n asapSlots &&\n asapSlots.map((object) => {\n let countOb = object.count;\n if (countOb) {\n Object.keys(countOb).map((status) => {\n total[status] += Number(countOb[status]);\n return null;\n });\n }\n return object.slot;\n });\n this.setState({ fixedSlotColumn, asapSlotColumn, total });\n }\n\n componentDidMount() {\n this.generateStateFromProps();\n }\n\n componentDidUpdate(prevProps, prevState) {\n let currData = this.props.data;\n let prevData = prevProps.data;\n if (\n !isEqual(currData.asapSlots, currData.asapSlots) ||\n !isEqual(prevData.asapSlots, currData.asapSlots)\n ) {\n this.generateStateFromProps();\n }\n }\n render() {\n const { asapSlots, fixedSlots, noSlots, statuses, totalOrders } =\n this.props.data;\n const { areOrdersScheduled, selectedDate, handleDateChange } = this.props;\n const { fixedSlotColumn, asapSlotColumn } = this.state;\n const today = moment().format(\"YYYY-MM-DD\");\n return (\n \n
\n );\n }\n}\n\nexport default SlotOrderTable;\n","import React, { Component } from \"react\";\nimport ListingPage from \"../../../containers/ListingPage\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport { getMessage } from \"../../../lib/translator\";\n\nconst tableProperties = (currency) => {\n return {\n headers: [\n getMessage(\"operations.prodStats.statTable.name\"),\n getMessage(\"operations.prodStats.statTable.qty\"),\n getMessage(\"operations.prodStats.statTable.amt\"),\n ],\n row: (props) => {\n const { productName, totalQuantity, totalAmount } = props;\n return (\n \n
\n {statuses && statuses.length > 0 && (\n \n
\n \n {`Orders ${\n selectedDate === today\n ? \"Today\"\n : \"On \" + formatDate(selectedDate)\n }`}\n ({totalOrders})\n
\n \n
\n \n
\n \n \n
\n
\n )}\n {currency?.currency}
\n {totalAmount}\n \n {showStore && isExtensionEnabled(\"MultiStoreSupport\") && (\n
\n );\n }\n}\n\nconst DashboardWithStores = makestoreDependentComponent(Dashboard);\n\nexport default class OperationsDashboard extends Component {\n render() {\n return (\n {getMessage(\"operations.dashboard.heading\")}
\n\n {showLoader ? (\n
\n \n {(showSmallLoader) ?
*/}\n {showSlotLoader ? (\n \n
\n )}\n \n {getMessage(\"operations.prodStats.heading\")}\n
\n \n
\n \n
\n \n {getMessage(\"operations.prodStats.byQty.title\")}\n
\n\n
\n \n {getMessage(\"operations.prodStats.byAmt.title\")}\n
\n\n
\n \n \n );\n }\n}\n","import React from \"react\";\nimport {\n BaseForm,\n Input,\n VALIDATION_TYPES,\n Checkbox,\n} from \"../../../../components/Form\";\n\nimport { getMessage } from \"../../../../lib/translator\";\n\nexport default class StoresFiltersForm extends BaseForm {\n render() {\n const { SubmitButton, ClearButton } = this.buttons;\n const { Form } = this.components;\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport { Link } from \"react-router-dom\";\nimport ListingPageWithRoutes from \"../../../containers/ListingPage/listingRouter\";\nimport { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport StoreForm from \"./Form\";\nimport storesFilters from \"./Filters\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\nimport { getMessage } from \"../../../lib/translator\";\nimport { setStores, getStores, isExtensionEnabled } from \"../../../lib/auth\";\nimport { set } from \"../../../lib/storage\";\n\nimport EmptyIcon from \"./store-empty.svg\";\nimport \"./style.css\";\n\nfunction AddStore() {\n return (\n \n \n +{\" \"}\n {getMessage(\"operations.store.add.text\")}\n \n
\n );\n}\n\nconst EmptyState = {\n icon: EmptyIcon,\n message: getMessage(\"operations.store.empty.message\"),\n additionalViews: [AddStore],\n};\n\nconst tableProperties = {\n headers: [\n getMessage(\"operations.store.table.header.name\"),\n getMessage(\"operations.store.table.header.address\"),\n getMessage(\"operations.store.table.header.deliveyHub\"),\n getMessage(\"operations.store.table.header.picking\"),\n getMessage(\"operations.store.table.header.clientId\"),\n getMessage(\"operations.store.table.header.status\"),\n getMessage(\"operations.store.table.header.actions\"),\n ],\n row: ({\n id,\n name,\n address,\n clientId,\n onAction,\n hasDeliveryHub,\n hasPicking,\n status,\n }) => (\n \n {getMessage(\"operations.store.table.header.deliveyHub\")}\n
\n \n {hasDeliveryHub\n ? getMessage(\"operations.store.table.row.picking.yes\")\n : getMessage(\"operations.store.table.row.picking.no\")}\n \n \n {getMessage(\"operations.store.table.header.picking\")}\n
\n \n {hasPicking\n ? getMessage(\"operations.store.table.row.picking.yes\")\n : getMessage(\"operations.store.table.row.picking.no\")}\n \n \n {getMessage(\"operations.store.table.header.clientId\")}\n
\n {clientId}\n \n {getMessage(\"operations.store.table.header.status\")}\n
\n \n {status === \"ENABLED\"\n ? getMessage(\"operations.store.form.status.enable.label\")\n : getMessage(\"operations.store.form.status.disable.label\")}\n \n \n \n {clientId ? (\n \n #\n {clientId}\n \n ) : (\n \n Z\n {referenceNumber}\n \n )}\n \n
\n {store ? {store.name} : null}\n {pickupLocation && !store ? (\n {pickupLocation.name}\n ) : null}\n \n {getMessage(\"operations.pickingQueue.header.placedTime\")}\n
\n ) : (\n \"\"\n )}\n \n {createdAt ? getPrintableTime(createdAt).split(\", \")[0] : null}\n
\n \n {createdAt ? getPrintableTime(createdAt).split(\", \")[1] : null}\n \n \n {getMessage(\"order.table.header.expectedTime\")}\n
\n ) : (\n \"\"\n )}\n \n {preferredDate\n ? getPrintableTime(preferredDate).split(\", \")[0]\n : null}\n
\n \n {getMessage(\"operations.pickingQueue.header.amount\")}\n
\n ) : (\n \"\"\n )}\n \n {getSession().organization.currency.symbol + invoiceAmount}\n
\n \n {getMessage(\"operations.pickingQueue.itemCount\", {\n count: itemCount,\n })}\n \n \n {getMessage(\"operations.pickingQueue.header.status\")}\n
\n ) : (\n \"\"\n )}\n \n {orderStatus[status] ? getMessage(orderStatus[status]) : null}\n
\n \n {createdAt ? getPrintableTime(createdAt).split(\", \")[0] : null}\n
\n \n {createdAt && getPrintableTime(createdAt).split(\", \")[1]}\n \n \n {getMessage(\"order.dispute.heading\")}\n {\" #\"}\n {referenceNumber}\n
\n\n {loading ? (\n
\n \n \n
\n );\n }\n}\n\nexport default StoreSlotForm;\n\nexport { getCutOffMins };\n","import React, { Component } from \"react\";\nimport StoreSelector, {\n makestoreDependentComponent,\n getDefaultStore,\n} from \"../../../../containers/StoreSelector\";\nimport AuthenticatedPage from \"../../../../containers/AuthenticatedPage\";\nimport EmptyState from \"../../../../components/EmptyState\";\nimport \"./style.css\";\n\nimport EmptyIcon from \"../EditSlots/empty.svg\"; // TODO: Change this\nimport { getMessage } from \"../../../../lib/translator\";\nimport {\n formatTime,\n getMinutes,\n getPrintableTime,\n getStandradDateTime,\n localTimeToUtc,\n utcToLocalTime,\n} from \"../../../../lib/datetime\";\nimport { BaseForm, Checkbox, Select } from \"../../../../components/Form\";\nimport { Dialog } from \"../../../../components/Popup\";\nimport moment from \"moment\";\nimport API from \"../../../../lib/api\";\nimport { getExtensionDetails, isExtensionEnabled } from \"../../../../lib/auth\";\nimport Loader from \"../../../../components/Loader\";\nimport { getCutOffMins } from \"../StoreSlotConfigure/Form\";\n\nclass InterfaceContainer extends BaseForm {\n constructor(props) {\n super(props);\n this.state = {\n loading: true,\n values: { DELIVERY: [], PICKUP: [] },\n prevValues: { DELIVERY: [], PICKUP: [] },\n visibleDays: \"\",\n };\n\n this.changeStore = this.changeStore.bind(this);\n this.checkIfValueChanged = this.checkIfValueChanged.bind(this);\n this.findIndex = this.findIndex.bind(this);\n this.fetchSlotDetails = this.fetchSlotDetails.bind(this);\n this.handleOrderSelect = this.handleOrderSelect.bind(this);\n }\n\n handleOrderSelect(val) {\n this.setState({\n selectedOption: val,\n });\n }\n\n changeStore(storeId) {\n this.setState({ storeId }, this.fetchSlotDetails);\n }\n\n convertDataToMapState(data) {\n let newState = JSON.parse(JSON.stringify(data));\n newState = Object.keys(data).map(\n (date) =>\n date &&\n data[date].sort((time1, time2) => {\n if (time1.startTime < time2.startTime) {\n return -1;\n } else {\n return 1;\n }\n })\n );\n\n let modelData = {};\n Object.keys(data).forEach((day) => {\n data[day].forEach((item) => {\n if (item.type === \"STANDARD\") {\n const localDate = getStandradDateTime(\n utcToLocalTime,\n `${day} ${item.startTime}`\n ).split(\" \")[0];\n if (localDate >= moment().format(\"YYYY-MM-DD\")) {\n modelData[localDate] = [];\n }\n } else {\n modelData[day] = [];\n }\n });\n });\n\n Object.keys(data).forEach((day) => {\n data[day].forEach((item) => {\n if (item.type === \"STANDARD\") {\n const localDate = getStandradDateTime(\n utcToLocalTime,\n `${day} ${item.startTime}`\n ).split(\" \")[0];\n if (localDate >= moment().format(\"YYYY-MM-DD\")) {\n if (localDate !== day) {\n if (\n modelData[day].filter((slot) => slot.id === item.id).length ===\n 0\n ) {\n modelData[day].push({});\n }\n }\n modelData[localDate].push(item);\n }\n } else {\n modelData[day].push(item);\n }\n });\n });\n\n delete modelData[\n moment().add(this.state.visibleDays, \"days\").format(\"YYYY-MM-DD\")\n ];\n\n newState = Object.keys(modelData).map(\n (date) =>\n date &&\n modelData[date].sort((time1, time2) => {\n if (time1.startTime < time2.startTime) {\n return -1;\n } else {\n return 1;\n }\n })\n );\n\n newState = Object.keys(modelData).map((date) => {\n return modelData[date].map((slot) => {\n slot.date = date;\n slot.status = slot.status === \"ENABLED\";\n return slot;\n });\n });\n return newState;\n }\n\n fetchSlotDetails() {\n let { pickupSupported, deliverySupported } = this.state;\n this.setState({ loading: true });\n let storeId = getDefaultStore(this.props.stores).storeId;\n this.visibleDaysApi = new API({\n url: `/account-service/extension/${\n getExtensionDetails(\"DeliverySlots\").id\n }`,\n });\n this.visibleDaysApi\n .get()\n .then(async (response) => {\n let visibleDays =\n response.data &&\n response.data.extension.config &&\n response.data.extension.config.globalConfig.visibleDaysForSlot;\n this.setState({ visibleDays });\n let duration = moment.duration({ days: visibleDays - 1 });\n if (deliverySupported) {\n this.slotApi = new API({\n url: `/order-service/store/${storeId}/slot`,\n });\n let slotApiparams = {\n startDate: moment().format(\"YYYY-MM-DD\"),\n endDate: moment(new Date()).add(duration).format(\"YYYY-MM-DD\"),\n };\n await this.slotApi\n .get(slotApiparams)\n .then((response) => {\n let modifiedResponse = this.convertDataToMapState(response.data);\n let newvalues = JSON.parse(JSON.stringify(this.state.values));\n newvalues[\"DELIVERY\"] = JSON.parse(\n JSON.stringify(modifiedResponse)\n );\n this.setState((prevState) => {\n return {\n values: newvalues,\n dates: Object.keys(response.data),\n slots: Object.keys(response.data).length\n ? response.data[Object.keys(response.data)[0]]\n : [],\n loading: false,\n prevValues: {\n ...prevState.prevValues,\n DELIVERY: JSON.parse(JSON.stringify(modifiedResponse)),\n },\n };\n });\n })\n .catch((error) => {\n console.error(error);\n if (error.code === 401 || error.code === 403) {\n throw error;\n }\n });\n }\n if (pickupSupported) {\n this.pickupSlotsApi = new API({\n url: `/order-service/store/${storeId}/slot`,\n });\n let pickupApiParams = {\n startDate: moment().format(\"YYYY-MM-DD\"),\n endDate: moment(new Date()).add(duration).format(\"YYYY-MM-DD\"),\n orderType: \"PICKUP\",\n };\n await this.pickupSlotsApi\n .get(pickupApiParams)\n .then((response) => {\n let modifiedResponse = this.convertDataToMapState(response.data);\n let newvalues = JSON.parse(JSON.stringify(this.state.values));\n newvalues[\"PICKUP\"] = JSON.parse(\n JSON.stringify(modifiedResponse)\n );\n this.setState((prevState) => {\n return {\n pickUpDates: Object.keys(response.data),\n values: newvalues,\n pickupSlots: Object.keys(response.data).length\n ? response.data[Object.keys(response.data)[0]]\n : [],\n loading: false,\n prevValues: {\n ...prevState.prevValues,\n PICKUP: JSON.parse(JSON.stringify(modifiedResponse)),\n },\n };\n });\n })\n .catch((error) => {\n console.error(error);\n if (error.code === 401 || error.code === 403) {\n throw error;\n }\n });\n }\n })\n .catch((error) => {\n console.error(error);\n if (error.code === 401 || error.code === 403) {\n throw error;\n } else if (error.message === \"cancelled\") {\n return;\n }\n this.setState({\n error: error.message,\n loading: false,\n });\n });\n }\n\n componentWillUnmount() {\n this.visibleDaysApi && this.visibleDaysApi.cancel();\n this.slotApi && this.slotApi.cancel();\n this.pickupSlotsApi && this.pickupSlotsApi.cancel();\n }\n\n transformResponse(response) {\n let modifiedRule = response.data.storeslotrule;\n modifiedRule.cutOff = getCutOffMins(\n modifiedRule.slot.startTime,\n modifiedRule.cutOff\n );\n modifiedRule.slotName =\n modifiedRule.slot.type === \"STANDARD\"\n ? `${formatTime(modifiedRule.slot.startTime)} - ${formatTime(\n modifiedRule.slot.endTime\n )}`\n : `${getMessage(\"slots.asap\")} ${\n modifiedRule.slot.endTime.split(\":\")[2]\n } ${getMessage(\"slots.asap.minute\")}`;\n return modifiedRule;\n }\n\n findIndex(item) {\n let id = item.data.storeslotrule.slot.id;\n return this.state.values.findIndex((value) => value.slot.id === id);\n }\n\n checkIfValueChanged(data, type) {\n let changedSlots = [];\n data.forEach((date, dateIndex) => {\n date.forEach((slot, slotIndex) => {\n if (\n slot.status !==\n this.state.prevValues[type][dateIndex][slotIndex].status\n ) {\n changedSlots.push(slot);\n }\n });\n });\n return changedSlots;\n }\n\n onSubmit(formData) {\n let defaultSelected =\n (this.options && this.options.length > 0 && this.options[0].value) ||\n null;\n let val = this.state.selectedOption || defaultSelected;\n this.setState({ submitting: true });\n let data = JSON.parse(JSON.stringify(formData));\n let changedRules = this.checkIfValueChanged(\n JSON.parse(JSON.stringify(data[val])),\n val\n );\n let storeId = getDefaultStore(this.props.stores).storeId;\n changedRules = changedRules.map((rule) => {\n rule.status = rule.status ? \"ENABLED\" : \"DISABLED\";\n rule.slotId = rule.id || rule.slotId;\n delete rule.endTime;\n delete rule.startTime;\n delete rule.type;\n delete rule.id;\n return rule;\n });\n /* Grouping by slotId */\n let modifiedChangedRulesObj = {};\n changedRules.forEach((rule) => {\n let preferredDate;\n if (rule.slotId in modifiedChangedRulesObj) {\n modifiedChangedRulesObj[rule.slotId][rule.date] = rule.status;\n } else {\n if (rule.orderType === \"DELIVERY\") {\n this.state.slots.forEach((slot) => {\n if (slot.id === rule.slotId) {\n if (slot.startTime) {\n const tempTime = getStandradDateTime(\n utcToLocalTime,\n `${new Date().toISOString().split(\"T\")[0]} ${slot.startTime}`\n ).split(\" \");\n const tempDate = getStandradDateTime(\n localTimeToUtc,\n `${rule.date} ${tempTime[1]}`\n ).split(\" \");\n preferredDate = tempDate[0].trim();\n } else {\n preferredDate = rule.date;\n }\n }\n });\n }\n\n if (rule.orderType === \"PICKUP\") {\n this.state.pickupSlots.forEach((slot) => {\n if (slot.id === rule.slotId) {\n if (slot.startTime) {\n const tempTime = getStandradDateTime(\n utcToLocalTime,\n `${new Date().toISOString().split(\"T\")[0]} ${slot.startTime}`\n ).split(\" \");\n const tempDate = getStandradDateTime(\n localTimeToUtc,\n `${rule.date} ${tempTime[1]}`\n ).split(\" \");\n preferredDate = tempDate[0].trim();\n } else {\n preferredDate = rule.date;\n }\n }\n });\n }\n modifiedChangedRulesObj[rule.slotId] = {};\n modifiedChangedRulesObj[rule.slotId][preferredDate] = rule.status;\n }\n });\n let modifiedChangedRules = Object.keys(modifiedChangedRulesObj).map(\n (slotId) => {\n return {\n slotId,\n slotDetails: modifiedChangedRulesObj[slotId],\n };\n }\n );\n\n if (modifiedChangedRules.length) {\n Promise.all(\n modifiedChangedRules.map((params) => {\n let api = new API({ url: `/order-service/store/${storeId}/slot` });\n return api.put(params);\n })\n )\n .then((response) => {\n this.setState((prevState) => {\n return {\n submitting: false,\n successMessage: true,\n values: { ...prevState.values, [val]: data[val] },\n prevValues: {\n ...prevState.prevValues,\n [val]: JSON.parse(JSON.stringify(data[val])),\n },\n formError: null,\n };\n });\n })\n .catch((error) => {\n console.error(error);\n this.setState({\n submitting: false,\n successMessage: false,\n formError: error.message,\n });\n if (error.code === 401 || error.code === 403) {\n throw error;\n }\n });\n } else {\n this.setState({\n submitting: false,\n successMessage: true,\n formError: null,\n });\n }\n }\n\n async componentDidMount() {\n this.setState({ showSelector: true });\n this.configApi = new API({ url: \"/account-service/config/order\" });\n await this.configApi\n .get()\n .then((response) => {\n const orderTypes = response.data.config.order.orderTypes;\n if (orderTypes && orderTypes.includes(\"PICKUP\")) {\n this.setState({\n pickupSupported: true,\n });\n }\n if (orderTypes && orderTypes.includes(\"DELIVERY\")) {\n this.setState({\n deliverySupported: true,\n });\n }\n })\n .catch((error) => {\n console.error(error);\n if (error.code === 401 || error.code === 403) {\n throw error;\n } else {\n this.setState({\n formError: error.message,\n });\n }\n });\n if (this.state.pickupSupported && this.state.deliverySupported) {\n this.options = [\n { text: \"DELIVERY\", value: \"DELIVERY\" },\n { text: \"PICKUP\", value: \"PICKUP\" },\n ];\n } else if (this.state.pickupSupported) {\n this.options = [{ text: \"PICKUP\", value: \"PICKUP\" }];\n } else if (this.state.deliverySupported) {\n this.options = [{ text: \"DELIVERY\", value: \"DELIVERY\" }];\n }\n this.fetchSlotDetails();\n }\n\n render() {\n let { SubmitButton } = this.buttons;\n let { Form } = this.components;\n let defaultSelected =\n (this.options && this.options.length > 0 && this.options[0].value) ||\n null;\n let val = this.state.selectedOption || defaultSelected;\n let tableContent = null;\n if (val === \"DELIVERY\") {\n tableContent = (\n \n
\n ) : null}\n \n {getMessage(\"slots.heading\")}\n
\n {this.state.slots &&\n this.state.slots.map((slot, index) => (\n \n {slot.type === \"STANDARD\"\n ? `${\n getPrintableTime(\n getStandradDateTime(\n utcToLocalTime,\n `${new Date().toISOString().split(\"T\")[0]} ${\n slot.startTime\n }`\n )\n ).split(\", \")[1]\n }\n - \n ${\n getPrintableTime(\n getStandradDateTime(\n utcToLocalTime,\n `${new Date().toISOString().split(\"T\")[0]} ${\n slot.endTime\n }`\n )\n ).split(\", \")[1]\n }`\n : `${getMessage(\"slots.asap\")} ${getMinutes(\n slot.endTime\n )} ${getMessage(\"slots.asap.minute\")}`}\n
\n ))}\n \n {this.state.values[\"DELIVERY\"].length > 0 ? (\n this.state.values[\"DELIVERY\"].map((date, dateIndex) => (\n \n
\n ))\n ) : (\n \n {this.state.dates[dateIndex] ===\n moment().format(\"YYYY-MM-DD\")\n ? getMessage(\"slots.today\")\n : this.state.dates[dateIndex] ===\n moment().add(1, \"day\").format(\"YYYY-MM-DD\")\n ? getMessage(\"slots.tomorrow\")\n : moment(this.state.dates[dateIndex]).format(\n \"ddd, MMM Do\"\n )}\n
\n {this.state.values[\"DELIVERY\"][dateIndex] &&\n this.state.values[\"DELIVERY\"][dateIndex].map(\n (slots, slotIndex) => (\n \n {getMessage(\"slots.DELIVERY.empty\")}\n
\n )}\n \n \n
\n ) : null}\n \n {getMessage(\"slots.heading\")}\n
\n {this.state.pickupSlots &&\n this.state.pickupSlots.map((slot, index) => (\n \n {slot.type === \"STANDARD\"\n ? `${\n getPrintableTime(\n getStandradDateTime(\n utcToLocalTime,\n `${new Date().toISOString().split(\"T\")[0]} ${\n slot.startTime\n }`\n )\n ).split(\", \")[1]\n }\n - \n ${\n getPrintableTime(\n getStandradDateTime(\n utcToLocalTime,\n `${new Date().toISOString().split(\"T\")[0]} ${\n slot.endTime\n }`\n )\n ).split(\", \")[1]\n }`\n : `${getMessage(\"slots.asap\")} ${getMinutes(\n slot.endTime\n )} ${getMessage(\"slots.asap.minute\")}`}\n
\n ))}\n \n {this.state.values[\"PICKUP\"].length > 0 ? (\n this.state.values[\"PICKUP\"].map((date, dateIndex) => (\n \n
\n ))\n ) : (\n \n {this.state.pickUpDates[dateIndex] ===\n moment().format(\"YYYY-MM-DD\")\n ? getMessage(\"slots.today\")\n : this.state.pickUpDates[dateIndex] ===\n moment().add(1, \"day\").format(\"YYYY-MM-DD\")\n ? getMessage(\"slots.tomorrow\")\n : moment(this.state.pickUpDates[dateIndex]).format(\n \"ddd, MMM Do\"\n )}\n
\n {this.state.values[\"PICKUP\"][dateIndex] &&\n this.state.values[\"PICKUP\"][dateIndex].map(\n (slots, slotIndex) => (\n {getMessage(\"slots.PICKUP.empty\")}
\n )}\n \n \n {this.state.showSelector && isExtensionEnabled(\"MultiStoreSupport\") && (\n
\n );\n }\n}\n\nconst InterfaceWithStores = makestoreDependentComponent(InterfaceContainer);\n\nclass StoreSlotConfiguration extends Component {\n render() {\n return (\n {getMessage(\"slots.store.blocking.title\")}
\n {this.state.loading ? (\n\n {getMessage(\"order.register.payments.for\")}{\" \"}\n {clientId ? \"#\" : \"Z\"}\n {clientId || referenceNumber}{\" \"}\n
\n {this.state.showErrorDialog && (\n\n \n
\n {productsInOrder.length <= 0 ? (\n
\n );\n }\n}\n\nItemsView.defaultProps = {\n data: {\n items: [],\n },\n};\n\nexport default ItemsView;\n","import React from \"react\";\nimport AuthenticatedPage from \"../../../../containers/AuthenticatedPage\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport { getSession, isExtensionEnabled } from \"../../../../lib/auth\";\nimport PlacementDetails from \"../Details/PlacementDetails\";\nimport ItemsView from \"./ItemsView\";\nimport API from \"../../../../lib/api\";\nimport Loader from \"../../../../components/Loader\";\nimport \"./style.css\";\nimport { Dialog } from \"../../../../components/Popup\";\nimport {\n BaseForm,\n MultiTextInput,\n VALIDATION_TYPES,\n} from \"../../../../components/Form\";\nimport Table, { Header, Row, Cell } from \"../../../../components/Table\";\nimport checkHttpResponseCode from \"../../../../utils/isApiCallSuccessfull\";\n\nclass EditPackedOrder extends BaseForm {\n constructor(props) {\n super(props);\n this.organization = getSession().organization;\n this.currency = this.organization.currency;\n this.state = {\n packingDetails: [],\n };\n\n this.getData = this.getData.bind(this);\n this.onChange = this.onChange.bind(this);\n this.onSubmit = this.onSubmit.bind(this);\n this.handleCancel = this.handleCancel.bind(this);\n this.hideError = this.hideError.bind(this);\n }\n\n hideError() {\n this.setState(\n {\n showError: false,\n },\n () => {\n let referenceNumber = this.props.match.params.id;\n this.props.history.push(`/operations/orders/${referenceNumber}`);\n }\n );\n }\n\n onChange(items) {\n this.postItems =\n items &&\n items.map((item) => {\n let isSoldByWeight = item.soldByWeight;\n let ob = {};\n let orderedQuantity =\n item &&\n item.orderDetails &&\n item.orderDetails.orderedQuantity &&\n Number(item.orderDetails.orderedQuantity);\n let deliveredQuantity =\n (item &&\n item.orderDetails &&\n item.orderDetails.deliveredQuantity &&\n Number(item.orderDetails.deliveredQuantity)) ||\n 0;\n if (\n deliveredQuantity > orderedQuantity &&\n !isSoldByWeight &&\n Number(orderedQuantity) !== 0\n ) {\n ob[\"quantity\"] = orderedQuantity;\n } else {\n ob[\"quantity\"] = deliveredQuantity;\n }\n ob[\"orderItemId\"] =\n item && item.orderDetails && item.orderDetails.orderItemId;\n return ob;\n });\n }\n\n onSubmit(formdata) {\n this.setState({\n loading: true,\n });\n let data = JSON.parse(JSON.stringify(this.state.data));\n let postParams = {};\n if (!this.postItems) {\n this.postItems =\n data &&\n data.items &&\n data.items.map((item) => {\n let ob = {};\n ob[\"orderItemId\"] =\n item && item.orderDetails && item.orderDetails.orderItemId;\n ob[\"quantity\"] =\n (item &&\n item.orderDetails &&\n item.orderDetails.deliveredQuantity &&\n Number(item.orderDetails.deliveredQuantity)) ||\n 0;\n return ob;\n });\n }\n postParams[\"items\"] = [...this.postItems];\n if (\n formdata &&\n formdata.packages &&\n formdata.packages.crates &&\n formdata.packages.crates.length > 0\n ) {\n postParams[\"details\"] = formdata && formdata.packages;\n }\n\n let referenceNumber = this.props.match.params.id;\n let api = new API({ url: `/order-service/order/${referenceNumber}/pack` });\n api\n .put(postParams)\n .then((response) => {\n this.setState(\n {\n loading: false,\n error: null,\n showError: false,\n },\n () => {\n let referenceNumber = this.props.match.params.id;\n this.props.history.push(`/operations/orders/${referenceNumber}`);\n }\n );\n })\n .catch((err) => {\n console.error(err);\n if (err.code === 401 || err.code === 403) {\n throw err;\n } else {\n this.setState({\n showError: true,\n loading: false,\n error: err.message,\n });\n }\n });\n }\n\n handleCancel() {\n let referenceNumber = this.props.match.params.id;\n this.props.history.push(`/operations/orders/${referenceNumber}`);\n }\n\n getData() {\n let referenceNumber = this.props.match.params.id;\n this.orderDetailsApi = new API({\n url: `/order-service/order/${referenceNumber}`,\n });\n this.setState(\n {\n loading: true,\n },\n () => {\n this.orderDetailsApi\n .get({\n \"include[0]\": \"cancelledItems\",\n })\n .then(\n (response) =>\n this.setState({\n data: response.data.order,\n packingDetails: (response.data &&\n response.data.order &&\n response.data.order.packingDetails &&\n response.data.order.packingDetails.length > 0 &&\n response.data.order.packingDetails) || [\n { details: { crates: [] } },\n ],\n }),\n (error) => {\n if (error.code === 401) {\n throw error;\n }\n }\n )\n .then(() => {\n this.setState({ loading: false });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n );\n }\n\n async componentDidMount() {\n if (isExtensionEnabled(\"InStoreProcessing\")) {\n this.api = new API({\n url: `/config-service/config/inStoreProcessing.packedOrderEditAllowed`,\n });\n await this.api\n .get()\n .then((res) => {\n if (checkHttpResponseCode(res.code) && res.status === \"SUCCESS\") {\n this.setState({\n isAuthorized:\n res &&\n res.data &&\n res.data.inStoreProcessing &&\n res.data.inStoreProcessing.packedOrderEditAllowed,\n });\n }\n })\n .catch((error) => {\n console.error(error);\n });\n\n if (this.state.isAuthorized) {\n this.getData();\n } else {\n this.setState({\n data: {},\n error: \"Not Authorized\",\n showError: true,\n });\n }\n } else {\n this.setState({\n data: {},\n error: \"Not Authorized\",\n showError: true,\n });\n }\n }\n componentDidUpdate(prevProps, prevState) {\n if (prevState.packingDetails !== this.state.packingDetails) {\n let values = {};\n values.packages =\n (Array.isArray(this.state.packingDetails) &&\n this.state.packingDetails.length > 0 &&\n this.state.packingDetails[0] &&\n this.state.packingDetails[0].details) ||\n {};\n this.setState({\n values,\n });\n }\n\n if (prevState.data !== this.state.data) {\n const isStatusPacked =\n (this.state.data && this.state.data.status === \"PACKED\") || false;\n const packedOrderEdit = this.state.isAuthorized;\n if (!packedOrderEdit || !isStatusPacked) {\n let referenceNumber = this.props.match.params.id;\n this.props.history.push(`/operations/orders/${referenceNumber}`);\n }\n }\n }\n\n render() {\n let { Form } = this.components;\n let { SubmitButton } = this.buttons;\n let packingDetails =\n this.state.packingDetails && this.state.packingDetails.length > 0;\n let packages = this.state.values && this.state.values.packages;\n let content = \n
\n \n {getMessage(\"order.details.itemsTable.title\")}\n ({productsInOrder.length})\n
\n\n {getMessage(\"order.details.itemsTable.clearingMessage\")}\n
\n ) : null}\n \n
\n );\n }\n return (\n \n {getMessage(\"order.details.heading\")}{\" \"}\n {this.state.data &&\n (this.state.data.clientId\n ? getMessage(\"order.table.clientId.prefix\")\n : getMessage(\"order.table.referenceNumber.prefix\"))}\n \n {this.state.data && (this.state.data.clientId || referenceNumber)}\n \n
\n {this.state.loading && (\n\n
\n )}\n {this.state.showError && (\n {getMessage(\"order.details.edit-packed.heading\")}
\n {content}\n \n );\n }\n}\n\nexport default EditPackedOrder;\n","import React from \"react\";\nimport {\n BaseForm,\n Select,\n Input,\n Radio,\n SingleDatePicker,\n} from \"../../../../components/Form\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport { getStores } from \"../../../../lib/auth\";\nimport {\n getDisplaySlot,\n sortSlots,\n toTitleCase,\n} from \"../../../../lib/commonlyused\";\nimport deleteIcon from \"../../../catalogue/Categories/delete.svg\";\nimport { isExtensionEnabled } from \"../../../../lib/auth\";\n\nfunction cutoffTimeOptionsGenerator() {\n let options = [];\n for (let i = 0; i <= 27; i++) {\n options.push({\n text: Number(i).toFixed(1) + \" h\",\n value: `${i > 9 ? i : \"0\" + i}:00:00`,\n });\n options.push({\n text: Number(i) + 0.5 + \" h\",\n value: `${i > 9 ? i : \"0\" + i}:30:00`,\n });\n }\n options.pop();\n return options;\n}\n\nconst capacityOptions = [\n {\n text: getMessage(\"Day\"),\n value: \"DAY\",\n },\n {\n text: getMessage(\"Date\"),\n value: \"DATE\",\n },\n];\n\nclass CapacityPlanningForm extends BaseForm {\n constructor(props) {\n super(props);\n const deliverySlots =\n props.options.deliverySlots && sortSlots(props.options.deliverySlots);\n this.deliverySlots =\n deliverySlots &&\n deliverySlots\n .filter((slot) => slot.type !== \"ASAP\")\n .map((slot) => {\n return {\n text: getDisplaySlot(slot),\n value: slot.id,\n };\n });\n const pickupSlots =\n props.options.pickupSlots && sortSlots(props.options.pickupSlots);\n this.pickupSlots =\n pickupSlots &&\n pickupSlots\n .filter((slot) => slot.type !== \"ASAP\")\n .map((slot) => {\n return {\n text: getDisplaySlot(slot),\n value: slot.id,\n };\n });\n this.zones =\n props.options.zones &&\n props.options.zones.map((zone) => {\n return {\n text: zone.name || zone.id,\n value: zone.id,\n };\n });\n\n // TODO: change this to pickup zones\n this.stores =\n getStores() &&\n getStores().map((store) => {\n return {\n text: store.name,\n value: store.id,\n };\n });\n\n if (!props.value) {\n this.state = {\n values: {},\n };\n this.state.values.capacityType = \"DAY\";\n this.state.values.orderType = \"DELIVERY\";\n }\n\n if (props.value && props.value.date) {\n this.state.values.capacityType = \"DATE\";\n } else if (props.value && props.value.day) {\n this.state.values.capacityType = \"DAY\";\n }\n if (props.value && props.value.day) {\n this.state.values.day = toTitleCase(props.value.day);\n }\n }\n\n render() {\n const { Form } = this.components;\n const { SubmitButton, CancelButton } = this.buttons;\n const { type, daysOfWeek } = this.props.options;\n const { values } = this.state || {};\n const { orderType, capacityType } = values;\n const isPickup = orderType === \"PICKUP\";\n const { props } = this;\n const readOnly = props.method === \"edit\";\n return (\n \n );\n }\n}\n\nexport default CapacityPlanningForm;\n\nexport { cutoffTimeOptionsGenerator };\n","import React from \"react\";\nimport {\n BaseForm,\n Select,\n SingleDatePicker,\n} from \"../../../../components/Form\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport { getDisplaySlot, sortSlots } from \"../../../../lib/commonlyused\";\nimport { isEqual } from \"lodash\";\n\nclass CapacityFilters extends BaseForm {\n constructor(props) {\n super(props);\n this.getSlotsAndZones = this.getSlotsAndZones.bind(this);\n }\n componentDidMount() {\n this.getSlotsAndZones();\n }\n\n getSlotsAndZones() {\n const { props } = this;\n const deliverySlots =\n props.options.deliverySlots && sortSlots(props.options.deliverySlots);\n this.deliverySlots =\n deliverySlots &&\n deliverySlots.map((slot) => {\n return {\n text: getDisplaySlot(slot),\n value: slot.id,\n };\n });\n const pickupSlots =\n props.options.pickupSlots && sortSlots(props.options.pickupSlots);\n this.pickupSlots =\n pickupSlots &&\n pickupSlots.map((slot) => {\n return {\n text: getDisplaySlot(slot),\n value: slot.id,\n };\n });\n this.zones =\n props.options.zones &&\n props.options.zones.map((zone) => {\n return {\n text: zone.name || zone.id,\n value: zone.id,\n };\n });\n }\n componentDidUpdate(prevProps) {\n if (\n !isEqual(\n prevProps.options.deliverySlots,\n this.props.options.deliverySlots\n )\n ) {\n this.getSlotsAndZones();\n this.setState({\n updated: true,\n });\n }\n }\n render() {\n const { Form } = this.components;\n const { SubmitButton, ClearButton } = this.buttons;\n const { type, daysOfWeek } = this.props.options;\n const { orderType } = this.state.values || {};\n const isPickup = orderType === \"PICKUP\";\n\n return (\n \n );\n }\n}\n\nexport default CapacityFilters;\n","import React, { Component } from \"react\";\nimport ListingPage, { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\nimport { Link } from \"react-router-dom\";\nimport CapacityPlanningForm from \"./Form\";\nimport CapacityPlanningFilter from \"./Filters\";\nimport { getMessage } from \"../../../lib/translator\";\nimport API from \"../../../lib/api\";\nimport { get } from \"../../../lib/storage\";\nimport { getDisplaySlot } from \"../../../lib/commonlyused\";\nimport { getPrintableTime, getDaysOfWeek } from \"../../../lib/datetime\";\nimport { SingleDatePicker } from \"../../../components/Form\";\n\nimport \"./style.css\";\n\nimport EmptyIcon from \"./capacityplanner.svg\";\nimport { isExtensionEnabled } from \"../../../lib/auth\";\n\nconst EmptyState = {\n icon: EmptyIcon,\n message: getMessage(\"cp.empty\"),\n actions: ({ onAction }) => (\n\n \n {getMessage(\"Slot\")}\n \n
\n \n {(slot && getDisplaySlot(slot)) ||\n (derivedSlot && getDisplaySlot(derivedSlot))}\n
\n\n \n {getMessage(\"cutoff.time\")}\n \n
\n {`${displayCutOffTime} h`}
\n\n \n {getMessage(\"Capacity\")}\n \n
\n {capacity}
\n\n
\n \n Today\n \n \n
\n );\n }\n}\n\nclass Today extends React.Component {\n constructor(props) {\n super(props);\n\n this.tableRef = null;\n this.table = {};\n\n this.state = {\n edit: [],\n sortedSlots: [],\n currentStore: get(\"store\"),\n selectedOption: \"00:00:00\",\n errorMessage: null,\n showErrorDialog: false,\n date:\n (this.props.location && this.props.location.date) ||\n moment().format(\"YYYY-MM-DD\"),\n loading: true,\n };\n\n this.includes = this.includes.bind(this);\n this.handleEdit = this.handleEdit.bind(this);\n this.arrowClickRight = this.arrowClickRight.bind(this);\n this.arrowClickLeft = this.arrowClickLeft.bind(this);\n this.onSubmit = this.onSubmit.bind(this);\n this.disableEdit = this.disableEdit.bind(this);\n this.handleChange = this.handleChange.bind(this);\n this.handleOnKeyDown = this.handleOnKeyDown.bind(this);\n this.closePopup = this.closePopup.bind(this);\n this.onDateChange = this.onDateChange.bind(this);\n this.onTodayButtonClick = this.onTodayButtonClick.bind(this);\n this.onStoreChange = this.onStoreChange.bind(this);\n this.handleClickOutside = this.handleClickOutside.bind(this);\n }\n\n handleClickOutside(event) {\n if (this.tableRef && !this.tableRef.contains(event.target)) {\n this.setState({\n edit: [],\n });\n }\n }\n\n onStoreChange() {\n let currentStore = get(\"store\");\n this.setState({\n currentStore,\n loading: true,\n });\n }\n\n onTodayButtonClick() {\n this.setState((prevState) => {\n return {\n loading: prevState.date !== moment().format(\"YYYY-MM-DD\"),\n date: moment().format(\"YYYY-MM-DD\"),\n };\n });\n }\n\n onDateChange(date) {\n this.setState((prevState) => {\n return {\n date,\n loading: prevState.date !== date,\n };\n });\n }\n closePopup() {\n this.setState({\n showErrorDialog: false,\n errorMessage: null,\n });\n }\n\n handleOnKeyDown(e, index, i) {\n if (e.key === \"Escape\") {\n this.disableEdit(index, i);\n }\n }\n\n handleChange(val) {\n this.setState({\n loading: true,\n selectedOption: val,\n });\n }\n\n includes(x, y) {\n return this.state.edit.find((item) => item.x === x && item.y === y);\n }\n\n handleEdit(index, i, pickupCapacity, deliveryCapacity) {\n let newob = { x: index, y: i };\n let uniqueState = index + \",\" + i;\n this.setState((prevState) => {\n return {\n edit: prevState.edit.concat(newob),\n indices: {\n ...prevState.indices,\n [uniqueState]: {\n pickUpTotal: pickupCapacity ? Number(pickupCapacity) : null,\n deliveryTotal: deliveryCapacity ? Number(deliveryCapacity) : null,\n },\n },\n };\n });\n }\n\n onChange(e, type, index, i) {\n let val = e.target.value;\n if (type === \"delivery\") {\n this.setState((prevState) => {\n return {\n indices: {\n ...prevState.indices,\n [index + \",\" + i]: {\n ...prevState.indices[index + \",\" + i],\n deliveryTotal: val,\n },\n },\n };\n });\n }\n if (type === \"pickup\") {\n this.setState((prevState) => {\n return {\n indices: {\n ...prevState.indices,\n [index + \",\" + i]: {\n ...prevState.indices[index + \",\" + i],\n pickUpTotal: val,\n },\n },\n };\n });\n }\n }\n\n disableEdit(index, i) {\n let newEditState = this.state.edit.filter(\n (item) => item.x !== index || item.y !== i\n );\n this.setState({\n edit: newEditState,\n });\n }\n\n arrowClickLeft() {\n if (!this.once) {\n this.timer = setInterval(() => {\n if (this.tableRef) {\n this.once = true;\n this.tableRef.scrollLeft -= 5;\n }\n }, 5);\n }\n\n setTimeout(() => {\n this.once = undefined;\n clearInterval(this.timer);\n }, 240);\n }\n arrowClickRight() {\n if (!this.once) {\n this.timer = setInterval(() => {\n if (this.tableRef) {\n this.once = true;\n this.tableRef.scrollLeft += 5;\n }\n }, 5);\n }\n\n setTimeout(() => {\n this.once = undefined;\n clearInterval(this.timer);\n }, 240);\n }\n\n onSubmit(e, index, i, slot, zoneId) {\n e.preventDefault();\n if (this.state.selectedOption) {\n Object.keys(this.state.indices).map(async (key) => {\n if (!isEquals(this.state.indices[key], this.table[key])) {\n let deliveryOb = JSON.parse(JSON.stringify(this.state.indices[key]));\n let pickupOb = JSON.parse(JSON.stringify(this.state.indices[key]));\n this.putApi = new API({ url: `/logistics-service/zone-capacity` });\n let promises = [];\n if (\n slot.delivery.slotId &&\n deliveryOb.deliveryTotal &&\n Number(deliveryOb.deliveryTotal) !==\n Number(this.table[key].deliveryTotal)\n ) {\n deliveryOb.slotId = Number(slot.delivery.slotId);\n let capacity = deliveryOb.deliveryTotal;\n deliveryOb.capacity = capacity;\n deliveryOb.orderType = \"DELIVERY\";\n deliveryOb.zoneId = Number(zoneId);\n deliveryOb.date = `${this.state.date}T00:00:00+00:00`;\n deliveryOb.storeId = Number(this.state.currentStore);\n deliveryOb.cutOffTime = this.state.selectedOption;\n delete deliveryOb.deliveryTotal;\n delete deliveryOb.pickUpTotal;\n promises.push(this.putApi.put(deliveryOb));\n }\n\n if (\n slot.pickup.slotId &&\n pickupOb.pickUpTotal &&\n Number(pickupOb.pickUpTotal) !== Number(this.table[key].pickUpTotal)\n ) {\n pickupOb.slotId = Number(slot.pickup.slotId);\n let capacity = pickupOb.pickUpTotal;\n pickupOb.capacity = capacity;\n pickupOb.orderType = \"PICKUP\";\n pickupOb.date = `${this.state.date}T00:00:00+00:00`;\n pickupOb.storeId = Number(this.state.currentStore);\n pickupOb.cutOffTime = this.state.selectedOption;\n delete pickupOb.deliveryTotal;\n delete pickupOb.pickUpTotal;\n promises.push(this.putApi.put(pickupOb));\n }\n\n Promise.all(promises)\n .then((res) => {\n let newZoneCapacity = JSON.parse(JSON.stringify(this.state.data));\n res.forEach((response) => {\n if (\n checkHttpResponseCode(response.code) &&\n response.status === \"SUCCESS\"\n ) {\n let zoneCapacity =\n (response.data && response.data.capacityPlanning) || {};\n let slot = zoneCapacity.slot.startTime\n ? zoneCapacity.slot.startTime +\n \"-\" +\n zoneCapacity.slot.endTime\n : zoneCapacity.slot.endTime;\n let type =\n zoneCapacity.orderType || zoneCapacity.slot.orderType;\n let found = newZoneCapacity[slot].find(\n (item) => item.zone.zoneId === zoneId\n );\n if (type === \"PICKUP\") {\n newZoneCapacity[slot] = newZoneCapacity[slot].map(\n (item) => {\n item.pickup.capacity = zoneCapacity.capacity;\n return item;\n }\n );\n } else {\n if (found) {\n found.delivery.capacity = zoneCapacity.capacity;\n }\n }\n }\n });\n this.setState({\n data: newZoneCapacity,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n return null;\n });\n } else {\n this.setState({\n errorMessage: \"CutOff Time is not selected.\",\n showErrorDialog: true,\n });\n }\n\n this.disableEdit(index, i);\n this.setState({\n indices: undefined,\n });\n }\n\n componentDidMount() {\n document.addEventListener(\"mousedown\", this.handleClickOutside);\n this.api = new API({ url: \"/logistics-service/slot-capacity\" });\n const params = {\n date: this.state.date\n ? this.state.date + \"/\" + this.state.date\n : moment().utc().format(\"YYYY-MM-DD\") +\n \"/\" +\n moment().utc().format(\"YYYY-MM-DD\"),\n storeId: Number(this.state.currentStore || get(\"store\")),\n cutOffTime: this.state.selectedOption,\n };\n this.api\n .get(params)\n .then((res) => {\n let filteredData = res.data.slotCapacity;\n let filteredTabularData =\n (filteredData &&\n filteredData.length > 0 &&\n filteredData[0].capacity) ||\n [];\n let tableProperties = slotsAndZones(filteredTabularData);\n let tabularSkeleton = generateTabularDataSkeleton(tableProperties);\n let data = generateTabularData(tabularSkeleton, filteredTabularData);\n let sortedSlots = getSortedSlots(tableProperties.totalSlots);\n this.setState({\n loading: false,\n data,\n tableProperties,\n sortedSlots,\n });\n })\n .catch((err) => {\n console.error(err);\n if (err.code === 401 || err.code === 403) {\n throw err;\n }\n this.setState({\n loading: false,\n sortedSlots: [],\n });\n });\n }\n\n componentWillUnmount() {\n document.removeEventListener(\"mousedown\", this.handleClickOutside);\n this.api && this.api.cancel();\n this.putApi && this.putApi.cancel();\n }\n\n componentDidUpdate(prevProps, prevState) {\n let prevDate = prevState.date;\n let currentDate = this.state.date;\n\n if (\n this.state.currentStore !== prevState.currentStore ||\n prevState.selectedOption !== this.state.selectedOption ||\n (currentDate && currentDate !== prevDate)\n ) {\n this.api = new API({ url: \"/logistics-service/slot-capacity\" });\n const params = {\n date: this.state.date\n ? this.state.date + \"/\" + this.state.date\n : moment().format(\"YYYY-MM-DD\") + \"/\" + moment().format(\"YYYY-MM-DD\"),\n storeId: Number(this.state.currentStore),\n cutOffTime: this.state.selectedOption,\n };\n this.api\n .get(params)\n .then((res) => {\n if (checkHttpResponseCode(res.code) && res.status === \"SUCCESS\") {\n let filteredData = res.data.slotCapacity;\n let filteredTabularData =\n (filteredData &&\n filteredData.length > 0 &&\n filteredData[0].capacity) ||\n [];\n let tableProperties = slotsAndZones(filteredTabularData);\n let tabularSkeleton = generateTabularDataSkeleton(tableProperties);\n let data = generateTabularData(\n tabularSkeleton,\n filteredTabularData\n );\n let sortedSlots = getSortedSlots(tableProperties.totalSlots);\n this.setState({\n loading: false,\n data,\n tableProperties,\n sortedSlots,\n });\n } else {\n this.setState({\n loading: false,\n sortSlots: [],\n });\n }\n })\n .catch((err) => {\n console.error(err);\n if (err.code === 400) {\n this.setState({\n loading: false,\n sortedSlots: [],\n });\n return err;\n }\n throw err;\n });\n }\n }\n\n render() {\n let content = \n
\n \n
\n );\n } else {\n content = \n
\n \n
\n \n
\n \n \n {slotHeading}\n {orderType === \"BOTH\" && (\n \n \n  \n \n \n \n \n \n )}\n {orderType === \"DELIVERY\" && (\n \n \n \n \n \n )}\n {orderType === \"PICKUP\" && (\n \n \n \n \n \n )}\n | \n );\n })}\n
\n \n {getMessage(\"cp.today.table.slot\")}\n
\n {this.state.sortedSlots.map((data, index) => {\n let slot = data.split(\"-\");\n let slotHeading =\n slot.length > 1\n ? getPrintableTime(\n getStandradDateTime(\n utcToLocalTime,\n `${new Date().toISOString().split(\"T\")[0]} ${\n slot[0]\n }`\n )\n ).split(\",\")[1] +\n \" - \" +\n getPrintableTime(\n getStandradDateTime(\n utcToLocalTime,\n `${new Date().toISOString().split(\"T\")[0]} ${\n slot[1]\n }`\n )\n ).split(\",\")[1]\n : getAsapDuration(\"12:00 AM\", slot[0]);\n let slotMapToOrderType =\n this.state.tableProperties.slotMapToOrderType;\n let orderType = slotMapToOrderType[data];\n return (\n \n {\n this.tableRef = el;\n }}\n >\n zone.name\n )}\n />\n {this.state.sortedSlots.map((slot, index) => {\n let slotMapToOrderType =\n this.state.tableProperties.slotMapToOrderType;\n let orderType = slotMapToOrderType[slot];\n let zoneCapacity = this.state.data[slot];\n return zoneCapacity.length > 0 ? (\n \n {zoneCapacity &&\n zoneCapacity.map((item, i) => {\n this.table[index + \",\" + i] = {\n deliveryTotal: item.delivery.capacity || null,\n pickUpTotal: item.pickup.capacity || null,\n };\n if (this.includes(index, i)) {\n return (\n \n \n this.onSubmit(\n e,\n index,\n i,\n {\n delivery: {\n slotId: item.delivery.slotId,\n },\n pickup: {\n slotId: item.pickup.slotId,\n },\n },\n item.zone.zoneId\n )\n }\n >\n {orderType === \"BOTH\" && (\n | \n );\n }\n return (\n \n {orderType === \"BOTH\" && (\n \n this.handleEdit(\n index,\n i,\n item.pickup.capacity,\n item.delivery.capacity\n )\n }\n />\n ) : null}\n | \n );\n })}\n
\n ) : (\n \n {\" \"}\n | No Zones to display | {\" \"}\n
\n );\n })}\n \n \n 
\n \n \n 
\n \n
\n \n
\n )}\n {orderType === \"PICKUP\" && (\n \n \n {item.pickup.orderCount || 0}\n \n \n this.onChange(\n e,\n \"pickup\",\n index,\n i\n )\n }\n onKeyDown={(e) =>\n this.handleOnKeyDown(\n e,\n index,\n i\n )\n }\n />\n ) : (\n item.pickup.capacity || 0\n )}\n
\n \n \n {item.delivery.orderCount || 0}\n \n \n this.onChange(\n e,\n \"delivery\",\n index,\n i\n )\n }\n onKeyDown={(e) =>\n this.handleOnKeyDown(\n e,\n index,\n i\n )\n }\n />\n ) : (\n item.delivery.capacity || 0\n )}\n \n
\n \n \n {item.pickup.orderCount || 0}\n \n \n this.onChange(\n e,\n \"pickup\",\n index,\n i\n )\n }\n onKeyDown={(e) =>\n this.handleOnKeyDown(\n e,\n index,\n i\n )\n }\n />\n ) : (\n item.pickup.capacity || 0\n )}\n
\n )}\n {orderType === \"DELIVERY\" && (\n \n \n {item.delivery.orderCount || 0}\n \n \n this.onChange(\n e,\n \"delivery\",\n index,\n i\n )\n }\n onKeyDown={(e) =>\n this.handleOnKeyDown(\n e,\n index,\n i\n )\n }\n />\n ) : (\n item.delivery.capacity || 0\n )}\n \n
\n )}\n \n \n
\n )}\n {orderType === \"DELIVERY\" && (\n \n \n {item.pickup.orderCount || 0}\n \n
\n \n \n {item.delivery.orderCount || 0}\n \n
\n \n
\n )}\n {orderType === \"PICKUP\" && (\n \n \n {item.delivery.orderCount || 0}\n \n
\n \n
\n )}\n {this.state.edit.length === 0 ? (\n \n \n {item.pickup.orderCount || 0}\n \n
\n \n
\n \n \n \n {getMessage(\"cp.today.delivery\")}\n \n \n
\n {getMessage(\"cp.today.pickup\")}\n \n
No Data Available
;\n }\n }\n return (\n\n
\n {content}\n {this.state.showErrorDialog && (\n \n `${tab.text}`)}\n default={this.state.activeIndex}\n onClick={(index) => {\n this.changeTab(index);\n }}\n />\n\n
\n \n \n );\n } else {\n content = \n
\n \n );\n })}\n \n );\n }\n )}\n \n \n \n
\n
\n \n {\n this.tableRef = el;\n }}\n >\n \n {scopes.map((scope, i) => {\n return (\n \n \n this.handleCellEditClick(\n index,\n scope,\n type\n )\n }\n >\n  \n \n ) : (\n \n this.handleCellEditClick(\n index,\n scope,\n type\n )\n }\n >\n +\n \n )\n ) : null}\n |
\n );\n })}\n \n {types.map((type, ti) => {\n const dataArr =\n scope === \"default\"\n ? details[type] &&\n details[type][\"data\"] &&\n details[type][\"data\"].filter(\n (el) => !el.date\n )\n : details[type] &&\n details[type][\"data\"] &&\n details[type][\"data\"].filter(\n (el) =>\n el.date &&\n el.date.split(\"T\")[0] ===\n this.state.selectedDate\n );\n const {\n index: savedIndex,\n scope: savedScope,\n type: savedType,\n } = this.state.editingCell;\n const isCellSelected =\n savedIndex === index &&\n savedScope === scope &&\n savedType === type;\n return (\n \n {index === 0 && (\n \n {!isCellSelected &&\n dataArr &&\n dataArr.length > 0 &&\n dataArr[0][\n chargeTypes[\n this.state.activeIndex\n ][\"key\"]\n ]}\n {!isCellSelected && !dataArr && \"-\"}\n {isCellSelected && dataArr && (\n \n this.setState({\n editingCell: {},\n })\n }\n type=\"number\"\n defaultValue={\n (dataArr.length > 0 &&\n dataArr[0][\n chargeTypes[\n this.state.activeIndex\n ][\"key\"]\n ]) ||\n \"\"\n }\n onKeyPress={this.onKeyPress.bind(\n this,\n scope,\n type,\n dataArr,\n details[type][\"slotId\"]\n )}\n autoFocus\n />\n )}\n
\n {dataArr ? (\n dataArr.length > 0 ? (\n \n {type}\n
\n )}\n No Data Available
;\n }\n }\n return (\nSlot Charges
\n {content}\n {\n\n \n
\n );\n }\n}\n\nexport default AddPackageView;\n","import React from \"react\";\nimport {\n BaseForm,\n Input,\n VALIDATION_TYPES,\n} from \"../../../../../components/Form\";\nimport { getMessage } from \"../../../../../lib/translator\";\n\nclass CreateNewPackageForm extends BaseForm {\n componentDidMount() {\n const { editPackage } = this.props;\n if (editPackage) {\n this.setState({\n values: {\n ...editPackage,\n },\n });\n }\n }\n\n render() {\n const { SubmitButton } = this.buttons;\n const { Form } = this.components;\n const typePattern = \"^([a-zA-Z0-9])[a-zA-Z0-9 ]*$\";\n const { submitting, editPackage } = this.props;\n const {\n validations: { length = {}, breadth = {}, height = {}, type = {} } = {},\n } = this.state;\n\n const disableSubmit =\n !(length.valid && breadth.valid && height.valid && type.valid) ||\n submitting;\n\n return (\n \n );\n }\n}\n\nexport default CreateNewPackageForm;\n","import React, { forwardRef, useImperativeHandle, useState } from \"react\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport { Dialog, Popup } from \"../../../../components/Popup\";\nimport API from \"../../../../lib/api\";\nimport { getSession } from \"../../../../lib/auth\";\nimport CreateNewPackageForm from \"../../../settings/OrderPackageConfig/Table/CreateNewPackageForm.js\";\n\nconst CreatePackage = forwardRef((props, ref) => {\n const organizationId = getSession()?.organization?.id?.toString?.();\n const [showPackagePopup, setShowPackagePopup] = useState(false);\n const [createPackageError, setCreatePackageError] = useState(false);\n const [createPackageSuccess, setCreatePackageSuccess] = useState(false);\n const [submitting, setSubmitting] = useState(false);\n const [deletePackage, setDeletePackage] = useState(null);\n\n useImperativeHandle(ref, () => ({\n childMethod() {\n handleClickShowPackage();\n },\n }));\n\n const handleCloseCreatePackage = () => {\n setShowPackagePopup(false);\n };\n const handleClickShowPackage = () => {\n setShowPackagePopup(true);\n };\n\n const handleSubmitAddPackage = (formData) => {\n setSubmitting(true);\n const createPackageAPI = new API({ url: \"/order-service/package\" });\n createPackageAPI\n .post({ organizationId, ...formData })\n .then((response) => {\n setSubmitting(false);\n handleCloseCreatePackage();\n setCreatePackageSuccess(true);\n props.getPackageConfiguration(formData?.type);\n })\n .catch((error) => {\n console.error(error);\n setSubmitting(false);\n handleCloseCreatePackage();\n setCreatePackageError(true);\n });\n };\n\n const handleSubmitDeletePackage = () => {\n const deletePackageAPI = new API({\n url: `/order-service/package/${deletePackage}`,\n });\n deletePackageAPI\n .delete({ organizationId })\n .then((response) => {\n setDeletePackage(null);\n })\n .catch((error) => {\n console.error(error);\n });\n };\n\n const dismissPackageError = () => {\n setCreatePackageError(false);\n };\n const dismissPackageSuccess = () => {\n setCreatePackageSuccess(false);\n };\n\n const dismissDeletePackage = () => {\n setDeletePackage(null);\n };\n\n const errorDialogTitle = getMessage(\n \"orderPackageConfig.createPackage.errorMsg\"\n );\n const errorDialogInfo = getMessage(\n \"orderPackageConfig.createPackage.errorMsg.dsc\"\n );\n\n const successDialogTitle = getMessage(\n \"orderPackageConfig.createPackage.successMsg\"\n );\n const successDialogInfo = getMessage(\n \"orderPackageConfig.createPackage.successMsg.dsc\"\n );\n\n return (\n <>\n \n \n {packageName ? packageName : getMessage(\"product.form.select\")}\n \n {this.state.showPackageDataList && (\n
\n\n {packageName && (\n <>\n \n \n
\n\n \n \n
\n \n )}\n \n
\n {!contentLoaded ? (\n <>\n {getMessage(\"order.action.packed\")}
\n\n
\n \n )}\n\n \n {\n if (this.props.match.params?.action === \"edit\") {\n const { referenceNumber } = this.state;\n this.props.history.push(\n `/orders/orders/${referenceNumber}`\n );\n return;\n }\n this.props.history.push(\"/operations/orders\");\n }}\n >\n {getMessage(\"order.form.cancel.text\")}\n \n
\n \n \n {submitting ? \"...\" : getMessage(\"order.action.packed\")}\n \n
\n \n {\n onAction(\n TABLE_ACTIONS.UPDATE,\n { referenceNumber },\n { status: \"PACKED\" }\n );\n this.setState({ showMovePendingToPacked: false });\n }}\n close={() => this.setState({ showMovePendingToPacked: false })}\n okText={getMessage(\"order.details.packed.confirmText\")}\n closeText={getMessage(\"order.details.packed.cancelText\")}\n />\n {\n onAction(\n TABLE_ACTIONS.UPDATE,\n { referenceNumber },\n { status: \"COMPLETED\" }\n );\n this.setState({ showCompleteDialog: false });\n }}\n close={() => this.setState({ showCompleteDialog: false })}\n okText={getMessage(\"order.details.completion.confirmText\")}\n closeText={getMessage(\"order.details.completion.cancelText\")}\n />\n {\n onAction(\n TABLE_ACTIONS.UPDATE,\n { referenceNumber },\n { status: \"CANCELLED\" }\n );\n this.setState({ showCancelDialog: false });\n }}\n close={() => this.setState({ showCancelDialog: false })}\n okText={getMessage(\"order.details.cancellation.confirmText\")}\n closeText={getMessage(\"order.details.cancellation.cancelText\")}\n />\n {this.state.showMoveToPendingDialog && (\n {\n onAction(\n TABLE_ACTIONS.UPDATE,\n { referenceNumber },\n { status: \"PENDING\" }\n );\n }}\n close={() => this.setState({ moveCancelledToPending: false })}\n okText={getMessage(\"order.details.cancellation.confirmText\")}\n closeText={getMessage(\"order.details.cancellation.cancelText\")}\n />\n )}\n {this.state.showInvoice && (\n \n this.setState({ showInvoice: false, printInvoice: false })\n }\n print={this.state.printInvoice}\n />\n )}\n {this.state.showReturn && (\n this.setState({ showReturn: false })}\n className=\"file-for-return\"\n heading={`${getMessage(\"return.file.heading\")} #${referenceNumber}`}\n >\n this.setState({ showReturn: false })}\n onAction={onAction}\n status={status}\n />\n \n )}\n this.setState({ showCompleteOrderPopup: false })}\n heading={\n <>\n {getMessage(\"order.register.payments.for\")}{\" \"}\n {clientId ? \"#\" : \"Z\"}\n {clientId || referenceNumber}{\" \"}\n \n }\n >\n this.setState({ showCompleteOrderPopup: false })}\n />\n \n {this.state.showPickupPending && (\n this.setState({ showPickupPending: false })}\n className=\"pickup-pending-form\"\n >\n this.setState({ showPickupPending: false })}\n onComplete={() => {\n onAction(\n TABLE_ACTIONS.UPDATE,\n { referenceNumber },\n { status: \"COMPLETED\" }\n );\n this.setState({\n showPickupPending: false,\n });\n }}\n onPickupPendingComplete={(params) => {\n onAction(TABLE_ACTIONS.UPDATE, { referenceNumber }, params);\n }}\n />\n \n )}\n \n \n {getMessage(\"order.action.viewDetails\")}\n \n \n this.setState({ showInvoice: true })}>\n {getMessage(\"order.action.viewInvoice\")}\n \n {canBeDisputed && (\n \n \n {getMessage(\"order.details.dispute.optionText\")}\n \n \n )}\n {canShowTrip && (\n \n \n {getMessage(\"order.actions.trips\")}\n \n \n )}\n \n {getMessage(\"order.action.printInvoice\")}\n \n {canBeCancelled && (\n {\n this.setState({\n showCancelDialog: true,\n });\n }}\n >\n {getMessage(\"order.action.cancel\")}\n \n )}\n {canBePendingToPacked && (\n {\n this.setState({\n showMovePendingToPacked: true,\n });\n }}\n >\n {getMessage(\"order.action.packed\")}\n \n )}\n {canBeCompleted &&\n (!registerPayments ? (\n {\n if (!isExtensionEnabled(\"OrderReturns\")) {\n this.setState({ showCompleteDialog: true });\n } else {\n this.setState({ showPickupPending: true });\n }\n }}\n >\n {getMessage(\"order.action.complete\")}\n \n ) : (\n this.setState({ showCompleteOrderPopup: true })}\n >\n {getMessage(\"order.action.complete\")}\n \n ))}\n {canBeReturned && (\n \n \n {getMessage(\"order.action.return\")}\n \n \n )}\n \n \n {getMessage(\"order.actions.logs\")}\n \n \n {isStatusPacked && packedOrderEdit && fromOperations && (\n \n \n {getMessage(\"order.action.editPackedOrder\")}\n \n \n )}\n \n
\n );\n }\n}\n\nconst tableHeader = (url) => {\n let headers = [\n getMessage(\"order.table.header.referenceNumber\"),\n getMessage(\"order.table.header.customer\"),\n getMessage(\"order.table.header.placedTime\"),\n getMessage(\"order.filters.paymentStatus\"),\n getMessage(\"operations.order.click.collect.customer.location\"),\n getMessage(\"order.details.packing.heading\"),\n getMessage(\"order.table.header.actions\"),\n ];\n if (!isExtensionEnabled(\"DeliverySlots\")) {\n return headers;\n } else {\n headers.splice(3, 0, getMessage(\"order.table.header.expectedTime\"));\n return headers;\n }\n};\nconst getCustomerLocationDistance = (customerLocation, countryCode) => {\n if (customerLocation?.distance) {\n if (customerLocation.distance > 500) {\n if (countryCode === \"US\") {\n return `${(customerLocation.distance * 0.000621371).toFixed(2)} mi`;\n } else {\n return `${(customerLocation.distance / 1000).toFixed(2)} km`;\n }\n } else return `${customerLocation.distance} m`;\n }\n return ``;\n};\nconst tableProperties = (url, packedOrderEdit) => {\n return {\n headers: tableHeader(),\n row: ({\n items,\n slotType,\n clientId,\n referenceNumber,\n customer,\n address,\n completedAt,\n createdAt,\n invoiceAmount,\n itemCount,\n status,\n store,\n pickupLocation,\n pendingAmount,\n refundAmount,\n type,\n onAction,\n preferredDate,\n slotStartTime,\n slotEndTime,\n paymentStatus,\n fillRate,\n returnsByRE,\n packingDetails,\n id,\n customerLocation,\n }) => (\n \n
\n \n {type.name && (\n
\n \n
\n )}\n \n
\n \n \n {clientId ? (\n \n \n {\" \"}\n {getMessage(\"order.table.clientId.prefix\")}{\" \"}\n {\" \"}\n {clientId}\n \n ) : (\n \n {\" \"}\n \n {\" \"}\n {getMessage(\n \"order.table.referenceNumber.prefix\"\n )}{\" \"}\n {\" \"}\n {referenceNumber}\n \n )}\n \n
\n {type.name === \"PICKUP\" ? (\n \n {pickupLocation && pickupLocation.name}\n \n ) : (\n store && (\n \n {store.name}\n \n )\n )}\n \n {customer ? (\n \n {customer.name}\n \n ) : null}\n
\n \n {address && (\n
\n \n {createdAt\n ? getPrintableTime(createdAt).split(\", \")[0]\n : null}\n
\n \n {createdAt\n ? getPrintableTime(createdAt).split(\", \")[1]\n : null}\n \n \n {preferredDate\n ? getPrintableTime(preferredDate).split(\", \")[0]\n : null}\n
\n {paymentStatus}
\n {pendingAmount && (\n {`${\n organization?.currency?.symbol ?? \"\"\n }${pendingAmount}`}\n )}\n \n {packingDetails.map((packingDetail) => {\n const { orderId, details, id: packingId } = packingDetail;\n return orderId === id ? (\n
\n ) : null;\n })}\n \n \n {Object.keys(details).map((detail) => (\n \n
\n ))}\n \n {detail}\n
\n {`: `} \n {details[detail].join(\", \")}
\n \n \n
\n );\n }\n}\n","import React from \"react\";\nimport { Link } from \"react-router-dom\";\nimport ListingPage, { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\n\nimport EmptyIcon from \"./designation.svg\";\nimport DesignationForm from \"./Form\";\nimport DesignationFilter from \"./Filters\";\nimport \"./style.css\";\n\nimport { getMessage } from \"../../../lib/translator\";\n\nconst EmptyState = {\n icon: EmptyIcon,\n message: getMessage(\"designations.empty.message\"),\n actions: ({ onAction }) => (\n {timingType}
\n \n {\n \n {getMessage(\"designations.header.timing\")}\n \n }\n
\n \n {timingType &&\n timingType.split(\"\")[0] +\n timingType\n .toLowerCase()\n .split(\"\")\n .slice(1, timingType.length)\n .join(\"\")}\n
\n\n \n {getMessage(\"designations.header.manager\")}\n \n
\n {manager && manager.name}
\n{employee.name}
\n \n {employee?.designation?.name}\n \n \n {getMessage(\n `attendance.summary.table.${employee.attendance[key].status}`\n )}\n
\n {employee.attendance[key].inTime &&\n employee.attendance[key].expectedOut && (\n \n {formatTime(\n employee.attendance[key].inTime &&\n employee.attendance[key].inTime.split(\" \")[1]\n )}{\" \"}\n {getMessage(\"attendance.summary.table.to\")}{\" \"}\n {formatTime(\n employee.attendance[key].outTime &&\n employee.attendance[key].outTime.split(\" \")[1]\n )}\n \n )}\n {employee.attendance[key].inTime &&\n employee.attendance[key].outTime && (\n \n \n {getDifferenceInHours(\n employee.attendance[key].inTime,\n employee.attendance[key].outTime\n )}\n \n
\n )}\n \n {formatDate(key)}\n
\n {getPrintableDay(key)}\n
\n \n {getPrintableDay(key)}\n
\n {getMessage(\n `attendance.summary.table.${attendance[key].status}`\n )}\n
\n {attendance[key].inTime && attendance[key].expectedOut && (\n \n {formatTime(attendance[key].inTime)}{\" \"}\n {getMessage(\"attendance.summary.table.to\")}{\" \"}\n {formatTime(attendance[key].outTime)}\n \n )}\n \n 
\n {getMessage(\"attendance.summary.empty.message\")}\n
\n );\n }\n },\n };\n};\n\nconst EmptyState = {\n icon: EmptyIcon,\n message: getMessage(\"attendance.summary.empty.message\"),\n};\n\nconst formatTime = (t) => getPrintableTime(t).split(\", \")[1];\n\nclass AttendanceSummary extends Component {\n constructor(props) {\n super(props);\n this.state = {\n from: getMonthStartEnd()[0],\n to: getDateInSQL(new Date()),\n stores: [],\n tableBody: [],\n };\n }\n\n componentWillMount() {\n if (isExtensionEnabled(\"MultiStoreSupport\")) {\n this.storeApi = new API({\n url: \"/account-service/store\",\n });\n this.storeApi\n .get({ paginate: false })\n .then((response) => {\n if (response.data.store.length > 0) {\n const stores = response.data.store;\n this.setState({\n stores,\n });\n }\n })\n .catch((error) => {\n console.error(error);\n });\n }\n }\n componentWillUnmount() {\n this.storeApi && this.storeApi.cancel();\n }\n\n getStandardTableData = (attendace) => {\n let modelData = {};\n Object.entries(attendace).forEach(([key, data]) => {\n if (\n data.status === \"ABSENT\" ||\n data.status === \"WEEKLY_OFF\" ||\n data.status === \"ON_LEAVE\"\n ) {\n modelData[key] = {};\n } else {\n const localInTime = getStandradDateTime(\n utcToLocalTime,\n data.inTime\n ).split(\" \");\n modelData[localInTime[0]] = {};\n }\n });\n\n Object.entries(attendace).forEach(([key, data]) => {\n if (\n data.status === \"ABSENT\" ||\n data.status === \"WEEKLY_OFF\" ||\n data.status === \"ON_LEAVE\"\n ) {\n modelData[key] = data;\n } else {\n const localInTime = getStandradDateTime(utcToLocalTime, data.inTime);\n data.inTime = localInTime;\n if (data.outTime) {\n const localOutTime = getStandradDateTime(\n utcToLocalTime,\n data.outTime\n );\n data.outTime = localOutTime;\n }\n modelData[localInTime.split(\" \")[0]] = data;\n }\n });\n return modelData;\n };\n\n getDisplayAttendance = (attendanceSummary) => {\n attendanceSummary.map((employee) => {\n employee.attendance = this.getStandardTableData(employee.attendance);\n return employee;\n });\n return attendanceSummary;\n };\n\n render() {\n const { from, to, tableBody, stores } = this.state;\n return (\n \n {this.state.formError && (\n
\n );\n }\n}\n\nexport default withRouter(BasicInformationForm);\n","import React, { Component } from \"react\";\nimport \"./style.css\";\nimport AuthenticatedPage from \"../../../containers/AuthenticatedPage\";\nimport BasicInformationForm from \"./form\";\nimport { getMessage } from \"../../../lib/translator\";\n\nexport default class BasicInformation extends Component {\n render() {\n return (\n \n {getMessage(`error.${this.state.formError}`)}\n
\n )}\n {getMessage(\"basicInfo.heading\")}
\n\n {this.state.formError && (\n
\n );\n }\n}\n\nexport default AnalyticsForm;\n","import React from \"react\";\nimport \"./style.css\";\nimport AuthenticatedPage from \"../../../containers/AuthenticatedPage/index\";\nimport AnalyticsForm from \"./form\";\nimport { getMessage } from \"../../../lib/translator\";\n\nexport default function Analytics(props) {\n return (\n {this.state.formError}
\n )}\n {this.state.showLoader ? (\n {getMessage(\"analytics.heading\")}
\n\n
\n {accounts && !accounts.find((o) => o.name === \"facebook\").isAdd && (\n \n \n {getMessage(\"socialMedia.submit.text\")}\n \n \n {getMessage(\"socialMedia.cancel.text\")}\n \n
\n \n )}\n \n );\n }\n}\n\nexport default withRouter(SocialMediaForm);\n","import React from \"react\";\nimport \"./style.css\";\nimport AuthenticatedPage from \"../../../containers/AuthenticatedPage\";\nimport SocialMediaForm from \"./form\";\nimport { getMessage } from \"../../../lib/translator\";\n\nexport default function SocialMedia(props) {\n return (\n {getMessage(\"contactDetails.heading\")}
\n\n setError()}\n />\n
,\n document.getElementById(\"delivery-area-form-action-btn\")\n );\n};\n\nexport default ActionButtons;\n","import React from \"react\";\nimport { Input } from \"../../../../components/Form\";\nimport { getMessage } from \"../../../../lib/translator\";\n\nexport const DeliveryFeeFormulaForm = ({ value = {}, onChange }) => {\n const inputData = [\n {\n placeholder: \"Additional fixed cost\",\n className: \"delivery-fee edit-section\",\n name: \"DeliveryFee\",\n key: \"deliveryFee\",\n },\n {\n placeholder: \"Lower weight limit\",\n className: \"lower-weight-limit edit-section\",\n name: \"LowerWeightLimit\",\n key: \"lowerWeightLimit\",\n },\n {\n placeholder: \"Rate per weight unit\",\n className: \"rate-per-weight-unit edit-section\",\n name: \"RatePerWeightUnit\",\n key: \"ratePerWeightUnit\",\n },\n {\n placeholder: \"Charge percentage\",\n className: \"charge-percentage edit-section\",\n name: \"ChargePercentage\",\n key: \"chargePercentage\",\n },\n ];\n const handleChange = (val, key) => {\n onChange({ ...value, [key]: val });\n };\n return (\n <>\n \n \n \n {getMessage(\"extensions.deliveryArea.save\")}\n \n
\n \n
\n {inputData.map((item) => {\n return (\n \n {getMessage(\"delivery.fee.formula.heading\")}\n
\n \n {getMessage(\"delivery.fee.formula.left.text\")}{\" \"}\n {getMessage(\"delivery.fee.formula.right.text\")}\n
\n\n \n
\n \n {isContentOverflown && (\n \n )}\n \n );\n};\n\nconst AddForm = ({ value = {}, onChange, onDeleteZone, setNewLocation }) => {\n const [continuedAddition, setContinuedAddition] = useState(false);\n const [showError, setShowError] = useState(false);\n\n const handleChange = (newValue) => {\n onChange({ ...value, ...newValue });\n };\n\n const handleDeletePincode = (index) => {\n const newPincodes = value.pincodes?.filter((_, i) => i !== index);\n handleChange({ pincodes: newPincodes });\n };\n\n const handleSubmit = (e) => {\n e && e.preventDefault();\n if (!value.storeId) {\n setShowError(true);\n } else {\n setContinuedAddition(true);\n }\n };\n\n const handleAddPincode = (pincode) => {\n const newPincode = { pincode };\n let oldPincodes;\n\n if (pincode) {\n oldPincodes = value.pincodes;\n oldPincodes = oldPincodes?.slice(0, oldPincodes?.length - 1);\n } else {\n oldPincodes = value.pincodes?.filter(({ pincode }) => Boolean(pincode));\n }\n\n const newPincodes = oldPincodes?.concat(newPincode);\n\n handleChange({ pincodes: newPincodes });\n };\n\n useEffect(() => {\n if (continuedAddition && value.pincodes) {\n getLatlngFromPincode(value.pincodes).then((latlng) =>\n setNewLocation(latlng)\n );\n }\n\n if (value.pincodes && !value.pincodes?.length) {\n setContinuedAddition(false);\n }\n }, [continuedAddition, value.pincodes, setNewLocation]);\n\n const allStores = getStores()?.filter((store) => store.hasDeliveryHub) || [];\n const storeOptions = [\n ...allStores.map((store) => ({ text: store.name, value: store.id })),\n ];\n\n return (\n \n );\n};\n\nconst EditForm = ({\n value = {},\n onChange,\n pincodeGroup,\n action,\n onDeleteZone,\n setNewLocation,\n}) => {\n const [selectedGroup, setSelectedGroup] = useState();\n const groups =\n pincodeGroup &&\n pincodeGroup.map(({ name, id }) => ({\n text: name || getMessage(\"extensions.deliveryArea.zone.unnamed\"),\n value: id,\n }));\n const isEditable = action === \"add\" || selectedGroup;\n\n const handleSelectGroup = (groupId) => {\n const groupData = pincodeGroup.filter(({ id }) => id === Number(groupId));\n setSelectedGroup(groupId);\n onChange(groupData[0], true);\n };\n\n const handleChange = (newValue, replace) => {\n if (replace) {\n onChange({ ...newValue });\n } else {\n onChange({ ...value, ...newValue });\n }\n };\n\n const handleAddPincode = (pincode) => {\n const newPincode = { pincode };\n let oldPincodes;\n\n if (pincode) {\n oldPincodes = value.area.pincodes;\n oldPincodes = oldPincodes?.slice(0, oldPincodes?.length - 1);\n } else {\n oldPincodes = value.area.pincodes?.filter(({ pincode }) =>\n Boolean(pincode)\n );\n }\n\n const newPincodes = oldPincodes?.concat(newPincode);\n\n handleChange({\n area: {\n ...value.area,\n pincodes: newPincodes,\n },\n });\n };\n\n const handleDeletePincode = (index) => {\n const newPincodes = value.area.pincodes?.filter((_, i) => i !== index);\n handleChange({\n area: {\n ...value.area,\n pincodes: newPincodes,\n },\n });\n };\n\n useEffect(() => {\n if (value.area?.pincodes) {\n getLatlngFromPincode(value.area.pincodes).then((latlng) =>\n setNewLocation(latlng)\n );\n }\n }, [value.area, setNewLocation]);\n\n return (\n \n {pincodeGroups.map((group, index) => {\n return (\n \n
\n );\n })}\n \n \n {group.name\n ? group.name\n : getMessage(\"extensions.deliveryArea.zone.unnamed\")}\n \n {`${getCurrency().symbol} ${\n group.area.deliveryFee\n }`}\n
\n \n \n {getSingularPluralForm(\n group.area.pincodes?.length,\n \"zipcode\"\n )}\n \n \n {getMessage(\"extensions.deliveryArea.deliveryFee\")}\n \n
\n \n
\n \n Zip codes\n
\n )}\n \n 
\n \n + Add New Zipcode\n \n
\n )\n ) : (\n \n {active && !action && (\n val}\n />\n )}\n
\n )}\n {action && (\n \n \n Edit\n \n \n Add New\n \n
\n )}\n {action && (\n \n \n
\n );\n });\n};\n\nconst RadialDisplay = (props) => {\n const { polygonGroups, distinctColors } = props;\n const pincodeDisplayRef = useRef();\n const [expanded, setExpanded] = useState(false);\n const [isContentOverflown, setIsContentOverflown] = useState(false);\n const [containerHeight, setContainerHeight] = useState();\n\n useEffect(() => {\n if (pincodeDisplayRef) {\n const domEl = pincodeDisplayRef.current;\n const containerHeight = domEl.clientHeight;\n const contentHeight = domEl.querySelector(\n \".pincode-group-list-content\"\n ).offsetHeight;\n if (contentHeight > containerHeight) {\n setIsContentOverflown(true);\n setContainerHeight(contentHeight + 10); // Adding 10 to match margins\n }\n }\n }, [polygonGroups]);\n\n const toggleExpand = (e) => {\n e && e.preventDefault && e.preventDefault();\n setExpanded(!expanded);\n };\n\n return (\n \n \n
\n {isContentOverflown && (\n \n )}\n \n );\n};\n\nconst AddForm = ({ value = {}, onChange, onSave, setNewLocation }) => {\n const handleChange = (newValue) => {\n onChange({ ...value, ...newValue });\n };\n\n const handleSubmit = (e) => {\n e && e.preventDefault();\n onSave();\n };\n\n const handlePlaceSearch = (data) => {\n if (data && data[0] && data[0].geometry && data[0].geometry.location) {\n const location = data[0].geometry.location;\n const latitude = location.lat();\n const longitude = location.lng();\n\n handleChange({ latitude, longitude });\n }\n };\n\n useEffect(() => {\n if (value.latitude && value.longitude) {\n const markerLocation = [{ lat: value.latitude, lng: value.longitude }];\n setNewLocation(markerLocation);\n }\n }, [value.latitude, value.longitude, setNewLocation]);\n\n return (\n \n );\n};\n\nconst EditForm = ({\n value = {},\n onChange,\n pincodeGroup,\n action,\n onDeleteZone,\n setNewLocation,\n}) => {\n const [selectedGroup, setSelectedGroup] = useState();\n const [showDeletePopup, setShowDeletePopup] = useState(false);\n\n const groups =\n pincodeGroup &&\n pincodeGroup.map(({ name, id }) => ({\n text: name || getMessage(\"extensions.deliveryArea.zone.unnamed\"),\n value: id,\n }));\n const isEditable = Boolean(selectedGroup);\n\n const handleSelectGroup = (groupId) => {\n const groupData = pincodeGroup.filter(({ id }) => id === Number(groupId));\n setSelectedGroup(groupId);\n onChange(groupData[0], true);\n };\n\n const handleChange = (newValue, replace) => {\n if (replace) {\n onChange({ ...newValue });\n } else {\n onChange({ ...value, ...newValue });\n }\n };\n\n const handlePlaceSearch = (data) => {\n if (data && data[0] && data[0].geometry && data[0].geometry.location) {\n const location = data[0].geometry.location;\n const latitude = location.lat();\n const longitude = location.lng();\n\n handleChange({ area: { ...value.area, latitude, longitude } });\n }\n };\n\n const handleShowDeletePopup = (e) => {\n preventDefaultBehavior(e);\n setShowDeletePopup(true);\n };\n\n const hanldeDeleteZone = (e) => {\n preventDefaultBehavior(e);\n setShowDeletePopup(false);\n onDeleteZone();\n };\n\n useEffect(() => {\n if (value.area?.latitude || value.area?.longitude) {\n const markerLocation = [\n { lat: value.area.latitude, lng: value.area.longitude },\n ];\n setNewLocation(markerLocation);\n }\n }, [value.area, setNewLocation]);\n\n return (\n \n
\n \n
\n \n Zone\n {getMessage(\"extensions.deliveryArea.deliveryFee\")}\n
\n \n
\n \n
\n \n \n handleChange({ area: { ...value.area, startRadius } })\n }\n readOnly={!isEditable}\n required\n />\n \n handleChange({ area: { ...value.area, endRadius } })\n }\n readOnly={!isEditable}\n required\n />\n
\n \n {getMessage(\"radial.form.to\")}\n
\n \n {getMessage(\"radial.form.distance.description\")}\n
\n \n \n \n + Add New Zone\n \n
\n )\n ) : (\n \n {active && !action && (\n
\n )}\n {action && (\n \n \n Edit\n \n \n Add New\n \n
\n )}\n {action && (\n \n \n
\n ));\n\nconst PinCodesDisplay = (props) => {\n const { polygonGroups, distinctColors } = props;\n const pincodeDisplayRef = useRef();\n const [expanded, setExpanded] = useState(false);\n const [isContentOverflown, setIsContentOverflown] = useState(false);\n const [containerHeight, setContainerHeight] = useState();\n\n useEffect(() => {\n if (pincodeDisplayRef) {\n const domEl = pincodeDisplayRef.current;\n const containerHeight = domEl.clientHeight;\n const contentHeight = domEl.querySelector(\n \".pincode-group-list-content\"\n ).offsetHeight;\n if (contentHeight > containerHeight) {\n setIsContentOverflown(true);\n setContainerHeight(contentHeight + 10); // Adding 10 to match margins\n }\n }\n }, [polygonGroups]);\n\n const toggleExpand = (e) => {\n e && e.preventDefault && e.preventDefault();\n setExpanded(!expanded);\n };\n\n return (\n \n \n
\n {isContentOverflown && (\n \n )}\n \n );\n};\n\nconst AddForm = ({\n value = {},\n onChange,\n newlyAddedLocations,\n onSave,\n locationError,\n name,\n}) => {\n useEffect(() => {\n if (name) {\n handleChange({ name });\n }\n // eslint-disable-next-line\n }, []);\n const handleChange = (newValue) => {\n onChange({ ...value, ...newValue });\n };\n\n const handleSubmit = (e) => {\n e && e.preventDefault();\n onSave();\n };\n\n const isDisabled = !(newlyAddedLocations && newlyAddedLocations.length);\n\n return (\n \n );\n};\n\nconst EditForm = ({\n value = {},\n onChange,\n pincodeGroup,\n action,\n onDeleteZone,\n setTempLocation,\n}) => {\n const [selectedGroup, setSelectedGroup] = useState();\n const [showDeletePopup, setShowDeletePopup] = useState(false);\n\n const groups =\n pincodeGroup &&\n pincodeGroup.map(({ name, id }) => ({\n text: name || getMessage(\"extensions.deliveryArea.polygon.unnamed\"),\n value: id,\n }));\n const isEditable = Boolean(selectedGroup);\n\n const handleSelectGroup = (groupId) => {\n const groupData = pincodeGroup.filter(({ id }) => id === Number(groupId));\n setSelectedGroup(groupId);\n onChange(groupData[0], true);\n setTempLocation({\n ...groupData[0],\n locations: groupData[0]?.area?.locations?.map(\n ({ latitude, longitude }) => ({ lat: latitude, lng: longitude })\n ),\n });\n };\n\n const handleChange = (newValue, replace) => {\n if (replace) {\n onChange({ ...newValue });\n } else {\n onChange({ ...value, ...newValue });\n }\n };\n\n const handleShowDeletePopup = (e) => {\n preventDefaultBehavior(e);\n setShowDeletePopup(true);\n };\n\n const hanldeDeleteZone = (e) => {\n preventDefaultBehavior(e);\n setShowDeletePopup(false);\n onDeleteZone();\n };\n\n return (\n \n
\n \n
\n \n Zone\n {getMessage(\"extensions.deliveryArea.deliveryFee\")}\n
\n \n
\n \n \n \n + Add New Zone\n \n
\n )\n ) : (\n \n {active && !action && (\n
\n )}\n {action && (\n \n \n Edit\n \n \n Add New\n \n
\n )}\n {action && (\n \n \n
\n \n {isContentOverflown && (\n \n )}\n \n );\n};\n\nconst AddForm = ({ value = {}, onChange, onDeleteZone, setNewLocation }) => {\n const [continuedAddition, setContinuedAddition] = useState(false);\n const [addBuilding, setAddBuilding] = useState(false);\n const [tempBuildingData, setTempBuildingData] = useState({});\n\n const handleChange = (newValue) => {\n onChange({ ...value, ...newValue });\n };\n\n const handleDeleteapartment = (index) => {\n const newBuildings = value.building?.filter((_, i) => i !== index);\n handleChange({ building: newBuildings });\n };\n\n const handleSubmit = (e) => {\n e && e.preventDefault();\n if (addBuilding) {\n const newBuildigData = [...value.building, tempBuildingData];\n handleChange({ building: newBuildigData });\n setAddBuilding(false);\n setTempBuildingData(undefined);\n } else {\n setContinuedAddition(true);\n }\n };\n\n const handlePlaceSearch = (data) => {\n if (data && data[0] && data[0].geometry && data[0].geometry.location) {\n const location = data[0].geometry.location;\n const latitude = location.lat();\n const longitude = location.lng();\n const name = data[0].name;\n const addressComponents = data[0].address_components;\n const city = addressComponents?.filter(({ types }) =>\n types?.includes(\"locality\")\n )[0]?.short_name;\n const pincode = addressComponents?.filter(({ types }) =>\n types?.includes(\"postal_code\")\n )[0]?.short_name;\n\n const building = [\n {\n ...(value.building && value.building[0]),\n name,\n pincode,\n latitude,\n longitude,\n },\n ];\n\n if (addBuilding) {\n setTempBuildingData(building[0]);\n } else {\n handleChange({ building, city });\n }\n }\n };\n\n const createBuildingValuesChangeHandler = (key) => (val) => {\n const building = [\n {\n ...(value.building && value.building[0]),\n [key]: val,\n },\n ];\n handleChange({ building });\n };\n\n const createTempBuildingDataChangeHandler = (key) => (val) => {\n setTempBuildingData({ ...tempBuildingData, [key]: val });\n };\n\n useEffect(() => {\n if (continuedAddition && value.building) {\n const buildingLatlng = value.building?.map(({ latitude, longitude }) => ({\n lat: latitude,\n lng: longitude,\n }));\n setNewLocation(buildingLatlng);\n }\n\n if (value.building && !value.building?.length) {\n setContinuedAddition(false);\n }\n }, [continuedAddition, value.building, setNewLocation]);\n\n const canBeSubmitted =\n value.building &&\n value.building?.filter(({ latitude, longitude }) => latitude && longitude)\n .length === value.building?.length;\n\n return (\n \n );\n};\n\nconst EditForm = ({\n value = {},\n onChange,\n pincodeGroup,\n action,\n onDeleteZone,\n setNewLocation,\n}) => {\n const [selectedGroup, setSelectedGroup] = useState();\n const [addBuilding, setAddBuilding] = useState(false);\n const [tempBuildingData, setTempBuildingData] = useState({});\n\n const groups =\n pincodeGroup &&\n pincodeGroup.map(({ name, id }) => ({\n text: name || getMessage(\"extensions.deliveryArea.zone.unnamed\"),\n value: id,\n }));\n const isEditable = action === \"add\" || selectedGroup;\n\n const handleSelectGroup = (groupId) => {\n const groupData = pincodeGroup.filter(({ id }) => id === Number(groupId));\n setSelectedGroup(groupId);\n onChange(groupData[0], true);\n };\n\n const handlePlaceSearch = (data) => {\n if (data && data[0] && data[0].geometry && data[0].geometry.location) {\n const location = data[0].geometry.location;\n const latitude = location.lat();\n const longitude = location.lng();\n const name = data[0].name;\n const addressComponents = data[0].address_components;\n const pincode = addressComponents?.filter(({ types }) =>\n types?.includes(\"postal_code\")\n )[0]?.short_name;\n\n setTempBuildingData({\n ...tempBuildingData,\n name,\n pincode,\n latitude,\n longitude,\n });\n }\n };\n\n const handleChange = (newValue, replace) => {\n if (replace) {\n onChange({ ...newValue });\n } else {\n onChange({ ...value, ...newValue });\n }\n };\n\n const handleDeleteapartment = (index) => {\n const newPincodes = value.area.building?.filter((_, i) => i !== index);\n handleChange({\n area: {\n ...value.area,\n building: newPincodes,\n },\n });\n };\n\n const handleAddapartmentSubmit = (e) => {\n e && e.preventDefault();\n const newBuildigData = [...value.area.building, tempBuildingData];\n handleChange({\n area: {\n ...value.area,\n building: newBuildigData,\n },\n });\n setAddBuilding(false);\n setTempBuildingData(undefined);\n };\n\n const createTempBuildingDataChangeHandler = (key) => (val) => {\n setTempBuildingData({ ...tempBuildingData, [key]: val });\n };\n\n useEffect(() => {\n if (value.area?.building) {\n const buildingLatlng = value.area.building?.map(\n ({ latitude, longitude }) => ({ lat: latitude, lng: longitude })\n );\n setNewLocation(buildingLatlng);\n }\n }, [value.area, setNewLocation]);\n\n return !addBuilding ? (\n \n {apartmentGroups &&\n apartmentGroups.map((group, index) => {\n return (\n \n
\n );\n })}\n \n \n {group.name\n ? group.name\n : getMessage(\"extensions.deliveryArea.zone.unnamed\")}\n \n {`${getCurrency().symbol} ${\n group.area.deliveryFee\n }`}\n
\n \n \n {getSingularPluralForm(\n group.area.building?.length,\n \"apartment\"\n )}\n \n \n {getMessage(\"extensions.deliveryArea.deliveryFee\")}\n \n
\n \n
\n \n apartments\n setAddBuilding(true)}\n onDeleteZone={onDeleteZone}\n />\n
\n )}\n \n \n \n + Add New Apartment\n \n
\n )\n ) : (\n \n {active && !action && (\n
\n )}\n {action && (\n \n \n Edit\n \n \n Add New\n \n
\n )}\n {action && (\n \n {location.label}\n
\n \n
\n );\n}\n","import React, { Component } from \"react\";\n\nimport Upload from \"../../../../components/FileUpload\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport kmlIcon from \"./kml.svg\";\nimport uploadIcon from \"./trip-upload.svg\";\n\nimport \"./style.css\";\n\nexport default class KMLUpload extends Component {\n render() {\n return (\n \n {getMessage(\"Upload KML file\")}\n
\n \n
\n );\n }\n}\n","import React, { Component } from \"react\";\nimport AuthenticatedPage from \"../../../containers/AuthenticatedPage\";\nimport { Select } from \"../../../components/Form\";\nimport { Popup, Dialog } from \"../../../components/Popup\";\nimport { getStores } from \"../../../lib/auth\";\nimport API from \"../../../lib/api\";\nimport { getMessage } from \"../../../lib/translator\";\nimport PincodeFormComponent from \"./FormComponents/Pincode\";\nimport RadialFormComponent from \"./FormComponents/Radial\";\nimport PolygonFormComponent from \"./FormComponents/Polygon\";\nimport ApartmentComponent from \"./FormComponents/Apartment\";\nimport CommonMapComponent from \"./CommonMapComponent\";\nimport AddDeliveryArea from \"./AddDeliveryArea\";\nimport KMLUpload from \"./KMLUpload\";\n\nimport \"./style.css\";\n\nconst distinctColors = [\n { color: \"default\", value: \"#7ac8ed\" },\n { color: \"blue\", value: \"#0000ff\" },\n { color: \"maroon\", value: \"#800000\" },\n { color: \"darkolivegreen\", value: \"#556b2f\" },\n { color: \"darkblue\", value: \"#00008b\" },\n { color: \"darkmagenta\", value: \"#8b008b\" },\n { color: \"darkvoilet\", value: \"#eca5b7\" },\n { color: \"darkorchid\", value: \"#9932cc\" },\n { color: \"darkcyan\", value: \"#008b8b\" },\n { color: \"darkgreen\", value: \"#006400\" },\n { color: \"darkorange\", value: \"#ff8c00\" },\n { color: \"seagreen\", value: \"#55CFAF\" },\n { color: \"darkmagenta\", value: \"#8b008b\" },\n { color: \"darkvoilet\", value: \"#eca5b7\" },\n];\n\nclass MapControls extends Component {\n constructor(props) {\n super(props);\n this.state = {};\n this.storeSelectReadOnly = false;\n\n this.handleOpenClose = this.handleOpenClose.bind(this);\n }\n\n handleOpenClose(section) {\n this.setState((prevState) => {\n if (prevState.activeSection === section) {\n return {\n ...prevState,\n activeSection: \"\",\n };\n } else {\n return {\n ...prevState,\n activeSection: section,\n };\n }\n });\n }\n\n render() {\n const {\n pincodeArea,\n radialArea,\n polygonalArea,\n apartments,\n distinctColors,\n setNewLocation,\n fetchAndUpdate,\n storeId,\n toggleStoreError,\n tempDeliveryAreaData,\n changeEditMode,\n changeMapEditMode,\n setTempLocation,\n clearTempData,\n setShowDrawOption,\n editing,\n } = this.props;\n\n const { activeSection } = this.state;\n\n return (\n \n {\n data.append(\"storeId\", this.props.storeId);\n return data;\n }}\n uploadKey=\"kmlFile\"\n icon={kmlIcon}\n successCallback={this.props.successCallback}\n errorCallBack={this.props.errorCallBack}\n />\n
\n \n \n
\n \n {this.state.kmlUploadPopupShown && (\n \n \n this.setState({ showError: false }, this.fetchDeliveryAreaData)\n }\n information={this.state.apiError}\n closeText={getMessage(\"extensions.error.dialog.okay\")}\n />\n this.setState({ showSelectStoreDialog: false })}\n information={\"select a store before uploading kml file\"}\n closeText={getMessage(\"extensions.error.dialog.okay\")}\n />\n {\n this.setState({ showStoreError: false });\n this.setStore(id);\n }}\n />\n {showStoreError && (\n \n {getMessage(\"extensions.deliveryArea.store.error\")}\n \n )}\n
\n );\n }\n}\nexport default class DeliveryAreas extends Component {\n render() {\n return (\n \n
\n {getMessage(\"extensions.deliveryArea.title\")}
\n\n
\n
\n \n {getMessage(\"extensions.deliveryArea.zones.heading\")}\n
\n\n
\n
\n \n \n
\n \n
\n {getMessage(\"themes.change.heading\")}
\n\n
\n {!this.state.themes ? (\n \n
\n \n {getMessage(\"themes.subheading\", {\n name: this.state.currentTheme.name,\n })}\n
\n{this.state.currentTheme.description}
\n \n {getMessage(\"themes.customize.text\")}\n \n\n {this.state.themes.map((theme, index) => {\n return (\n
\n )}\n \n
\n );\n })}\n \n 
\n
\n \n \n {\n this.selectTheme(theme.id);\n }}\n >\n {this.state.submitting\n ? \"...\"\n : getMessage(\"themes.selectTheme.text\")}\n \n
\n {theme.name}
\n{theme.description}
\n\n
\n );\n}\n","import React, { Component, Fragment } from \"react\";\nimport AuthenticatedPage from \"../../../containers/AuthenticatedPage\";\nimport API from \"../../../lib/api\";\nimport Loader from \"../../../components/Loader\";\nimport Tabs from \"../../../components/Tabs\";\nimport {\n SingleDatePicker,\n Select,\n CategorySearch,\n BrandSearch,\n Searchable,\n Checkbox,\n} from \"../../../components/Form\";\nimport {\n SortableContainer,\n SortableElement,\n SortableHandle,\n arrayMove,\n} from \"react-sortable-hoc\";\nimport { getMessage } from \"../../../lib/translator\";\nimport { isExtensionEnabled } from \"../../../lib/auth\";\nimport { Link } from \"react-router-dom\";\nimport { getTimes } from \"../../../lib/datetime\";\nimport moment from \"moment\";\nimport { DropDown, DropDownItem } from \"../../../components/DropDown\";\n\nimport Layout from \"./layout\";\nimport SplashScreen from \"../../../components/Layout/SplashScreen\";\nimport ImageSlideshow from \"../../../components/Layout/ImageSlideshow\";\nimport AppointmentForm from \"../../../components/Layout/AppointmentForm\";\nimport Banner from \"../../../components/Layout/Banner\";\nimport ImageWithText from \"../../../components/Layout/ImageWithText\";\nimport ProductCollection from \"../../../components/Layout/ProductCollection\";\nimport { Popup, Dialog } from \"../../../components/Popup\";\nimport \"./style.css\";\nimport getLayout from \"./Layouts/getLayout\";\nimport DualImageGrid from \"../../../components/Layout/DualImageGrid\";\nimport arrow from \"../../../components/Form/Inputs/Select/dropdown arrow.svg\";\nimport deleteIcon from \"./cx-delete-icon.svg\";\nimport Carousel from \"../../../components/Layout/Carousel\";\n\nimport DualImageBanner from \"../../../components/Layout/DualImageBanner\";\nimport checkHttpResponseCode from \"../../../utils/isApiCallSuccessfull\";\nimport Testimonial from \"../../../components/Layout/Testimonial\";\nimport RichText from \"../../../components/Layout/RichText\";\n\nimport { updateStateRecursively } from \"../../../lib/stateManagement\";\nimport { exportText } from \"../../../components/RichEditor\";\n\nimport {\n BannerWithText,\n BannerWithMultipleButtons,\n VideoCardCarousel,\n} from \"zopsmart-ui\";\nimport AnnouncementBar from \"./AnnouncementBar\";\nimport { get } from \"../../../lib/storage\";\nimport GridCollection from \"../../../components/Layout/GridCollection\";\nimport FooterLayout from \"../../../components/Layout/Footer\";\nimport { faro } from \"@grafana/faro-web-sdk\";\nimport { specialLayout } from \"./constants\";\nimport ImageCollection from \"../../../components/Layout/ImageCollection\";\nimport Highlights from \"../../../components/Layout/Highlights\";\n\n// Support only for Fashion Trends theme as of now\nconst dualImageLayouts = [\"DualImageBanner\", \"DualImage\"];\n\nconst AppointmentFormLayout = \"AppointmentForm\";\n\nconst ANNOUNCEMENT_BAR_STATUS = {\n enabled: \"ENABLED\",\n disabled: \"DISABLED\",\n};\n\n// serchable component for brand and category\nconst searchableComponent = {\n brand: BrandSearch,\n category: CategorySearch,\n};\n\n// Layout components mapping with their names\nconst availableComponents = {\n Images: {\n ImageSlideShow: ImageSlideshow,\n ImageWithText: ImageWithText,\n DualImageBanner: DualImageBanner,\n ImageCollection: ImageCollection,\n GridCollection: GridCollection,\n },\n \"E-commerce\": {\n ProductCollection: ProductCollection,\n CategoryCollection: ProductCollection,\n BrandCollection: ProductCollection,\n SearchResults: ProductCollection,\n DualImage: DualImageGrid,\n },\n Banners: {\n MarketingBanners: Banner,\n BannerWithText: BannerWithText,\n BannerWithButton: BannerWithText,\n BannerWithMultipleButtons: BannerWithMultipleButtons,\n },\n Videos: {\n VideoCardCarousel: VideoCardCarousel,\n },\n Forms: {\n AppointmentForm: AppointmentForm,\n },\n Text: {\n RichText: RichText,\n },\n Carousel: {\n Carousel: Carousel,\n Testimonial: Testimonial,\n },\n Blog: {\n BlogCollection: ProductCollection,\n },\n Seller: {\n SellerCollection: ProductCollection,\n },\n FooterLayout: {\n FooterLayout: FooterLayout,\n },\n Splash: {\n Splash: SplashScreen,\n },\n Influencer: {\n InfluencerCollection: ProductCollection,\n },\n Features: {\n Highlights: Highlights,\n },\n};\n\nconst DragHandle = SortableHandle((props) => (\n {props.children}\n));\n\nconst SortableItem = SortableElement((props) => {\n const { value, layoutIndex, onEditClick, onRemoveClick } = props;\n let LayoutComponent = \"\";\n Object.keys(availableComponents).forEach(function (component, index) {\n if (availableComponents[component][value.name]) {\n LayoutComponent = availableComponents[component][value.name];\n }\n });\n let element = \"\";\n const isShowLayout = typeof LayoutComponent !== \"string\";\n return (\n \n {getMessage(\"themes.customize.announcementBar.text\")}\n {\n handleOnChange();\n }}\n icons={false}\n />\n
\n {isAnnouncementBarEnabled && (\n \n
\n )}\n \n
\n \n updateState([\"description\"], value)}\n allowedMethods={[\n \"BOLD\",\n \"ITALIC\",\n \"LINK\",\n \"STRIKETHROUGH\",\n \"UNDERLINE\",\n ]}\n />\n
\n \n \n {getMessage(\"themes.customize.preview\")}\n \n
\n \n
\n \n \n {\n handleAnnouncementBarSave();\n }}\n >\n {announcementBarSubmitting ? \". . .\" : getMessage(\"save.text\")}\n \n
\n \n {isShowLayout && (\n <>\n \n
\n {\n element = el;\n }}\n >\n
\n \n )}\n \n );\n});\n\nconst SortableList = SortableContainer((props) => {\n return (\n \n \n {value.name.replace(/([A-Z])/g, \" $1\").trim()}\n \n
\n \n {![\"MarketingBanners\"].includes(value.name) && (\n {\n onEditClick(layoutIndex, element.offsetTop);\n }}\n >\n Edit\n \n )}\n {value?.name !== \"Splash\" && (\n {\n onRemoveClick(layoutIndex);\n }}\n >\n Remove\n \n )}\n
\n \n {Array.isArray(props.items) &&\n props.items.map((value, index) => (\n
\n );\n});\n\nexport default class LayoutManager extends Component {\n constructor(props) {\n super(props);\n this.state = {\n page: 0,\n loaded: false,\n editing: false,\n submitting: false,\n previousState: null,\n showDialog: false,\n showPrompt: false,\n category: \"\",\n brand: \"\",\n tag: \"\",\n categoriesDataLoaded: false,\n tagsDataLoaded: false,\n brandsDataLoaded: false,\n currentComponent: \"Images\",\n timeLine: \"default\",\n errors: {},\n showFilter: false,\n announcementBar: {},\n isAnnouncementBarEnabled: false,\n values: {\n description: \"\",\n },\n showLoader: true,\n showSaveDialog: false,\n showErrorDialog: false,\n };\n this.pages = [\"home\", \"category\"];\n const productTagEnabled = isExtensionEnabled(\"ProductTagSupport\");\n const brandsEnabled = isExtensionEnabled(\"MultiBrandSupport\");\n\n if (productTagEnabled) {\n this.pages.push(\"tag\");\n }\n if (brandsEnabled) {\n this.pages.push(\"brand\");\n }\n\n this.pages.push(\"search\");\n if (isExtensionEnabled(\"RecipePageGenerator\")) {\n this.pages.push(\"influencer\");\n }\n this.pages.push(\"footer\");\n this.pages.push(\"Splash Screen\");\n\n this.data = {}; // Discuss: Didn't want to put this in state\n this.currentLayout = {};\n this.selectOptionsData = {\n categories: [],\n tags: [],\n brands: [],\n };\n this.listView = this.listView.bind(this);\n this.onSortEnd = this.onSortEnd.bind(this);\n this.onAddClick = this.onAddClick.bind(this);\n this.onEditClick = this.onEditClick.bind(this);\n this.onRemoveClick = this.onRemoveClick.bind(this);\n this.showPrompt = this.showPrompt.bind(this);\n this.updateLayouts = this.updateLayouts.bind(this);\n this.getSelectOptionsData = this.getSelectOptionsData.bind(this);\n this.getSelectElement = this.getSelectElement.bind(this);\n this.formatResponse = this.formatResponse.bind(this);\n this.reorderLayout = this.reorderLayout.bind(this);\n this.cancelReordering = this.cancelReordering.bind(this);\n this.setLayoutSchedulerValues = this.setLayoutSchedulerValues.bind(this);\n this.setLayoutTimeline = this.setLayoutTimeline.bind(this);\n this.fetchScheduledLayout = this.fetchScheduledLayout.bind(this);\n this.handleDeleteSceduledLayout =\n this.handleDeleteSceduledLayout.bind(this);\n this.fetchWrapper = this.fetchWrapper.bind(this);\n }\n\n componentDidMount() {\n if (!isExtensionEnabled(\"MarketPlace\")) {\n delete availableComponents[\"Seller\"];\n }\n if (!isExtensionEnabled(\"RecipePageGenerator\")) {\n delete availableComponents[\"Influencer\"];\n }\n this.fetchAnnouncementBarData();\n this.fetchWrapper();\n }\n\n fetchAnnouncementBarData() {\n const api = new API({\n url: `/website-service/announcement`,\n });\n api\n .get(\"\", {\n \"Accept-Language\": get(\"dataLang\") || \"en\",\n })\n .then((response) => {\n const { description, status } = response.data;\n if (status === ANNOUNCEMENT_BAR_STATUS.enabled && description) {\n this.setState({\n isAnnouncementBarEnabled: true,\n announcementBar: {\n description: description,\n },\n values: {\n ...this.state.values,\n description: description,\n },\n });\n } else {\n this.setState({\n isAnnouncementBarEnabled: false,\n });\n }\n })\n .catch((error) => {\n console.error(error);\n })\n .finally(() => {\n this.setState({\n showLoader: false,\n });\n });\n }\n\n // This method can be removed later once the scheduler api will be supported for all pages\n fetchWrapper() {\n this.fetchScheduledLayout();\n }\n\n formatResponse(response) {\n let newResponse = Object.assign([], response);\n const page = this.pages[this.state.page];\n newResponse.forEach((layout) => {\n if (\n layout.name === \"CategoryCollection\" ||\n layout.name === \"BrandCollection\"\n ) {\n let key = layout.name === \"CategoryCollection\" ? \"category\" : \"brand\";\n let collection = (layout.value && layout.value.collection) || [];\n collection = collection.map((val) => val[key]);\n layout[\"data\"][key] = collection;\n layout.value && delete layout.value.collection;\n }\n if (\n layout.name === \"CategoryCollection\" &&\n layout.data &&\n layout.data.subcategories &&\n page === \"category\"\n ) {\n layout.name = \"SubCategoryCollection\";\n }\n });\n return newResponse;\n }\n\n fetchScheduledLayout() {\n this.setState({\n loaded: false,\n });\n const page = this.pages[this.state.page];\n let timeline = this.state.timeLine;\n const urlMap = {\n footer: `/account-service/footer`,\n \"Splash Screen\":\n \"/config-service/config?category=androidAppConfig,iosAppConfig\",\n };\n let url = urlMap[page] || `/website-service/layout`;\n let params = specialLayout?.includes(page) ? {} : { id: page };\n\n if (timeline !== \"new\") {\n params.validFrom = timeline === \"default\" ? null : timeline.split(\"/\")[0];\n params.validTill = timeline === \"default\" ? null : timeline.split(\"/\")[1];\n }\n\n if (this.state[page]) {\n params.url = this.state[page];\n }\n\n const api = new API({\n url: url,\n });\n api\n .get(params, {\n \"Accept-Language\": get(\"dataLang\") || \"en\",\n })\n .then((response) => {\n if (response.status === \"ERROR\") {\n console.error(`Error in fetching details for ${page}`); // Todo: Handle this error\n return;\n }\n if (\n (response?.data === null && specialLayout?.includes(page)) ||\n (!response.data.page?.length && !specialLayout?.includes(page))\n ) {\n this.data = [];\n this.originalData = [];\n this.setState({ loaded: true });\n return;\n }\n if (page !== \"search\") {\n delete availableComponents[\"E-commerce\"][\"SearchResults\"];\n } else {\n availableComponents[\"E-commerce\"][\"SearchResults\"] =\n ProductCollection;\n }\n\n if (page !== \"category\") {\n delete availableComponents[\"E-commerce\"][\"SubCategoryCollection\"];\n } else {\n availableComponents[\"E-commerce\"][\"SubCategoryCollection\"] =\n ProductCollection;\n }\n this.pageId =\n page === \"footer\" ? null : response?.data?.page?.[0]?.pageId;\n this.data = this.formatResponse(response?.data?.page?.[0]?.layouts);\n if (page === \"Splash Screen\") {\n let splashObjectData = {\n name: \"Splash\",\n data: response.data,\n };\n this.pageId = page;\n this.data = [splashObjectData];\n this.originalData = this.data;\n } else if (page === \"footer\") {\n let footerLayoutData = {\n name: \"FooterLayout\",\n data: {\n id: response?.data?.id,\n sections: response?.data?.layouts,\n },\n };\n\n this.data = [footerLayoutData];\n this.originalData = this.data;\n } else {\n this.pageId = response?.data?.page?.[0]?.pageId;\n this.data = this.formatResponse(response.data.page[0].layouts);\n this.originalData = this.data;\n if (!this.state.categoryDataLoaded) {\n this.getSelectOptionsData(\"category\", \"categories\");\n }\n if (this.pages.includes(\"tag\")) {\n if (!this.state.tagDataLoaded) {\n this.getSelectOptionsData(\"tag\", \"tags\");\n }\n }\n if (this.pages.includes(\"brand\")) {\n if (!this.state.brandDataLoaded) {\n this.getSelectOptionsData(\"brand\", \"brands\");\n }\n }\n }\n let validFrom = specialLayout?.includes(page)\n ? \"\"\n : response?.data?.page?.[0]?.validFrom;\n let validTill = specialLayout?.includes(page)\n ? \"\"\n : response?.data?.page?.[0]?.validTill;\n\n this.setState(\n {\n loaded: true,\n fromDate: validFrom && moment(validFrom).format(\"YYYY-MM-DD\"),\n fromTime: validFrom && moment(validFrom).format(\"HH:mm:ss\"),\n toDate: validTill && moment(validTill).format(\"YYYY-MM-DD\"),\n toTime: validTill && moment(validTill).format(\"HH:mm:ss\"),\n },\n () => {\n timeline !== \"new\" &&\n isExtensionEnabled(\"LayoutSchedulingSupport\") &&\n this.fetchLayoutTimeLine();\n this.getAppointmentFormData();\n }\n );\n })\n .catch((error) => {\n this.data = [];\n this.setState({ loaded: true });\n console.error(error);\n });\n }\n\n getAppointmentFormData = async () => {\n let layoutNames = this.data && this.data.map(({ name }) => name);\n if (layoutNames.includes(AppointmentFormLayout)) {\n let configAPI = new API({\n url: \"/config-service/config/website\",\n });\n try {\n let resp = await configAPI.get();\n this.data =\n this.data &&\n this.data.map((layout) => {\n if (layout.name === AppointmentFormLayout) {\n const { googleCaptchaKey = \"\", googleCaptchaSecret = \"\" } =\n resp?.data?.website;\n layout.data = {\n ...layout.data,\n googleCaptchaKey: googleCaptchaKey,\n googleCaptchaSecret: googleCaptchaSecret,\n };\n }\n return layout;\n });\n } catch (error) {\n this.setState({\n error: `${error.message}`,\n });\n console.error(error);\n }\n }\n };\n\n fetchLayoutTimeLine() {\n let page = this.pages[this.state.page];\n if (specialLayout?.includes(page)) return;\n let url = `/website-service/layout/${page}/date`;\n let params = this.state[page] && {\n url: this.state[page],\n };\n const api = new API({ url });\n\n api\n .get(params, {\n \"Accept-Language\": get(\"dataLang\") || \"en\",\n })\n .then((resp) => {\n let timeLines = resp.data.date;\n timeLines =\n timeLines &&\n timeLines\n .filter((time) => time.validTill && time.validFrom)\n .map((time) => {\n let startDatetime = moment(time.validFrom);\n let endDatetime = moment(time.validTill);\n return {\n value: time.validFrom + \"/\" + time.validTill,\n text: (\n \n \n this.setLayoutSchedulerValues(\"fromTime\", value)\n }\n required\n showError={this.state.errors.fromTime}\n />\n
\n \n \n \n this.setLayoutSchedulerValues(\"fromDate\", value)\n }\n enableToday\n required\n showError={this.state.errors.fromDate}\n />\n
\n \n this.setLayoutSchedulerValues(\"toTime\", value)}\n required\n showError={this.state.errors.toTime}\n />\n
\n \n );\n }\n\n getTimelineSelector() {\n let { timeLine, timeLines } = this.state;\n let value =\n timeLines &&\n timeLine &&\n (timeLines.filter((t) => t.value === timeLine)[0] || {}).text;\n return (\n isExtensionEnabled(\"LayoutSchedulingSupport\") && (\n \n \n \n this.setLayoutSchedulerValues(\"toDate\", value)\n }\n enableToday\n required\n showError={this.state.errors.toDate}\n />\n
\n \n \n this.setLayoutTimeline(t.value)}\n >\n
\n )\n );\n }\n\n getDeleteButton() {\n return (\n {t.text}
\n \n )\n );\n })}\n \n \n this.setState({ showDeleteLayoutPopup: true })}\n className=\"delete-btn\"\n title=\"Delete Layout\"\n >\n \n \n \n this.setState({\n showDeleteLayoutPopup: false,\n })\n }\n onOk={this.handleDeleteSceduledLayout}\n />\n
\n );\n }\n\n listView() {\n const View = () => {\n if (this.state.loaded) {\n return (\n \n \n this.setState({\n showLayoutPopup: false,\n })\n }\n >\n {\n
\n }\n \n \n —————————{\" \"}\n {\" \"}\n ————————\n
\n )}\n\n \n \n {Object.keys(\n availableComponents[this.state.currentComponent]\n )\n .filter(\n (layout) =>\n !(\n this.props.theme.name !== \"Trends\" &&\n dualImageLayouts.includes(layout)\n )\n )\n .map((layout, index) => {\n const Component =\n availableComponents[this.state.currentComponent][\n layout\n ];\n let data = {};\n if (layout === \"BannerWithButton\") {\n data.button = true;\n }\n let categoryAndbrandCollection =\n layout === \"SubCategoryCollection\";\n return (\n
\n - \n {Object.keys(availableComponents).map(\n (component, index) => {\n const isSplashScreen =\n this.pages[this.state.page] === \"Splash Screen\";\n const isFooterPage =\n this.pages[this.state.page] === \"footer\";\n if (\n (isSplashScreen && component !== \"Splash\") ||\n (!isSplashScreen && component === \"Splash\") ||\n (isFooterPage && component !== \"FooterLayout\") ||\n (!isFooterPage && component === \"FooterLayout\")\n ) {\n return null; // Skip rendering this component\n }\n return (\n
\n
\n );\n })}\n \n {layout.replace(/([A-Z])/g, \" $1\").trim()}{\" \"}\n {categoryAndbrandCollection && (\n Beta\n )}\n
\n\n
\n \n {\n this.addLayout(layout, data);\n }}\n >\n {getMessage(\"themes.selection.add\")}\n \n
\n \n {\n this.setState({\n showSaveDialog: false,\n });\n }}\n />\n {\n this.setState({\n showErrorDialog: false,\n });\n }}\n />\n \n specialLayout?.includes(page) ? page : `${page} page`\n )}\n default={this.state.page}\n onClick={(index) => {\n this.changePage(index);\n }}\n />\n {!specialLayout?.includes(this.pages[this.state.page]) && (\n \n {this.pages[this.state.page] === \"tag\" && (\n
\n )}\n \n {getMessage(\"themes.customize.subheading\", {\n name: this.props.theme.name,\n })}\n
\n\n this.setState({ showFilter: value })}\n />\n
\n )}\n {datePicker}\n\n \n {selectScheduler}\n {selectForCategoryTagBrandSelection}\n
\n \n \n {getMessage(\"order.form.cancel.text\")}\n \n \n save\n \n
\n )}\n \n );\n }\n\n render() {\n const { props } = this;\n const View = () => {\n if (this.state.editing) {\n const layout = this.data[this.state.layoutIndex];\n const layoutInfo =\n getLayout(\n this.state.page,\n layout.name,\n this.pages,\n this.selectOptionsData\n ) || {};\n const top = this.currentLayout.top;\n return (\n \n
\n \n
\n {getMessage(\"themes.heading\")}
\n \n {getMessage(\"themes.customize.nav\")}\n \n\n
\n
\n {this.state.showLoader ? (\n \n
\n
\n
\n \n
\n \n
\n );\n}\n","import React from \"react\";\nimport HighlightsImg from \"./highlight.png\";\nexport default function Highlights(props) {\n return (\n \n 
\n
\n );\n}\n","import React from \"react\";\nimport {\n BaseForm,\n Input,\n Searchable,\n VALIDATION_TYPES,\n} from \"../../../../../components/Form\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport { get } from \"../../../../../lib/storage\";\n\nexport default class AddForm extends BaseForm {\n render() {\n const { SubmitButton } = this.buttons;\n const { val } = this.props;\n const { Form } = this.components;\n this.direction = get(\"dataLang\") === \"ar\" ? \"rtl\" : \"ltr\";\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Tree from \"../../../../components/Tree\";\nimport Loader from \"../../../../components/Loader\";\nimport AuthenticatedPage from \"../../../../containers/AuthenticatedPage\";\nimport API from \"../../../../lib/api\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../../components/DropDown\";\nimport AddForm from \"./AddForm\";\nimport \"./style.css\";\nimport { Popup } from \"../../../../components/Popup\";\nimport Image from \"../../../../components/Image\";\nimport TagIcon from \"./Tag-icon.svg\";\nimport LinkIcon from \"./Link-icon.svg\";\nimport { get } from \"../../../../lib/storage\";\n\nfunction recursivelyTraversing(data, path, index) {\n if (path.length <= index) {\n return data;\n } else {\n let key = path[index];\n return data.filter((item) => {\n if (item.index === key) {\n if (item.hasOwnProperty(\"children\")) {\n if (path.length > index + 1) {\n item.children = recursivelyTraversing(item.children, path, ++index);\n item.menu = item.children;\n return item;\n }\n }\n return null;\n } else {\n return item;\n }\n });\n }\n}\n\nfunction generateSubMenu(data, submit = false, counter = 0) {\n data.map((item, index) => {\n item.index = index.toString() + \",\" + counter.toString();\n if (!item.menu) {\n if (item.id) {\n // Either category or tag\n if (item.url && item.url.includes(\"category\")) {\n item[\"c\"] = item.id;\n }\n if (item.url && item.url.includes(\"tag\")) {\n item[\"t\"] = item.id;\n }\n }\n } else {\n if (item.id) {\n // Either category or tag\n if (item.url && item.url.includes(\"category\")) {\n item[\"c\"] = item.id;\n }\n if (item.url && item.url.includes(\"tag\")) {\n item[\"t\"] = item.id;\n }\n }\n item[submit ? \"menu\" : \"children\"] = generateSubMenu(\n submit ? item.children : item.menu,\n submit,\n item.index\n );\n }\n if (!submit) {\n item.title = item.name;\n item.link = item.url;\n delete item.name;\n delete item.url;\n } else {\n item.name = item.title;\n if (item.hasOwnProperty(\"c\")) {\n item.c = item.id;\n delete item.name;\n delete item.link;\n }\n\n if (item.hasOwnProperty(\"t\")) {\n item.t = item.id;\n delete item.name;\n delete item.link;\n }\n\n delete item.children;\n delete item.id;\n delete item.url;\n delete item.title;\n delete item.index;\n }\n\n return item;\n });\n\n return data;\n}\n\nfunction findingNode(data, path, index) {\n if (path.length <= index) {\n return data;\n } else {\n if (index !== 0) {\n data = data.children;\n }\n }\n let key = path[index];\n let returnedObject = null;\n data.map((item) => {\n if (item.index === key) {\n returnedObject = findingNode(item, path, ++index);\n }\n return null;\n });\n return returnedObject;\n}\nclass CategorySequencing extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: true,\n treeData: [],\n showPopup: false,\n };\n\n this.removeItem = this.removeItem.bind(this);\n this.showPopup = this.showPopup.bind(this);\n this.hidePopup = this.hidePopup.bind(this);\n this.onAddClick = this.onAddClick.bind(this);\n this.onConfirmClick = this.onConfirmClick.bind(this);\n this.removeItemFromList = this.removeItemFromList.bind(this);\n this.onAppendMethod = this.onAppendMethod.bind(this);\n this.onAppendClick = this.onAppendClick.bind(this);\n this.headers= { \"Accept-Language\": get(\"dataLang\") || \"en\" }\n }\n\n onAppendClick(type) {\n this.setState({\n showPopup: true,\n append: true,\n val: type,\n });\n }\n\n onAppendMethod() {\n let treeData = JSON.parse(JSON.stringify(this.state.treeData));\n if (this.state.val === \"Link\") {\n treeData.push({\n title: this.state.data.linkText,\n link: this.state.data.href,\n index: this.state.treeData.length,\n });\n } else {\n let tagId = (this.state.data.tag && this.state.data.tag.id) || null;\n let tagName = (this.state.data.tag && this.state.data.tag.name) || null;\n treeData.push({\n t: tagId,\n id: tagId,\n title: tagName,\n index: this.state.treeData.length,\n });\n }\n this.setState({\n treeData,\n onSubmit: true,\n append: false,\n });\n }\n\n removeItemFromList(list, key) {\n return list.filter((item) => {\n if (item.index !== key) {\n return item;\n }\n return null;\n });\n }\n removeItem(path) {\n let treeData = JSON.parse(JSON.stringify(this.state.treeData));\n let data = recursivelyTraversing(treeData, path, 0);\n this.setState({\n treeData: data,\n onSubmit: true,\n });\n }\n\n async onConfirmClick(data) {\n await this.setState({\n data,\n });\n\n this.state.append ? await this.onAppendMethod() : await this.onAddClick();\n this.hidePopup();\n }\n\n showPopup(path, type) {\n this.setState({\n showPopup: true,\n path,\n val: type,\n });\n }\n\n hidePopup() {\n this.setState({\n showPopup: false,\n });\n }\n\n onAddClick() {\n let treeData = JSON.parse(JSON.stringify(this.state.treeData));\n let item = findingNode(treeData, this.state.path, 0);\n if (item) {\n if (this.state.val === \"Link\") {\n if (item.hasOwnProperty(\"children\")) {\n item.children.push({\n title: this.state.data.linkText,\n link: this.state.data.href,\n index: item.children.length + \",\" + item.index,\n });\n item.menu = item.children;\n } else {\n item.children = [];\n item.children.push({\n title: this.state.data.linkText,\n link: this.state.data.href,\n index: item.children.length + \",\" + item.index,\n });\n item.menu = item.children;\n }\n } else {\n let tagId = (this.state.data.tag && this.state.data.tag.id) || null;\n let tagName = (this.state.data.tag && this.state.data.tag.name) || null;\n if (this.state.val === \"Tag\" && tagId && tagName) {\n if (item.hasOwnProperty(\"children\")) {\n item.children.push({\n t: tagId,\n id: tagId,\n title: tagName,\n index: item.children.length + \",\" + item.index,\n });\n item.menu = item.children;\n } else {\n item.children = [];\n item.children.push({\n t: tagId,\n id: tagId,\n title: tagName,\n index: item.children.length + \",\" + item.index,\n });\n item.menu = item.children;\n }\n }\n }\n this.setState({\n treeData,\n onSubmit: true,\n });\n }\n }\n\n fetchNavData = () => {\n this.menuapi = new API({ url: \"/website-service/nav\" });\n this.menuapi\n .get({},this.headers)\n .then((res) => {\n const menu = res.data || [];\n if (menu && menu.length > 0) {\n let generateTree = generateSubMenu(menu);\n this.setState({\n loading: false,\n treeData: generateTree,\n });\n } else {\n this.setState({\n loading: false,\n });\n }\n })\n .catch((error) => {\n console.error(error);\n if (error.code === 401 || error.code === 403) {\n throw error;\n } else {\n this.setState({\n error: error.message,\n loading: false,\n });\n }\n });\n };\n\n componentDidMount() {\n this.fetchNavData();\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (this.state.onSubmit && this.state.onSubmit !== prevState.onSubmit) {\n const tree = JSON.parse(JSON.stringify(this.state.treeData));\n let data = generateSubMenu(tree, true);\n this.api = new API({ url: \"/website-service/nav\" });\n this.api.post(\n { menu: data }, \n this.headers\n ).then(\n (response) => {\n this.setState({\n success: true,\n onSubmit: false,\n });\n },\n (error) => {\n if (error.code === 401 || error.code === 403) {\n throw error;\n } else {\n this.setState({\n error: error.message,\n onSubmit: false,\n });\n }\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n }\n componentWillUnmount() {\n this.api && this.api.cancel();\n this.menuapi && this.menuapi.cancel();\n }\n\n handleResetCatagories = () => {\n this.api = new API({ url: \"/website-service/nav\" });\n const data = { menu: [] };\n this.api\n .post({ data }, this.headers)\n .then((response) => {\n this.fetchNavData();\n })\n .catch((error) => {\n console.error(error);\n if (error.code === 401 || error.code === 403) {\n throw error;\n } else {\n this.setState({\n error: error.message,\n loading: false,\n });\n }\n });\n };\n\n render() {\n const { loading, treeData, error, showPopup, val } = this.state;\n return (\n \n
\n {getMessage(\"navigation.sequencing.heading\")}
\n\n \n {\n \n {getMessage(\"navigation.add.button\")}\n \n }\n >\n {\n this.onAppendClick(\"Tag\");\n }}\n >\n {getMessage(\"navigation.dropdown.item.addTag\")}\n \n {\n this.onAppendClick(\"Link\");\n }}\n >\n {getMessage(\"navigation.dropdown.item.addLink\")}\n \n \n }\n
\n {error}
}\n {treeData.length > 0 ? (\n \n {getMessage(\"navigation.nosequence.display\")}\n
\n )}\n{getMessage(\"themes.heading\")}
\n\n \n
\n \n );\n}\n","import React, { Component } from \"react\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport Checkbox from \"../../../../components/Form/Inputs/Checkbox\";\nimport \"./style.css\";\n\nclass ExtensionForm extends Component {\n constructor(props) {\n super(props);\n this.state = {\n error: \"\",\n submitting: false,\n checked: this.props.value.status === \"ENABLED\",\n };\n }\n getList(desc) {\n if (!desc) {\n return null;\n }\n let descriptions = desc.map(function (description, i) {\n return \n {getMessage(\"themes.subheading\", { name: theme.name })}
\n\n \n {getMessage(\"themes.change.text\")}\n \n \n {getMessage(\"themes.customize.text\")}\n \n
\n - {descriptions}
\n {this.state.formError && (\n
\n );\n }\n}\n\nexport default ExtensionForm;\n","import React from \"react\";\nimport {\n BaseForm,\n Select,\n VALIDATION_TYPES,\n Radio,\n Input,\n} from \"../../../../../components/Form\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport API from \"../../../../../lib/api\";\nimport \"./style.css\";\nimport { Dialog } from \"../../../../../components/Popup\";\nimport { withRouter } from \"react-router-dom\";\n\nfunction generateData(oldArray, languageKey) {\n return oldArray.map((data) => {\n let key = data.toLowerCase().replace(/_/g, \"\");\n return {\n text: getMessage(`orderprocessing.${languageKey}.${key}`),\n value: data,\n };\n });\n}\n// Function to change if two objects are same . It does not do a deep comparision.\nfunction isObjSame(obj1, obj2) {\n for (let key in obj1) {\n if (obj2[key] !== obj1[key]) {\n return false;\n }\n }\n return true;\n}\n\nclass InstoreConfigForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state.showSuccessDialog = false;\n this.state.showErrorDialog = false;\n this.state.formError = \"\";\n this.handleClose = this.handleClose.bind(this);\n this.closeDialogs = this.closeDialogs.bind(this);\n this.resetToDefault = this.resetToDefault.bind(this);\n }\n\n handleClose() {\n this.props.history.goBack();\n }\n\n resetToDefault() {\n let values = { ...this.state.values };\n const globalConfig = { ...this.props.data.config.globalConfig };\n values = globalConfig;\n this.setState({\n values,\n });\n }\n\n handleSubmit(data) {\n const { props } = this;\n const id = props.data.id;\n const api = new API({ url: `/account-service/extension/${id}` });\n const storeId = props.storeId;\n const { storeSpecific, globalConfig } = props.config.config;\n let config = {};\n if (storeId) {\n // saving store specific settings\n config[\"globalConfig\"] = { ...globalConfig };\n if (storeSpecific) {\n config[\"storeSpecific\"] = { ...storeSpecific };\n } else {\n config[\"storeSpecific\"] = {};\n }\n config[\"storeSpecific\"][storeId] = data;\n if (isObjSame(data, config[\"globalConfig\"])) {\n delete config[\"storeSpecific\"][storeId];\n }\n } else {\n // saving global settings\n config[\"globalConfig\"] = data;\n if (storeSpecific) {\n config[\"storeSpecific\"] = { ...storeSpecific };\n }\n }\n let params = { status: props.data.status };\n params[\"config\"] = {};\n params[\"config\"][\"globalConfig\"] = { ...config.globalConfig };\n if (config.storeSpecific) {\n params[\"config\"][\"storeSpecific\"] = [];\n for (let key in config.storeSpecific) {\n config.storeSpecific[key][\"storeId\"] = key;\n params[\"config\"][\"storeSpecific\"].push(config.storeSpecific[key]);\n }\n }\n return api\n .put(params)\n .then(\n (response) => {\n props.updateConfig(response.data.extension.config);\n this.setState({ formError: \"\", showSuccessDialog: true });\n },\n (error) => {\n this.setState({ formError: error.message, showErrorDialog: true });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n onSubmit(data) {\n this.setState({\n submitting: true,\n });\n this.handleSubmit(data).then(() => {\n this.setState({ submitting: false });\n });\n }\n\n closeDialogs() {\n this.setState({\n showSuccessDialog: false,\n showErrorDialog: false,\n });\n }\n\n render() {\n const { SubmitButton } = this.buttons;\n const { Form } = this.components;\n const { data, storeId } = this.props;\n const { values } = this.state;\n const {\n pickingSequence,\n pickerSeesOrder,\n packingOfOrder,\n orderLabelPrinting,\n orderLabelFormat,\n additionalQCStep,\n } = data.allowedConfig;\n\n const pickingSequenceMethodsOpts =\n data && generateData(pickingSequence.typeMeta, \"pickingMethod\");\n const pickingViewOptions =\n data && generateData(pickerSeesOrder.typeMeta, \"pickingView\");\n const OrderLabelPrintingOptions =\n data && generateData(orderLabelPrinting.typeMeta, \"orderLabelPrinting\");\n const OrderLabelFormatOptions =\n data && generateData(orderLabelFormat.typeMeta, \"orderLabelFormat\");\n const qualityCheckingOptions =\n data && generateData(additionalQCStep.typeMeta, \"qualityChecking\");\n\n let packingDetailsOptions = [];\n packingOfOrder.typeMeta.forEach((data) => {\n if (\n data !== \"DONE_BY_CHECKER\" ||\n (data === \"DONE_BY_CHECKER\" &&\n values.additionalQCStep === \"DONE_BY_CHECKER\")\n ) {\n let key = data.toLowerCase().replace(/_/g, \"\");\n packingDetailsOptions.push({\n text: getMessage(`orderprocessing.packingDetails.${key}`),\n value: data,\n });\n }\n });\n return (\n {this.state.formError}
\n )}\n \n {data.icon ? (\n
\n \n 
\n
\n ) : (\n \"\"\n )}\n \n {data.name}\n
\n \n {data.pricing && (\n
\n {data.version ? (\n \n
\n )}\n {data.pricing.split(\" \")[0]}
\n \n {data.pricing.split(\" \").slice(1).join(\" \")}\n
\n \n \n {getMessage(\"extensions.version\")}:{\" \"}\n \n {data.version}\n
\n ) : (\n \"\"\n )}\n \n
\n \n
\n {data.description}
\n {this.props.details && (\n \n
\n )}\n {props.showExtra ? (\n \n {getMessage(\"extensions.whatwillchange\")}\n
\n {this.getList(this.props.details.split(\"|\").filter(Boolean))}\n \n
\n ) : (\n \"\"\n )}\n \n \n {getMessage(\"extensions.lastUpdated\")}:{\" \"}\n \n \n {data.lastUpdated ? data.lastUpdated : \"-\"}\n \n
\n \n \n {getMessage(\"extensions.activeInstallations\")}:{\" \"}\n \n \n {data.activeInstallations ? data.activeInstallations : 0}\n \n
\n \n {data.status === \"DISABLED\" || props.value.status === \"DISABLED\" ? (\n {\n this.setState({ checked: value });\n }}\n className=\"extension-checkbox\"\n />\n ) : (\n \"\"\n )}\n
\n \n \n {data.status === \"ENABLED\"\n ? getMessage(\"extensions.uninstall\")\n : getMessage(\"extensions.install\")}\n \n \n
\n \n
\n );\n }\n}\nexport default withRouter(InstoreConfigForm);\n","import React, { Component } from \"react\";\nimport InstoreConfigForm from \"./form\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport { isExtensionEnabled, getStores } from \"../../../../../lib/auth\";\nimport Loader from \"../../../../../components/Loader\";\n\nconst multiStoresEnabled = isExtensionEnabled(\"MultiStoreSupport\");\n\nfunction modifyData(response) {\n let config = {};\n config[\"globalConfig\"] = { ...response.globalConfig };\n if (response.storeSpecific) {\n config[\"storeSpecific\"] = {};\n response[\"storeSpecific\"].forEach((obj) => {\n config[\"storeSpecific\"][obj.storeId] = obj;\n });\n }\n return config;\n}\n\nclass StoreSelect extends Component {\n constructor(props) {\n super(props);\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(e) {\n this.props.onChange(e.target.value);\n }\n\n render() {\n const { stores, value } = this.props;\n return (\n \n );\n }\n}\n\nexport default class InstoreSettings extends Component {\n constructor(props) {\n super(props);\n let modifiedResponse = props.data.config;\n if (modifiedResponse[\"storeSpecific\"]) {\n modifiedResponse = modifyData(props.data.config);\n }\n this.state = {\n storeId: null,\n stores: [],\n config: modifiedResponse,\n showLoader: false,\n };\n this.updateStoreId = this.updateStoreId.bind(this);\n this.updateConfig = this.updateConfig.bind(this);\n }\n\n updateStoreId(storeId) {\n this.setState({\n storeId: storeId,\n });\n }\n\n componentDidMount() {\n // If multi store extension is enabled, get the stores data\n if (multiStoresEnabled) {\n this.setState({\n showLoader: true,\n });\n let stores = getStores();\n if (stores) {\n stores = stores\n .filter((store) => store.hasPicking)\n .map((store) => {\n return {\n text: store.name,\n value: store.id,\n };\n });\n }\n this.setState({\n stores: stores,\n showLoader: false,\n });\n }\n }\n\n updateConfig(updatedConfig) {\n this.setState({\n config: modifyData(updatedConfig),\n });\n }\n\n render() {\n const { data } = this.props;\n const { storeId, stores, config, showLoader } = this.state;\n return showLoader ? (\n \n
\n );\n }\n}\n","import React from \"react\";\nimport {\n BaseForm,\n Input,\n Textarea,\n VALIDATION_TYPES,\n} from \"../../../../../components/Form\";\nimport { Dialog } from \"../../../../../components/Popup\";\nimport API from \"../../../../../lib/api\";\nimport { getMessage } from \"../../../../../lib/translator\";\n\nexport default class AnalyticsForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state.showSuccessDialog = false;\n this.state.showErrorDialog = false;\n this.state.formError = \"\";\n this.closeDialogs = this.closeDialogs.bind(this);\n }\n\n handleSubmit(data) {\n const api = new API({ url: `/config-service/config` });\n\n let params = {\n analytics: data.analytics,\n };\n\n return api\n .post(params)\n .then(\n (response) => {\n this.setState({ formError: \"\", showSuccessDialog: true });\n },\n (error) => {\n this.setState({ formError: error.message, showErrorDialog: true });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n onSubmit(data) {\n this.setState({\n submitting: true,\n });\n this.handleSubmit(data).then(() => {\n this.setState({ submitting: false });\n });\n }\n\n closeDialogs() {\n this.setState({\n showSuccessDialog: false,\n showErrorDialog: false,\n });\n }\n render() {\n const { Form } = this.components;\n const { SubmitButton, CancelButton } = this.buttons;\n return (\n \n
\n \n {getMessage(\"orderprocessing.config.heading\")}\n
\n\n {data.isStoreConfigurable && stores.length > 0 && (\n
\n \n
\n );\n }\n}\n","import React from \"react\";\nimport {\n BaseForm,\n Input,\n VALIDATION_TYPES,\n} from \"../../../../../components/Form\";\nimport { Dialog } from \"../../../../../components/Popup\";\nimport API from \"../../../../../lib/api\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport \"./style.css\";\n\nexport default class TawkChatForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state.showSuccessDialog = false;\n this.state.showErrorDialog = false;\n this.state.formError = \"\";\n this.closeDialogs = this.closeDialogs.bind(this);\n }\n\n closeDialogs() {\n this.setState({\n showErrorDialog: false,\n showSuccessDialog: false,\n });\n }\n\n handleSubmit(data) {\n const id = this.props.data.id;\n const api = new API({ url: `/account-service/extension/${id}` });\n\n let params = { status: this.props.data.status };\n params[\"config\"] = {};\n for (let field in data) {\n params[\"config\"][field] = data[field];\n }\n\n return api\n .put(params)\n .then(\n (response) => {\n this.setState({ formError: \"\", showSuccessDialog: true });\n },\n (error) => {\n this.setState({\n formError: error.message,\n showErrorDialog: true,\n });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n onSubmit(data) {\n this.setState({\n submitting: true,\n });\n this.handleSubmit(data).then(() => {\n this.setState({ submitting: false });\n });\n }\n\n render() {\n const { Form } = this.components;\n const { SubmitButton, CancelButton } = this.buttons;\n\n return (\n {getMessage(\"extensions.analytics.heading\")}
\n\n
\n );\n }\n}\n","import React from \"react\";\nimport Tabs from \"../../../../../components/Tabs\";\nimport {\n BaseForm,\n Input,\n Select,\n VALIDATION_TYPES,\n MultiTextInput,\n Checkbox,\n} from \"../../../../../components/Form\";\nimport Loader from \"../../../../../components/Loader\";\nimport { Dialog } from \"../../../../../components/Popup\";\n\nimport { saveEntityMetaData } from \"../../../../../lib/auth\";\nimport API from \"../../../../../lib/api\";\nimport { getMessage } from \"../../../../../lib/translator\";\n\nimport \"./style.css\";\n\nconst ConfigTypes = [\n {\n text: \"Number\",\n value: \"number\",\n },\n {\n text: \"String\",\n value: \"string\",\n },\n {\n text: \"Text\",\n value: \"text\",\n },\n {\n text: \"Boolean\",\n value: \"boolean\",\n },\n {\n text: \"Enum\",\n value: \"enum\",\n },\n {\n text: \"Country\",\n value: \"country\",\n },\n {\n text: \"MultiValued Enum\",\n value: \"multiValued Enum\",\n },\n {\n text: \"File\",\n value: \"file\",\n },\n {\n text: \"Date\",\n value: \"date\",\n },\n {\n text: \"Percentage\",\n value: \"percentage\",\n },\n];\n\nclass EntityMetaData extends BaseForm {\n constructor(props) {\n super(props);\n\n this.tabHeaders = [\n \"order\",\n \"customer\",\n \"product\",\n \"store\",\n \"address\",\n \"offer\",\n ];\n this.layouts = [\"text\", \"string\", \"number\"];\n\n this.state.currentTabIndex = 0;\n this.state.showLoader = 0;\n this.state.showErrorDialog = false;\n this.state.showDeleteDialog = false;\n this.state.showSuccessDialog = false;\n\n this.handleOnTabClick = this.handleOnTabClick.bind(this);\n this.addLayout = this.addLayout.bind(this);\n this.deleteKey = this.deleteKey.bind(this);\n }\n\n componentDidMount() {\n // const id = this.props.data.id\n const api = new API({ url: `/config-service/meta-data` });\n this.setState({\n showLoader: true,\n });\n api\n .get()\n .then(\n (response) => {\n let tranformedResponse = response.data.config.entityMetaData;\n let values = {};\n Object.entries(tranformedResponse).forEach(([key, value]) => {\n values[key] = [];\n value &&\n Object.entries(value) &&\n Object.entries(value).forEach(([entity, details, index]) => {\n let entityMetadata = {\n name: entity,\n type: details.type,\n typeMeta: details.typeMeta && details.typeMeta.allowedValue,\n indexed: details.indexed,\n searchable: details.searchable,\n isPrivate: details?.isPrivate,\n mandatory: details.mandatory,\n id: details.id,\n };\n if (\n details.type === \"country\" &&\n details.typeMeta &&\n details.typeMeta.allowedValue\n ) {\n if (details.typeMeta.allowedValue.length) {\n entityMetadata.typeMeta = details.typeMeta.allowedValue.map(\n (c) => {\n return { name: c };\n }\n );\n }\n }\n values[key].push(entityMetadata);\n });\n });\n this.setState({\n values,\n showLoader: false,\n });\n },\n (error) => {\n if (error.code === 401 || error.code === 403) {\n throw error;\n }\n this.setState({\n formError: error,\n showLoader: false,\n });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n handleOnTabClick(index) {\n this.setState({\n currentTabIndex: index,\n });\n }\n\n addLayout() {\n let values = Object.assign({}, this.state.values);\n const name = this.tabHeaders[this.state.currentTabIndex];\n const fields = this.state.values[name] || [];\n fields.push({\n name: \"\",\n type: \"string\",\n });\n values[name] = fields;\n this.setState({\n values,\n });\n }\n\n deleteKey(index) {\n const deleteIndex = this.state.deleteIndex;\n let values = Object.assign({}, this.state.values);\n const name = this.tabHeaders[this.state.currentTabIndex];\n let keys = values[name];\n keys.splice(deleteIndex, 1);\n values[name] = keys;\n this.setState({\n values,\n deleteIndex: null,\n showDeleteDialog: false,\n });\n }\n\n onSubmit(data) {\n this.setState({\n submitting: true,\n });\n const api = new API({ url: `/config-service/meta-data` });\n let dataToSend = {};\n let values = Object.assign({}, this.state.values);\n Object.entries(values).forEach(([key, value]) => {\n let entityMetaData = {};\n value.forEach((obj, index) => {\n entityMetaData[obj.name] = {\n type: obj.type,\n indexed: obj.indexed,\n mandatory: obj.mandatory,\n searchable: obj?.searchable,\n isPrivate: obj?.isPrivate,\n };\n if (obj.id) {\n entityMetaData[obj.name].id = obj.id;\n }\n if (obj.type === \"enum\" || obj.type === \"multiValued Enum\") {\n entityMetaData[obj.name].typeMeta = { allowedValue: obj.typeMeta };\n } else if (obj.type === \"country\") {\n delete entityMetaData[obj.name].typeMeta;\n }\n if (obj.name === \"\") {\n delete entityMetaData[obj.name];\n }\n });\n dataToSend[key] = entityMetaData;\n });\n let params = {\n config: {\n entityMetaData: dataToSend,\n },\n };\n api\n .put(params)\n .then(\n (response) => {\n this.setState({\n showSuccessDialog: true,\n submitting: false,\n });\n saveEntityMetaData(response.data.config.entityMetaData);\n },\n (error) => {\n if (error.code === 401 || error.code === 403) {\n throw error;\n }\n this.setState({\n formError: error.message,\n showErrorDialog: true,\n submitting: false,\n });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n render() {\n const { Form } = this.components;\n const { SubmitButton } = this.buttons;\n const name = this.tabHeaders[this.state.currentTabIndex];\n const fields = this.state.values[name];\n return this.state.showLoader ? (\n {getMessage(\"extensions.tawk.live.chat\")}
\n{getMessage(\"entityMetaData.heading\")}
\n\n \n {\n this.setState({ showSuccessDialog: false });\n }}\n closeText={getMessage(\"entityMetaData.okay\")}\n />\n this.setState({ showErrorDialog: false })}\n closeText={getMessage(\"entityMetaData.okay\")}\n />\n \n this.setState({ showDeleteDialog: false, deleteIndex: null })\n }\n closeText={getMessage(\"entityMetaData.cancel\")}\n okText={getMessage(\"entityMetaData.delete\")}\n onOk={this.deleteKey}\n />\n \n
\n );\n }\n}\n\nexport default EntityMetaData;\n","import React from \"react\";\nimport {\n BaseForm,\n VALIDATION_TYPES,\n SelectSearch,\n} from \"../../../../../components/Form\";\nimport { Dialog } from \"../../../../../components/Popup\";\nimport API from \"../../../../../lib/api\";\nimport { getLanguages } from \"../../../../../lib/commonlyused\";\nimport { getMessage } from \"../../../../../lib/translator\";\n\nexport default class LanguageSelect extends BaseForm {\n constructor(props) {\n super(props);\n this.state.showSuccessDialog = false;\n this.state.showErrorDialog = false;\n this.state.formError = \"\";\n if (this.state.values?.globalConfig?.languages?.length) {\n // format languages from ['en'] to [{ name: 'Engligh', code: 'en' }]\n this.state.values.globalConfig.languages = getLanguages().filter((lang) =>\n this.state.values.globalConfig.languages.includes(lang.code)\n );\n }\n this.closeDialogs = this.closeDialogs.bind(this);\n }\n\n handleSubmit(data) {\n const id = this.props.data.id;\n const api = new API({ url: `/account-service/extension/${id}` });\n\n let params = { status: this.props.data.status };\n params[\"config\"] = JSON.parse(JSON.stringify(data));\n // format languages from [{ name: 'Engligh', code: 'en' }] to ['en']\n params.config.globalConfig.languages =\n params.config.globalConfig.languages.map((lang) => lang.code);\n\n return api\n .put(params)\n .then(\n (response) => {\n this.setState({ formError: \"\", showSuccessDialog: true });\n },\n (error) => {\n this.setState({ formError: error.message, showErrorDialog: true });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n onSubmit(data) {\n this.setState({\n submitting: true,\n });\n this.handleSubmit(data).then(() => {\n this.setState({ submitting: false });\n });\n }\n\n closeDialogs() {\n this.setState({\n showSuccessDialog: false,\n showErrorDialog: false,\n });\n }\n render() {\n const { Form } = this.components;\n const { SubmitButton, CancelButton } = this.buttons;\n return (\n {getMessage(\"entityMetaData.heading\")}
\n\n
\n \n \n
\n \n
\n );\n }\n}\n","import React from \"react\";\nimport { withRouter } from \"react-router-dom\";\nimport Loader from \"../../../../../components/Loader\";\nimport { getMessage } from \"../../../../../lib/translator\";\nimport { BaseForm, Input } from \"../../../../../components/Form\";\nimport API from \"../../../../../lib/api\";\nimport { Dialog } from \"../../../../../components/Popup\";\nimport \"./style.css\";\n\nclass OrderManagementForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state.showLoader = false;\n this.handleClose = this.handleClose.bind(this);\n this.closeDialogs = this.closeDialogs.bind(this);\n }\n\n componentDidMount() {\n const api = new API({ url: \"/config-service/config/passwordPolicy\" });\n api\n .get()\n .then((res) => {\n const { customer } = res.data.passwordPolicy;\n this.setState({\n values: customer,\n });\n })\n .catch((error) => {\n console.error(error);\n this.setState({ formError: error.message, showErrorDialog: true });\n if (error.code === 401) {\n throw error;\n }\n });\n }\n\n handleSubmit(data) {\n const api = new API({ url: `/config-service/config` });\n return api\n .post({ passwordPolicy: { customer: data } })\n .then(() => {\n this.setState({ formError: \"\", showSuccessDialog: true });\n })\n .catch((error) => {\n console.error(error);\n this.setState({ formError: error.message, showErrorDialog: true });\n if (error.code === 401) {\n throw error;\n }\n });\n }\n\n onSubmit(data) {\n this.setState({\n submitting: true,\n });\n this.handleSubmit(data).then(() => {\n this.setState({ submitting: false });\n });\n }\n\n handleClose() {\n this.props.history.goBack();\n }\n\n closeDialogs() {\n this.setState({\n showSuccessDialog: false,\n showErrorDialog: false,\n });\n }\n\n render() {\n const { config } = this.props.data;\n const { globalConfig } = config;\n\n const { SubmitButton } = this.buttons;\n const { Form } = this.components;\n return (\n \n {getMessage(\"extensions.multiLingual.heading\")}\n
\n\n
\n );\n }\n}\n\nexport default withRouter(OrderManagementForm);\n","import React, { Component } from \"react\";\nimport API from \"../../../../lib/api\";\nimport Loader from \"../../../../components/Loader\";\nimport EmptyState from \"../../../../components/EmptyState\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport AuthenticatedPage from \"../../../../containers/AuthenticatedPage\";\nimport InstoreSettings from \"./InstoreSettings\";\nimport AnalyticsForm from \"./AnalyticsForm\";\nimport TawkChatSettings from \"./TawkChatSetting\";\nimport EntityMetaData from \"./EntityMetaData\";\nimport LanguageSelect from \"./LanguageConfig\";\nimport PasswordPolicySupport from \"./PasswordPolicySupport\";\nimport { getExtensionDetails } from \"../../../../lib/auth\";\n\nclass MissingDetails extends Component {\n render() {\n const emptyState = {\n message: getMessage(\"extension.details.notfound\"),\n };\n\n return \n {getMessage(\"extensions.password-policy.heading\")}\n
\ncustomer password policy
\n {this.state.showLoader ? (\n\n
\n );\n }\n}\n\nconst desktopView = {\n row: ExtensionTableRow,\n};\nexport default desktopView;\n","import React, { Component } from \"react\";\nimport ListingPage from \"../../../containers/ListingPage\";\nimport { desktopView } from \"./Tables\";\nimport {\n saveSession,\n disableExtension,\n enableExtension,\n} from \"../../../lib/auth\";\nimport API from \"../../../lib/api\";\nimport \"./style.css\";\n\nconst ExtensionTypes = {\n All: \"\",\n Operations: [\n \"OrderReturns\",\n \"DeliverySlots\",\n \"LogisticsSupport\",\n \"DeliveryAreaSupport\",\n \"MultiStoreSupport\",\n \"InStoreProcessing\",\n \"SlotCharges\",\n \"PreOrderSupport\",\n \"BulkOrderSupport\",\n \"CapacityPlanning\",\n \"ShipRocket\",\n \"MultipleAndPartialOrderPicking\",\n ],\n Catalogue: [\n \"StockManagement\",\n \"SoldByWeightSupport\",\n \"SubstitutionGroups\",\n \"ProductTagSupport\",\n \"MultiVariantSupport\",\n \"MultiBrandSupport\",\n \"StockOverride\",\n \"SearchOverride\",\n ],\n Marketing: [\n \"Marketing\",\n \"Campaigns\",\n \"LayoutSchedulingSupport\",\n \"OffersManagement\",\n \"MarketingBanners\",\n \"ProductRatings\",\n \"UniqueCouponGenerator\",\n \"AbandonedCart\",\n \"PushNotification\",\n \"ReferralManagement\",\n \"GoogleMerchantCenter\",\n ],\n CustomerSupport: [\n \"CustomerSupport\",\n \"TawkToLiveChat\",\n \"CustomerTags\",\n \"CustomerGroups\",\n ],\n OnlineStore: [\n \"MultiLingualSupport\",\n \"EntityMetaData\",\n \"Personalization\",\n \"PasswordPolicySupport\",\n \"MarketPlace\",\n ],\n Payments: [\"Wallet\", \"OnlinePaymentSupport\"],\n Analytics: [\"Seo\", \"Analytics\", \"FacebookAnalytics\", \"ReportsAndAnalytics\"],\n HumanResource: [\"HrManagement\", \"MultiUserSupport\", \"LeaveManagement\"],\n};\n\nconst emptyState = {\n // icon: emptyIcon,\n message: \"There are no extensions\", // TODO: Add translation\n};\n\nconst tableProperties = desktopView;\n\nfunction filterExtensions(extensions, type) {\n if (!extensions) {\n return [];\n }\n if (!type) {\n return extensions;\n }\n let newExtensions = ExtensionTypes[type] || [];\n return extensions\n .filter((extn) => {\n if (newExtensions.indexOf(extn.slug) > -1) {\n return extn;\n }\n return null;\n })\n .filter(Boolean);\n}\n\nclass ExtnTypeFilters extends Component {\n constructor(props) {\n super(props);\n this.state = {\n selected: \"All\",\n };\n this.extensions = Object.keys(ExtensionTypes);\n }\n render() {\n const { data, updateView } = this.props;\n const { selected } = this.state;\n return (\n \n
\n \n
\n {pricing && (\n \n
\n \n
\n \n {this.props.status === \"ENABLED\" && (\n
\n \n \n {\n this.hideQuickActionPopup();\n this.props.onAction(\n TABLE_ACTIONS.UPDATE,\n { id },\n { status: _targetStatus }\n );\n }}\n />\n \n
\n )}\n {this.props.status === \"DISABLED\" && (\n \n \n {\n this.hideQuickActionPopup();\n this.props.onAction(\n TABLE_ACTIONS.UPDATE,\n { id },\n { status: _targetStatus }\n );\n }}\n />\n \n
\n )}\n \n {name}\n
\n {description?.split(\". \", 1)[0]}
\n \n
\n )}\n \n {getMessage(\"extensions.price\")}\n
\n \n {pricing.split(\" \")[0] + \" \"}\n {pricing.split(\" \").length > 1 &&\n pricing.split(\" \").slice(1).join(\" \")}\n
\n \n
\n \n {this.props.status === \"ENABLED\" && (\n
\n {status === \"ENABLED\" ? (\n \n \n {\n this.hideDetailsPopup();\n this.props\n .onAction(\n TABLE_ACTIONS.UPDATE,\n { id },\n { status: _targetStatus }\n )\n .then(this.showRefreshPrompt);\n }}\n />\n \n
\n )}\n {this.props.status === \"DISABLED\" && (\n \n \n {\n this.hideDetailsPopup();\n this.props\n .onAction(\n TABLE_ACTIONS.UPDATE,\n { id },\n { status: _targetStatus }\n )\n .then(this.showRefreshPrompt);\n }}\n />\n \n
\n )}\n \n \n {\" \"}\n {status === \"ENABLED\"\n ? getMessage(\"extensions.uninstall\")\n : getMessage(\"extensions.install\")}\n \n {isConfigurable &&\n slug !== \"DeliverySlots\" &&\n extensionSettingAvailable && (\n \n {getMessage(\"extensions.configure\")}\n \n )}\n {configureable ? (\n \n {getMessage(\"extensions.configure\")}\n \n ) : (\n \"\"\n )}\n
\n ) : (\n \n {version ? (\n \n {getMessage(\"extensions.version\")}: {version}\n \n ) : (\n \"\"\n )}\n \n {\" \"}\n {status === \"ENABLED\"\n ? getMessage(\"extensions.uninstall\")\n : getMessage(\"extensions.install\")}\n \n
\n )}\n \n {this.extensions &&\n this.extensions.map((extn, i) => {\n return (\n {\n this.setState({\n selected: extn,\n });\n updateView(data, extn);\n }}\n >\n \n {extn\n .replace(/([A-Z])/g, \" $1\")\n .replace(/^./, (str) => str.toUpperCase())}\n \n \n );\n })}\n
\n );\n }\n}\n\nexport default class Extensions extends Component {\n constructor(props) {\n super(props);\n this.state = {\n windowSize: window.innerWidth,\n };\n this.registerResize = this.registerResize.bind(this);\n }\n registerResize(e) {\n this.setState({\n windowSize: e.target.innerWidth,\n });\n }\n componentDidMount() {\n window.addEventListener(\"resize\", this.registerResize, true);\n }\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.registerResize, true);\n this.api && this.api.cancel();\n }\n\n render() {\n let { props } = this;\n return (\n \n \n
\n );\n }\n}\n","import React from \"react\";\nimport { BaseForm, Select, Input } from \"../../../../components/Form\";\nimport API from \"../../../../lib/api\";\nimport { getMessage } from \"../../../../lib/translator\";\nimport { getStores, sortStores } from \"../../../../lib/auth\";\n\nclass StoreConfigForm extends BaseForm {\n constructor(props) {\n super(props);\n this.getDetails = this.getDetails.bind(this);\n }\n componentDidMount() {\n const api = new API({ url: \"/catalogue-service/stock-override\" });\n api\n .get()\n .then((response) => {\n let values = response.data.stockOverride;\n values.storeId = \"all\";\n this.setState({\n values,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n onSubmit(formData) {\n this.setState({\n submitting: true,\n });\n let data = Object.assign({}, formData);\n if (!Number(data.storeId)) {\n data.storeId = null;\n } else {\n data.storeId = Number(data.storeId);\n }\n if (data.minPurchasableStock) {\n data.minPurchasableStock = Number(data.minPurchasableStock);\n } else {\n delete data.minPurchasableStock;\n }\n if (data.maxPurchasableStock) {\n data.maxPurchasableStock = Number(data.maxPurchasableStock);\n } else {\n delete data.maxPurchasableStock;\n }\n if (data.stockBuffer) {\n data.stockBuffer = Number(data.stockBuffer);\n } else {\n delete data.stockBuffer;\n }\n const api = new API({ url: \"/catalogue-service/stock-override\" });\n api\n .put(data)\n .then(\n (response) => {\n this.setState({\n submitting: false,\n });\n },\n (error) => {\n if (error.code === 401) throw error;\n this.setState({\n error: error,\n submitting: false,\n });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n getDetails(storeId) {\n if (!Number(storeId)) {\n storeId = null;\n }\n this.props.saveSelectedStore(storeId);\n this.setState({\n submitting: true,\n });\n const api = new API({ url: \"/catalogue-service/stock-override\" });\n api\n .get({ storeId: storeId })\n .then(\n (response) => {\n let values = response.data.stockOverride;\n values.storeId = storeId || \"all\";\n this.setState({\n values,\n submitting: false,\n });\n },\n (error) => {\n if (error.code === 401) throw error;\n this.setState({\n error: error,\n submitting: false,\n });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n render() {\n const { Form } = this.components;\n const { SubmitButton } = this.buttons;\n let stores = getStores && getStores();\n let allStores =\n Array.isArray(stores) &&\n stores\n .filter(({ hasPicking }) => hasPicking)\n .map((store) => {\n return { text: store.name, value: store.id };\n });\n sortStores(allStores);\n allStores = [{ text: \"All\", value: \"all\" }].concat(allStores);\n return (\n \n );\n }\n}\nexport default StoreConfigForm;\n","import React, { Component } from \"react\";\nimport ListingPage, { TABLE_ACTIONS } from \"../../../containers/ListingPage\";\nimport { Row, Cell } from \"../../../components/Table\";\nimport Tabs from \"../../../components/Tabs\";\nimport AuthenticatedPage from \"../../../containers/AuthenticatedPage\";\nimport Image from \"../../../components/Image\";\nimport { DropDown, DropDownItem, ICONS } from \"../../../components/DropDown\";\nimport { getMessage } from \"../../../lib/translator\";\nimport editForm from \"./Form\";\n// import Filters from './Filter'\nimport StoreConfigVariables from \"./StoreConfigForm\";\nimport \"./style.css\";\nimport EmptyIcon from \"./empty.svg\";\nimport { ProductSearch } from \"../../../components/Form\";\n\nconst tableProperties = {\n headers: [\n getMessage(\"category.header.image\"),\n getMessage(\"category.header.name\"),\n getMessage(\"store.min.stock.count\"),\n getMessage(\"store.min.purchaseable.qty\"),\n getMessage(\"store.max.purchaseable.qty\"),\n getMessage(\"store.stock.orderType\"),\n getMessage(\"store.actions\"),\n ],\n row: ({\n id,\n name,\n entityId,\n category,\n product,\n stockBuffer,\n minPurchasableStock,\n maxPurchasableStock,\n orderType,\n onAction,\n }) => {\n return (\n \n `${entity.name}`)}\n default={activeIndex}\n onClick={(index) => {\n changePage(index);\n }}\n />\n
\n );\n }\n}\nclass InterfaceContainer extends Component {\n constructor(props) {\n super(props);\n this.state = {\n activeIndex: 0,\n entity: \"category\",\n storeId: null,\n };\n this.mapping = [\"category\", \"product\"];\n this.changePage = this.changePage.bind(this);\n this.saveSelectedStore = this.saveSelectedStore.bind(this);\n }\n changePage(activeIndex) {\n this.setState({\n activeIndex,\n entity: this.mapping[activeIndex],\n });\n }\n saveSelectedStore(storeId) {\n this.setState({ storeId });\n }\n\n render() {\n return (\n \n
\n \n
\n );\n }\n}\n\nexport default class StoreConfig extends Component {\n render() {\n return (\n Stock Overrides
\n\n {\n this.setState({ inviteError: null });\n }}\n >\n
\n );\n }\n}\n\nconst tableProperties = {\n headers: [\n getMessage(\"settings.users.header.name\"),\n getMessage(\"settings.users.header.phone\"),\n getMessage(\"settings.users.header.email\"),\n getMessage(\"settings.users.header.actions\"),\n ],\n row: ({ id, name, verified, isOwner, phones, emails, onAction }) => (\n {this.state.inviteError}
\n \n {this.state.data\n ? getMessage(\"settings.users.permissionsForm.heading\", {\n name: this.state.data.name,\n })\n : getMessage(\"settings.users.permissionsForm.headingWithoutName\")}\n
\n {this.state.data ? (\n\n 
\n
\n);\n\nclass MobileAppsForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state = Object.assign({}, this.state, {\n themes: null,\n showLoader: false,\n showSuccessDialog: false,\n showErrorDialog: false,\n loadingThemes: false,\n });\n this.handleClose = this.handleClose.bind(this);\n this.closeDialogs = this.closeDialogs.bind(this);\n this.loadData = this.loadData.bind(this);\n this.loadThemes = this.loadThemes.bind(this);\n }\n loadData() {\n this.setState({ showLoader: true });\n this.api = new API({ url: \"/account-service/config/mobileApp\" });\n this.api\n .get()\n .then((response) => {\n this.setState((prevState) => {\n let newState = Object.assign({}, prevState, {\n values: response.data.config.mobileApp,\n loader: false,\n });\n return newState;\n });\n })\n .then(() => {\n this.setState({ showLoader: false });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n componentWillUnmount() {\n this.api && this.api.cancel();\n }\n loadThemes() {\n let api = new API({ url: \"/account-service/theme?paginated=false\" });\n api\n .get()\n .then((response) => {\n this.setState({\n themes: response.data.theme,\n });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n handleClose() {\n this.props.history.goBack();\n }\n onSubmit(data) {\n const api = new API({ url: \"/account-service/config/mobileApp\" });\n this.setState({ submitting: true });\n api\n .put({ mobileApp: data })\n .then(\n () => {\n this.setState({ showSuccessDialog: true });\n },\n () => {\n this.setState({ showErrorDialog: true });\n }\n )\n .then(() => {\n this.setState({ submitting: false });\n })\n .catch((error) => {\n console.error(error);\n });\n }\n closeDialogs() {\n this.setState({\n showSuccessDialog: false,\n showErrorDialog: false,\n });\n }\n componentDidMount() {\n this.loadData();\n // this.loadThemes()\n }\n render() {\n const { SubmitButton } = this.buttons;\n const { Form } = this.components;\n return (\n {props.children}
\n \n
\n ) : null}\n \n \n {getMessage(\"mobileApps.submit.text\")}\n \n \n {getMessage(\"mobileApps.cancel.text\")}\n \n
\n \n )}\n \n );\n }\n}\n\nexport default withRouter(MobileAppsForm);\n","import React, { Component } from \"react\";\nimport AuthenticatedPage from \"../../../containers/AuthenticatedPage\";\nimport MobileAppsForm from \"./form\";\nimport { getMessage } from \"../../../lib/translator\";\n\nimport \"./style.css\";\n\nexport default class MobileApps extends Component {\n render() {\n return (\n {getMessage(\"mobileApps.heading\")}
\n\n
\n );\n }\n}\nexport default Send;\n","import React from \"react\";\nimport { BaseForm, Input, VALIDATION_TYPES } from \"../../../../components/Form\";\nimport { getMessage } from \"../../../../lib/translator\";\n\nclass AddEmail extends BaseForm {\n constructor(props) {\n super(props);\n this.state = {\n submitting: false,\n formError: \"\",\n };\n }\n render() {\n const { SubmitButton } = this.buttons;\n const { Form } = this.components;\n return (\n \n
\n \n \n
\n {props.name}
\n {props.midText}
\n \n
\n {props.value}
\n \n \n \n
\n );\n }\n}\nexport default AddEmail;\n","import React from \"react\";\nimport { BaseForm, VALIDATION_TYPES, Phone } from \"../../../../components/Form\";\nimport { getMessage } from \"../../../../lib/translator\";\n\nclass AddPhoneNumberForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state = {\n submitting: false,\n formError: \"\",\n };\n }\n\n render() {\n const { SubmitButton } = this.buttons;\n const { Form } = this.components;\n return (\n \n \n
\n );\n }\n}\nexport default AddPhoneNumberForm;\n","import React from \"react\";\nimport { BaseForm, Toggle } from \"../../../components/Form\";\nimport { getMessage } from \"../../../lib/translator\";\nimport API from \"../../../lib/api\";\nimport Loader from \"../../../components/Loader\";\nimport { DropDown, DropDownItem } from \"../../../components/DropDown\";\nimport Send from \"../../../components/Send\";\nimport Popup from \"../../../components/Popup/Popup\";\nimport { withRouter } from \"react-router-dom\";\nimport AddEmailForm from \"./Email\";\nimport AddPhoneForm from \"./Phone\";\nimport { parse, format, isValidNumber } from \"libphonenumber-js\";\nimport { Dialog } from \"../../../components/Popup\";\n\nimport SmsIcon from \"./sms.svg\";\nimport MailIcon from \"./mail.svg\";\nimport AddIcon from \"./plus.svg\";\n\nclass NotificationsForm extends BaseForm {\n constructor(props) {\n super(props);\n this.state = {\n submitting: false,\n showLoader: true,\n formError: \"\",\n popupFormError: \"\",\n showOrderEmailPopup: false,\n showOrderPhonePopup: false,\n showCustomerEmailPopup: false,\n showCustomerPhonePopup: false,\n showOrderDeleteEmailDialog: false,\n showOrderDeletePhoneDialog: false,\n showCustomerDeleteEmailDialog: false,\n showCustomerDeletePhoneDialog: false,\n showSuccessDialog: false,\n values: {\n orderNotificationEmails: [],\n orderNotificationPhones: [],\n customerNotificationEmails: [],\n customerNotificationPhones: [],\n },\n };\n this.handleOrderEmailDelete = this.handleOrderEmailDelete.bind(this);\n this.handleOrderPhoneDelete = this.handleOrderPhoneDelete.bind(this);\n\n this.handleOrderEmailAdd = this.handleOrderEmailAdd.bind(this);\n this.handleOrderPhoneAdd = this.handleOrderPhoneAdd.bind(this);\n this.handleCustomerEmailAdd = this.handleCustomerEmailAdd.bind(this);\n this.handleCustomerPhoneAdd = this.handleCustomerPhoneAdd.bind(this);\n this.handleCustomerEmailDelete = this.handleCustomerEmailDelete.bind(this);\n this.handleCustomerPhoneDelete = this.handleCustomerPhoneDelete.bind(this);\n\n this.showOrderEmailPopup = this.showOrderEmailPopup.bind(this);\n this.showOrderPhonePopup = this.showOrderPhonePopup.bind(this);\n this.closeOrderEmailPopup = this.closeOrderEmailPopup.bind(this);\n this.closeOrderPhonePopup = this.closeOrderPhonePopup.bind(this);\n this.showCustomerEmailPopup = this.showCustomerEmailPopup.bind(this);\n this.closeCustomerEmailPopup = this.closeCustomerEmailPopup.bind(this);\n this.showCustomerPhonePopup = this.showCustomerPhonePopup.bind(this);\n this.closeCustomerPhonePopup = this.closeCustomerPhonePopup.bind(this);\n this.closeSuccess = this.closeSuccess.bind(this);\n\n this.handleClose = this.handleClose.bind(this);\n this.hideEmailDeleteConfirmation =\n this.hideEmailDeleteConfirmation.bind(this);\n this.hidePhoneDeleteConfirmation =\n this.hidePhoneDeleteConfirmation.bind(this);\n this.hideCustomerDeleteEmailDialog =\n this.hideCustomerDeleteEmailDialog.bind(this);\n this.hideCustomerDeletePhoneDialog =\n this.hideCustomerDeletePhoneDialog.bind(this);\n this.showOrderDeleteEmailDialog =\n this.showOrderDeleteEmailDialog.bind(this);\n this.showOrderDeletePhoneDialog =\n this.showOrderDeletePhoneDialog.bind(this);\n this.showCustomerDeleteEmailDialog =\n this.showCustomerDeleteEmailDialog.bind(this);\n this.showCustomerDeletePhoneDialog =\n this.showCustomerDeletePhoneDialog.bind(this);\n this.getData = this.getData.bind(this);\n }\n\n componentDidMount() {\n this.getData();\n this.api = new API({ url: \"/account-service/country\" });\n this.api\n .get()\n .then(\n (response) => {\n this.countryIsoCode = response.data.country.isoCode;\n },\n (error) => {\n if (error.message === \"cancelled\") {\n return;\n }\n this.countryIsoCode = \"IN\";\n this.setState({\n countryError: error,\n });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n getData() {\n this.setState({\n showLoader: true,\n });\n this.configApi = new API({ url: \"/account-service/config/notification\" });\n this.configApi\n .get()\n .then(\n (response) => {\n const notification = response.data.config.notification;\n const values = {\n orderNotificationEmails:\n notification.orderPlaceEmailRecipients || [],\n orderNotificationPhones: notification.orderPlaceSmsRecipients || [],\n customerNotificationPhones:\n notification.customerSignUpSmsRecipients || [],\n customerNotificationEmails:\n notification.customerSignUpEmailRecipients || [],\n notifyOnCustomerSignUp:\n notification.notifyOnCustomerSignUp || false,\n notifyOnCustomerWalletRecharge:\n notification.notifyOnCustomerWalletRecharge || false,\n notifyOnCustomerAddNewAddress:\n notification.notifyOnCustomerAddNewAddress || false,\n notifyOnOrderCancel: notification.notifyOnOrderCancel || false,\n notifyOnOrderPlace: notification.notifyOnOrderPlace || false,\n notifyOnOrderRefund: notification.notifyOnOrderRefund || false,\n };\n this.setState({ values, showLoader: false });\n },\n (error) => {\n if (error.message === \"cancelled\") {\n return;\n }\n this.setState({ formError: error.message, showLoader: false });\n }\n )\n .catch((error) => {\n console.error(error);\n });\n }\n\n handleClose() {\n this.props.history.goBack();\n }\n\n showOrderEmailPopup() {\n this.setState({\n showOrderEmailPopup: true,\n });\n }\n\n closeOrderEmailPopup() {\n this.setState({\n showOrderEmailPopup: false,\n popupFormError: \"\",\n });\n }\n\n showOrderPhonePopup() {\n this.setState({\n showOrderPhonePopup: true,\n });\n }\n\n closeOrderPhonePopup() {\n this.setState({\n showOrderPhonePopup: false,\n popupFormError: \"\",\n });\n }\n\n showCustomerEmailPopup() {\n this.setState({\n showCustomerEmailPopup: true,\n });\n }\n\n closeCustomerEmailPopup() {\n this.setState({\n showCustomerEmailPopup: false,\n popupFormError: \"\",\n });\n }\n\n showCustomerPhonePopup() {\n this.setState({\n showCustomerPhonePopup: true,\n });\n }\n\n closeCustomerPhonePopup() {\n this.setState({\n showCustomerPhonePopup: false,\n popupFormError: \"\",\n });\n }\n\n handleOrderEmailAdd({ email }) {\n let newState = Object.assign({}, this.state.values);\n if (!newState.orderNotificationEmails.includes(email)) {\n newState.orderNotificationEmails.push(email);\n } else {\n return this.setState({\n popupFormError: getMessage(\"notification.email.error\"),\n });\n }\n\n this.setState({\n values: newState,\n showOrderEmailPopup: false,\n });\n }\n\n handleCustomerEmailAdd({ email }) {\n let newState = Object.assign({}, this.state.values);\n if (!newState.customerNotificationEmails.includes(email)) {\n newState.customerNotificationEmails.push(email);\n } else {\n return this.setState({\n popupFormError: getMessage(\"notification.email.error\"),\n });\n }\n\n this.setState({\n values: newState,\n showCustomerEmailPopup: false,\n });\n }\n\n handleOrderEmailDelete() {\n const index = this.state.index;\n let newState = Object.assign({}, this.state.values);\n let newEmails = this.state.values.orderNotificationEmails.filter(\n (email, i) => i !== index\n );\n newState.orderNotificationEmails = newEmails;\n this.setState({\n values: newState,\n showOrderDeleteEmailDialog: false,\n });\n }\n\n handleCustomerEmailDelete() {\n const index = this.state.index;\n let newState = Object.assign({}, this.state.values);\n let newEmails = this.state.values.customerNotificationEmails.filter(\n (email, i) => i !== index\n );\n newState.customerNotificationEmails = newEmails;\n this.setState({\n values: newState,\n showCustomerDeleteEmailDialog: false,\n });\n }\n\n hideEmailDeleteConfirmation() {\n this.setState({\n showOrderDeleteEmailDialog: false,\n });\n }\n\n handleOrderPhoneAdd({ phone }) {\n let newState = Object.assign({}, this.state.values);\n if (isValidNumber(phone)) {\n if (!newState.orderNotificationPhones.includes(phone)) {\n newState.orderNotificationPhones.push(phone);\n } else {\n return this.setState({\n popupFormError: getMessage(\"notification.phone.error\"),\n });\n }\n } else {\n return this.setState({\n popupFormError: getMessage(\"input.invalidPhoneFormat\"),\n });\n }\n this.setState({\n newState,\n showOrderPhonePopup: false,\n });\n }\n\n handleOrderPhoneDelete() {\n const index = this.state.index;\n let newState = Object.assign({}, this.state.values);\n let newPhones = this.state.values.orderNotificationPhones.filter(\n (phone, i) => i !== index\n );\n newState.orderNotificationPhones = newPhones;\n this.setState({\n values: newState,\n showOrderDeletePhoneDialog: false,\n });\n }\n\n handleCustomerPhoneAdd({ phone }) {\n let newState = Object.assign({}, this.state.values);\n if (isValidNumber(phone)) {\n if (!newState.customerNotificationPhones.includes(phone)) {\n newState.customerNotificationPhones.push(phone);\n } else {\n return this.setState({\n popupFormError: getMessage(\"notification.phone.error\"),\n });\n }\n } else {\n return this.setState({\n popupFormError: getMessage(\"input.invalidPhoneFormat\"),\n });\n }\n this.setState({\n newState,\n showCustomerPhonePopup: false,\n });\n }\n\n handleCustomerPhoneDelete() {\n const index = this.state.index;\n let newState = Object.assign({}, this.state.values);\n let newPhones = this.state.values.customerNotificationPhones.filter(\n (phone, i) => i !== index\n );\n newState.customerNotificationPhones = newPhones;\n this.setState({\n values: newState,\n showCustomerDeletePhoneDialog: false,\n });\n }\n\n hidePhoneDeleteConfirmation() {\n this.setState({\n showOrderDeletePhoneDialog: false,\n });\n }\n\n hideCustomerDeletePhoneDialog() {\n this.setState({\n showCustomerDeletePhoneDialog: false,\n });\n }\n\n showEmails(emailsToShow) {\n let _this = this;\n let emails = emailsToShow.map((email, i) => {\n return (\n \n \n {this.state.popupFormError}\n \n {this.state.popupFormError}\n \n {this.state.popupFormError}\n \n {this.state.popupFormError}\n