onClick(cartbox)}/>;\n\n const helperCenterPage = () => {\n window.open(\"https://help.ibuyflowers.com/en/knowledge/how-do-i-submit-a-claim\")\n }\n\n return (\n \n Request claim \n \n Important \n \n Claims can be filed only up to 48 hours after arrival date. \n We need pictures of all stems to be claimed. Example: if you claim 15 stems, we need to see 15 stems with the issue or it won't get accepted. \n Each box should be filed independently. \n \n\n For more info: See our help center \n \n {content}\n \n\n );\n }\n\n}\n\nexport default RequestClaimComponent;\n","import {SbxCoreService, SbxSessionService} from 'sbx-axios';\nimport environment from '../environment';\n\nconst sbxCoreService = new SbxCoreService();\nconst sbxSessionService = new SbxSessionService(sbxCoreService);\nsbxSessionService.initialize(environment.domain, environment.appKey);\n\nexport {sbxSessionService, sbxCoreService};\n","import axios from 'axios';\nimport environment from \"../environment\";\n\nconst HTTP = axios.create({\n baseURL: environment.eventBaseApi,\n headers: {\n 'app-key': environment.appKey\n }\n});\n\nexport const createSbxEvent = (params) => {\n return HTTP.post(\n `/api/event/${environment.domain}/${params.meta.name}`,\n params\n )\n .then((res) => Promise.resolve(res.data || res))\n .catch((err) =>\n Promise.resolve({success: false, error: err.message})\n );\n};\n","import {createSbxEvent} from \"../Services/EventService\";\nimport publicIp from 'public-ip';\nimport UAParser from 'ua-parser-js';\n\nexport class TrackEvent {\n props = {};\n meta = {};\n extra = {}\n\n constructor(app) {\n this.meta = {...this.meta, extra: {trackCode: {app}}};\n }\n\n newEvent({\n props,\n extra,\n metadata\n }) {\n this.props = props;\n this.extra = extra ? extra : {};\n this.meta.name = metadata.name;\n if (this.meta.extra) {\n this.meta.extra.pathname = window.location.href;\n }\n this.meta.created = new Date();\n this.publish();\n }\n\n publish() {\n createSbxEvent({\n props: this.props,\n extra: this.extra,\n meta: this.meta\n }).then((res) => res);\n }\n\n setUserAgent(data) {\n if (this.meta.extra && this.meta.extra.trackCode) {\n this.meta.extra.trackCode.user_agent = data;\n }\n }\n\n setUserAgentInfo(data) {\n if (this.meta.extra && this.meta.extra.trackCode) {\n this.meta.extra.trackCode.user_agent_info = data;\n }\n }\n\n setUser({user_id}) {\n this.meta.user = user_id;\n }\n\n setMetadataExtra(data) {\n if (this.meta.extra) {\n this.meta.extra = {...this.meta.extra, ...data};\n }\n }\n\n setUserIp(data) {\n if (this.meta.extra && this.meta.extra.trackCode) {\n this.meta.extra.trackCode.ip = data;\n }\n }\n}\n\nexport const TrackEventMonitor = new TrackEvent({\n name: 'ibf_web',\n module: 'ibf-ui-claims'\n});\n\n(async () => {\n try {\n TrackEventMonitor.setUserIp(await publicIp.v4());\n } catch (e) {\n TrackEventMonitor.setUserIp('');\n }\n})();\n\nconst parser = new UAParser();\nconst agent = {\n browser: parser.getBrowser(),\n device: parser.getDevice(),\n os: parser.getOS(),\n engine: parser.getEngine()\n};\n\nTrackEventMonitor.setUserAgent(parser.getUA());\nTrackEventMonitor.setUserAgentInfo(agent);\n","import {sbxCoreService, sbxSessionService} from '../Network';\nimport environment from '../environment';\nimport {TrackEventMonitor} from \"../Classes/TrackEvent\";\n\nexport default class AuthService {\n static validateToken(token = localStorage.getItem('token'), user_key = localStorage.getItem('user_key')) {\n if(!token || token === \"null\"){\n token = localStorage.getItem(`${environment.appKey}_token`);\n }\n const params = {token, user_key};\n return sbxCoreService.run(environment.cloudscripts.validate, params, environment.testMode).then(res => {\n if (res.success) {\n const data = res.response;\n TrackEventMonitor.setUser({user_id: data.user.user_id})\n\n const trackUser = {...data.user}\n\n TrackEventMonitor.setMetadataExtra({\n user_key: trackUser.key,\n customer_key: trackUser.metadata.customer,\n from_manager: trackUser.metadata.from_manager,\n main_user_key: trackUser.metadata.main_user_key,\n })\n sbxSessionService.updateUser({token: data.token, user: data.user});\n return {success: true, data: data};\n }\n return {success: false};\n }).catch(error => {\n console.error(error);\n });\n }\n}\n","export const VALIDATE_TOKEN = 'VALIDATE_TOKEN';\nexport const CHANGE_ROUTE = 'CHANGE_ROUTE';\nexport const CLEAN_MODAL = 'CLEAN_MODAL';\n\nexport const OPEN_MODAL = 'OPEN_MODAL';\nexport const CLOSE_MODAL = 'CLOSE_MODAL';\nexport const GET_ID_CLAIMS = 'GET_ID_CLAIMS';\nexport const EDIT_CLAIMS_MODAL = 'editClaimsModal';\nexport const DELETE_CLAIM=\"DELETE_CLAIM\";\n\nexport const GET_CARTBOX_FOR_CLAIM = 'GET_CARTBOX_FOR_CLAIM';\nexport const GET_CLAIMS = 'GET_CLAIMS';\nexport const GET_DETAIL_CLAIM = 'GET_DETAIL_CLAIM';\nexport const EDIT_DETAIL_CLAIM = 'EDIT_DETAIL_CLAIM';\nexport const EDIT_IMAGES=\"EDIT_IMAGES\";\nexport const LOADING_CLAIMS=\"LOADING_CLAIMS\";\n\n","// @flow\nimport iziToast from 'izitoast';\n\nexport function toast(message: string, type ? : string = 'success'): void {\n\n iziToast[type]({\n message: message,\n position: 'bottomLeft',\n displayMode: 2,\n closeOnClick: true\n })\n}\n","import {sbxCoreService, sbxSessionService} from '../Network';\nimport environment from '../environment';\nimport {each, parallel, waterfall} from 'async';\nimport axios from 'axios';\nimport {toast} from \"./AlertService\";\nimport {TrackEventMonitor} from \"../Classes/TrackEvent\";\n\nexport default class ClaimService {\n static httpClient = axios.create({\n baseURL: environment.baseUrl,\n headers: {\n 'App-Key': environment.appKey,\n 'Authorization': `Bearer ${sbxSessionService.getCurrentUser().token?sbxSessionService.getCurrentUser().token:localStorage.getItem('token')}`\n }\n });\n\n static httpImageClient = axios.create({\n baseURL: \"https://sbx-image-utils.nubesocobox.com\",\n headers: {\n \"Content-type\": \"multipart/form-data; boundary=---011000010111000001101001\",\n // \"Origin\": \"http://app.ioa\"\n // \"Origin\": \"localhost\"\n },\n responseType: \"blob\"\n });\n\n static uploadImageService = (data) => {\n return ClaimService.httpImageClient.post(\"/convert?size=100&type=png\", data).then(res => res)\n }\n\n static claimReasons() {\n return sbxCoreService.with('claim_reason').andWhereIsEqualTo('active', true).find().then(res => {\n if (res.success) {\n return {success: true, data: res.results};\n }\n return {success: false};\n }).catch(error => {\n console.error(error);\n });\n }\n\n\n static getClaimReasons(claim) {\n return sbxCoreService.with('reason_per_claim')\n .fetchModels(['claim_reason'])\n .andWhereIsEqualTo('request_claim', claim)\n .find(['claim_reason']).then((data) => {\n return data.results;\n }).catch(error => {\n console.error(error);\n });\n }\n\n static async requestClaimByCartbox() {\n try {\n const data = await sbxCoreService.with('request_claim').loadAll();\n return data.results;\n } catch (error) {\n\n }\n }\n\n static async getCartboxForClaim(customer) {\n\n const params = {\n customer: customer.customer,\n type: 'claims',\n from_manager: customer.from_manager,\n user_email: customer.email\n };\n try {\n const res = await sbxCoreService.run(environment.cloudscripts.ibf_po_listOrders, params, environment.testMode);\n if (res.success) {\n \n if (!customer.from_manager) {\n const resRequestClaim = await ClaimService.requestClaimByCartbox()\n const orders = res.box.orders\n const filteredOrders = orders\n .map(item => item.filter(itemsOrder => {\n const objWithKey = itemsOrder.find(order => order.hasOwnProperty('_KEY'));\n if (objWithKey) {\n return !resRequestClaim.some(claim => claim.cart_box === objWithKey._KEY&& claim.state === 'Pending');\n }\n return true;\n }))\n .filter(item => item.length > 0);\n\n\n res.box.orders = filteredOrders\n }\n\n\n return {success: true, data: res.box};\n }\n return {success: false};\n } catch (error) {\n console.error(error);\n }\n }\n\n\n static getClaim(user, key) {\n return new Promise((resolve, reject) => {\n waterfall([\n function (cb) {\n parallel([\n function (callback) {\n ClaimService.getClaims(user, '', key).then(res => {\n callback(null, res[0]);\n });\n },\n function (callback) {\n ClaimService.getClaimReasons(key).then(res => {\n callback(null, res);\n });\n }\n ], (err, data) => {\n cb(err, {\n claim: data[0],\n claim_reasons: data[1],\n images: []\n });\n });\n },\n function (box, cb) {\n\n\n if (box.claim.claim_folder) {\n // ClaimService.createFolder(box.claim.claim_folder, environment.folders.claims).then(res => {\n // const obj = {\n // claim_folder: res.folder.key,\n // _KEY: box.claim._KEY\n // };\n //\n // sbxCoreService.update('request_claim', obj).then(() => {\n // box.claim.claim_folder = obj.claim_folder;\n // cb(null, box);\n // });\n // });\n // } else {\n ClaimService.folderList(box.claim.claim_folder).then(res => {\n console.log('res', res);\n box.images = res.contents ? res.contents.map(item => item.key) : [];\n cb(null, box);\n });\n } else {\n return cb(null, box);\n }\n },\n function (box, cb) {\n const queries = box.images.map(image => {\n return sbxCoreService.downloadFile(image);\n });\n\n if (queries.length) {\n const attached = [];\n each(queries, (query, next) => {\n\n\n query.then(res => {\n\n attached.push(res.url);\n next();\n }).catch(next);\n }, (err) => {\n box.images = attached;\n cb(err, box);\n });\n } else {\n return cb(null, box);\n }\n }\n ], (err, box) => {\n if (err) {\n reject(err);\n } else {\n resolve(box);\n }\n });\n });\n }\n\n static getClaims(user, state, key = null) {\n const type = user.role === 'FLORIST' ? 'customer' : 'grower';\n const target = type === 'customer' ? 'grower' : 'customer';\n const toFetch = ['cart_box_item.product_group', 'cart_box_item.variety', 'cart_box_item.grade', 'cart_box.product_group',\n 'cart_box.variety', 'cart_box.grade', 'cart_box.' + target, 'cart_box.purchase', 'cart_box_item.uom'];\n\n const query = sbxCoreService.with('request_claim')\n .fetchModels(toFetch)\n .andWhereIsEqualTo('cart_box.' + type, user.metadata[type]);\n\n if (key) {\n query.whereWithKeys([key]);\n } else {\n query.andWhereIsEqualTo('state', state);\n }\n\n return query.find(toFetch).then((data) => {\n return data.results.map(item => {\n if (type === 'grower') {\n const price = parseFloat(item.total_claim);\n const margin = parseFloat(item.cart_box.purchase.margin) / 100;\n item.total_claim = price * (1 - margin);\n }\n\n return item;\n });\n }).catch(error => {\n console.error(error);\n });\n }\n\n static generateUUID() {\n return 'xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {\n const r = (Math.random() * 16) | 0,\n v = c === 'x' ? r : (r & 0x3) | 0x8;\n return v.toString(16);\n });\n }\n\n static uploadClaimImage(folderKey, file) {\n return sbxCoreService.uploadFile(folderKey, file);\n }\n\n static uploadClaimImages(claimKey, folderKey, images, action = \"create\") {\n return new Promise((resolve, reject) => {\n const queries = [];\n const data = [];\n const row = {\n picture_including_shipping_label: '',\n picture_including_farm_name: '',\n picture_product_to_be_claimed_1: '',\n picture_product_to_be_claimed_2: '',\n picture_product_to_be_claimed_3: '',\n picture_product_to_be_claimed_4: '',\n claim_folder: folderKey,\n _KEY: claimKey\n };\n\n\n images.forEach((image, i) => {\n\n let blob, position;\n if (action === \"create\") {\n blob = image.slice(0, image.size, 'image/png');\n position = i;\n }\n if (action === \"update\") {\n blob = image.image.slice(0, image.image.size, 'image/png');\n position = parseInt(image.property)\n }\n\n const fileName = ClaimService.generateUUID() + '.png';\n const file = new File([blob], fileName, {type: 'image/png'});\n const url = `${environment.publicPath}claims/${claimKey}/${fileName}`;\n\n switch (position) {\n case 0:\n row.picture_including_farm_name = url;\n break;\n case 1:\n row.picture_including_shipping_label = url;\n break;\n case 2:\n row.picture_product_to_be_claimed_1 = url;\n break;\n case 3:\n row.picture_product_to_be_claimed_2 = url;\n break;\n case 4:\n row.picture_product_to_be_claimed_3 = url;\n break;\n case 5:\n row.picture_product_to_be_claimed_4 = url;\n break;\n default:\n break;\n }\n\n\n queries.push(\n ClaimService.uploadClaimImage(folderKey, file)\n );\n });\n each(queries, (query, next) => {\n\n query.then(res => {\n data.push(res.success);\n next();\n }).catch(next);\n }, (err) => {\n if (err) {\n reject(err);\n } else {\n resolve({success: !data.some(item => !item), row});\n }\n });\n });\n }\n\n static saveClaim(data, uploader_array = []) {\n\n TrackEventMonitor.newEvent({\n props: {\n ...data\n },\n metadata: {\n name: \"ibf_claim_attempt\"\n }\n })\n\n return new Promise((resolve, reject) => {\n waterfall([\n function (cb) {\n toast('We are setting up your claim.');\n sbxCoreService.run(environment.cloudscripts.claimSetup, data, environment.testMode).then(res => {\n\n if (res.success) {\n // Data includes\n /*\n \"picture_including_shipping_label\" \"picture_including_farm_name\" \"picture_product_to_be_claimed_1\"\n \"picture_product_to_be_claimed_2\" \"picture_product_to_be_claimed_3\" \"picture_product_to_be_claimed_4\" \"_KEY\"\n */\n TrackEventMonitor.newEvent({\n props: {\n arrived: data.arrived,\n ...data.claim\n },\n metadata: {\n name: \"ibf_claim_setup\"\n }\n })\n cb(null, res);\n } else {\n cb(new Error(res.error));\n }\n }).catch(cb);\n },\n function (res, cb) {\n if (data.arrived) {\n toast('We are uploading the claim images.');\n ClaimService.uploadClaimImages(res.box.claim_key, res.box.folder_key, uploader_array).then((result) => {\n if (result.success) {\n delete result.row.claim_folder;\n TrackEventMonitor.newEvent({\n props: {\n success: true,\n ...result.row\n },\n metadata: {\n name: \"ibf_claim_upload_images\"\n }\n })\n cb(null, result.row);\n } else {\n TrackEventMonitor.newEvent({\n props: {\n success: false,\n ...data.claim,\n arrived: data.arrived,\n image_array: JSON.stringify(uploader_array)\n },\n metadata: {\n name: \"ibf_claim_upload_images\"\n }\n })\n cb(new Error('There was an error, please try again.'))\n }\n }).catch(cb);\n } else {\n cb(null, {_KEY: res.box.claim_key});\n }\n },\n function (claim, cb) {\n delete data.reason;\n data.claim = claim;\n sbxCoreService.run(environment.cloudscripts.claimFinish, data, environment.testMode).then(res => {\n if (res.success) {\n TrackEventMonitor.newEvent({\n props: {\n ...data.claim,\n arrived: data.arrived,\n },\n metadata: {\n name: \"ibf_claim_finish\"\n }\n })\n return cb(null, {data: res.box});\n }\n cb(new Error('There was an error, please try again.'));\n }).catch(cb);\n }\n ], (err, res) => {\n if (err) {\n\n TrackEventMonitor.newEvent({\n props: {\n ...data,\n error: err\n },\n metadata: {\n name: \"ibf_claim_error\"\n }\n })\n\n reject(err);\n } else {\n\n if (window.dataLayer) {\n window.dataLayer.push({event: 'Requested refund', value: ''});\n }\n\n resolve(res);\n }\n });\n });\n }\n\n static getCartbox(key) {\n const toFetch = ['product_group', 'cart_box.product_group', 'variety', 'grower', 'cart_box.purchase', 'grade', 'uom', 'stems_per_bunch'];\n return sbxCoreService.with('cart_box_item')\n .andWhereIsEqualTo('cart_box', key)\n .fetchModels(toFetch)\n .find(toFetch).then((data) => {\n return sbxCoreService.mapReverseFetchesResult(data, 'cart_box', 'items', toFetch).results[0];\n }).catch(error => {\n console.error(error);\n })\n }\n\n static createFolder(name, parentKey) {\n const params = {name, parent_key: parentKey};\n return ClaimService.httpClient.post('https://sbxcloud.com/api/content/v1/folder', {}, {params}).then(res => res.data);\n }\n\n static folderList(key) {\n const params = {key};\n return ClaimService.httpClient.get('https://sbxcloud.com/api/content/v1/folder', {params}).then(res => res.data);\n }\n\n static getFedexTracking = (cartbox: any) => {\n return sbxCoreService.run(environment.cloudscripts.fedexTracking, {\n cartKey: cartbox\n }, environment.testMode)\n .then((res) => {\n if (res.success) {\n return {success: true, data: res};\n } else {\n return {success: false};\n }\n })\n .catch((error) => {\n console.error(error);\n });\n };\n\n static getPendingClaimByCartbox = (cartboxKey) => {\n return sbxCoreService.with(\"request_claim\")\n .andWhereIsEqualTo(\"cart_box\", cartboxKey)\n .andWhereIsEqualTo(\"state\", \"pending\")\n // .orWhereIsEqualTo(\"state\", \"Pending\")\n .fetchModels([\"cart_box_item.stems_per_bunch\"]).loadAll().then(res => {\n\n const fetched = res.fetched_results\n\n res.results.forEach(claim => {\n claim[\"cart_box_item\"] = fetched[\"cart_box_item\"][claim[\"cart_box_item\"]]\n claim[\"cart_box_item\"].stems_per_bunch = fetched[\"stems_per_bunch\"][claim[\"cart_box_item\"].stems_per_bunch]\n })\n\n return res;\n })\n };\n\n\n static getPendingClaimByCartboxItem = (cbItemKey) => {\n return sbxCoreService.with(\"request_claim\")\n .andWhereIsEqualTo(\"cart_box_item\", cbItemKey)\n .andWhereIsEqualTo(\"state\", \"pending\")\n .fetchModels([\"cart_box_item.stems_per_bunch\", \"cart_box_item.product_group\", \"cart_box_item.variety\"]).loadAll().then(res => {\n\n const fetched = res.fetched_results\n\n res.results.forEach(claim => {\n claim[\"cart_box_item\"] = fetched[\"cart_box_item\"][claim[\"cart_box_item\"]]\n claim[\"cart_box_item\"] = {\n ...claim[\"cart_box_item\"],\n stems_per_bunch: fetched[\"stems_per_bunch\"][claim[\"cart_box_item\"][\"stems_per_bunch\"]]\n }\n claim[\"cart_box_item\"] = {\n ...claim[\"cart_box_item\"],\n variety: fetched[\"variety\"][claim[\"cart_box_item\"][\"variety\"]]\n }\n claim[\"cart_box_item\"] = {\n ...claim[\"cart_box_item\"],\n product_group: fetched[\"product_group\"][claim[\"cart_box_item\"][\"product_group\"]]\n }\n })\n\n return res;\n })\n };\n\n static deleteClaim(_KEY) {\n const params = {\n _KEY: _KEY\n };\n return sbxCoreService.run(environment.cloudscripts.ibf_deleteClaim, params, environment.testMode).then(res => {\n if (res.success) {\n return {success: true, data: res};\n }\n return {success: false, error: res.error};\n }).catch(error => {\n console.error(error);\n });\n\n\n }\n\n\n /*********** */\n\n\n /**/\n static updateClaim(data) {\n return new Promise((resolve, reject) => {\n waterfall([\n function (cb) {\n if (data.image.imagesClaim.length > 0) {\n ClaimService.uploadClaimImages(data.image.claim_key,\n data.image.claim_folder_key,\n data.image.imagesClaim, \"update\").then((result) => {\n if (result.success) {\n let obj = {success: true, claim: {}, images: result}\n cb(null, obj);\n } else {\n cb(new Error('There was an error, please try again.'))\n }\n }).catch(cb);\n } else {\n cb(null, {success: true, claim: {}, images: {}});\n }\n\n },\n function (box, cb) {\n\n if (Object.keys(box.images).length > 0) {\n const objLabelImages = {}\n for (const key in data.params.objImages) {\n if (Object.hasOwnProperty.call(data.params.objImages, key)) {\n const element = key;\n for (const _key in box.images.row) {\n if (Object.hasOwnProperty.call(box.images.row, _key)) {\n const el = _key;\n if (element === el && el !== \"\") {\n objLabelImages[el] = box.images.row[el]\n }\n\n }\n }\n }\n }\n delete data.params.objImages\n const params = {\n claim: {...data.params.claim, ...objLabelImages},\n addReason: data.params.addReason,\n deleteReason: data.params.deleteReason,\n }\n\n sbxCoreService.run(environment.cloudscripts.ibf_updateClaims,\n params, environment.testMode).then(res => {\n if (res.success) {\n cb(null, {success: true, claim: res, images: {}});\n } else {\n cb(new Error('There was an error, please try again.'));\n }\n }).catch(cb);\n } else {\n\n delete data.params.objImages\n sbxCoreService.run(environment.cloudscripts.ibf_updateClaims,\n data.params, environment.testMode).then(res => {\n\n if (res.success) {\n cb(null, {success: true, claim: res, images: {}});\n } else {\n cb(new Error('There was an error, please try again.'));\n }\n }).catch(cb)\n }\n\n },\n\n ], (err, res) => {\n if (err) {\n reject(err);\n } else {\n resolve(res);\n }\n });\n });\n\n\n }\n\n\n}\n\n","import AuthService from '../../Services/AuthService';\nimport * as ActionsType from './ActionsTypes';\nimport ClaimService from \"../../Services/ClaimService\";\n\nexport const validateToken = (token: string) => {\n return ({\n type: ActionsType.VALIDATE_TOKEN,\n payload: AuthService.validateToken(token)\n });\n};\n\nexport const openModal = (data: Object) => {\n return ({\n type: ActionsType.OPEN_MODAL,\n payload: data\n });\n};\n\nexport const closeModal = (data: Object) => {\n return ({\n type: ActionsType.CLOSE_MODAL,\n payload: data\n });\n};\n\nexport const cleanModal = (data: Object) => {\n return ({\n type: ActionsType.CLEAN_MODAL,\n payload: data\n });\n};\n\nexport const getCartboxForClaim = (customer: Object) => {\n return ({\n type: ActionsType.GET_CARTBOX_FOR_CLAIM,\n payload: ClaimService.getCartboxForClaim(customer)\n });\n};\n\nexport const getClaims = (user: Object, state, key = null) => {\n return ({\n type: ActionsType.GET_CLAIMS,\n payload: ClaimService.getClaims(user, state, key)\n });\n};\n\nexport const changeRoute = () => {\n return ({\n type: ActionsType.CHANGE_ROUTE,\n payload: null\n });\n};\n\nexport const getIdClaims = (id) => {\n return ({\n type: ActionsType.GET_ID_CLAIMS,\n payload: id\n })\n}\n\nexport const deleteIdClaims = (_KEY) => {\n return ({\n type: ActionsType.DELETE_CLAIM,\n payload: _KEY\n })\n}\n\nexport const getDetailClaim = (payload) => {\n return ({\n type: ActionsType.GET_DETAIL_CLAIM,\n payload\n })\n}\nexport const getEditClaim = (payload) => {\n return ({\n type: ActionsType.EDIT_DETAIL_CLAIM,\n payload\n })\n}\n\nexport const editImages=(payload) => {\n return({\n type:ActionsType.EDIT_IMAGES,\n payload\n })\n}\n\nexport const setLoading=(payload)=>{\n return({\n type:ActionsType.LOADING_CLAIMS,\n payload\n })\n}\n\n\n \n\n\n","export const CREATE_ARRIVED_CLAIM_MODAL = 'createArrivedClaimModal';\nexport const CREATE_NOT_ARRIVED_CLAIM_MODAL = 'createNotArrivedClaimModal';\nexport const SHOW_CLAIM_MODAL = 'showClaimModal';\n\nexport const CONFIRM_MODAL = 'confirmModal';\nexport const CONFIRM_MODAL_COMPONENT = 'confirmModalComponent'\nexport const BOX_NOT_ARRIVED_MODAL = \"boxNotArrivedModal\";\nexport const CONFIRM_CLAIM_REQUEST_MODAL = \"confirmClaimRequestModal\";\n","import React, {Component} from 'react';\nimport {connect} from 'react-redux';\nimport RequestClaimComponent from \"../../Presentational/RequestClaimComponent/RequestClaimComponent\";\nimport {bindActionCreators} from \"redux\";\nimport {getCartboxForClaim, openModal, cleanModal} from '../../../Redux/Actions/ActionsCreators';\nimport {CONFIRM_MODAL, CREATE_ARRIVED_CLAIM_MODAL, CREATE_NOT_ARRIVED_CLAIM_MODAL} from \"../../Shared/Modals/ModalTypes\";\n\n\nclass RequestClaimContainer extends Component {\n\n constructor(props) {\n super(props);\n this.requestClaim = this.requestClaim.bind(this);\n this.state = {\n cartbox: null\n };\n }\n\n askForArrivedBox(cartbox) {\n this.setState({cartbox});\n this.props.openModal({modal: CONFIRM_MODAL, data: {cartbox}});\n }\n\n requestClaim() {\n if (this.props.confirmModal.result !== null) {\n if (this.props.confirmModal.result) {\n this.props.openModal({modal: CREATE_ARRIVED_CLAIM_MODAL, data: this.state.cartbox});\n } else {\n this.props.openModal({modal: CREATE_NOT_ARRIVED_CLAIM_MODAL, data: this.state.cartbox});\n }\n }\n }\n\n componentDidMount(): void {\n this.props.getCartboxForClaim(this.props.customer);\n }\n\n componentDidUpdate(nextProps: Readonly, nextState: Readonly, nextContext: any): void {\n if(this.props.confirmModal.result !== null) {\n this.requestClaim();\n this.props.cleanModal({modal: CONFIRM_MODAL});\n }\n }\n\n render() {\n const {headers, orders, loading} = this.props;\n return (\n this.askForArrivedBox(cartbox)}/>\n )\n }\n\n}\n\nfunction mapStateToProps(state) {\n const {customer, user} = state.AuthReducer;\n const {headers, orders, loading} = state.ClaimReducer;\n const {confirmModal} = state.ModalReducer;\n return {\n customer: {...customer, ...user},\n user,\n headers,\n orders,\n loading,\n confirmModal\n };\n}\n\nfunction mapDispatchToProps(dispatch) {\n return bindActionCreators({\n getCartboxForClaim,\n openModal,\n cleanModal\n }, dispatch);\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(RequestClaimContainer);\n","import React from 'react';\n\nconst TableBodyComponent = ({rows}) => {\n return (\n \n {\n rows && rows.length ? rows.map((row, i) => {\n return \n {\n row.map((element, j) => {\n return \n {element.content}\n ;\n })\n }\n ;\n }) :\n \n \n No claims found\n \n \n }\n \n );\n};\n\nexport default TableBodyComponent;\n","import React, {Component} from 'react';\nimport {Table} from \"reactstrap\";\nimport TableHeaderComponent from \"./TableHeaderComponent/TableHeaderComponent\";\nimport TableBodyComponent from \"./TableBodyComponent/TableBodyComponent\";\n\nclass TableComponent extends Component {\n render() {\n const {headers, rows} = this.props;\n return (\n \n );\n }\n}\n\nexport default TableComponent;\n","import React, { Component, Fragment } from 'react';\nimport TableComponent from \"../TableComponent/TableComponent\";\nimport LoadingSpinnerComponent from \"../../Shared/LoadingSpinnerComponent/LoadingSpinnerComponent\";\nimport { SHOW_CLAIM_MODAL, CONFIRM_MODAL_COMPONENT } from '../../Shared/Modals/ModalTypes';\nimport { withRouter } from 'react-router-dom';\nimport { connect } from 'react-redux';\nimport { getIdClaims, openModal, deleteIdClaims, getClaims } from '../../../Redux/Actions/ActionsCreators'\nimport { bindActionCreators } from \"redux\";\nimport ClaimService from '../../../Services/ClaimService';\nimport { toast } from '../../../Services/AlertService';\nimport { Link } from 'react-router-dom'\nclass ClaimsComponent extends Component {\n\n handleClick(event, key) {\n event.preventDefault();\n this.props.openModal({ modal: SHOW_CLAIM_MODAL, data: key });\n }\n handleEdit(data) {\n this.props.getIdClaims(data[0].key)\n }\n handleDeleteClaim(_KEY) {\n ClaimService.deleteClaim(_KEY).then((res) => {\n if (res.success) {\n this.props.deleteIdClaims(_KEY)\n this.props.getClaims(this.props.user, 'Pending')\n toast(\"The claim has been deleted\", \"success\")\n }\n if (!res.success) {\n toast(`${res.error}`, \"error\")\n }\n\n }).catch((err) => {\n toast(`${err.message}`, \"error\")\n })\n }\n openModalConfirm = (_KEY) => {\n const data = {\n title: \"Delete claim\",\n text: \"Are you sure to eliminate this claim?\",\n okText: true,\n okClick: () => this.handleDeleteClaim(_KEY),\n }\n this.props.openModal({ modal: CONFIRM_MODAL_COMPONENT, data: data })\n\n }\n\n render() {\n\n \n const { headers, loading } = this.props;\n const claimRows = this.props.claimRows.map(row => {\n \n\n\n row[0].content = (\n \n
this.handleClick(e, row[0].key)} className=\"btn btn-link text-primary p-0\">\n {row[0].consecutive} \n {\n (this.props.location.pathname === \"/pending\"&& (this.props.user!==null&& this.props.user.metadata.from_manager)&& this.props.user.email===\"support@ibuyflowers.com\" )&&\n
\n this.openModalConfirm(row[0].key)}>Delete\n \n
\n\n }\n\n
\n {loading ? \n );\n }\n\n}\nconst mapStateToProps = (state) => {\n return {\n claims: state.ClaimReducer.claims,\n user: state.AuthReducer.user,\n }\n}\n\nfunction mapDispatchToProps(dispatch) {\n return bindActionCreators({ getIdClaims, openModal, deleteIdClaims, getClaims }, dispatch);\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withRouter(ClaimsComponent));\n","import React, {Component} from 'react';\nimport {connect} from 'react-redux';\nimport {bindActionCreators} from \"redux\";\nimport {getClaims, openModal} from \"../../../Redux/Actions/ActionsCreators\";\nimport ClaimsComponent from \"../../Presentational/ClaimsComponent/ClaimsComponent\";\n\nclass AcceptedClaimsContainer extends Component {\n\n componentDidMount(): void {\n this.props.getClaims(this.props.user, 'Accepted');\n }\n\n render() {\n const {claimRows, headers, loading, openModal} = this.props;\n return (\n Loading ... ,\n 'loaded': null,\n 'failed to load': Failed to load ,\n 'no image to load': {fileStatus} \n\n }\n return status[fileStatus]\n\n }\n return (\n \n {fileState !== \"loaded\" &&\n statusImage(fileState)\n }\n\n
setFileStatus('loaded')}\n onError={() => {\n setFileStatus('failed to load')\n setImageError()\n }}\n\n /> \n Loading ... ,\n 'loaded': null,\n 'failed to load': Failed to load ,\n 'no image to load': {this.state.fileStatus} \n\n }\n return status[fileStatus]\n\n }\n\n render() {\n\n\n return (\n <>\n {this.state.fileStatus !== \"loaded\" &&\n this.statusImage(this.state.fileStatus)\n }\n\n this.setFileStatus('loaded')}\n onError={() => {\n this.setFileStatus('failed to load')\n this.props.setImageError()\n }}\n\n /> \n \n )\n }\n}\n\n */","import RequestClaimContainer from \"../Components/Containers/RequestClaimContainer/RequestClaimContainer\";\nimport PendingClaimsContainer from \"../Components/Containers/PendingClaimsContainer/PendingClaimsContainer\";\nimport AcceptedClaimsContainer from \"../Components/Containers/AcceptedClaimsContainer/AcceptedClaimsContainer\";\nimport RejectedClaimsContainer from \"../Components/Containers/RejectedClaimsContainer/RejectedClaimsContainer\";\nimport EditClaimsContainer from '../Components/Containers/EditClaimsContainer/EditClaimsContainer'\nconst Routes = [\n {\n path: '/request',\n component: RequestClaimContainer,\n id: 1,\n exact: true\n },\n {\n path: '/pending',\n component: PendingClaimsContainer,\n id: 2\n },\n {\n path: '/accepted',\n component: AcceptedClaimsContainer,\n id: 3\n },\n {\n path: '/rejected',\n component: RejectedClaimsContainer,\n id: 4\n },\n {\n path: '/edit/:id',\n component: EditClaimsContainer,\n id:5,\n exact: true\n }\n];\n\nexport default Routes;\n","import React, { useEffect } from 'react'\nimport { getClaims, openModal } from \"../../../Redux/Actions/ActionsCreators\";\nimport ClaimsComponent from \"../../Presentational/ClaimsComponent/ClaimsComponent\";\nimport { useSelector, useDispatch } from 'react-redux';\n\n\nexport default function PendingClaimsContainer() {\n const dispatch = useDispatch();\n const user = useSelector(state => state.AuthReducer.user);\n const { headers, claimRows, loading } = useSelector(state => state.ClaimReducer);\n\n\n const getDataClaims = () => {\n dispatch(getClaims(user, 'Pending'))\n }\n\n useEffect(() => {\n getDataClaims()\n }, [])\n return (\n \n
\n )\n}\n","import React, { useEffect, useState } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport ClaimService from '../../../Services/ClaimService';\nimport { openModal, getDetailClaim } from '../../../Redux/Actions/ActionsCreators';\nimport { EDIT_CLAIMS_MODAL } from '../../../Redux/Actions/ActionsTypes'\nimport { ValidateObjectLength, roundUp } from '../../../Utils/Utilities';\nimport { toast } from '../../../Services/AlertService';\nimport LoadingSpinnerComponent from '../../Shared/LoadingSpinnerComponent/LoadingSpinnerComponent';\nimport ImageLoader from '../../Presentational/ClaimsComponent/ImageLoader';\n\n\n\n\n\nexport default function EditClaimsContainer(props) {\n\n\n const user = useSelector(state => state.AuthReducer.user);\n const claimsReason = useSelector(state => state.DataClaimsReducer.claimsReason)\n const images = useSelector(state => state.DataClaimsReducer.images)\n const dataClaims = props.match.params.id\n\n\n\n const [loading, setLoading] = useState(true);\n const dispatch = useDispatch();\n\n\n const getClaims = () => {\n if (user) {\n ClaimService.getClaim(user, dataClaims).then(claims => {\n\n setLoading(prev => !prev)\n dispatch(getDetailClaim(claims))\n\n\n }).catch(err => {\n toast(`${err.message}`, \"error\")\n });\n }\n\n }\n const onOpenModal = (data) => {\n dispatch(openModal({ modal: EDIT_CLAIMS_MODAL, data: { data } }))\n }\n\n useEffect(() => {\n if (dataClaims !== null) {\n getClaims()\n }\n }, [])\n\n\n return (\n <>\n Edit Claims \n {\n loading ? \n
\n :\n \n
\n Orden# -\n {ValidateObjectLength(claimsReason) && claimsReason.claim.consecutive}\n \n
\n\n\n
\n \n \n Product Group \n Images \n Reason \n Comment \n Total Claims \n Editar \n \n \n\n \n \n\n \n {ValidateObjectLength(claimsReason) && claimsReason.claim.cart_box.product_group.common_name}\n \n \n \n {ValidateObjectLength(claimsReason) &&\n images.length > 0 && images.filter(item => item.image !== \"\").map(item => {\n return (\n
\n
\n\n )\n\n })\n }\n
\n\n \n {ValidateObjectLength(claimsReason) &&\n\n claimsReason.claim_reasons\n .map((item, index) =>\n \n {index + 1}-{\n item.claim_reason.claim_reason} )\n }\n \n\n \n {ValidateObjectLength(claimsReason) && claimsReason.claim.comments}\n \n\n \n {ValidateObjectLength(claimsReason) && `$${roundUp(claimsReason.claim.total_claim)}`}\n \n\n \n {\n ValidateObjectLength(claimsReason) && onOpenModal(claimsReason)}>Editar\n \n }\n\n \n \n\n \n
\n
Opppps an error has occurs );\n } else {\n return this.props.children;\n }\n }\n}\n","import React, {Component} from 'react';\nimport {Button, Modal, ModalBody, ModalFooter, ModalHeader} from 'reactstrap';\n\nclass ModalComponent extends Component{\n render(){\n const {\n title, children, onClose, okText, okClick, cancelText, className, size, footerEnabled = true,\n customFooter, iconClassName = '', bodyClass\n } = this.props;\n return (\n \n \n \n \n \n {title}\n \n \n {children}\n \n {\n (footerEnabled && !customFooter) &&\n \n {okText && {okText || 'Continue'} }\n {cancelText && {cancelText} }\n \n }\n {!!customFooter && {customFooter} }\n \n
\n );\n }\n}\n\nexport default ModalComponent;\n","import React, {Component, Fragment} from 'react';\nimport ModalComponent from \"../ModalComponent\";\nimport {roundUp, convertNumberDateToFullDate} from \"../../../../Utils/Utilities\";\nimport LoadingSpinnerComponent from \"../../LoadingSpinnerComponent/LoadingSpinnerComponent\";\nimport ImageCompressor from 'image-compressor.js';\nimport ClaimService from \"../../../../Services/ClaimService\";\nimport {toast} from \"../../../../Services/AlertService\";\nimport loading from '../../../../Assets/Images/loading.gif';\nimport _ from 'lodash';\nimport ImageLoader from '../../../Presentational/ClaimsComponent/ImageLoader'\nclass ShowClaimComponent extends Component {\n\n constructor(props) {\n super(props);\n this.upload = this.upload.bind(this);\n this.uploadImage = this.uploadImage.bind(this);\n this.state = {\n images: []\n };\n }\n\n upload(event) {\n const inputEl = event.target;\n if (inputEl.files.length === 0) { return; }\n const files: FileList = inputEl.files;\n const imageCompressor = new ImageCompressor();\n this.setState(state => ({...state, images: [...state.images, loading]}));\n imageCompressor.compress(files[0], { quality: .6, maxWidth: 300 }).then((result: File) => {\n this.uploadImage(result);\n }).catch(() => {\n this.uploadImage(files[0]);\n });\n }\n\n uploadImage(image) {\n const blob = image.slice(0, image.size, 'image/png');\n const file = new File([blob], ClaimService.generateUUID() + '.png', {type: 'image/png'});\n ClaimService.uploadClaimImage(this.props.claim.claim_folder, file).then(() => {\n this.setState(state => {\n const images = _.cloneDeep(state.images);\n images[images.length - 1] = URL.createObjectURL(file);\n return {\n ...state,\n images: images\n };\n });\n toast('Image Upload successfully!', 'success');\n });\n }\n\n componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot: SS): void {\n const images = this.props.images;\n if (!this.state.images.length && images.length) {\n this.setState(state => ({...state, images: images}));\n }\n }\n\n render() {\n const {loading, claim, claim_reasons, onClose} = this.props;\n let title = `Claim Request`;\n if (!loading) {\n title = `Claim Request #${claim.consecutive} placed on ${convertNumberDateToFullDate(claim.claim_date)} to ${claim.cart_box.grower_obj ? claim.cart_box.grower_obj.company_name : claim.cart_box.grower.company_name} for Order #${claim.cart_box.consecutive}`;\n }\n\n return (\n \n {\n loading ?\n \n \n
\n
\n
Product description
\n
\n
\n
\n \n {`${claim.cart_box_item.product_group.common_name} ${claim.cart_box_item.variety.variety_name}${claim.cart_box_item.grade ? ' ' + claim.cart_box_item.grade.grade : ''}`}\n Length: {claim.cart_box.length} cm Units to be claimed: {claim.total_units_to_be_claimed}
\n
\n
\n
Total Claim \n
\n ${roundUp(claim.total_claim)}\n
\n
\n
\n
\n
Comments: {claim.comments || 'no comments'}\n
\n
\n
\n
\n
\n
Claim reasons
\n
\n
\n {\n claim_reasons.map(reason => (\n {reason.claim_reason.claim_reason} \n ))\n }\n \n
\n
\n
\n
\n
\n
\n Attached photos \n {\n claim.state === 'Pending' &&\n \n Upload new photo\n \n }\n
\n
\n
\n
\n {\n this.state.images.map((image, i) => (\n
\n \n
\n ))\n }\n
\n
\n
\n }\n \n );\n }\n\n}\n\nexport default ShowClaimComponent;\n","import React, {Component} from 'react';\nimport ShowClaimComponent from \"./ShowClaimComponent\";\nimport {SHOW_CLAIM_MODAL} from '../ModalTypes';\nimport {bindActionCreators} from 'redux';\nimport {closeModal} from '../../../../Redux/Actions/ActionsCreators';\nimport {connect} from \"react-redux\";\nimport ClaimService from \"../../../../Services/ClaimService\";\n\nclass ShowClaimContainer extends Component {\n\n state = {\n loading: true,\n claim: {},\n claim_reasons: [],\n images: []\n };\n\n componentDidMount(){\n ClaimService.getClaim(this.props.user, this.props.showClaimModal.data).then(box => {\n this.setState((state) => ({...state, loading: false, ...box}));\n }).catch(err => {\n console.log(err);\n });\n }\n\n render() {\n return (\n this.props.closeModal({modal: SHOW_CLAIM_MODAL})}/>\n );\n }\n\n}\n\nfunction mapStateToProps(state){\n const {showClaimModal} = state.ModalReducer;\n const {user} = state.AuthReducer;\n return {showClaimModal, user};\n}\n\nfunction mapDispatchToProps(dispatch) {\n return bindActionCreators({closeModal}, dispatch);\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ShowClaimContainer);\n","import React, {Component, Fragment} from 'react';\nimport {toast} from '../../../../../Services/AlertService';\nimport fedexCode from '../../../../../Assets/Images/fedexCode.png';\nimport farmImage from '../../../../../Assets/Images/farm.png';\nimport ImageLoader from '../../../../Presentational/ClaimsComponent/ImageLoader'\nimport ClaimService from \"../../../../../Services/ClaimService\";\n\nclass PhotosComponent extends Component {\n\n constructor(props) {\n super(props);\n this.upload = this.upload.bind(this);\n this.addMoreImage = this.addMoreImage.bind(this);\n this.state = {\n addExtra: true,\n extra_photos: [],\n images: {},\n\n };\n }\n\n componentDidMount() {\n this.setState(state => ({...state, images: this.props.images}));\n\n\n }\n\n setImageError(imageId) {\n this.setState(state => {\n delete state.images[imageId]\n return state;\n })\n toast(\"The image uploaded has an error.\", \"error\")\n }\n\n upload(event, num) {\n const inputEl = event.target;\n const match = inputEl.value.match(/.([^.]+)$/);\n\n if (match && match[1]) {\n \n\n const ext = match[1];\n if (inputEl.files.length === 0) {\n return;\n }\n\n if (ext && [\"png\", \"jpg\", \"jpeg\"].indexOf(ext.toLowerCase()) === -1) {\n event.target.value = \"\";\n toast(\"File format not allowed\", \"error\");\n return\n }\n this.props.changeImageStatus(num - 1)\n const files = inputEl.files;\n const formData = new FormData()\n formData.append(\"image\", files[0])\n \n toast(\"Loading image...\", \"info\")\n ClaimService.uploadImageService(formData).then(result => {\n const file = new File([result.data], files[0].name)\n this.setState(state => {\n const change = {\n ...state.images,\n [`photo${num}`]: file\n }\n this.props.onInputChange({target: {name: 'images', value: change}});\n return {\n ...state,\n images: change\n }\n });\n })\n // const imageCompressor = new ImageCompressor();\n //\n //\n //\n // imageCompressor.compress(files[0], { quality: .6, maxWidth: 300 }).then((result) => {\n // this.setState(state => {\n //\n // const change = {\n // ...state.images,\n // [`photo${num}`]: result\n // }\n // this.props.onInputChange({ target: { name: 'images', value: change } });\n // return {\n // ...state,\n // images: change\n // }\n // });\n // }).catch(() => {\n // this.setState(state => {\n // const change = {\n // ...state.images,\n // [`photo${num}`]: files[0]\n // };\n // this.props.onInputChange({ target: { name: 'images', value: change } });\n // return {\n // ...state,\n // images: change\n // }\n // });\n // });\n }else{\n toast(\"Invalid file format\", \"error\");\n }\n \n \n }\n\n addMoreImage() {\n const last = this.state.extra_photos.length > 0 ? this.state.extra_photos[this.state.extra_photos.length - 1] : 3;\n this.setState(state => ({...state, extra_photos: [...state.extra_photos, last + 1]}));\n if (this.state.extra_photos.length === 2) {\n this.setState({addExtra: false})\n }\n }\n\n\n render() {\n\n\n return (\n \n \n
\n
1. Upload a readable photo of the Farm box label incl the\n flower names: \n
\n {\n this.state.images.hasOwnProperty('photo1') ?\n
\n\n\n this.setImageError(\"photo1\")} src={URL.createObjectURL(this.state.images['photo1'])}\n alt={\"photo1\"}\n className=\"img-thumbnail w-100\"\n\n />\n\n\n
:\n
\n
\n
\n }\n
\n Please upload a photo to continue. }\n
\n
\n
\n
\n
2. Upload a readable photo of the FedEx label incl address\n and CRN code: \n
\n {\n this.state.images.hasOwnProperty('photo2') ?\n
\n\n\n this.setImageError(\"photo2\")} src={URL.createObjectURL(this.state.images['photo2'])}\n alt={\"photo2\"}\n className=\"img-thumbnail w-100\"\n\n />\n\n
:\n
\n
\n
\n }\n
\n Please upload a photo to continue. }\n
\n
\n
\n\n
\n
3. Upload at least 4 photos that capture all the damaged stems to be claimed: \n
\n {\n this.state.images.hasOwnProperty('photo3') &&\n
\n\n this.setImageError(\"photo3\")} src={URL.createObjectURL(this.state.images['photo3'])}\n alt={\"photo3\"}\n className=\"img-thumbnail w-100\"\n />\n\n
\n }\n
\n Please upload a photo to continue. }\n
\n
\n
\n {\n this.state.extra_photos.map((extra, i) => (\n
\n
Product to be claimed \n
\n {\n this.state.images.hasOwnProperty(`photo${extra}`) &&\n
\n
\n }\n this.upload(e, extra)} accept=\"image/*\"/>\n
\n
\n ))\n }\n\n {this.state.addExtra && !this.props.saving &&
\n Add More \n
}\n
\n );\n }\n}\n\n\nexport default PhotosComponent\n\n","import React, {Component, Fragment} from 'react';\n\nclass ReasonsComponent extends Component {\n\n constructor(props) {\n super(props);\n this.onChange = this.onChange.bind(this);\n this.state = {\n reasons: []\n };\n }\n\n componentDidMount(): void {\n if (this.props.reasons.length) {\n this.setState(state => ({...state, reasons: this.props.reasons}));\n }\n }\n\n onChange(index) {\n this.setState(state => {\n const newValues = state.reasons.map((item, i) => {\n if (i === index) {\n item.is_selected = !item.is_selected;\n }\n return item;\n });\n this.props.onInputChange({target: {name: 'reasons', value: newValues}});\n return {\n ...state,\n reasons: newValues\n }\n });\n }\n\n render() {\n return (\n \n Claim reason (multiple options can be chosen): \n \n {\n this.state.reasons.map((reason, i) => (\n
\n \n \n
\n ))\n }\n
\n );\n }\n}\n\nexport default ReasonsComponent;\n","import React, {Component, Fragment} from 'react';\nimport ClaimService from \"../../../../../Services/ClaimService\";\nimport {roundUp} from \"../../../../../Utils/Utilities\";\nimport _ from 'lodash';\n\nclass ProductsAndCommentComponent extends Component {\n constructor(props) {\n super(props);\n this.addProduct = this.addProduct.bind(this);\n this.getPossibleList = this.getPossibleList.bind(this);\n this.productChange = this.productChange.bind(this);\n this.adjustClaimItem = this.adjustClaimItem.bind(this);\n this.removeProduct = this.removeProduct.bind(this);\n this.state = {\n claim_items: []\n };\n }\n\n addProduct() {\n const ciHelper = this.state.claim_items.map(ci => ci.cart_box_item);\n const index = this.props.cartbox.items.findIndex(item => !ciHelper.includes(item._KEY));\n this.setState(state => ({...state, claim_items: [...state.claim_items, this.calculateThings(index)]}));\n }\n\n productChange(event, i) {\n const index = this.props.cartbox.items.findIndex(item => item._KEY === event.target.value);\n this.setState(state => {\n return {\n ...state,\n claim_items: state.claim_items.map((item, j) => {\n if (i === j) {\n item = this.calculateThings(index);\n }\n return item;\n })\n }\n });\n }\n\n adjustClaimItem(event, index) {\n const value = parseInt(event.target.value);\n this.setState(state => {\n const newValues = state.claim_items.map((item, i) => {\n if (i === index) {\n item.units = value;\n item.subtotal = item.units * item.unit_price;\n }\n return item;\n });\n this.props.onInputChange({target: {name: 'claim_items', value: newValues}});\n return {\n ...state,\n claim_items: newValues\n }\n });\n }\n\n removeProduct(index) {\n this.setState(state => ({...state, claim_items: state.claim_items.filter((_, i) => i !== index)}));\n }\n\n getPossibleList(current_ci) {\n const ciHelper = this.state.claim_items.map(ci => ci.cart_box_item);\n return this.props.cartbox.items.filter(item => !ciHelper.includes(item._KEY) || current_ci.cart_box_item === item._KEY);\n }\n\n calculateThings(index) {\n const aux = {\n unit_price: 0,\n units: 1,\n num_items: [],\n cart_box_item: '',\n top_message: 'Bunches',\n spb: 1,\n subtotal: 0,\n id: ClaimService.generateUUID()\n };\n aux.cart_box_item = this.props.cartbox.items[index]._KEY;\n if (this.props.cartbox.items[index].uom.uom === 'stem') {\n aux.top_message = 'Stems';\n \n }\n aux.spb = this.props.cartbox.items[index].stems_per_bunch.stems_per_bunch;\n \n aux.unit_price = this.props.cartbox.items[index].price / aux.spb;\n const claimed = this.props.cartbox.items[index].claimed ? this.props.cartbox.items[index].claimed > 0 ? 0 : 0 :0\n const quantity = (this.props.cartbox.items[index].quantity * aux.spb) - claimed;\n for (let i = 1; i <= quantity; i++) {\n aux.num_items.push(i);\n }\n\n\n\n\n aux.subtotal = aux.unit_price;\n return aux;\n }\n\n componentDidMount(): void {\n if(this.props.claim_items.length) {\n this.setState(state => ({...state, claim_items: this.props.claim_items}))\n } else {\n this.addProduct();\n }\n }\n\n componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot: SS): void {\n if (!_.isEqual(prevState.claim_items, this.state.claim_items)) {\n this.props.onInputChange({target: {name: 'claim_items', value: this.state.claim_items}});\n }\n }\n\n getLabelOfNumItems(item, index) {\n let lastPart = '';\n if (item % this.state.claim_items[index].spb === 0) {\n const num = (item / this.state.claim_items[index].spb);\n lastPart = ` - ${ProductsAndCommentComponent.bunchPluralizer(num)}`;\n }\n return `${ProductsAndCommentComponent.stemPluralizer(item)}${lastPart}`;\n }\n\n static bunchPluralizer(num) {\n return `(${num} Bunch${ num > 1 ? 'es' : ''})`;\n }\n\n static stemPluralizer(num) {\n return `${num} Stem${ num > 1 ? 's' : ''}`;\n }\n\n render() {\n const cartbox = this.props.cartbox;\n\n return (\n \n {\n this.state.claim_items.map((claim_item, i) => (\n \n
\n Product variety: \n this.productChange(e, i)}>\n \n {\n this.getPossibleList(claim_item).map((item, j) => (\n \n {`${item.product_group.common_name} ${item.variety.variety_name}${item.grade ? ' ' + item.grade.grade : ''}`}\n \n ))\n }\n \n \n
\n\n
\n {claim_item.top_message} to be claimed: \n this.adjustClaimItem(e, i)}>\n \n {\n claim_item.num_items.map((item, j) => (\n \n {this.getLabelOfNumItems(item, i)}\n \n ))\n }\n \n \n
\n\n
\n Subtotal claim: \n
\n\n
\n \n this.removeProduct(i)} disabled={this.state.claim_items.length === 1}>\n \n
\n
\n
\n Add Another Product \n
\n
