\r\n \r\n
\r\n
\r\n Sumber\r\n
\r\n
\r\n {prt.AccReceivableSrc}\r\n
\r\n
\r\n
\r\n
\r\n PIC Kantor\r\n
\r\n
\r\n {prt.KantorPenagih}\r\n
\r\n
\r\n
\r\n
\r\n Tertagih\r\n
\r\n
\r\n {prt.CustName}\r\n
\r\n
\r\n
\r\n
\r\n Status Tertagih\r\n
\r\n
\r\n {prt.AccReceivableType}\r\n
\r\n
\r\n
\r\n
\r\n Status Tagihan\r\n
\r\n
\r\n {prt.AccReceivableStat}\r\n
\r\n
\r\n
\r\n
\r\n Tagihan\r\n
\r\n
\r\n {prt.FinalAccReceivableAmt.toLocaleString(\"en\", { minimumFractionDigits: 0 })}\r\n
\r\n
\r\n
\r\n
\r\n Jumlah Bayar\r\n
\r\n
\r\n {prt.RcvAmt?.toLocaleString(\"en\", { minimumFractionDigits: 0 })}\r\n
\r\n
\r\n
\r\n
\r\n Kasir\r\n
\r\n
\r\n {prt.PayCashierName}\r\n
\r\n
\r\n
\r\n
\r\n Tanggal Bayar\r\n
\r\n
\r\n {prt.ValueDt != null && moment(prt.ValueDt).format(\"DD MMM YY HH:mm:ss\")}\r\n
\r\n
\r\n
\r\n
\r\n Tanggal Input\r\n
\r\n
\r\n {prt.PostingDt != null && moment(prt.PostingDt).format(\"DD MMM YY HH:mm:ss\")}\r\n
\r\n
\r\n
\r\n
\r\n PIC\r\n
\r\n
\r\n {prt.UsrCrt}\r\n
\r\n
\r\n
\r\n
\r\n Tanggal Terbit\r\n
\r\n
\r\n {moment(prt.DtmCrt).format(\"DD MMM YY HH:mm:ss\")}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n History Pembayaran Cabang \r\n
\r\n {resiHView.PaymentReconTrxHs &&\r\n resiHView.PaymentReconTrxHs.length > 0 && resiHView.PaymentReconTrxHs.map((prth, idx) => (\r\n
\r\n \r\n
\r\n
\r\n PIC Kantor\r\n
\r\n
\r\n {prth.KantorPenagih}\r\n
\r\n
\r\n
\r\n
\r\n Status Bayar\r\n
\r\n
\r\n {prth.PaymentReconStat}\r\n
\r\n
\r\n
\r\n
\r\n Tagihan\r\n
\r\n
\r\n {prth.PaymentAmt.toLocaleString(\"en\", { minimumFractionDigits: 0 })}\r\n
\r\n
\r\n
\r\n
\r\n Charge\r\n
\r\n
\r\n {prth.ChargeAmt.toLocaleString(\"en\", { minimumFractionDigits: 0 })}\r\n
\r\n
\r\n
\r\n
\r\n Tanggal Bayar\r\n
\r\n
\r\n {moment(prth.ValueDt).format(\"DD MMM YY HH:mm:ss\")}\r\n
\r\n
\r\n
\r\n
\r\n Pelapor\r\n
\r\n
\r\n {prth.EmployeeName}\r\n
\r\n
\r\n
\r\n
\r\n Tanggal Lapor\r\n
\r\n
\r\n {moment(prth.PostingDt).format(\"DD MMM YY HH:mm:ss\")}\r\n
\r\n
\r\n
\r\n
\r\n Verifikasi Oleh\r\n
\r\n
\r\n {prth.ReconBy}\r\n
\r\n
\r\n
\r\n
\r\n Tanggal Verifikasi\r\n
\r\n
\r\n {moment(prth.ReconDt).format(\"DD MMM YY HH:mm:ss\")}\r\n
\r\n
\r\n
\r\n ))}\r\n
\r\n
\r\n
\r\n Tagih Tujuan Tolak \r\n
\r\n {resiHView.UpdCustPayTrxs &&\r\n resiHView.UpdCustPayTrxs.length > 0 && resiHView.UpdCustPayTrxs.map((ucpt, idx) => (\r\n
\r\n \r\n
\r\n
\r\n Tanggal Tolak\r\n
\r\n
\r\n {moment(ucpt.UpdDt).format(\"DD MMM YY HH:mm:ss\")}\r\n
\r\n
\r\n
\r\n
\r\n User Tolak\r\n
\r\n
\r\n {ucpt.UserTolak}\r\n
\r\n
\r\n
\r\n
\r\n Keterangan\r\n
\r\n
\r\n {ucpt.UpdNotes}\r\n
\r\n
\r\n
\r\n
\r\n Tanggal Konfirmasi\r\n
\r\n
\r\n {moment(ucpt.ApproveDt).format(\"DD MMM YY HH:mm:ss\")}\r\n
\r\n
\r\n
\r\n
\r\n User Konfirmasi\r\n
\r\n
\r\n {ucpt.UserKonfirmasi}\r\n
\r\n
\r\n
\r\n
\r\n Status\r\n
\r\n
\r\n {ucpt.UpdCustPayTrxStat}\r\n
\r\n
\r\n
\r\n ))}\r\n
\r\n
\r\n
\r\n History Update Tagihan Customer \r\n
\r\n {resiHView.CustInvoiceInfos &&\r\n resiHView.CustInvoiceInfos.length > 0 && resiHView.CustInvoiceInfos.map((cii, idx) => (\r\n
\r\n \r\n
\r\n
\r\n Tanggal Update\r\n
\r\n
\r\n {moment(cii.PostingDt).format(\"DD MMM YY HH:mm:ss\")}\r\n
\r\n
\r\n
\r\n
\r\n Karyawan\r\n
\r\n
\r\n {cii.EmployeeName}\r\n
\r\n
\r\n
\r\n
\r\n Tagihan Lama\r\n
\r\n
\r\n {cii.OldMustBePaidAmt.toLocaleString(\"en\", { minimumFractionDigits: 0 })}\r\n
\r\n
\r\n
\r\n
\r\n Tagihan Baru\r\n
\r\n
\r\n {cii.MustBePaidAmt.toLocaleString(\"en\", { minimumFractionDigits: 0 })}\r\n
\r\n
\r\n
\r\n
\r\n Keterangan\r\n
\r\n
\r\n {cii.UpdNotes}\r\n
\r\n
\r\n
\r\n ))}\r\n
\r\n
\r\n
\r\n History Update Tagihan Cabang \r\n
\r\n {resiHView.OfficeInvoiceTrxs &&\r\n resiHView.OfficeInvoiceTrxs.length > 0 && resiHView.OfficeInvoiceTrxs.map((oit, idx) => (\r\n
\r\n \r\n
\r\n
\r\n Kantor Tertagih\r\n
\r\n
\r\n {oit.KantorPenagih}\r\n
\r\n
\r\n
\r\n
\r\n Tanggal Update\r\n
\r\n
\r\n {moment(oit.PostingDt).format(\"DD MMM YY HH:mm:ss\")}\r\n
\r\n
\r\n
\r\n
\r\n Karyawan\r\n
\r\n
\r\n {oit.EmployeeName}\r\n
\r\n
\r\n
\r\n
\r\n Tagihan Lama\r\n
\r\n
\r\n {oit.OldPaymentAmt.toLocaleString(\"en\", { minimumFractionDigits: 0 })}\r\n
\r\n
\r\n
\r\n
\r\n Charge Lama\r\n
\r\n
\r\n {oit.OldChargeAmt.toLocaleString(\"en\", { minimumFractionDigits: 0 })}\r\n
\r\n
\r\n
\r\n
\r\n Tagihan Baru\r\n
\r\n
\r\n {oit.PaymentAmt.toLocaleString(\"en\", { minimumFractionDigits: 0 })}\r\n
\r\n
\r\n
\r\n
\r\n Charge Baru\r\n
\r\n
\r\n {oit.ChargeAmt.toLocaleString(\"en\", { minimumFractionDigits: 0 })}\r\n
\r\n
\r\n
\r\n
\r\n Keterangan\r\n
\r\n
\r\n {oit.AdjustNotes}\r\n
\r\n
\r\n
\r\n ))}\r\n {/* {resiHView.OfficeInvoiceTrxs &&\r\n resiHView.OfficeInvoiceTrxs.length > 0 && (\r\n
\r\n \r\n \r\n Kantor Tertagih \r\n Tanggal Update \r\n Karyawan \r\n Tagihan Lama \r\n Charge Lama \r\n Tagihan Baru \r\n Charge Baru \r\n Keterangan \r\n \r\n \r\n \r\n {resiHView.OfficeInvoiceTrxs.map((oit) => (\r\n \r\n {oit.KantorPenagih} \r\n {moment(oit.PostingDt).format(\"DD MMM YY HH:mm:ss\")} \r\n {oit.EmployeeName} \r\n {oit.OldPaymentAmt.toLocaleString(\"en\", { minimumFractionDigits: 0 })} \r\n {oit.OldChargeAmt.toLocaleString(\"en\", { minimumFractionDigits: 0 })} \r\n {oit.PaymentAmt.toLocaleString(\"en\", { minimumFractionDigits: 0 })} \r\n {oit.ChargeAmt.toLocaleString(\"en\", { minimumFractionDigits: 0 })} \r\n {oit.AdjustNotes} \r\n \r\n ))}\r\n \r\n \r\n )} */}\r\n \r\n {resiScanImg.Images.length == 0 &&
Resi Scan (BELUM ADA)
}\r\n {resiScanImg.Images.length > 0 && (\r\n <>\r\n {/*
*/}\r\n
Does not support PDFs. Download the PDF .
\r\n \r\n )}\r\n
\r\n {resiHView.PODImageFiles.map((pif, idx) => (\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n {`Tanggal Foto: ${pif.StoreDt}`}\r\n \r\n \r\n {`Diupload Oleh: ${pif.StoreBy}`}\r\n \r\n
\r\n
\r\n {\r\n setMobileModalStates((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }));\r\n }}\r\n type=\"button\"\r\n className=\"mx-3 my-2 py-2 px-4 border border-transparent font-medium rounded-full text-white bg-red-600\"\r\n >\r\n Lihat Foto POD\r\n \r\n
\r\n
\r\n
{\r\n setMobileModalStates((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }));\r\n }}\r\n centered={true}\r\n >\r\n {\r\n setMobileModalStates((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }));\r\n }}\r\n >\r\n POD Detail\r\n \r\n \r\n \r\n \r\n \r\n
\r\n ))}\r\n
\r\n
\r\n
\r\n
\r\n
PICKUP REQUEST VIEW \r\n \r\n
\r\n {pickupReqView && (\r\n <>\r\n
\r\n No Pickup \r\n \r\n {pickupReqView.PickupReqNo}\r\n \r\n \r\n {pickupReqView.PickupReqSrc}\r\n \r\n Requestor \r\n {pickupReqView.Requestor} \r\n
\r\n
\r\n Contact Person \r\n \r\n {pickupReqView.ContactPerson}\r\n \r\n No Handphone \r\n {pickupReqView.PhoneNo} \r\n
\r\n
\r\n Alamat \r\n \r\n {pickupReqView.Addr}\r\n \r\n
\r\n
\r\n \r\n Estimasi Berat (Kg)\r\n \r\n {pickupReqView.EstWeight} \r\n Jumlah Barang \r\n {pickupReqView.TotalItem} \r\n
\r\n
\r\n \r\n Catatan Request Pickup\r\n \r\n \r\n {pickupReqView.PickupNotes}\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n Percobaan Pickup Ke\r\n \r\n \r\n {pickupReqView.PickupAttempt}\r\n \r\n
\r\n
\r\n Status Request \r\n \r\n {pickupReqView.PickupReqStat}\r\n \r\n Hasil Pickup \r\n
\r\n
\r\n \r\n Catatan Hasil Pickup\r\n \r\n
\r\n
\r\n
\r\n
\r\n {pickupReqView.ListPickupResiNo &&\r\n pickupReqView.ListPickupResiNo.length > 0 && (\r\n
\r\n \r\n \r\n No Resi \r\n \r\n \r\n \r\n {pickupReqView.ListPickupResiNo.map((lprn) => (\r\n \r\n {lprn} \r\n \r\n ))}\r\n \r\n \r\n )}\r\n \r\n \r\n )}\r\n
\r\n
\r\n viewInfo(\"pickupOrder\")}\r\n className=\"flex-grow group relative inline-flex justify-center items-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out\"\r\n >\r\n Pickup Order\r\n \r\n viewInfo(\"fotoPickupRequest\")}\r\n className=\"flex-grow group relative inline-flex justify-center items-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out\"\r\n >\r\n Foto Pickup Request\r\n \r\n viewInfo(\"pickupTracking\")}\r\n className=\"flex-grow group relative inline-flex justify-center items-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out\"\r\n >\r\n Pickup Tracking\r\n \r\n
\r\n
\r\n {isOpen === \"pickupOrder\" && (\r\n
\r\n
\r\n
\r\n Info Pickup \r\n
\r\n {pickupReqView && pickupReqView.LastPickupOrder && (\r\n
\r\n
\r\n \r\n Waktu Penugasan\r\n \r\n \r\n {moment(pickupReqView.LastPickupOrder?.OrderDt).format(\r\n \"DD MMM YY - HH:mm\"\r\n )}\r\n \r\n \r\n Status Order\r\n \r\n \r\n {pickupReqView.LastPickupOrder.PickupOrderHStat}\r\n \r\n
\r\n
\r\n PIC Kantor \r\n \r\n {pickupReqView.LastPickupOrder.PICOfficeCode}\r\n \r\n Driver \r\n \r\n {pickupReqView.LastPickupOrder.DriverName}\r\n \r\n
\r\n
\r\n \r\n Alamat Penugasan\r\n \r\n \r\n {pickupReqView.LastPickupOrder.Addr}\r\n \r\n \r\n Contact Person\r\n \r\n \r\n {pickupReqView.LastPickupOrder.ContactPerson}\r\n \r\n
\r\n
\r\n Catatan \r\n \r\n {pickupReqView.LastPickupOrder.OrderNotes}\r\n \r\n
\r\n
\r\n )}\r\n
\r\n
\r\n
\r\n Foto Proses Pickup \r\n
\r\n {pickupReqView &&\r\n pickupReqView.PickupResultPhotos &&\r\n pickupReqView.PickupResultPhotos.map((prp, idx) => (\r\n
\r\n
\r\n
{\r\n setWebPickupResultPhotos((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }))\r\n }}\r\n src={prp.ImageFile}\r\n alt=\"PickupResultPhoto\"\r\n >\r\n \r\n \r\n Tanggal Foto\r\n \r\n :{prp.StoreDt} \r\n \r\n Diupload Oleh\r\n \r\n :{prp.StoreBy} \r\n
\r\n \r\n
{\r\n setWebPickupResultPhotos((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }))\r\n }}\r\n >\r\n {\r\n setWebPickupResultPhotos((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }))\r\n }}>Detail \r\n \r\n \r\n
\r\n
\r\n \r\n {prp.PickupReqNo}\r\n \r\n \r\n {prp.Requestor}\r\n \r\n
Tanggal Foto \r\n \r\n :{prp.StoreDt}\r\n \r\n \r\n Diupload Oleh\r\n \r\n \r\n :{prp.StoreBy}\r\n \r\n Lokasi Foto \r\n \r\n :{`${prp.Lattitude},${prp.Longitude}`}\r\n \r\n \r\n
\r\n \r\n
\r\n ))}\r\n
\r\n
\r\n
\r\n \r\n Foto Summary Pickup\r\n \r\n
\r\n {pickupReqView &&\r\n pickupReqView.PickupSummaryPhotos &&\r\n pickupReqView.PickupSummaryPhotos.map((psp, idx) => (\r\n
\r\n
\r\n
{\r\n setWebPickupSummaryPhotos((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }))\r\n }}\r\n src={psp.ImageFile}\r\n alt=\"PickupSummaryPhoto\"\r\n >\r\n \r\n \r\n Tanggal Foto\r\n \r\n :{psp.StoreDt} \r\n \r\n Diupload Oleh\r\n \r\n :{psp.StoreBy} \r\n
\r\n \r\n
{\r\n setWebPickupSummaryPhotos((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }))\r\n }}>\r\n {\r\n setWebPickupSummaryPhotos((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }))\r\n }}>Detail \r\n \r\n \r\n
\r\n
\r\n \r\n {psp.PickupReqNo}\r\n \r\n \r\n {psp.Requestor}\r\n \r\n
Tanggal Foto \r\n \r\n :{psp.StoreDt}\r\n \r\n \r\n Diupload Oleh\r\n \r\n \r\n :{psp.StoreBy}\r\n \r\n Lokasi Foto \r\n \r\n :{`${psp.Lattitude},${psp.Longitude}`}\r\n \r\n \r\n
\r\n \r\n
\r\n ))}\r\n
\r\n
\r\n
\r\n \r\n History Percobaan Pickup\r\n \r\n
\r\n {pickupReqView &&\r\n pickupReqView.PickupOrderHistories &&\r\n pickupReqView.PickupOrderHistories.length > 0 && (\r\n
\r\n \r\n \r\n Kantor \r\n Tanggal Order \r\n Diassign Oleh \r\n Driver \r\n Tanggal Pickup \r\n Status \r\n Catatan \r\n \r\n \r\n \r\n {pickupReqView.PickupOrderHistories.map((poh) => (\r\n \r\n {poh.OfficeCode} \r\n \r\n {moment(poh.OrderDt).format(\"DD-MM-YY HH:mm\")}\r\n \r\n {poh.AssignBy} \r\n {poh.Driver} \r\n \r\n {moment(poh.PickupDt).format(\"DD-MM-YY HH:mm\")}\r\n \r\n {poh.PickupOrderHStat} \r\n {poh.WorkNotes} \r\n \r\n ))}\r\n \r\n \r\n )}\r\n \r\n
\r\n )}\r\n {isOpen === \"fotoPickupRequest\" && (\r\n
\r\n
\r\n {pickupReqView &&\r\n pickupReqView.PickupReqPhotos &&\r\n pickupReqView.PickupReqPhotos.map((prp, idx) => (\r\n
\r\n
\r\n
{\r\n setWebPickupReqPhotos((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }))\r\n }}\r\n src={prp.ImageFile}\r\n alt=\"PickupReqPhoto\"\r\n >\r\n \r\n \r\n Tanggal Foto\r\n \r\n :{prp.StoreDt} \r\n \r\n Diupload Oleh\r\n \r\n :{prp.StoreBy} \r\n
\r\n \r\n
{\r\n setWebPickupReqPhotos((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }))\r\n }}>\r\n {\r\n setWebPickupReqPhotos((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }))\r\n }}>Detail \r\n \r\n \r\n
\r\n
\r\n \r\n {prp.PickupReqNo}\r\n \r\n \r\n {prp.Requestor}\r\n \r\n
Tanggal Foto \r\n \r\n :{prp.StoreDt}\r\n \r\n \r\n Diupload Oleh\r\n \r\n \r\n :{prp.StoreBy}\r\n \r\n Lokasi Foto \r\n \r\n :{`${prp.Lattitude},${prp.Longitude}`}\r\n \r\n \r\n
\r\n \r\n
\r\n ))}\r\n
\r\n
\r\n )}\r\n {isOpen === \"pickupTracking\" && (\r\n
\r\n
\r\n {pickupReqView &&\r\n pickupReqView.PickupRequestTrackings &&\r\n pickupReqView.PickupRequestTrackings.length > 0 && (\r\n
\r\n \r\n \r\n Tanggal \r\n Tipe \r\n Sumber \r\n Catatan Tracking \r\n PIC \r\n \r\n \r\n \r\n {pickupReqView.PickupRequestTrackings.map((prt) => (\r\n \r\n \r\n {moment(prt.InputDt).format(\r\n \"DD MMMM YY - HH:mm\"\r\n )}\r\n \r\n {prt.TrackType} \r\n {prt.TrackSrc} \r\n {prt.TrackNotes} \r\n {prt.UsrCrt} \r\n \r\n ))}\r\n \r\n \r\n )}\r\n \r\n
\r\n )}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Pickup Request View\r\n \r\n \r\n
\r\n {pickupReqView && (\r\n <>\r\n
\r\n
\r\n
\r\n No Pickup \r\n {pickupReqView.Requestor} \r\n
\r\n
\r\n \r\n {`${pickupReqView.PickupReqNo} `}\r\n \r\n copyToClipboard(e, pickupReqView.PickupReqNo)\r\n }\r\n style={{ display: \"inline-block\" }}\r\n />\r\n \r\n {`${pickupReqView.TotalItem} Koli, ${pickupReqView.EstWeight} Kg `} \r\n
\r\n
\r\n
\r\n
\r\n \r\n Contact Person\r\n \r\n \r\n {`${pickupReqView.ContactPerson} - ${pickupReqView.PhoneNo} `}\r\n \r\n
\r\n
\r\n Address \r\n \r\n {pickupReqView.Addr}\r\n \r\n
\r\n
\r\n \r\n Catatan Request Pickup\r\n \r\n \r\n {pickupReqView.PickupNotes}\r\n \r\n
\r\n
\r\n
\r\n \r\n Percobaan Pickup ke\r\n \r\n \r\n {pickupReqView.PickupAttempt}\r\n \r\n
\r\n
\r\n \r\n Status Request\r\n \r\n \r\n {pickupReqView.PickupReqStat}\r\n \r\n
\r\n
\r\n \r\n Catatan Hasil Pickup\r\n \r\n \r\n {pickupReqView.PickupNotes}\r\n \r\n
\r\n
\r\n
\r\n viewInfo(\"pickupOrder\")}\r\n className=\"w-24 group relative inline-flex justify-center items-center py-1 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 active:bg-indigo-700 transition duration-150 ease-in-out\"\r\n >\r\n Pickup Order\r\n \r\n viewInfo(\"fotoPickupRequest\")}\r\n className=\"w-24 group relative inline-flex justify-center items-center py-1 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 active:bg-indigo-700 transition duration-150 ease-in-out\"\r\n >\r\n Foto Pickup Request\r\n \r\n viewInfo(\"percobaanPickup\")}\r\n className=\"w-24 group relative inline-flex justify-center items-center py-1 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 active:bg-indigo-700 transition duration-150 ease-in-out\"\r\n >\r\n Percobaan Pickup\r\n \r\n viewInfo(\"pickupTracking\")}\r\n className=\"w-24 group relative inline-flex justify-center items-center py-1 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 active:bg-indigo-700 transition duration-150 ease-in-out\"\r\n >\r\n Pickup Tracking\r\n \r\n
\r\n
\r\n {isOpen === \"pickupOrder\" && (\r\n
\r\n
\r\n
\r\n Info Pickup\r\n
\r\n {pickupReqView && pickupReqView.LastPickupOrder &&\r\n <>\r\n
\r\n \r\n Waktu Penugasan\r\n \r\n \r\n {moment(pickupReqView.LastPickupOrder.OrderDt).format(\r\n \"DD-MM-YY HH:mm\"\r\n )}\r\n \r\n
\r\n
\r\n \r\n Status Order\r\n \r\n \r\n {pickupReqView.LastPickupOrder.PickupOrderHStat}\r\n \r\n
\r\n
\r\n \r\n PIC Kantor\r\n \r\n \r\n {pickupReqView.LastPickupOrder.PICOfficeCode}\r\n \r\n
\r\n
\r\n \r\n Driver\r\n \r\n \r\n {pickupReqView.LastPickupOrder.DriverName}\r\n \r\n
\r\n
\r\n \r\n Alamat Penugasan\r\n \r\n \r\n {pickupReqView.LastPickupOrder.Addr}\r\n \r\n
\r\n
\r\n \r\n Contact Person\r\n \r\n \r\n {pickupReqView.LastPickupOrder.ContactPerson}\r\n \r\n
\r\n
\r\n \r\n Catatan\r\n \r\n \r\n {moment(\r\n pickupReqView.LastPickupOrder.OrderNotes\r\n ).format(\"DD-MM-YY HH:mm\")}\r\n \r\n
\r\n }\r\n
\r\n
\r\n
\r\n Foto Proses Pickup\r\n
\r\n {pickupReqView.PickupResultPhotos.map((prp, idx) => (\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n Tanggal Foto: \r\n {prp.StoreDt}\r\n \r\n \r\n Diupload Oleh: \r\n {prp.StoreBy}\r\n \r\n
\r\n
\r\n {\r\n setMobilePickupResultPhotos((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }))\r\n }}\r\n type=\"button\"\r\n className=\"mx-3 my-2 py-2 px-4 border border-transparent font-medium rounded-full text-white bg-red-600\"\r\n >\r\n Lihat Foto Proses Pickup\r\n \r\n
\r\n
\r\n
{\r\n setMobilePickupResultPhotos((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }))\r\n }}\r\n >\r\n {\r\n setMobilePickupResultPhotos((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }))\r\n }}>\r\n Foto Proses Pickup\r\n \r\n \r\n \r\n \r\n \r\n ))}\r\n
\r\n
\r\n
\r\n Foto Summary Pickup\r\n
\r\n {pickupReqView.PickupSummaryPhotos.map((psp, idx) => (\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n Tanggal Foto: \r\n {psp.StoreDt}\r\n \r\n \r\n Diupload Oleh: \r\n {psp.StoreBy}\r\n \r\n
\r\n
\r\n {\r\n setMobilePickupSummaryPhotos((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }))\r\n }}\r\n type=\"button\"\r\n className=\"mx-3 my-2 py-2 px-4 border border-transparent font-medium rounded-full text-white bg-red-600\"\r\n >\r\n Lihat Foto Proses Pickup\r\n \r\n
\r\n
\r\n
{\r\n setMobilePickupSummaryPhotos((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }))\r\n }}\r\n >\r\n {\r\n setMobilePickupSummaryPhotos((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }))\r\n }}>\r\n Foto Proses Pickup\r\n \r\n \r\n \r\n \r\n \r\n ))}\r\n
\r\n
\r\n )}\r\n {isOpen === \"fotoPickupRequest\" && (\r\n <>\r\n
\r\n {pickupReqView.PickupReqPhotos.map((prp, idx) => (\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n Tanggal Foto: \r\n {prp.StoreDt}\r\n \r\n \r\n Diupload Oleh: \r\n {prp.StoreBy}\r\n \r\n
\r\n
\r\n {\r\n setMobilePickupReqPhotos((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }))\r\n }}\r\n type=\"button\"\r\n className=\"mx-3 my-2 py-2 px-4 border border-transparent font-medium rounded-full text-white bg-red-600\"\r\n >\r\n Lihat Foto Pickup\r\n \r\n
\r\n
\r\n
{\r\n setMobilePickupReqPhotos((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }))\r\n }}\r\n >\r\n {\r\n setMobilePickupReqPhotos((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }))\r\n }}>\r\n Foto Pickup\r\n \r\n \r\n \r\n \r\n \r\n
\r\n ))}\r\n
\r\n \r\n )}\r\n {isOpen === \"percobaanPickup\" && (\r\n <>\r\n
\r\n
\r\n {pickupReqView.PickupOrderHistories &&\r\n pickupReqView.PickupOrderHistories.map((poh) => (\r\n
\r\n \r\n
\r\n
\r\n
\r\n {moment(poh.PickupDt).format(\r\n \"DD-MM-YY HH:mm\"\r\n )}\r\n
\r\n
\r\n {poh.PickupOrderHStat}\r\n
\r\n
\r\n
\r\n
\r\n \r\n Tanggal Order: \r\n {moment(poh.OrderDt).format(\r\n \"DD-MM-YY HH:mm\"\r\n )}\r\n \r\n
\r\n
\r\n \r\n Diassign Oleh: \r\n {poh.AssignBy}\r\n \r\n
\r\n
\r\n \r\n Driver: \r\n {poh.Driver}\r\n \r\n
\r\n
\r\n \r\n Catatan: \r\n {poh.WorkNotes === null ||\r\n poh.WorkNotes === \"\"\r\n ? \"-\"\r\n : poh.WorkNotes}\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n ))}\r\n
\r\n
\r\n \r\n )}\r\n {isOpen === \"pickupTracking\" && (\r\n <>\r\n
\r\n
\r\n {pickupReqView.PickupRequestTrackings &&\r\n pickupReqView.PickupRequestTrackings.map((prt) => (\r\n
\r\n \r\n
\r\n
\r\n
\r\n {moment(prt.InputDt).format(\r\n \"DD-MM-YY HH:mm\"\r\n )}\r\n
\r\n
\r\n {prt.TrackType === \"PCK_DONE\" || prt.TrackType === \"DONE\"\r\n ? \"Done\"\r\n : prt.TrackType === \"PCK_OTW\" || prt.TrackType === \"OTW\"\r\n ? \"Dalam Perjalanan\"\r\n : prt.TrackType === \"PCK_PICK\" || prt.TrackType === \"PICK\"\r\n ? \"Dalam Pengambilan\"\r\n : prt.TrackType === \"PCK_ASGN\" || prt.TrackType === \"ASGN\"\r\n ? \"Assign Driver\"\r\n : \"Data Tercatat\"}\r\n
\r\n
\r\n
\r\n
\r\n {prt.TrackNotes}\r\n
\r\n
\r\n
\r\n \r\n ))}\r\n
\r\n
\r\n \r\n )}\r\n
\r\n \r\n )}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Woops
\r\n
Something went wrong :(
\r\n
{alert.StatusMessage}
\r\n
\r\n
\r\n {/*
*/}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
RESI INFO \r\n \r\n
\r\n {resiHView && (\r\n <>\r\n
\r\n {resiHView.ResiNo}\r\n {/* Tujuan \r\n {resiHView.Dest} */}\r\n
\r\n {/*
\r\n Pengirim \r\n {resiHView.CustName} \r\n Penerima \r\n {resiHView.RecipientName} \r\n
\r\n
\r\n Alamat Penerima \r\n {resiHView.RecipientAddr} \r\n No Handphone Penerima \r\n {resiHView.RecipientMblPhoneNo} \r\n
\r\n
\r\n Jenis Pembayaran \r\n {resiHView.PaymentType} \r\n
\r\n
\r\n Alias Pengirim \r\n {resiHView.SenderAlias} \r\n
*/}\r\n {/*
\r\n Tanggal Kirim \r\n \r\n {resiHView.ValueDt}\r\n \r\n
*/}\r\n
\r\n Tracking Terakhir \r\n \r\n {resiHView.PODResult}\r\n \r\n
\r\n {/*
\r\n Estimasi Sampai \r\n {resiHView.EstDlv} \r\n
*/}\r\n \r\n )}\r\n
\r\n
\r\n setIsOpen(\"1\")}\r\n className=\"flex-grow group relative inline-flex justify-center items-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out\"\r\n >\r\n Resi Tracking\r\n \r\n setIsOpen(\"2\")}\r\n className=\"flex-grow group relative inline-flex justify-center items-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out\"\r\n >\r\n Foto POD\r\n \r\n
\r\n
\r\n {/* resi tracking */}\r\n {isOpen === \"1\" && resiHView && (\r\n <>\r\n
\r\n
\r\n {resiHView.ResiHTracks &&\r\n resiHView.ResiHTracks.map((item, index) => (\r\n
\r\n
\r\n
\r\n
{item.TrackNotes}
\r\n
{moment(item.InputDt).format(\r\n \"dddd, DD MMM YY HH:mm\"\r\n )}
\r\n
\r\n
\r\n ))}\r\n
\r\n
\r\n\r\n \r\n )}\r\n {/* foto pod */}\r\n {isOpen === \"2\" && resiHView && !isValid && (\r\n
\r\n )}\r\n\r\n {isOpen === \"2\" && resiHView && resiHView.PODImageFiles && !isErrorCekKode && submitted && (\r\n
\r\n {resiHView.PODImageFiles.map((pif, idx) => (\r\n
\r\n
\r\n
{\r\n setWebModalStates((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }));\r\n }}\r\n src={pif.ImageFile}\r\n alt=\"PODImageFile\"\r\n >\r\n \r\n Tanggal Foto \r\n {pif.StoreDt} \r\n \r\n Diupload Oleh\r\n \r\n {pif.StoreBy} \r\n
\r\n \r\n
{\r\n setWebModalStates((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }));\r\n }}\r\n centered={true}\r\n >\r\n {\r\n setWebModalStates((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }));\r\n }}\r\n >POD Detail \r\n \r\n \r\n
\r\n
\r\n \r\n {pif.ResiNo}\r\n \r\n \r\n {pif.RecipientName}\r\n \r\n
Tanggal Foto \r\n :{pif.StoreDt} \r\n Diupload Oleh \r\n :{pif.StoreBy} \r\n Lokasi Foto \r\n \r\n :{`${pif.Lattitude},${pif.Longitude}`}\r\n \r\n \r\n
\r\n \r\n \r\n ))}\r\n
\r\n )}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n RESI INFO\r\n
\r\n {isError == true && (\r\n
\r\n )}\r\n
\r\n
\r\n {resiHView && resiHView.ResiNo}\r\n
\r\n {/*
\r\n Kantor Asal \r\n {resiHView && resiHView.OriginalOffice} \r\n
\r\n
\r\n Pengirim \r\n {resiHView && resiHView.CustName} \r\n
\r\n
\r\n Penerima \r\n {resiHView && resiHView.RecipientName} \r\n
\r\n
\r\n Alamat Penerima \r\n {resiHView && resiHView.RecipientAddr} \r\n
\r\n
\r\n No HP Penerima \r\n {resiHView && resiHView.RecipientMblPhoneNo} \r\n
\r\n
\r\n Jenis Pembayaran \r\n {resiHView && resiHView.PaymentType} \r\n
*/}\r\n {/*
\r\n Tujuan \r\n {resiHView && resiHView.Dest} \r\n
*/}\r\n {/*
\r\n Alias Pengirim \r\n {resiHView && resiHView.SenderAlias} \r\n
*/}\r\n
\r\n Tracking Terakhir \r\n {resiHView && resiHView.PODResult} \r\n
\r\n {/*
\r\n Estimasi Sampai \r\n {resiHView && resiHView.EstDlv} \r\n
*/}\r\n
\r\n {resiHView && (\r\n <>\r\n
\r\n setIsOpen(\"1\")}\r\n className=\"w-50 group relative inline-flex justify-center items-center py-1 px-4 border border-transparent text-xs leading-5 font-medium rounded-md text-white bg-indigo-600 active:bg-indigo-700 transition duration-150 ease-in-out\"\r\n >\r\n Resi Tracking\r\n \r\n setIsOpen(\"2\")}\r\n className=\"w-50 group relative inline-flex justify-center items-center py-1 px-4 border border-transparent text-xs leading-5 font-medium rounded-md text-white bg-indigo-600 active:bg-indigo-700 transition duration-150 ease-in-out\"\r\n >\r\n Foto POD\r\n \r\n\r\n
\r\n {/* Resi Tracking */}\r\n {isOpen === \"1\" && (\r\n <>\r\n
\r\n
\r\n
\r\n
\r\n {resiHView.ResiHTracks &&\r\n resiHView.ResiHTracks.map((item, index) => (\r\n
\r\n
\r\n
\r\n
{item.TrackNotes}
\r\n
{moment(item.InputDt).format(\r\n \"dddd, DD MMM YY HH:mm\"\r\n )}
\r\n
\r\n
\r\n ))}\r\n
\r\n
\r\n
\r\n
\r\n \r\n )}\r\n {/* Foto POD*/}\r\n {isOpen === \"2\" && resiHView && !isValid && (\r\n
\r\n )}\r\n {isOpen === \"2\" && resiHView && resiHView.PODImageFiles && !isErrorCekKode && submitted && (\r\n <>\r\n
\r\n {resiHView.PODImageFiles.map((pif, idx) => (\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n {`Tanggal Foto: ${pif.StoreDt}`}\r\n \r\n \r\n {`Diupload Oleh: ${pif.StoreBy}`}\r\n \r\n
\r\n
\r\n {\r\n setMobileModalStates((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }));\r\n }}\r\n type=\"button\"\r\n className=\"mx-3 my-2 py-2 px-4 border border-transparent font-medium rounded-full text-white bg-red-600\"\r\n >\r\n Lihat Foto POD\r\n \r\n
\r\n
\r\n
{\r\n setMobileModalStates((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }));\r\n }}\r\n centered={true}\r\n >\r\n {\r\n setMobileModalStates((prevStates) => ({\r\n ...prevStates,\r\n [idx]: !prevStates[idx]\r\n }));\r\n }}\r\n >\r\n POD Detail\r\n \r\n \r\n \r\n \r\n \r\n
\r\n ))}\r\n
\r\n \r\n )}\r\n\r\n \r\n )}\r\n
\r\n
\r\n
\r\n Buat Booking\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n 1\r\n
\r\n
\r\n Pengirim\r\n
\r\n
\r\n
1 ? \"border-red-600\" : \"border-gray-500\"\r\n } `}\r\n > \r\n
\r\n
1 ? \"bg-red-600 text-white\" : \"text-red-600\"\r\n } `}\r\n >\r\n 2\r\n \r\n
\r\n Penerima\r\n
\r\n
\r\n
2 ? \"border-red-600\" : \"border-gray-500\"\r\n } `}\r\n > \r\n
2 ? \"bg-red-600 text-white\" : \"text-red-600\"\r\n } `}\r\n >\r\n 3\r\n \r\n Barang\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n Buat Booking\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n 1\r\n
\r\n
\r\n Pengirim\r\n
\r\n
\r\n
1 ? \"border-red-600\" : \"border-gray-500\"\r\n } `}\r\n > \r\n
\r\n
1 ? \"bg-red-600 text-white\" : \"text-red-600\"\r\n } `}\r\n >\r\n 2\r\n \r\n
\r\n Penerima\r\n
\r\n
\r\n
2 ? \"border-red-600\" : \"border-gray-500\"\r\n } `}\r\n > \r\n
2 ? \"bg-red-600 text-white\" : \"text-red-600\"\r\n } `}\r\n >\r\n 3\r\n \r\n Barang\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n Alamat Pickup\r\n
\r\n
\r\n \r\n setPickupAddress(e.target.value)\r\n }\r\n value={pickupAddress}\r\n />\r\n \r\n Harap masukkan alamat pickup\r\n
\r\n )}\r\n \r\n\r\n \r\n
\r\n Kecamatan / Kabupaten Pickup\r\n
\r\n
\r\n \r\n Harap masukkan kecamatan / kabupaten\r\n
\r\n )}\r\n \r\n\r\n \r\n
\r\n Contact Person\r\n
\r\n
\r\n \r\n setPickupContactPerson(e.target.value)\r\n }\r\n value={pickupContactPerson}\r\n />\r\n \r\n Harap masukkan contact person\r\n
\r\n )}\r\n \r\n\r\n \r\n
\r\n Nomor Ponsel Contact Person\r\n
\r\n
\r\n \r\n Harap masukkan nomor ponsel contact person\r\n
\r\n )}\r\n \r\n\r\n \r\n
\r\n Catatan\r\n
\r\n
\r\n \r\n setPickupNotes(e.target.value)\r\n }\r\n value={pickupNotes}\r\n />\r\n
\r\n
\r\n
\r\n Nama\r\n
\r\n
\r\n \r\n Harap masukkan nama penerima\r\n
\r\n )}\r\n \r\n } */}\r\n {!isMember &&\r\n \r\n
\r\n Nama\r\n
\r\n
\r\n setRecipientName(e.target.value)}\r\n />\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Member\r\n
\r\n
\r\n \r\n Hanya member yang dapat melakukan pembayaran Kredit Penerima.\r\n \r\n
\r\n
\r\n
\r\n Nomor Ponsel\r\n
\r\n
\r\n \r\n Harap masukkan nomor ponsel penerima\r\n
\r\n )}\r\n \r\n\r\n \r\n
\r\n Alamat\r\n
\r\n
\r\n \r\n setRecipientAddress(e.target.value)\r\n }\r\n value={recipientAddress}\r\n />\r\n \r\n Harap masukkan alamat penerima\r\n
\r\n )}\r\n \r\n\r\n \r\n
\r\n Nomor Referensi\r\n
\r\n
\r\n setReferenceNo(e.target.value)}\r\n value={referenceNo}\r\n />\r\n
\r\n
\r\n
\r\n Asal\r\n
\r\n
\r\n \r\n Harap isi asal pengiriman\r\n
\r\n )}\r\n \r\n\r\n \r\n
\r\n Tujuan\r\n
\r\n
\r\n \r\n Harap masukkan tujuan\r\n
\r\n )}\r\n \r\n\r\n \r\n
\r\n Pengiriman\r\n
\r\n
\r\n setTransportType(e.target.value)}\r\n >\r\n \r\n Pilih metode pengiriman\r\n \r\n {transportTypeObj &&\r\n transportTypeObj.TransportTypes.map(\r\n (transportTypeObj) => (\r\n \r\n {transportTypeObj.TransportTypeName}\r\n \r\n )\r\n )}\r\n \r\n \r\n Harap pilih metode pengiriman\r\n
\r\n )}\r\n \r\n\r\n \r\n
\r\n Pembayaran\r\n
\r\n
\r\n setPaymentType(e.target.value)}\r\n >\r\n\r\n \r\n Pilih metode pembayaran\r\n \r\n \r\n Lunas\r\n \r\n \r\n Kredit\r\n \r\n \r\n Tagih Tujuan\r\n \r\n \r\n Kredit Penerima\r\n \r\n \r\n \r\n Harap pilih metode pembayaran\r\n
\r\n )}\r\n \r\n\r\n \r\n
\r\n Catatan Order\r\n
\r\n
\r\n setBookingNotes(e.target.value)}\r\n value={bookingNotes}\r\n />\r\n
\r\n
\r\n
\r\n Jenis Barang\r\n
\r\n
\r\n setPackageCategory(e.target.value)}\r\n >\r\n \r\n Pilih jenis barang\r\n \r\n \r\n ELEKTRONIK\r\n \r\n \r\n NON ELEKTRONIK\r\n \r\n \r\n \r\n Harap pilih jenis barang\r\n
\r\n )}\r\n \r\n\r\n \r\n
\r\n Tipe Barang\r\n
\r\n
\r\n setPackageContent(e.target.value)}\r\n >\r\n \r\n Pilih tipe barang\r\n \r\n {packageContentsObj &&\r\n packageContentsObj.map((packageContentsObj) => (\r\n \r\n {packageContentsObj.PackageContentName}\r\n \r\n ))}\r\n \r\n \r\n Harap pilih tipe barang\r\n
\r\n )}\r\n \r\n\r\n {isInsurance && isInsurance === '1' &&\r\n \r\n
\r\n Nilai Barang\r\n
\r\n
\r\n handleNilaiBarang(e)}\r\n value={nilaiBarang}\r\n placeholder=\"Isi Nilai barang\"\r\n min=\"0\"\r\n />\r\n
\r\n {submitted && nilaiBarang <= 0 && isInsurance == \"1\" && (\r\n
\r\n Harap isi nilai barang\r\n
\r\n )}\r\n
\r\n
\r\n Catatan Paket\r\n
\r\n
\r\n \r\n setPackageContentNotes(e.target.value)\r\n }\r\n value={packageContentNotes}\r\n />\r\n \r\n Harap isi catatan paket\r\n
\r\n )}\r\n \r\n \r\n )}\r\n\r\n \r\n ) : (\r\n <>\r\n \r\n Detail Barang\r\n
\r\n\r\n \r\n
\r\n Nama Barang\r\n
\r\n
\r\n onChange(e, false)}\r\n value={detailBarangMbl.itemName}\r\n />\r\n
\r\n
\r\n
\r\n Estimasi Berat Barang (kg)\r\n
\r\n
\r\n onChange(e, true)}\r\n value={detailBarangMbl.itemWeight}\r\n />\r\n \r\n
\r\n Panjang (cm)\r\n
\r\n
\r\n onChange(e, true)}\r\n value={detailBarangMbl.dimP}\r\n />\r\n
\r\n
\r\n
\r\n Lebar (cm)\r\n
\r\n
\r\n onChange(e, true)}\r\n value={detailBarangMbl.dimL}\r\n />\r\n
\r\n
\r\n
\r\n Tinggi (cm)\r\n
\r\n
\r\n onChange(e, true)}\r\n value={detailBarangMbl.dimT}\r\n />\r\n
\r\n
\r\n onSubmitDetailBarang()}\r\n >\r\n Simpan Data Barang\r\n \r\n
\r\n\r\n \r\n
\r\n
\r\n Summary\r\n
\r\n
\r\n
\r\n
\r\n Total Barang\r\n
\r\n
\r\n {respCalcObj && arrDetailBarangMbl.length > 0\r\n ? new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 0,\r\n }).format(respCalcObj.TotalItem)\r\n : new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 0,\r\n }).format(0)}\r\n
\r\n
\r\n
\r\n
\r\n Estimasi Berat Final\r\n
\r\n
\r\n {respCalcObj && arrDetailBarangMbl.length > 0\r\n ? new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 2,\r\n }).format(respCalcObj.TotalFinalWeight)\r\n : new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 2,\r\n }).format(0)}{\" \"}\r\n kg\r\n
\r\n
\r\n {false && (\r\n <>\r\n
\r\n
\r\n Estimasi Ongkir\r\n
\r\n
\r\n Rp{\" \"}\r\n {respCalcObj && arrDetailBarangMbl.length > 0\r\n ? new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 0,\r\n }).format(respCalcObj.EstMainChargeAmt)\r\n : 0}\r\n
\r\n
\r\n
\r\n
\r\n Estimasi Asuransi\r\n
\r\n
\r\n Rp{\" \"}\r\n {respCalcObj && arrDetailBarangMbl.length > 0\r\n ? new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 0,\r\n }).format(respCalcObj.EstAddChargeAmt)\r\n : 0}\r\n
\r\n
\r\n
\r\n
\r\n Estimasi Tagih Pengirim\r\n
\r\n
\r\n Rp{\" \"}\r\n {respCalcObj && arrDetailBarangMbl.length > 0\r\n ? new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 0,\r\n }).format(respCalcObj.EstSndrMustBePaidAmt)\r\n : 0}\r\n
\r\n
\r\n
\r\n
\r\n Estimasi Tagih Penerima\r\n
\r\n
\r\n Rp{\" \"}\r\n {respCalcObj && arrDetailBarangMbl.length > 0\r\n ? new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 0,\r\n }).format(respCalcObj.EstRcpntMustBePaidAmt)\r\n : 0}\r\n
\r\n
\r\n \r\n )}\r\n
\r\n {currStep > 1 && (\r\n handlePrevStep(e)}\r\n >\r\n Balik\r\n \r\n )}\r\n {currStep < 3 ? (\r\n 1 && \"mx-1\"\r\n } py-2 border border-transparent font-medium rounded-full text-white bg-red-600`}\r\n onClick={(e) => handleNextStep(e)}\r\n >\r\n Lanjutkan\r\n \r\n ) : (\r\n \r\n Simpan\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Summary Booking\r\n \r\n \r\n {respSubmitObj && (\r\n <>\r\n \r\n
\r\n
\r\n
\r\n
\r\n Booking telah sukses dibuat dengan nomor resi [\r\n {respSubmitObj.ResiNo}]\r\n
\r\n
\r\n
\r\n
\r\n SUMMARY\r\n
\r\n
\r\n
\r\n
\r\n Nomor Referensi\r\n
\r\n
\r\n {respSubmitObj.CustRefNo}\r\n
\r\n
\r\n
\r\n
\r\n Alias Pengirim\r\n
\r\n
\r\n {respSubmitObj.AliasName}\r\n
\r\n
\r\n
\r\n
\r\n Tujuan\r\n
\r\n
\r\n {respSubmitObj.DestDistrictName}\r\n
\r\n
\r\n
\r\n
\r\n Nama Penerima\r\n
\r\n
\r\n {respSubmitObj.RecipientName}\r\n
\r\n
\r\n
\r\n
\r\n Alamat Penerima\r\n
\r\n
\r\n {respSubmitObj.RecipientAddr}\r\n
\r\n
\r\n
\r\n
\r\n Total Koli\r\n
\r\n
\r\n {new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 0,\r\n }).format(respSubmitObj.TotalItem)}\r\n
\r\n
\r\n
\r\n
\r\n Total Berat\r\n
\r\n
\r\n {new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 2,\r\n }).format(respSubmitObj.TotalFinalWeight)}\r\n
\r\n
\r\n {respSubmitObj.DropType ===\r\n masterSettingConstants.DROP_TYPE_DROP && (\r\n <>\r\n
\r\n
\r\n Drop / Pickup\r\n
\r\n
\r\n {respSubmitObj.DropType}\r\n
\r\n
\r\n \r\n )}\r\n {respSubmitObj.DropType ===\r\n masterSettingConstants.DROP_TYPE_PICKUP && (\r\n <>\r\n
\r\n
\r\n Drop / Pickup\r\n
\r\n
\r\n {respSubmitObj.DropType}\r\n
\r\n
\r\n
\r\n
\r\n Alamat Pickup\r\n
\r\n
\r\n {respSubmitObj.PickupAddr}\r\n
\r\n
\r\n
\r\n
\r\n Kecamatan / Kabupaten\r\n
\r\n
\r\n {respSubmitObj.PickupDistrictDescr}\r\n
\r\n
\r\n
\r\n
\r\n Contact Person\r\n
\r\n
\r\n {respSubmitObj.PickupContactPerson}\r\n
\r\n
\r\n
\r\n
\r\n Nomor Ponsel Contact Person\r\n
\r\n
\r\n {respSubmitObj.PickupPhoneNo}\r\n
\r\n
\r\n \r\n )}\r\n
\r\n
\r\n
\r\n navigateToBookingDetail()}\r\n >\r\n Cetak Label Barang\r\n \r\n navigateToCreateBooking()}\r\n >\r\n Buat Booking Lain\r\n \r\n navigateToHome()}\r\n >\r\n Kembali ke Home\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Booking telah sukses dibuat dengan nomor resi [\r\n {respSubmitObj.ResiNo}]\r\n
\r\n
\r\n
\r\n
\r\n SUMMARY\r\n
\r\n
\r\n
\r\n
\r\n Nomor Referensi\r\n
\r\n
\r\n {respSubmitObj.CustRefNo}\r\n
\r\n
\r\n
\r\n
\r\n Alias Pengirim\r\n
\r\n
\r\n {respSubmitObj.AliasName}\r\n
\r\n
\r\n
\r\n
\r\n Tujuan\r\n
\r\n
\r\n {respSubmitObj.DestDistrictName}\r\n
\r\n
\r\n
\r\n
\r\n Nama Penerima\r\n
\r\n
\r\n {respSubmitObj.RecipientName}\r\n
\r\n
\r\n
\r\n
\r\n Alamat Penerima\r\n
\r\n
\r\n {respSubmitObj.RecipientAddr}\r\n
\r\n
\r\n
\r\n
\r\n Total Koli\r\n
\r\n
\r\n {new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 0,\r\n }).format(respSubmitObj.TotalItem)}\r\n
\r\n
\r\n
\r\n
\r\n Total Berat\r\n
\r\n
\r\n {new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 2,\r\n }).format(respSubmitObj.TotalFinalWeight)}\r\n
\r\n
\r\n {respSubmitObj.DropType ===\r\n masterSettingConstants.DROP_TYPE_DROP && (\r\n <>\r\n
\r\n
\r\n Drop / Pickup\r\n
\r\n
\r\n {respSubmitObj.DropType}\r\n
\r\n
\r\n \r\n )}\r\n {respSubmitObj.DropType ===\r\n masterSettingConstants.DROP_TYPE_PICKUP && (\r\n <>\r\n
\r\n
\r\n Drop / Pickup\r\n
\r\n
\r\n {respSubmitObj.DropType}\r\n
\r\n
\r\n
\r\n
\r\n Alamat Pickup\r\n
\r\n
\r\n {respSubmitObj.PickupAddr}\r\n
\r\n
\r\n
\r\n
\r\n Kecamatan / Kabupaten\r\n
\r\n
\r\n {respSubmitObj.PickupDistrictDescr}\r\n
\r\n
\r\n
\r\n
\r\n Contact Person\r\n
\r\n
\r\n {respSubmitObj.PickupContactPerson}\r\n
\r\n
\r\n
\r\n
\r\n Nomor Ponsel Contact Person\r\n
\r\n
\r\n {respSubmitObj.PickupPhoneNo}\r\n
\r\n
\r\n \r\n )}\r\n
\r\n
\r\n
\r\n navigateToBookingDetail()}\r\n >\r\n Cetak Label Barang\r\n \r\n navigateToCreateBooking()}\r\n >\r\n Buat Booking Lain\r\n \r\n navigateToHome()}\r\n >\r\n Kembali ke Home\r\n \r\n
\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default BookingAddForm;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { masterSettingConstants } from \"../../_constants\";\r\nimport {\r\n districtActions,\r\n bookingActions,\r\n packageContentActions,\r\n pickupActions,\r\n originActions,\r\n transportTypeActions,\r\n customerActions,\r\n} from \"../../_actions\";\r\nimport { TableDetailBarang, AlertMessage, TableDetailPenerima } from \"../../components\";\r\nimport Input from \"react-phone-number-input/input\";\r\nimport { NumericFormat } from \"react-number-format\";\r\nimport { formatPhoneNumber } from \"react-phone-number-input\";\r\nimport \"../../custom.css\";\r\nimport { pickupAddr } from \"../../_reducers/pickup.reducer\";\r\nimport \"react-phone-number-input/style.css\";\r\nimport * as FaIcons from \"react-icons/fa\";\r\nimport Select, { createFilter } from \"react-select\";\r\nimport { Modal, ModalHeader, ModalBody } from \"reactstrap\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport moment from \"moment\";\r\nimport { size } from \"lodash\";\r\n\r\nconst BookingAddFormV2 = ({ t }) => {\r\n const dispatch = useDispatch();\r\n const acc = useSelector((state) => state.authentication.accInfo);\r\n const packageContentsObj = useSelector(\r\n (state) => state.packagecontent.packageContentObj\r\n );\r\n const districtObj = useSelector((state) => state.district.districtObj);\r\n const respCalcObj = useSelector(\r\n (state) => state.calculateBookingPrice.calcBookingObj\r\n );\r\n const respSubmitObj = useSelector(\r\n (state) => state.submitBooking.submitBookingObj\r\n );\r\n const pickupAddressTypeObj = useSelector(\r\n (state) => state.pickupAddr.pickupAddrObj\r\n );\r\n const errCalcObj = useSelector(\r\n (state) => state.calculateBookingPrice.errCalcBookingObj\r\n );\r\n const errSubmitObj = useSelector(\r\n (state) => state.submitBooking.errSubmitBookingObj\r\n );\r\n const originObj = useSelector((state) => state.origin.origin);\r\n const transportTypeObj = useSelector(\r\n (state) => state.transportType.transportTypeObj\r\n );\r\n const errTransportTypeObj = useSelector(\r\n (state) => state.transportType.errTransportTypeObj\r\n );\r\n const custObj = useSelector(\r\n (state) => state.custById.custObj\r\n );\r\n const listPenerimaObj = useSelector(\r\n (state) => state.penerimaByHint.penerimaByHintObj\r\n );\r\n const penerimaObj = useSelector(\r\n (state) => state.penerimaById.penerimaObj\r\n );\r\n\r\n const [isError, setIsError] = useState(false);\r\n const [submitted, setSubmitted] = useState(false);\r\n const [simpanDataBarang, setSimpanDataBarang] = useState(false);\r\n const [enableSubmitted, setEnableSubmitted] = useState(false);\r\n const [newPickupAddr, setNewPickupAddr] = useState(false);\r\n const [packageCategory, setPackageCategory] = useState(\"\");\r\n const [sellerName, setSellerName] = useState(acc && acc.CustName);\r\n const [sellerAliasName, setSellerAliasName] = useState(acc && acc.CustName);\r\n const [sellerMobilePhnNo, setSellerMobilePhnNo] = useState(\r\n acc && acc.MobilePhoneNo\r\n );\r\n const [originDestId, setOriginDestId] = useState(0);\r\n const [originDestCode, setOriginDestCode] = useState(\"\");\r\n const [referenceNo, setReferenceNo] = useState(\"\");\r\n const [resiNos, setResiNos] = useState(\"\");\r\n const [recipientId, setRecipientId] = useState(0);\r\n const [recipientName, setRecipientName] = useState(\"\");\r\n const [recipientMobilePhnNo, setRecipientMobilePhnNo] = useState(\"\");\r\n const [recipientAddress, setRecipientAddress] = useState(\"\");\r\n const [dropType, setDropType] = useState(\"PICKUP\");\r\n const [paymentType, setPaymentType] = useState(\"\");\r\n const [transportType, setTransportType] = useState(\"\");\r\n const [estItemWeight, setEstItemWeight] = useState(0);\r\n const [packageContent, setPackageContent] = useState(\"\");\r\n const [packageContentNotes, setPackageContentNotes] = useState(\"\");\r\n const [pickupContactPerson, setPickupContactPerson] = useState(\"\");\r\n const [pickupAddress, setPickupAddress] = useState(\"\");\r\n const [pickupNotes, setPickupNotes] = useState(\"\");\r\n const [pickupPhnNo, setPickupPhnNo] = useState(\"\");\r\n const [pickupTime, setPickupTime] = useState(moment(new Date()).format(\"YYYY-MM-DD\"));\r\n const [minPickupTime, setMinPickupTime] = useState(moment(new Date()).format(\"YYYY-MM-DD\"));\r\n const [pickupAddrType, setPickupAddrType] = useState(\"Default\");\r\n const [bookingNotes, setBookingNotes] = useState(\"\");\r\n const [isInsurance, setIsInsurance] = useState(\"0\");\r\n const [nilaiBarang, setNilaiBarang] = useState(0);\r\n const [currStep, setCurrentStep] = useState(1);\r\n const [arrTempBarang, setArrTempBarang] = useState([]);\r\n const [arrDetailBarangMbl, setArrDetailBarangMbl] = useState([]);\r\n const [detailBarangMbl, SetDetailBarangMbl] = useState({\r\n custBookDId: 0,\r\n itemName: \"\",\r\n itemWeight: 0,\r\n dimP: 0,\r\n dimL: 0,\r\n dimT: 0,\r\n });\r\n const [alert, setAlert] = useState({\r\n Type: \"\",\r\n StatusMessage: \"\",\r\n });\r\n const [modalShow, setModalShow] = useState(false);\r\n const [showPenerimaForm, setShowPenerimaForm] = useState(false);\r\n const [arrDetailPenerimaMbl, setArrDetailPenerimaMbl] = useState([]);\r\n const [showKoliForm, setShowKoliForm] = useState(false);\r\n\r\n //React Select\r\n const [options, setOptions] = useState([]);\r\n const [selectedPckDist, setSelectedPckDist] = useState();\r\n const [originOptions, setOriginOptions] = useState([]);\r\n // const [selectedOrigin, setSelectedOrigin] = useState();\r\n const [selectedDest, setSelectedDest] = useState();\r\n const [penerimaOptions, setPenerimaOptions] = useState([]);\r\n const [selectedPenerima, setSelectedPenerima] = useState(null);\r\n const [hideCOD, setHideCOD] = useState(true);\r\n const [hideCredit, setHideCredit] = useState(true);\r\n const [hideReceiverCredit, setHideReceiverCredit] = useState(true);\r\n const [isMember, setIsMember] = useState(false);\r\n const [refresh, setRefresh] = useState(moment(new Date()).format(\"YYYY-MM-DD HH:mm:ss\"));\r\n\r\n useEffect(() => {\r\n if (errCalcObj && errCalcObj.StatusCode != \"200\") {\r\n setIsError(true);\r\n setSubmitted(false);\r\n setAlert({ Type: \"Error\", StatusMessage: errCalcObj.StatusMessage });\r\n setArrDetailBarangMbl((arrDetailBarangMbl) => [\r\n ...arrDetailBarangMbl.filter(\r\n (rw) => rw.custBookDId != arrDetailBarangMbl.length\r\n ),\r\n ]);\r\n }\r\n }, [errCalcObj]);\r\n\r\n useEffect(() => {\r\n if (respCalcObj && respCalcObj.BookingD.length > 0) {\r\n setArrTempBarang(respCalcObj.BookingD);\r\n SetDetailBarangMbl({\r\n itemName: \"\",\r\n itemWeight: 0,\r\n dimP: 0,\r\n dimL: 0,\r\n dimT: 0\r\n });\r\n } else {\r\n setArrTempBarang([]);\r\n }\r\n }, [respCalcObj]);\r\n\r\n useEffect(() => {\r\n if (errSubmitObj && errSubmitObj.StatusCode != \"200\") {\r\n setIsError(true);\r\n setSubmitted(false);\r\n setAlert({ Type: \"Error\", StatusMessage: errSubmitObj.StatusMessage });\r\n }\r\n }, [errSubmitObj]);\r\n\r\n useEffect(() => {\r\n if (errTransportTypeObj && errTransportTypeObj.StatusCode != \"200\") {\r\n setIsError(true);\r\n setSubmitted(false);\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: errTransportTypeObj.StatusMessage,\r\n });\r\n }\r\n }, [errTransportTypeObj]);\r\n\r\n function handleSubmit(e) {\r\n e.preventDefault();\r\n setSubmitted(true);\r\n\r\n if (recipientName == \"\") {\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: \"Harap input setidaknya 1 detail penerima\",\r\n });\r\n } else if (arrDetailBarangMbl.length == 0) {\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: \"Harap input setidaknya 1 detail barang\",\r\n });\r\n }\r\n\r\n if (\r\n enableSubmitted &&\r\n sellerName &&\r\n sellerMobilePhnNo &&\r\n recipientAddress &&\r\n recipientMobilePhnNo &&\r\n recipientName &&\r\n paymentType &&\r\n packageCategory &&\r\n packageContent &&\r\n dropType &&\r\n transportType &&\r\n arrDetailBarangMbl.length > 0 &&\r\n originDestId > 0 &&\r\n selectedDest &&\r\n selectedDest.value !== 0\r\n ) {\r\n if (\r\n ((packageContent ===\r\n masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN ||\r\n packageContent ===\r\n masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN) &&\r\n packageContentNotes) ||\r\n (packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN &&\r\n packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN)\r\n ) {\r\n if (\r\n ((dropType === masterSettingConstants.DROP_TYPE_PICKUP &&\r\n pickupTime &&\r\n pickupPhnNo &&\r\n pickupContactPerson &&\r\n selectedPckDist &&\r\n selectedPckDist.value != 0 &&\r\n originDestId > 0 &&\r\n pickupAddr) ||\r\n dropType === masterSettingConstants.DROP_TYPE_DROP) &&\r\n ((newPickupAddr === true && pickupAddrType) || !newPickupAddr)\r\n ) {\r\n const bookingHObj = {\r\n CustId: acc.CustId,\r\n SellerName: sellerName,\r\n AliasName: sellerAliasName,\r\n SellerMblPhoneNo: formatPhoneNumber(sellerMobilePhnNo),\r\n Username: acc.Username,\r\n CustRefNo: referenceNo,\r\n // RecipientId: recipientId != 0 ? recipientId : null,\r\n RecipientAddr: recipientAddress,\r\n RecipientMblPhoneNo: formatPhoneNumber(recipientMobilePhnNo),\r\n RecipientName: recipientName,\r\n PaymentType: paymentType,\r\n PackageCategory: packageCategory,\r\n PackageContentCode: packageContent,\r\n EstTotalWeight: estItemWeight,\r\n PackageContentNotes: packageContentNotes,\r\n PickupNotes: pickupNotes,\r\n PickupTime: pickupTime,\r\n PickupPhoneNo: formatPhoneNumber(pickupPhnNo),\r\n PickupContactPerson: pickupContactPerson,\r\n PickupDistrictId: selectedPckDist.value,\r\n PickupAddr: pickupAddress,\r\n DropType: dropType,\r\n TotalItem: arrDetailBarangMbl.length,\r\n BookNotes: bookingNotes,\r\n PickupAddrType: pickupAddrType,\r\n EstItemPriceAmt: nilaiBarang,\r\n DestDistrictId: selectedDest.value,\r\n DestDistrictName: selectedDest.label,\r\n TransportType: transportType,\r\n BookDetails: arrDetailBarangMbl,\r\n OriginDestCode: originDestCode,\r\n };\r\n\r\n const submitBooking = async () => {\r\n dispatch(bookingActions.requestSubmitBooking(bookingHObj));\r\n };\r\n submitBooking();\r\n }\r\n }\r\n }\r\n }\r\n\r\n function handleNextStep(e) {\r\n e.preventDefault();\r\n setSubmitted(true);\r\n if (currStep == 1) {\r\n if (sellerName && sellerMobilePhnNo && dropType) {\r\n if (\r\n (dropType === masterSettingConstants.DROP_TYPE_PICKUP &&\r\n pickupTime &&\r\n pickupPhnNo &&\r\n pickupContactPerson &&\r\n selectedPckDist &&\r\n selectedPckDist.value != 0 &&\r\n pickupAddr) &&\r\n ((newPickupAddr === true && pickupAddrType) || !newPickupAddr)\r\n ) {\r\n let pickupDistrictObj = districtObj.filter(\r\n (rw) => rw.DistrictId === selectedPckDist.value\r\n );\r\n setOriginDestId(pickupDistrictObj[0].OriginDestId)\r\n if (originObj != null && originObj.Result != null) {\r\n let selectedOriginObj = originObj.Result.filter(\r\n (rw) => rw.OriginId === pickupDistrictObj[0][\"OriginDestId\"]\r\n );\r\n setOriginDestCode(selectedOriginObj[0][\"OriginCode\"])\r\n }\r\n if (pickupDistrictObj[0].IsPickup === '1') {\r\n setIsError(false);\r\n setCurrentStep(currStep + 1);\r\n setSubmitted(false);\r\n }\r\n else {\r\n setIsError(true);\r\n setSubmitted(false);\r\n setAlert({\r\n Type: \"Info\",\r\n StatusMessage: \"Maaf, Kecamatan Pickup Belum Tercover\",\r\n });\r\n }\r\n }\r\n }\r\n } else if (currStep == 2) {\r\n if (recipientName && recipientAddress && recipientMobilePhnNo && transportType && paymentType && packageCategory && packageContent &&\r\n selectedDest && selectedDest.value != 0 && (isInsurance == \"0\" || (isInsurance == \"1\" && nilaiBarang > 0))) {\r\n if (((packageContent === masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN ||\r\n packageContent === masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN) &&\r\n packageContentNotes) ||\r\n (packageContent !== masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN &&\r\n packageContent !== masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN)) {\r\n setCurrentStep(currStep + 1);\r\n setSubmitted(false);\r\n\r\n let selectedPackageContent = packageContentsObj.filter(\r\n (rw) => rw.PackageContentCode === packageContent\r\n );\r\n setIsInsurance(selectedPackageContent[0].IsInsurance);\r\n }\r\n }\r\n }\r\n\r\n if (!errSubmitObj && !errCalcObj && arrDetailBarangMbl.length > 0) {\r\n setAlert({ Type: \"\", StatusMessage: \"\" });\r\n }\r\n }\r\n\r\n function handlePrevStep(e) {\r\n e.preventDefault();\r\n setCurrentStep(currStep - 1);\r\n }\r\n\r\n\r\n function handleSelesai(e) {\r\n e.preventDefault();\r\n setSubmitted(true);\r\n setModalShow(true);\r\n }\r\n\r\n function clearDatas() {\r\n setReferenceNo(\"\");\r\n setRecipientId(0);\r\n setRecipientName(\"\");\r\n setRecipientMobilePhnNo(\"\");\r\n setRecipientAddress(\"\");\r\n setDropType(\"PICKUP\");\r\n setPaymentType(\"\");\r\n setTransportType(\"\");\r\n setEstItemWeight(0);\r\n setPackageContent(\"\");\r\n setPackageContentNotes(\"\");\r\n setPickupContactPerson(\"\");\r\n setPickupAddress(\"\");\r\n setPickupNotes(\"\");\r\n setPickupPhnNo(\"\");\r\n setPickupTime(moment(new Date()).format(\"YYYY-MM-DD\"));\r\n setMinPickupTime(moment(new Date()).format(\"YYYY-MM-DD\"));\r\n setBookingNotes(\"\");\r\n setPackageCategory(\"\");\r\n setCurrentStep(1);\r\n setArrTempBarang([]);\r\n setArrDetailBarangMbl([]);\r\n setArrDetailPenerimaMbl([]);\r\n setIsInsurance(\"0\");\r\n // setSelectedOrigin({ value: \"\", label: \"Pilih Asal\" });\r\n setSelectedPckDist({ value: 0, label: \"Pilih Kecamatan / Kabupaten\" });\r\n setSelectedDest({ value: 0, label: \"Pilih Tujuan\" });\r\n setSelectedPenerima({ value: 0, label: \"Pilih Penerima\" });\r\n const clearData = async () => {\r\n dispatch(packageContentActions.clearPackageContent());\r\n dispatch(bookingActions.clearCalculateBooking());\r\n dispatch(districtActions.getDistrict());\r\n dispatch(bookingActions.clearSubmitBooking());\r\n dispatch(originActions.getOrigin());\r\n // dispatch(pickupActions.clearPickupAddr());\r\n };\r\n clearData();\r\n setSubmitted(false);\r\n setEnableSubmitted(false);\r\n setResiNos(\"\");\r\n setOriginDestId(0);\r\n setOriginDestCode(\"\");\r\n }\r\n\r\n function clearDataPenerima() {\r\n setReferenceNo(\"\");\r\n setRecipientId(0);\r\n setRecipientName(\"\");\r\n setRecipientMobilePhnNo(\"\");\r\n setRecipientAddress(\"\");\r\n setDropType(\"PICKUP\");\r\n setPaymentType(\"\");\r\n setTransportType(\"\");\r\n setEstItemWeight(0);\r\n setPackageContent(\"\");\r\n setPackageContentNotes(\"\");\r\n setBookingNotes(\"\");\r\n setPackageCategory(\"\");\r\n setArrTempBarang([]);\r\n setArrDetailBarangMbl([]);\r\n setIsInsurance(\"0\");\r\n // setSelectedOrigin({ value: \"\", label: \"Pilih Asal\" });\r\n setSelectedDest({ value: 0, label: \"Pilih Tujuan\" });\r\n setSelectedPenerima({ value: 0, label: \"Pilih Penerima\" });\r\n const clearData = async () => {\r\n dispatch(packageContentActions.clearPackageContent());\r\n dispatch(bookingActions.clearCalculateBooking());\r\n dispatch(districtActions.getDistrict());\r\n dispatch(bookingActions.clearSubmitBooking());\r\n dispatch(originActions.getOrigin());\r\n // dispatch(pickupActions.clearPickupAddr());\r\n };\r\n clearData();\r\n setSubmitted(false);\r\n setEnableSubmitted(false);\r\n setShowPenerimaForm(false);\r\n }\r\n\r\n function onChange(event, isNumeric = true) {\r\n //const value = event.target.value;\r\n SetDetailBarangMbl((prevState) => ({\r\n ...prevState,\r\n [\"custBookDId\"]: arrDetailBarangMbl.length + 1,\r\n }));\r\n\r\n if (isNumeric) {\r\n let num = 0;\r\n if (event.target.value != \"\") {\r\n const str = event.target.value.replace(/,/g, \"\");\r\n num = parseFloat(str);\r\n }\r\n\r\n const { name, value } = event.target;\r\n SetDetailBarangMbl((prevState) => ({\r\n ...prevState,\r\n [name]: num,\r\n }));\r\n } else {\r\n const { name, value } = event.target;\r\n SetDetailBarangMbl((prevState) => ({\r\n ...prevState,\r\n [name]: value,\r\n }));\r\n }\r\n }\r\n\r\n function handleNilaiBarang(event) {\r\n if (event.target.value != \"\") {\r\n const str = event.target.value.replace(/,/g, \"\");\r\n setNilaiBarang(parseFloat(str));\r\n }\r\n }\r\n\r\n function handleIsInsurance() {\r\n if (packageContentsObj) {\r\n let selectedPackageContent = packageContentsObj.filter(\r\n (rw) => rw.PackageContentCode === packageContent\r\n );\r\n if (selectedPackageContent.length > 0) {\r\n setIsInsurance(selectedPackageContent[0].IsInsurance);\r\n }\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n setModalShow(false);\r\n clearDatas();\r\n \r\n history.push(\"/Home\");\r\n if (acc) {\r\n dispatch(customerActions.requestGetCustById(acc.CustId));\r\n\r\n var phone = sellerMobilePhnNo.substring(1, 20);\r\n var area = sellerMobilePhnNo.substring(0, 1);\r\n if (area === \"0\") {\r\n setSellerMobilePhnNo(\"+62\" + phone);\r\n }\r\n\r\n const pickupAddrTypeObj = {\r\n CustId: acc.CustId,\r\n PickupReqGrpStat: \"ACT\",\r\n };\r\n setPickupTime(\r\n moment(new Date()).format(\"YYYY-MM-DD\")\r\n );\r\n setMinPickupTime(\r\n moment(new Date()).format(\"YYYY-MM-DD\")\r\n );\r\n dispatch(pickupActions.getPickupAddr(pickupAddrTypeObj));\r\n setSelectedPckDist({ value: 0, label: \"Pilih Kecamatan / Kabupaten\" });\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (custObj != null) {\r\n setHideCredit(!custObj.IsAllowCredit);\r\n }\r\n }, [custObj]);\r\n\r\n useEffect(() => {\r\n setPackageContent(\"\");\r\n setEnableSubmitted(false);\r\n setIsInsurance(\"0\");\r\n if (packageCategory !== null && packageCategory !== \"\") {\r\n dispatch(packageContentActions.getPackageContent(packageCategory));\r\n } else {\r\n dispatch(packageContentActions.clearPackageContent());\r\n }\r\n }, [packageCategory]);\r\n\r\n useEffect(() => {\r\n if (\r\n packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN &&\r\n packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN\r\n ) {\r\n setPackageContentNotes(\"\");\r\n }\r\n handleIsInsurance();\r\n }, [packageContent]);\r\n\r\n useEffect(() => {\r\n if (respSubmitObj && respSubmitObj.ResiNo !== \"\") {\r\n let newArrDetailPenerimaMbl = arrDetailPenerimaMbl;\r\n newArrDetailPenerimaMbl.push(respSubmitObj);\r\n if (resiNos == \"\") {\r\n setResiNos(respSubmitObj.ResiNo);\r\n }\r\n else {\r\n let resiHNos = resiNos + \"|\" + respSubmitObj.ResiNo;\r\n setResiNos(resiHNos)\r\n }\r\n setArrDetailPenerimaMbl([...newArrDetailPenerimaMbl]);\r\n clearDataPenerima();\r\n }\r\n }, [respSubmitObj]);\r\n\r\n\r\n useEffect(() => {\r\n if (\r\n pickupAddrType !== \"\" &&\r\n pickupAddressTypeObj &&\r\n pickupAddressTypeObj.Result &&\r\n newPickupAddr === false\r\n ) {\r\n let pickupAddrTypeObj = pickupAddressTypeObj.Result.filter(\r\n (rw) => rw.AddrType === pickupAddrType\r\n );\r\n if (pickupAddrTypeObj.length > 0) {\r\n setPickupAddress(pickupAddrTypeObj[0][\"Addr\"]);\r\n setPickupContactPerson(pickupAddrTypeObj[0][\"ContactPerson\"]);\r\n var pickupPhnNo = pickupAddrTypeObj[0][\"PhoneNo\"];\r\n var phone = pickupPhnNo.substring(1, 20);\r\n var area = pickupPhnNo.substring(0, 1);\r\n if (area === \"0\") {\r\n setPickupPhnNo(\"+62\" + phone);\r\n } else {\r\n setPickupPhnNo(pickupPhnNo);\r\n }\r\n\r\n if (districtObj && pickupAddrTypeObj[0][\"DistrictId\"] !== null && pickupAddrTypeObj[0][\"DistrictId\"] > 0) {\r\n let pickupDistrictObj = districtObj.filter(\r\n (rw) => rw.DistrictId === pickupAddrTypeObj[0][\"DistrictId\"]\r\n );\r\n\r\n if (pickupDistrictObj !== null) {\r\n setSelectedPckDist({\r\n value: pickupDistrictObj[0][\"DistrictId\"],\r\n label: pickupDistrictObj[0][\"DistrictDescr\"],\r\n });\r\n\r\n if (pickupDistrictObj[0][\"OriginDestId\"] > 0) {\r\n setOriginDestId(pickupDistrictObj[0][\"OriginDestId\"])\r\n if (originObj != null && originObj.Result != null) {\r\n let selectedOriginObj = originObj?.Result.filter(\r\n (rw) => rw.OriginId === pickupDistrictObj[0][\"OriginDestId\"]\r\n );\r\n setOriginDestCode(selectedOriginObj[0][\"OriginCode\"])\r\n }\r\n }\r\n }\r\n } else {\r\n setSelectedPckDist({\r\n value: 0,\r\n label: \"Pilih Kecamatan / Kabupaten\",\r\n });\r\n }\r\n }\r\n } else {\r\n setPickupAddress(\"\");\r\n setPickupContactPerson(\"\");\r\n setPickupPhnNo(\"\");\r\n setSelectedPckDist({ value: 0, label: \"Pilih Kecamatan / Kabupaten\" });\r\n }\r\n }, [pickupAddrType, newPickupAddr, refresh, originObj]);\r\n\r\n useEffect(() => {\r\n if (districtObj)\r\n setRefresh(moment(new Date()).format(\"YYYY-MM-DD HH:mm:ss\"));\r\n }, [districtObj])\r\n\r\n useEffect(() => {\r\n if (!errSubmitObj && !errCalcObj && arrDetailBarangMbl.length > 0) {\r\n setAlert({ Type: \"\", StatusMessage: \"\" });\r\n }\r\n if (\r\n isError == false &&\r\n selectedDest &&\r\n selectedDest.value != 0 &&\r\n paymentType &&\r\n transportType &&\r\n packageCategory &&\r\n packageContent &&\r\n arrDetailBarangMbl.length > 0 &&\r\n originDestId > 0\r\n ) {\r\n const bookingHObj = {\r\n CustId: acc.CustId,\r\n DestDistrictId: selectedDest.value,\r\n PaymentType: paymentType,\r\n TransportType: transportType,\r\n PackageCategory: packageCategory,\r\n PackageContentCode: packageContent,\r\n BookingD: arrDetailBarangMbl,\r\n EstItemPriceAmt: nilaiBarang,\r\n OriginDestCode: originDestCode,\r\n };\r\n\r\n dispatch(bookingActions.requestCalculateBooking(bookingHObj));\r\n setEnableSubmitted(true);\r\n }\r\n\r\n if (arrDetailBarangMbl.length == 0) {\r\n setArrTempBarang([]);\r\n }\r\n }, [\r\n arrDetailBarangMbl,\r\n packageCategory,\r\n packageContent,\r\n transportType,\r\n selectedDest,\r\n paymentType,\r\n originDestId\r\n ]);\r\n\r\n useEffect(() => {\r\n districtObj &&\r\n setOptions(\r\n districtObj.map((dist, i) => ({\r\n value: dist.DistrictId,\r\n label: dist.DistrictDescr,\r\n }))\r\n );\r\n }, [districtObj]);\r\n\r\n // useEffect(() => {\r\n // originObj &&\r\n // setOriginOptions(\r\n // originObj.Result.map((or, i) => ({\r\n // value: or.OriginCode,\r\n // label: or.OriginName,\r\n // }))\r\n // );\r\n // if (originObj != null && originObj != undefined && acc.OriginDestCode) {\r\n // let selectedOriginObj = originObj.Result.filter(\r\n // (rw) => rw.OriginCode === acc.OriginDestCode\r\n // );\r\n // setSelectedOrigin({\r\n // value: selectedOriginObj[0][\"OriginCode\"],\r\n // label: selectedOriginObj[0][\"OriginName\"],\r\n // });\r\n // }\r\n // }, [originObj]);\r\n\r\n useEffect(() => {\r\n getTransportType();\r\n }, [selectedDest]);\r\n\r\n useEffect(() => {\r\n if (listPenerimaObj != null && listPenerimaObj.Result && listPenerimaObj.Result.length > 0) {\r\n setPenerimaOptions(\r\n listPenerimaObj.Result.map((penerima, i) => ({\r\n value: penerima.CustId,\r\n label: penerima.CustName,\r\n }))\r\n );\r\n }\r\n }, [listPenerimaObj]);\r\n\r\n useEffect(() => {\r\n if (selectedPenerima != null && selectedPenerima.value != 0) {\r\n dispatch(customerActions.requestGetPenerimaById(selectedPenerima.value));\r\n setRecipientId(selectedPenerima.value);\r\n }\r\n }, [selectedPenerima]);\r\n\r\n useEffect(() => {\r\n if (recipientName != \"\" && recipientName.length >= 3) {\r\n dispatch(customerActions.requestGetPenerimaByHint(recipientName));\r\n }\r\n }, [recipientName])\r\n\r\n useEffect(() => {\r\n if (penerimaObj != null) {\r\n setHideReceiverCredit(!penerimaObj.IsAllowReceiverCredit)\r\n }\r\n }, [penerimaObj])\r\n\r\n function getTransportType() {\r\n if (\r\n selectedDest &&\r\n selectedDest.value != 0\r\n ) {\r\n const transportTypeObj = {\r\n OriginDestId: originDestId,\r\n DestDistrictId: selectedDest.value,\r\n };\r\n\r\n dispatch(transportTypeActions.getTransportType(transportTypeObj));\r\n } else {\r\n dispatch(transportTypeActions.clearTransportType());\r\n }\r\n }\r\n\r\n function onSubmitDetailBarang() {\r\n setEnableSubmitted(false);\r\n setSimpanDataBarang(true);\r\n setIsError(false);\r\n if (arrDetailBarangMbl.length > 0) {\r\n setArrDetailBarangMbl((prevData) => [...prevData, detailBarangMbl]);\r\n } else {\r\n setArrDetailBarangMbl([detailBarangMbl]);\r\n }\r\n setSimpanDataBarang(false);\r\n }\r\n\r\n\r\n function onAddDetailBarang() {\r\n if (recipientName && recipientAddress && recipientMobilePhnNo && transportType && paymentType && packageCategory && packageContent &&\r\n selectedDest && selectedDest.value != 0 && (isInsurance == \"0\" || (isInsurance == \"1\" && nilaiBarang > 0))) {\r\n setIsError(false);\r\n setShowKoliForm(true);\r\n }\r\n else {\r\n setIsError(true);\r\n setAlert({\r\n Type: \"Info\",\r\n StatusMessage: \"Harap lengkapi data pengirim terlebih dahulu\",\r\n });\r\n }\r\n }\r\n\r\n const handleChangeDistrictPickup = (selectedOption) => {\r\n setSelectedPckDist(selectedOption);\r\n setIsError(false);\r\n };\r\n\r\n // const handleChangeOrigin = (selectedOption) => {\r\n // setSelectedOrigin(selectedOption);\r\n // };\r\n\r\n const handleChangeDest = (selectedOption) => {\r\n setSelectedDest(selectedOption);\r\n handleTagihTujuan(selectedOption.value);\r\n };\r\n\r\n const handleChangePenerima = (selectedOption) => {\r\n setSelectedPenerima(selectedOption);\r\n };\r\n\r\n const handleChangeMember = (event) => {\r\n setIsMember(event.target.checked);\r\n setRecipientId(0);\r\n setRecipientName(\"\");\r\n setSelectedPenerima({ value: 0, label: \"Pilih Penerima\" });\r\n setPenerimaOptions([]);\r\n };\r\n\r\n const style = {\r\n control: (base, state) => ({\r\n ...base,\r\n border: \"1px solid rgba(209, 213, 219, var(--tw-border-opacity))\",\r\n boxShadow: \"none\",\r\n \"&:hover\": {\r\n border: \"1px solid rgba(209, 213, 219, var(--tw-border-opacity))\",\r\n },\r\n }),\r\n };\r\n\r\n const styleMobile = {\r\n control: (base, state) => ({\r\n ...base,\r\n border: \"none\",\r\n boxShadow: \"none\",\r\n \"&:hover\": {\r\n border: \"none\",\r\n },\r\n }),\r\n };\r\n\r\n const history = useHistory();\r\n\r\n function navigateToHome() {\r\n setModalShow(false);\r\n setSubmitted(false);\r\n clearDatas();\r\n history.push(\"/Home\");\r\n }\r\n\r\n function navigateToCreateBooking() {\r\n setModalShow(false);\r\n setSubmitted(false);\r\n clearDatas();\r\n }\r\n\r\n function navigateToBookingDetail() {\r\n setModalShow(false);\r\n setSubmitted(false);\r\n window.open(`/booking-print?trxNo=${resiNos}`, '_blank');\r\n // console.log(\"********CLEAR DATA********\")\r\n clearDatas();\r\n // let param = \"\";\r\n // if (respSubmitObj != undefined) {\r\n // param =\r\n // \"?bookingDt=\" +\r\n // moment(respSubmitObj.BookDt).format(\"YYYY-MM-DD\") +\r\n // \"&noResi=\" +\r\n // respSubmitObj.ResiNo;\r\n // }\r\n\r\n // history.push(\"/booking-details\" + param);\r\n }\r\n\r\n function handleTagihTujuan(districtId) {\r\n let _districtObj = districtObj.find(x => x.DistrictId == districtId);\r\n let custCOD = custObj.IsAllowCOD;\r\n let tujuanCOD = false;\r\n let isAllowRcvPayment = \"1\";\r\n\r\n if (_districtObj != null) {\r\n isAllowRcvPayment = _districtObj.IsAllowRcvPayment;\r\n tujuanCOD = isAllowRcvPayment == \"1\" ? true : false;\r\n if (custCOD && tujuanCOD) setHideCOD(false);\r\n else setHideCOD(true);\r\n } else {\r\n setHideCOD(!custCOD);\r\n }\r\n }\r\n\r\n return (\r\n <>\r\n \r\n
\r\n
\r\n Buat Booking\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n 1\r\n
\r\n
\r\n Pengirim\r\n
\r\n
\r\n
1 ? \"border-red-600\" : \"border-gray-500\"\r\n } `}\r\n > \r\n
\r\n
1 ? \"bg-red-600 text-white\" : \"text-red-600\"\r\n } `}\r\n >\r\n 2\r\n \r\n
\r\n Penerima\r\n
\r\n
\r\n
\r\n \r\n Summary Booking\r\n \r\n \r\n {(\r\n <>\r\n \r\n
\r\n
\r\n
\r\n
\r\n Booking telah sukses dibuat\r\n
\r\n
\r\n
\r\n
\r\n
\r\n navigateToBookingDetail()}\r\n >\r\n Cetak Label Barang\r\n \r\n navigateToCreateBooking()}\r\n >\r\n Buat Booking Lain\r\n \r\n navigateToHome()}\r\n >\r\n Kembali ke Home\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Booking telah sukses dibuat\r\n
\r\n
\r\n
\r\n
\r\n
\r\n navigateToBookingDetail()}\r\n >\r\n Cetak Label Barang\r\n \r\n navigateToCreateBooking()}\r\n >\r\n Buat Booking Lain\r\n \r\n navigateToHome()}\r\n >\r\n Kembali ke Home\r\n \r\n
\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default BookingAddFormV2;\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { bookingActions } from \"../../_actions\";\r\nimport {\r\n BookingDetailTables,\r\n Pagination,\r\n AlertMessage,\r\n ShortcutDate,\r\n} from \"../../components\";\r\nimport { useLocation } from \"react-router-dom\";\r\nimport { FaCaretDown, FaCaretUp } from \"react-icons/fa\";\r\nimport { masterSettingConstants } from \"../../_constants\";\r\nimport axios from \"axios\";\r\nimport { urlConstants } from \"../../_constants/url.constants\";\r\n\r\nconst BookingDetails = ({ t }) => {\r\n const dispatch = useDispatch();\r\n const [enabled, setEnabled] = useState(false);\r\n const [submitted, setSubmitted] = useState(false);\r\n const [isError, setIsError] = useState(false);\r\n const [shortcut, setShortcut] = useState(false);\r\n const [exported, setExported] = useState(false);\r\n let date = new Date();\r\n const acc = useSelector((state) => state.authentication.accInfo);\r\n function useQuery() {\r\n const { search } = useLocation();\r\n return React.useMemo(() => new URLSearchParams(search), [search]);\r\n }\r\n const query = useQuery();\r\n const _dropType = query.get(\"dropType\");\r\n const _addrType = query.get(\"addrType\");\r\n const bookingDt =\r\n query.get(\"bookingDt\") != null ? dateParser(query.get(\"bookingDt\")) : null;\r\n const noResi = query.get(\"noResi\");\r\n\r\n const [exportDataObj, setExportDataObj] = useState();\r\n const [totalRecord, setTotalRecord] = useState(0);\r\n const [loadMore, setLoadmore] = useState(1);\r\n const [rowPerPage, setRowPerPage] = useState(10);\r\n const [recipientName, setRecipientName] = useState(\"\");\r\n const [dropType, setDropType] = useState(_dropType != null ? _dropType : \"\");\r\n const [addrType, setAddrType] = useState(_addrType != null ? _addrType : \"\");\r\n const [paymentType, setPaymentType] = useState(\"\");\r\n const [bookStat, setBookStat] = useState(\"\");\r\n const [resiNo, setResiNo] = useState(noResi ? noResi : \"\");\r\n const [transportType, setTransportType] = useState(\"\");\r\n const [sellerAliasName, setSellerAliasName] = useState(\"\");\r\n const [custRefNo, setCustRefNo] = useState(\"\");\r\n const [bookingDtGte, setBookingDtGte] = useState(\r\n bookingDt\r\n ? bookingDt\r\n : dateParser(new Date(date.getFullYear(), date.getMonth(), 1))\r\n );\r\n const [bookingDtLte, setBookingDtLte] = useState(\r\n bookingDt ? bookingDt : dateParser(date)\r\n );\r\n let [cur, setCur] = useState(1);\r\n let [num, setNum] = useState(1);\r\n const bookingDetailObj = useSelector(\r\n (state) => state.bookingDetails.bookingDetailObj\r\n );\r\n const errBookingObj = useSelector(\r\n (state) => state.bookingDetails.errBookingDetailObj\r\n );\r\n\r\n const [alert, setAlert] = useState({\r\n Type: \"\",\r\n StatusMessage: \"\",\r\n });\r\n\r\n const client = axios.create({\r\n baseURL: urlConstants.URL_EXPORT_BOOKING_DETAIL\r\n });\r\n\r\n const exportBookingDetail = async (bookDetailObj) => {\r\n try {\r\n let result = await client.post('', bookDetailObj);\r\n if (result.data.IsError) {\r\n console.log('Export Error')\r\n setIsError(true);\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: result.data.StatusMessage,\r\n });\r\n }\r\n else {\r\n setExportDataObj({\r\n exportBookingDetailObj: result.data.ObjectResult\r\n });\r\n }\r\n }\r\n catch (error) {\r\n console.log(error);\r\n setIsError(true);\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: \"An error occure, please contact our admin\",\r\n });\r\n }\r\n };\r\n\r\n\r\n function hitBookingDetail(pageNo, rowPerPages) {\r\n if (\r\n bookingDtGte != \"\" &&\r\n bookingDtGte != undefined &&\r\n bookingDtLte != \"\" &&\r\n bookingDtLte != undefined &&\r\n acc != undefined\r\n ) {\r\n const bookDetailObj = {\r\n CustId: acc.CustId,\r\n BookingDtGte: bookingDtGte,\r\n BookingDtLte: bookingDtLte,\r\n ResiNo: resiNo,\r\n SellerAliasName: sellerAliasName,\r\n RecipientName: recipientName,\r\n CustRefNo: custRefNo,\r\n DropType: dropType,\r\n AddrType: addrType,\r\n PaymentType: paymentType,\r\n BookStat: bookStat,\r\n TransportType: transportType,\r\n RowPerPage: rowPerPages,\r\n PageNo: pageNo,\r\n };\r\n dispatch(bookingActions.requestBookingDetail(bookDetailObj));\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n setLoadmore(1);\r\n setTotalRecord(0);\r\n setCur(1);\r\n setNum(1);\r\n setSubmitted(false);\r\n dispatch(bookingActions.clearBookingDetail());\r\n hitBookingDetail(1, rowPerPage);\r\n }, []);\r\n\r\n useEffect(() => {\r\n setTotalRecord(0);\r\n if (errBookingObj && errBookingObj.StatusCode !== \"200\") {\r\n setIsError(true);\r\n setAlert({ Type: \"Error\", StatusMessage: errBookingObj.StatusMessage });\r\n }\r\n }, [errBookingObj]);\r\n\r\n function handleSubmit(e) {\r\n e.preventDefault();\r\n setSubmitted(true);\r\n setLoadmore(1);\r\n setTotalRecord(0);\r\n setCur(1);\r\n setNum(1);\r\n hitBookingDetail(1, rowPerPage);\r\n }\r\n\r\n useEffect(() => {\r\n if (totalRecord > 0 && acc.CustId) {\r\n hitBookingDetail(cur, rowPerPage);\r\n }\r\n }, [cur]);\r\n\r\n useEffect(() => {\r\n if (bookingDetailObj && bookingDetailObj.TotalRecord) {\r\n setTotalRecord(bookingDetailObj.TotalRecord);\r\n }\r\n }, [bookingDetailObj]);\r\n\r\n useEffect(() => {\r\n if (totalRecord > 0 && acc.CustId) {\r\n hitBookingDetail(1, loadMore * rowPerPage);\r\n }\r\n }, [loadMore]);\r\n\r\n function dateParser(value) {\r\n const date = new Date(value);\r\n let dateParsed =\r\n date.getFullYear() +\r\n \"-\" +\r\n date.toLocaleString(\"en-us\", { month: \"2-digit\" }) +\r\n \"-\" +\r\n date.toLocaleString(\"en-us\", { day: \"2-digit\" });\r\n return dateParsed;\r\n }\r\n\r\n function exportData() {\r\n setIsError(false);\r\n if (\r\n bookingDtGte != \"\" &&\r\n bookingDtGte != undefined &&\r\n bookingDtLte != \"\" &&\r\n bookingDtLte != undefined &&\r\n acc != undefined\r\n ) {\r\n const bookDetailObj = {\r\n CustId: acc.CustId,\r\n BookingDtGte: bookingDtGte,\r\n BookingDtLte: bookingDtLte,\r\n ResiNo: resiNo,\r\n SellerAliasName: sellerAliasName,\r\n RecipientName: recipientName,\r\n CustRefNo: custRefNo,\r\n DropType: dropType,\r\n AddrType: addrType,\r\n PaymentType: paymentType,\r\n BookStat: bookStat,\r\n TransportType: transportType,\r\n RowPerPage: 99999,\r\n PageNo: 1,\r\n };\r\n exportBookingDetail(bookDetailObj);\r\n setExported(true);\r\n }\r\n }\r\n useEffect(() => {\r\n if (exportDataObj && exportDataObj.exportBookingDetailObj.ExportDataFile && exported) {\r\n var a = document.createElement(\"a\");\r\n a.href =\r\n \"data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,\" +\r\n exportDataObj.exportBookingDetailObj.ExportDataFile;\r\n a.download = exportDataObj.exportBookingDetailObj.Filename;\r\n a.click();\r\n setExported(false);\r\n }\r\n }, [exportDataObj]);\r\n\r\n const getDate = (dateObj) => {\r\n setLoadmore(1);\r\n setTotalRecord(0);\r\n setCur(1);\r\n setNum(1);\r\n setBookingDtGte(dateObj.dateFrom);\r\n setBookingDtLte(dateObj.dateTo);\r\n setShortcut(true);\r\n };\r\n\r\n useEffect(() => {\r\n if (shortcut) {\r\n hitBookingDetail(1, rowPerPage);\r\n setSubmitted(true);\r\n setShortcut(false);\r\n }\r\n }, [shortcut]);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n
Booking Details \r\n \r\n
\r\n
\r\n {isError == true && (\r\n
\r\n )}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Booking Detail\r\n \r\n \r\n
\r\n {isError == true && errBookingObj && (\r\n
\r\n )}\r\n
\r\n
\r\n
\r\n
\r\n
Booking Monitoring \r\n \r\n
\r\n {isError == true && errBookingObj && (\r\n
\r\n )}\r\n {bookingObj && bookingObj.Result && (\r\n <>\r\n
\r\n \r\n )}\r\n
\r\n
\r\n
\r\n Booking Monitoring\r\n \r\n \r\n
\r\n {isError == true && errBookingObj && (\r\n
\r\n )}\r\n {bookingObj && bookingObj.Result && (\r\n <>\r\n
\r\n \r\n )}\r\n
\r\n
\r\n
Pengaturan Label Pengiriman \r\n \r\n
\r\n
\r\n
Ukuran Kertas
\r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n {\r\n printBookingObj &&\r\n
\r\n }\r\n
\r\n
\r\n
\r\n Pengaturan Label Pengiriman\r\n \r\n \r\n\r\n
\r\n
\r\n
Ukuran Kertas
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n {\r\n\r\n printBookingObj && \r\n <>\r\n
\r\n {/*
*/}\r\n \r\n }\r\n
\r\n
\r\n
Upload Booking \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n Upload Booking\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n Summary Upload Booking\r\n \r\n \r\n {respSubmitObj && submitted == true && (\r\n <>\r\n \r\n
\r\n
\r\n
\r\n
\r\n Booking telah sukses di upload, data yang diupload dapat di monitoring pada menu Upload Monitoring\r\n
\r\n
\r\n
\r\n
\r\n SUMMARY\r\n
\r\n
\r\n
\r\n
\r\n Nama File\r\n
\r\n
\r\n {fileName}\r\n
\r\n
\r\n
\r\n
\r\n Tanggal Upload\r\n
\r\n
\r\n {moment(respSubmitObj.UploadDt).format(\"DD-MM-YY HH:mm\")}\r\n
\r\n
\r\n
\r\n
\r\n Jumlah Record\r\n
\r\n
\r\n {respSubmitObj.TotalRecord}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n navigateToUploadMonitoring()}\r\n >\r\n Upload Monitoring\r\n \r\n navigateToUploadBooking()}\r\n >\r\n Upload Booking Lain\r\n \r\n navigateToHome()}\r\n >\r\n Kembali ke Home\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Booking telah sukses di upload, data yang diupload dapat di monitoring pada menu Upload Monitoring\r\n
\r\n
\r\n
\r\n
\r\n SUMMARY\r\n
\r\n
\r\n
\r\n
\r\n Nama File\r\n
\r\n
\r\n {fileName}\r\n
\r\n
\r\n
\r\n
\r\n Tanggal Upload\r\n
\r\n
\r\n {moment(respSubmitObj.UploadDt).format(\"DD-MM-YY HH:mm\")}\r\n
\r\n
\r\n
\r\n
\r\n Jumlah Record\r\n
\r\n
\r\n {respSubmitObj.TotalRecord}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n navigateToUploadMonitoring()}\r\n >\r\n Upload Monitoring\r\n \r\n navigateToUploadBooking()}\r\n >\r\n Upload Booking Lain\r\n \r\n navigateToHome()}\r\n >\r\n Kembali ke Home\r\n \r\n
\r\n
\r\n \r\n \r\n );\r\n}\r\nexport default BookingUploadForm;","import React, { useState, useEffect, useRef } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { masterSettingConstants } from \"../../_constants\";\r\nimport {\r\n districtActions,\r\n bookingActions,\r\n packageContentActions,\r\n originActions,\r\n transportTypeActions,\r\n customerActions,\r\n} from \"../../_actions\";\r\nimport {\r\n TableDetailBarang,\r\n AlertMessage,\r\n TableDetailPenerima,\r\n TableDetailBarangEdit,\r\n} from \"../../components\";\r\nimport Input from \"react-phone-number-input/input\";\r\nimport { NumericFormat } from \"react-number-format\";\r\nimport { formatPhoneNumber } from \"react-phone-number-input\";\r\nimport \"../../custom.css\";\r\nimport \"react-phone-number-input/style.css\";\r\nimport Select, { createFilter } from \"react-select\";\r\nimport { Modal, ModalHeader, ModalBody } from \"reactstrap\";\r\nimport { useHistory, useLocation } from \"react-router-dom\";\r\nimport moment from \"moment\";\r\n\r\nconst BookingAddFormV3 = ({ t }) => {\r\n const history = useHistory();\r\n const dispatch = useDispatch();\r\n const acc = useSelector((state) => state.authentication.accInfo);\r\n const pickupAddrSelectedObj = useSelector(\r\n (state) => state.selectedPickupAddr.selectedPickupAddrObj\r\n );\r\n\r\n const recipientListObj = useSelector((state) => state.recipientListBooking.recipientListObj);\r\n\r\n const packageContentsObj = useSelector(\r\n (state) => state.packagecontent.packageContentObj\r\n );\r\n const districtObj = useSelector((state) => state.district.districtObj);\r\n const respCalcObj = useSelector(\r\n (state) => state.calculateBookingPrice.calcBookingObj\r\n );\r\n const respSubmitObj = useSelector(\r\n (state) => state.submitBooking.submitBookingObj\r\n );\r\n const errCalcObj = useSelector(\r\n (state) => state.calculateBookingPrice.errCalcBookingObj\r\n );\r\n const errSubmitObj = useSelector(\r\n (state) => state.submitBooking.errSubmitBookingObj\r\n );\r\n const originObj = useSelector((state) => state.origin.origin);\r\n const transportTypeObj = useSelector(\r\n (state) => state.transportType.transportTypeObj\r\n );\r\n const errTransportTypeObj = useSelector(\r\n (state) => state.transportType.errTransportTypeObj\r\n );\r\n const custObj = useSelector((state) => state.custById.custObj);\r\n const listPenerimaObj = useSelector(\r\n (state) => state.penerimaByHint.penerimaByHintObj\r\n );\r\n const penerimaObj = useSelector((state) => state.penerimaById.penerimaObj);\r\n const custBookHDetailObj = useSelector(\r\n (state) => state.getCustBookHDetail.custBookHDetailObj\r\n );\r\n const cancelKoliBookingObj = useSelector(\r\n (state) => state.cancelKoliBooking.cancelKoliBookingObj\r\n );\r\n\r\n const [isError, setIsError] = useState(false);\r\n const [submitted, setSubmitted] = useState(false);\r\n const [simpanDataBarang, setSimpanDataBarang] = useState(false);\r\n const [enableSubmitted, setEnableSubmitted] = useState(false);\r\n const [newPickupAddr, setNewPickupAddr] = useState(false);\r\n const [packageCategory, setPackageCategory] = useState(\"\");\r\n const [sellerName, setSellerName] = useState(acc && acc.CustName);\r\n const [sellerAliasName, setSellerAliasName] = useState(acc && acc.CustName);\r\n const [sellerMobilePhnNo, setSellerMobilePhnNo] = useState(\r\n acc && acc.MobilePhoneNo\r\n );\r\n const [originDestId, setOriginDestId] = useState(0);\r\n const [originDestCode, setOriginDestCode] = useState(\"\");\r\n const [referenceNo, setReferenceNo] = useState(\"\");\r\n const [resiNos, setResiNos] = useState(\"\");\r\n const [recipientId, setRecipientId] = useState(0);\r\n const [recipientName, setRecipientName] = useState(\"\");\r\n const [recipientMobilePhnNo, setRecipientMobilePhnNo] = useState(\"\");\r\n const [recipientAddress, setRecipientAddress] = useState(\"\");\r\n const [dropType, setDropType] = useState(\"PICKUP\");\r\n const [paymentType, setPaymentType] = useState(\"\");\r\n const [transportType, setTransportType] = useState(\"\");\r\n const [estItemWeight, setEstItemWeight] = useState(0);\r\n const [packageContent, setPackageContent] = useState(\"\");\r\n const [packageContentNotes, setPackageContentNotes] = useState(\"\");\r\n const [pickupContactPerson, setPickupContactPerson] = useState(\"\");\r\n const [pickupAddress, setPickupAddress] = useState(\"\");\r\n const [pickupNotes, setPickupNotes] = useState(\"\");\r\n const [pickupPhnNo, setPickupPhnNo] = useState(\"\");\r\n const [pickupTime, setPickupTime] = useState(\r\n moment(new Date()).format(\"YYYY-MM-DD\")\r\n );\r\n const [minPickupTime, setMinPickupTime] = useState(\r\n moment(new Date()).format(\"YYYY-MM-DD\")\r\n );\r\n const [pickupAddrType, setPickupAddrType] = useState(\"\");\r\n const [bookingNotes, setBookingNotes] = useState(\"\");\r\n const [isInsurance, setIsInsurance] = useState(\"0\");\r\n const [nilaiBarang, setNilaiBarang] = useState(0);\r\n const [totalKoli, setTotalKoli] = useState(1);\r\n const [totalNonCanKoli, setTotalNonCanKoli] = useState(0);\r\n const [currStep, setCurrentStep] = useState(1);\r\n const [arrTempBarang, setArrTempBarang] = useState([]);\r\n const [arrDetailBarangMbl, setArrDetailBarangMbl] = useState([]);\r\n const [arrResiNo, setArrResiNo] = useState([]);\r\n const [detailBarangMbl, setDetailBarangMbl] = useState({\r\n CustBookDId: 0,\r\n ItemName: \"\",\r\n ItemWeight: 0,\r\n DimP: 0,\r\n DimL: 0,\r\n DimT: 0,\r\n IsPacking: false,\r\n PackingKayu: false,\r\n BubbleWrap: false,\r\n Wrapping: false\r\n });\r\n const [alert, setAlert] = useState({\r\n Type: \"\",\r\n StatusMessage: \"\",\r\n });\r\n const [modalShow, setModalShow] = useState(false);\r\n const [showPenerimaForm, setShowPenerimaForm] = useState(false);\r\n const [showKoliForm, setShowKoliForm] = useState(false);\r\n const [isEditMode, setIsEditMode] = useState(false);\r\n function useQuery() {\r\n const { search } = useLocation();\r\n return React.useMemo(() => new URLSearchParams(search), [search]);\r\n }\r\n const query = useQuery();\r\n const [trxNo, setTrxNo] = useState(0);\r\n\r\n const [options, setOptions] = useState([]);\r\n const [selectedPckDist, setSelectedPckDist] = useState();\r\n const [selectedDest, setSelectedDest] = useState();\r\n const [penerimaOptions, setPenerimaOptions] = useState([]);\r\n const [selectedPenerima, setSelectedPenerima] = useState(null);\r\n const [hideCOD, setHideCOD] = useState(true);\r\n const [hideCredit, setHideCredit] = useState(true);\r\n const [hideReceiverCredit, setHideReceiverCredit] = useState(true);\r\n const [isMember, setIsMember] = useState(false);\r\n const [refresh, setRefresh] = useState(\r\n moment(new Date()).format(\"YYYY-MM-DD HH:mm:ss\")\r\n );\r\n const [isEditKoli, setIsEditKoli] = useState(false);\r\n const [koliData, setKoliData] = useState([]);\r\n const [errors, setErrors] = useState({});\r\n\r\n const style = {\r\n control: (base, state) => ({\r\n ...base,\r\n border: \"1px solid rgba(209, 213, 219, var(--tw-border-opacity))\",\r\n boxShadow: \"none\",\r\n \"&:hover\": {\r\n border: \"1px solid rgba(209, 213, 219, var(--tw-border-opacity))\",\r\n },\r\n }),\r\n };\r\n\r\n const styleMobile = {\r\n control: (base, state) => ({\r\n ...base,\r\n border: \"none\",\r\n boxShadow: \"none\",\r\n \"&:hover\": {\r\n border: \"none\",\r\n },\r\n }),\r\n };\r\n\r\n const scrollToTop = () => {\r\n window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });\r\n };\r\n\r\n const handleChangeDest = (selectedOption) => {\r\n setSelectedDest(selectedOption);\r\n handleTagihTujuan(selectedOption.value);\r\n };\r\n\r\n useEffect(() => {\r\n setModalShow(false);\r\n clearDatas();\r\n if (acc && acc.IsSubAccount == false) {\r\n clearDatas();\r\n history.push(\"/Home\");\r\n }\r\n if (acc) {\r\n dispatch(customerActions.requestGetCustById(acc.CustId));\r\n\r\n var phone = sellerMobilePhnNo.substring(1, 20);\r\n var area = sellerMobilePhnNo.substring(0, 1);\r\n if (area === \"0\") {\r\n setSellerMobilePhnNo(\"+62\" + phone);\r\n }\r\n\r\n setPickupTime(moment(new Date()).format(\"YYYY-MM-DD\"));\r\n setMinPickupTime(moment(new Date()).format(\"YYYY-MM-DD\"));\r\n setSelectedPckDist({ value: 0, label: \"Pilih Kecamatan / Kabupaten\" });\r\n if (!districtObj) {\r\n dispatch(districtActions.getDistrict());\r\n }\r\n }\r\n if (pickupAddrSelectedObj) {\r\n setPickupAddress(pickupAddrSelectedObj.Addr);\r\n setPickupContactPerson(pickupAddrSelectedObj.ContactPerson);\r\n setPickupPhnNo(pickupAddrSelectedObj.PhoneNo);\r\n setPickupAddrType(pickupAddrSelectedObj.AddrType);\r\n }\r\n\r\n if (trxNo !== 0) {\r\n getCustBookHDetail();\r\n setShowPenerimaForm(true);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (errCalcObj && errCalcObj.StatusCode != \"200\") {\r\n setIsError(true);\r\n setSubmitted(false);\r\n setAlert({ Type: \"Error\", StatusMessage: errCalcObj.StatusMessage });\r\n setArrDetailBarangMbl((arrDetailBarangMbl) => [\r\n ...arrDetailBarangMbl.filter(\r\n (rw) => rw.CustBookDId != arrDetailBarangMbl.length\r\n ),\r\n ]);\r\n }\r\n }, [errCalcObj]);\r\n\r\n useEffect(() => {\r\n if (respCalcObj && respCalcObj.BookingD.length > 0) {\r\n setArrTempBarang(respCalcObj.BookingD.map(bookingD => {\r\n let splitString = bookingD.PackingType.split(';');\r\n let kayu = splitString.findIndex(x => x == \"KAYU\") != -1 ? true : false;\r\n let bubbleWrap = splitString.findIndex(x => x == \"BUBBLEWRAP\") != -1 ? true : false;\r\n let wrapping = splitString.findIndex(x => x == \"WRAPPING\") != -1 ? true : false;\r\n\r\n return {\r\n ...bookingD,\r\n IsPacking: kayu || bubbleWrap || wrapping,\r\n PackingKayu: kayu,\r\n BubbleWrap: bubbleWrap,\r\n Wrapping: wrapping\r\n }\r\n }).sort((a, b) => a.SeqNo - b.SeqNo));\r\n setDetailBarangMbl({\r\n CustBookDId: 0,\r\n ItemName: \"\",\r\n ItemWeight: 0,\r\n DimP: 0,\r\n DimL: 0,\r\n DimT: 0,\r\n IsPacking: false,\r\n PackingKayu: false,\r\n BubbleWrap: false,\r\n Wrapping: false\r\n });\r\n } else {\r\n setArrTempBarang([]);\r\n }\r\n }, [respCalcObj]);\r\n\r\n useEffect(() => {\r\n if (errSubmitObj && errSubmitObj.StatusCode != \"200\") {\r\n setIsError(true);\r\n setSubmitted(false);\r\n setAlert({ Type: \"Error\", StatusMessage: errSubmitObj.StatusMessage });\r\n }\r\n }, [errSubmitObj]);\r\n\r\n useEffect(() => {\r\n if (errTransportTypeObj && errTransportTypeObj.StatusCode != \"200\") {\r\n setIsError(true);\r\n setSubmitted(false);\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: errTransportTypeObj.StatusMessage,\r\n });\r\n }\r\n }, [errTransportTypeObj]);\r\n\r\n useEffect(() => {\r\n if (detailBarangMbl.CustBookDId != 0) {\r\n setShowKoliForm(false);\r\n } else {\r\n setShowKoliForm(true);\r\n }\r\n }, [detailBarangMbl]);\r\n\r\n useEffect(() => {\r\n if (custObj != null) {\r\n setHideCredit(!custObj.IsAllowCredit);\r\n }\r\n }, [custObj]);\r\n\r\n useEffect(() => {\r\n setPackageContent(\"\");\r\n setEnableSubmitted(false);\r\n setIsInsurance(\"0\");\r\n if (packageCategory !== null && packageCategory !== \"\") {\r\n\r\n dispatch(packageContentActions.getPackageContent(packageCategory));\r\n } else {\r\n dispatch(packageContentActions.clearPackageContent());\r\n }\r\n }, [packageCategory]);\r\n\r\n useEffect(() => {\r\n if (respSubmitObj && respSubmitObj.ResiNo !== \"\") {\r\n let newArrDetailPenerimaMbl = [];\r\n newArrDetailPenerimaMbl.push(respSubmitObj);\r\n\r\n if (recipientListObj != undefined) {\r\n for (let i = 0; i < recipientListObj.length; i++) {\r\n if (respSubmitObj.ResiNo != recipientListObj[i].ResiNo) {\r\n newArrDetailPenerimaMbl.push(recipientListObj[i]);\r\n setResiNos(respSubmitObj.ResiNo);\r\n }\r\n }\r\n }\r\n dispatch(bookingActions.getListRecipient(newArrDetailPenerimaMbl));\r\n setShowPenerimaForm(false);\r\n setIsError(false);\r\n setIsEditMode(false);\r\n setAlert({ Type: \"\", StatusMessage: \"\" });\r\n }\r\n }, [respSubmitObj]);\r\n\r\n useEffect(() => {\r\n if (!errSubmitObj && !errCalcObj && arrDetailBarangMbl.length > 0) {\r\n setAlert({ Type: \"\", StatusMessage: \"\" });\r\n }\r\n if (\r\n isError == false &&\r\n selectedDest &&\r\n selectedDest.value != 0 &&\r\n paymentType &&\r\n transportType &&\r\n packageCategory &&\r\n packageContent &&\r\n arrDetailBarangMbl.length > 0 &&\r\n originDestId > 0 && (isInsurance == \"0\" || (isInsurance == \"1\" && nilaiBarang > 0))\r\n ) {\r\n let _bookingD = [];\r\n arrDetailBarangMbl.map(\r\n (detail, i) => {\r\n let _arrTempObj = arrTempBarang.find(x => x.CustBookDId == detail.CustBookDId);\r\n if (_arrTempObj != undefined && _arrTempObj != null) {\r\n var packingType = \"\";\r\n if (detail.PackingKayu) {\r\n packingType = \"KAYU\"\r\n }\r\n if (detail.BubbleWrap) {\r\n packingType = (packingType != \"\" ? packingType + \";\" : \"\") + \"BUBBLEWRAP\"\r\n }\r\n if (detail.Wrapping) {\r\n packingType = (packingType != \"\" ? packingType + \";\" : \"\") + \"WRAPPING\"\r\n }\r\n\r\n let newDetailBarang = {\r\n CustBookDId: detail.CustBookDId,\r\n ItemCodeNo: \"\",\r\n ItemWeight: detail.ItemWeight,\r\n DimP: detail.DimP,\r\n DimL: detail.DimL,\r\n DimT: detail.DimT,\r\n CustBookDStat: _arrTempObj.CustBookDStat,\r\n IsPacking: detail.IsPacking,\r\n PackingType: packingType\r\n }\r\n _bookingD.push(newDetailBarang);\r\n }\r\n }\r\n )\r\n\r\n let selectedPackageContent = packageContentsObj.filter(\r\n (rw) => rw.PackageContentCode === packageContent\r\n );\r\n if (selectedPackageContent.length > 0) {\r\n if (selectedPackageContent[0].IsInsurance == \"1\" && nilaiBarang <= 0) {\r\n setIsError(true);\r\n handleError(\"nilaiBarang\", \"Harap isi nilai barang.\");\r\n }\r\n else {\r\n handleError(\"nilaiBarang\", null);\r\n const bookingHObj = {\r\n CustId: acc.CustId,\r\n DestDistrictId: selectedDest.value,\r\n PaymentType: paymentType,\r\n TransportType: transportType,\r\n PackageCategory: packageCategory,\r\n PackageContentCode: packageContent,\r\n BookingD: _bookingD,\r\n EstItemPriceAmt: nilaiBarang,\r\n OriginDestCode: originDestCode,\r\n };\r\n dispatch(bookingActions.requestCalculateBooking(bookingHObj));\r\n setEnableSubmitted(true);\r\n }\r\n if (arrDetailBarangMbl.length == 0 && custBookHDetailObj == 0) {\r\n setArrTempBarang([]);\r\n }\r\n }\r\n }\r\n\r\n }, [\r\n arrDetailBarangMbl,\r\n packageCategory,\r\n packageContent,\r\n transportType,\r\n selectedDest,\r\n paymentType,\r\n originDestId,\r\n isInsurance,\r\n isError,\r\n nilaiBarang\r\n ]);\r\n\r\n useEffect(() => {\r\n if (districtObj) {\r\n setOptions(\r\n districtObj.map((dist, i) => ({\r\n value: dist.DistrictId,\r\n label: dist.DistrictDescr,\r\n }))\r\n );\r\n if (pickupAddrSelectedObj && pickupAddrSelectedObj.DistrictId !== undefined && pickupAddrSelectedObj.DistrictId !== null && pickupAddrSelectedObj.DistrictId > 0) {\r\n let pickupDistrictObj = districtObj.filter(\r\n (rw) => rw.DistrictId === pickupAddrSelectedObj.DistrictId\r\n );\r\n if (pickupDistrictObj !== null) {\r\n setSelectedPckDist({\r\n value: pickupDistrictObj[0][\"DistrictId\"],\r\n label: pickupDistrictObj[0][\"DistrictDescr\"],\r\n });\r\n\r\n if (pickupDistrictObj[0][\"OriginDestId\"] > 0) {\r\n setOriginDestId(pickupDistrictObj[0][\"OriginDestId\"]);\r\n if (originObj && originObj.Result != null) {\r\n let selectedOriginObj = originObj?.Result.filter(\r\n (rw) => rw.OriginId === pickupDistrictObj[0][\"OriginDestId\"]\r\n );\r\n if (selectedOriginObj.length > 0) {\r\n setOriginDestCode(selectedOriginObj[0][\"OriginCode\"]);\r\n }\r\n else {\r\n setSelectedPckDist({\r\n value: 0,\r\n label: \"Pilih Kecamatan / Kabupaten\",\r\n });\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }, [districtObj, originObj]);\r\n\r\n useEffect(() => {\r\n if (custBookHDetailObj && packageContentsObj) {\r\n let selectedPackageContent = packageContentsObj.filter(\r\n (rw) => rw.PackageContentCode === custBookHDetailObj.PackageContentCode\r\n );\r\n\r\n setPackageContentNotes(custBookHDetailObj.PackageContentNotes);\r\n if (selectedPackageContent.length > 0) {\r\n setPackageContent(selectedPackageContent[0].PackageContentCode);\r\n setIsInsurance(selectedPackageContent[0].IsInsurance);\r\n }\r\n }\r\n }, [packageContentsObj, custBookHDetailObj])\r\n\r\n useEffect(() => {\r\n if (isEditMode && custBookHDetailObj) {\r\n setTrxNo(custBookHDetailObj.CustBookHId);\r\n setSelectedDest({ value: custBookHDetailObj.DistrictId, label: custBookHDetailObj.DistrictDescr });\r\n setPackageCategory(custBookHDetailObj.PackageCategory);\r\n setTransportType(custBookHDetailObj.TransportType);\r\n setPaymentType(custBookHDetailObj.PaymentType);\r\n setOriginDestCode(custBookHDetailObj.OriginDestCode);\r\n setRecipientName(custBookHDetailObj.RecipientName);\r\n let PhoneNo = custBookHDetailObj.RecipientMblPhoneNo;\r\n if (PhoneNo && PhoneNo.length > 1) {\r\n var phone = PhoneNo.substring(1, 20);\r\n var area = PhoneNo.substring(0, 1);\r\n if (area === \"0\") {\r\n PhoneNo = \"+62\" + phone;\r\n }\r\n setRecipientMobilePhnNo(PhoneNo);\r\n }\r\n setRecipientAddress(custBookHDetailObj.RecipientAddr);\r\n setReferenceNo(custBookHDetailObj.CustRefNo);\r\n setBookingNotes(custBookHDetailObj.BookNotes)\r\n setTotalKoli(custBookHDetailObj.ActualTotalItem)\r\n setArrTempBarang(custBookHDetailObj.CustBookDs.sort((a, b) => a.SeqNo - b.SeqNo));\r\n\r\n setArrDetailBarangMbl(custBookHDetailObj.CustBookDs.map(\r\n (detail, i) => {\r\n var packingType = [];\r\n\r\n packingType = detail.PackingType.split(';');\r\n detail.PackingKayu = packingType.findIndex(x => x == \"KAYU\") != -1;\r\n detail.BubbleWrap = packingType.findIndex(x => x == \"BUBBLEWRAP\") != -1;\r\n detail.Wrapping = packingType.findIndex(x => x == \"WRAPPING\") != -1;\r\n\r\n return detail;\r\n }\r\n ));\r\n\r\n setIsInsurance(custBookHDetailObj.IsInsurance)\r\n setNilaiBarang(custBookHDetailObj.EstItemPriceAmt)\r\n setPackageContentNotes(custBookHDetailObj.PackageContentNotes);\r\n setShowPenerimaForm(true);\r\n }\r\n }, [custBookHDetailObj]);\r\n\r\n useEffect(() => {\r\n getTransportType();\r\n }, [selectedDest]);\r\n\r\n useEffect(() => {\r\n if (\r\n listPenerimaObj != null &&\r\n listPenerimaObj.Result &&\r\n listPenerimaObj.Result.length > 0\r\n ) {\r\n setPenerimaOptions(\r\n listPenerimaObj.Result.map((penerima, i) => ({\r\n value: penerima.CustId,\r\n label: penerima.CustName,\r\n }))\r\n );\r\n }\r\n }, [listPenerimaObj]);\r\n\r\n useEffect(() => {\r\n if (recipientName != \"\" && recipientName.length >= 3) {\r\n dispatch(customerActions.requestGetPenerimaByHint(recipientName));\r\n }\r\n }, [recipientName]);\r\n\r\n useEffect(() => {\r\n if (penerimaObj != null) {\r\n setHideReceiverCredit(!penerimaObj.IsAllowReceiverCredit);\r\n }\r\n }, [penerimaObj]);\r\n\r\n useEffect(() => {\r\n if (isEditMode && arrTempBarang && arrTempBarang.length > 0) {\r\n setTotalNonCanKoli(arrTempBarang.filter(x => x.CustBookDStat != \"CAN\").length);\r\n }\r\n }, [arrTempBarang]);\r\n\r\n useEffect(() => {\r\n if (cancelKoliBookingObj && cancelKoliBookingObj.CustBookDs && cancelKoliBookingObj.CustBookDs.length > 0) {\r\n const newArrTempBarang = [];\r\n cancelKoliBookingObj.CustBookDs.map((atb) => {\r\n if (atb.CustBookDStat == \"CAN\") {\r\n let newTempBarang = {\r\n ...atb,\r\n CustBookDId: atb.CustBookDId,\r\n SeqNo: atb.SeqNo\r\n }\r\n newArrTempBarang.push(newTempBarang);\r\n }\r\n else {\r\n arrDetailBarangMbl.map(\r\n (x, i) => {\r\n if (x.CustBookDId == atb.CustBookDId) {\r\n let newTempBarang = {\r\n ...x,\r\n CustBookDId: x.CustBookDId,\r\n SeqNo: x.SeqNo\r\n }\r\n newArrTempBarang.push(newTempBarang);\r\n }\r\n }\r\n )\r\n }\r\n });\r\n let idx = newArrTempBarang.length;\r\n arrTempBarang.map((atb) => {\r\n if (atb.CustBookDStat == \"NEW\") {\r\n idx++;\r\n let newTempBarang = {\r\n ...atb,\r\n CustBookDId: atb.CustBookDId,\r\n SeqNo: idx\r\n }\r\n newArrTempBarang.push(newTempBarang);\r\n }\r\n });\r\n setArrTempBarang(newArrTempBarang.sort((a, b) => a.SeqNo - b.SeqNo));\r\n setArrDetailBarangMbl(newArrTempBarang.sort((a, b) => a.SeqNo - b.SeqNo));\r\n }\r\n }, [cancelKoliBookingObj]);\r\n\r\n useEffect(() => {\r\n if (alert.Type != \"\") scrollToTop()\r\n }, [alert])\r\n\r\n function handlePackageContentChange(_packageContent) {\r\n setPackageContent(_packageContent);\r\n if (\r\n _packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN &&\r\n _packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN\r\n ) {\r\n setPackageContentNotes(\"\");\r\n }\r\n handleIsInsurance(_packageContent);\r\n }\r\n\r\n function handleError(input, errorMsg) {\r\n setErrors((prevState) => ({\r\n ...prevState,\r\n [input]: errorMsg,\r\n }));\r\n }\r\n\r\n function handleSubmit(e) {\r\n e.preventDefault();\r\n setSubmitted(true);\r\n let isValid = true;\r\n\r\n if (recipientName == \"\") {\r\n isValid = false;\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: \"Harap input setidaknya 1 detail penerima\",\r\n });\r\n }\r\n\r\n if (isInsurance == \"1\") {\r\n let isValidNilaiBarang = true;\r\n let isValidPackageContentNotes = true;\r\n\r\n if (nilaiBarang <= 0) {\r\n isValidNilaiBarang = false;\r\n }\r\n if (packageContentNotes == \"\") {\r\n isValidPackageContentNotes = false;\r\n }\r\n\r\n if (!isValidNilaiBarang || !isValidPackageContentNotes) {\r\n isValid = false;\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: \"Harap isi form dengan benar.\",\r\n });\r\n }\r\n }\r\n\r\n if (isEditMode) {\r\n if (totalNonCanKoli == 0) {\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: \"Harap input setidaknya 1 detail barang\",\r\n });\r\n isValid = false;\r\n }\r\n\r\n if (totalKoli != totalNonCanKoli) {\r\n isValid = false;\r\n }\r\n } else {\r\n if (arrDetailBarangMbl.length == 0) {\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: \"Harap input setidaknya 1 detail barang\",\r\n });\r\n isValid = false;\r\n }\r\n\r\n if (totalKoli != arrDetailBarangMbl.length) {\r\n isValid = false;\r\n }\r\n }\r\n\r\n if (\r\n isValid &&\r\n enableSubmitted &&\r\n sellerName &&\r\n sellerMobilePhnNo &&\r\n // recipientAddress &&\r\n // recipientMobilePhnNo &&\r\n recipientName &&\r\n paymentType &&\r\n packageCategory &&\r\n packageContent &&\r\n dropType &&\r\n transportType &&\r\n originDestId > 0 &&\r\n selectedDest &&\r\n selectedDest.value !== 0\r\n ) {\r\n if (\r\n ((packageContent ===\r\n masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN ||\r\n packageContent ===\r\n masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN) &&\r\n packageContentNotes) ||\r\n (packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN &&\r\n packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN)\r\n ) {\r\n if (\r\n ((dropType === masterSettingConstants.DROP_TYPE_PICKUP &&\r\n pickupTime &&\r\n pickupPhnNo &&\r\n pickupContactPerson &&\r\n selectedPckDist &&\r\n selectedPckDist.value != 0 &&\r\n originDestId > 0 &&\r\n pickupAddress) ||\r\n dropType === masterSettingConstants.DROP_TYPE_DROP) &&\r\n ((newPickupAddr === true && pickupAddrType) || !newPickupAddr)\r\n ) {\r\n handleError(\"nilaiBarang\", null);\r\n\r\n if (!errSubmitObj && !errCalcObj && arrDetailBarangMbl.length > 0 && totalKoli == arrDetailBarangMbl.length) {\r\n setAlert({ Type: \"\", StatusMessage: \"\" });\r\n }\r\n\r\n let newArrDetailBarangMbl = arrDetailBarangMbl;\r\n newArrDetailBarangMbl.map((newDetail, i) => {\r\n var packingType = \"\";\r\n if (newDetail.PackingKayu) {\r\n packingType = \"KAYU\"\r\n }\r\n if (newDetail.BubbleWrap) {\r\n packingType = (packingType != \"\" ? packingType + \";\" : \"\") + \"BUBBLEWRAP\"\r\n }\r\n if (newDetail.Wrapping) {\r\n packingType = (packingType != \"\" ? packingType + \";\" : \"\") + \"WRAPPING\"\r\n }\r\n newDetail.PackingType = packingType\r\n\r\n return newDetail;\r\n })\r\n\r\n const bookingHObj = {\r\n CustId: acc.CustId,\r\n SellerName: sellerName,\r\n AliasName: sellerAliasName,\r\n SellerMblPhoneNo: formatPhoneNumber(sellerMobilePhnNo),\r\n Username: acc.Username,\r\n CustRefNo: referenceNo,\r\n RecipientAddr: recipientAddress,\r\n RecipientMblPhoneNo: formatPhoneNumber(recipientMobilePhnNo),\r\n RecipientName: recipientName,\r\n PaymentType: paymentType,\r\n PackageCategory: packageCategory,\r\n PackageContentCode: packageContent,\r\n EstTotalWeight: estItemWeight,\r\n PackageContentNotes: packageContentNotes,\r\n PickupNotes: pickupNotes,\r\n PickupTime: pickupTime,\r\n PickupPhoneNo: pickupPhnNo,\r\n PickupContactPerson: pickupContactPerson,\r\n PickupDistrictId: selectedPckDist.value,\r\n PickupAddr: pickupAddress,\r\n DropType: dropType,\r\n TotalItem: isEditMode ? totalNonCanKoli : newArrDetailBarangMbl.length,\r\n BookNotes: bookingNotes,\r\n PickupAddrType: pickupAddrType,\r\n EstItemPriceAmt: nilaiBarang,\r\n DestDistrictId: selectedDest.value,\r\n DestDistrictName: selectedDest.label,\r\n TransportType: transportType,\r\n BookDetails: newArrDetailBarangMbl,\r\n OriginDestCode: originDestCode,\r\n CustBookHId: trxNo !== 0 ? trxNo : 0,\r\n };\r\n\r\n const submitBooking = async () => {\r\n dispatch(bookingActions.requestSubmitBooking(bookingHObj));\r\n };\r\n submitBooking();\r\n }\r\n }\r\n }\r\n }\r\n\r\n function handleSelesai(e) {\r\n e.preventDefault();\r\n setSubmitted(true);\r\n setModalShow(true);\r\n }\r\n\r\n function clearDatas() {\r\n setReferenceNo(\"\");\r\n setRecipientId(0);\r\n setRecipientName(\"\");\r\n setRecipientMobilePhnNo(\"\");\r\n setRecipientAddress(\"\");\r\n setDropType(\"PICKUP\");\r\n setPaymentType(\"\");\r\n setTransportType(\"\");\r\n setEstItemWeight(0);\r\n setPackageContent(\"\");\r\n setPackageContentNotes(\"\");\r\n setPickupNotes(\"\");\r\n setPickupTime(moment(new Date()).format(\"YYYY-MM-DD\"));\r\n setMinPickupTime(moment(new Date()).format(\"YYYY-MM-DD\"));\r\n setBookingNotes(\"\");\r\n setPackageCategory(\"\");\r\n setCurrentStep(1);\r\n setArrTempBarang([]);\r\n setArrDetailBarangMbl([]);\r\n setIsInsurance(\"0\");\r\n setNilaiBarang(0);\r\n // setSelectedOrigin({ value: \"\", label: \"Pilih Asal\" });\r\n setSelectedPckDist({ value: 0, label: \"Pilih Kecamatan / Kabupaten\" });\r\n setSelectedDest({ value: 0, label: \"Pilih Tujuan\" });\r\n setSelectedPenerima({ value: 0, label: \"Pilih Penerima\" });\r\n const clearData = async () => {\r\n dispatch(packageContentActions.clearPackageContent());\r\n dispatch(bookingActions.clearCalculateBooking());\r\n // dispatch(districtActions.getDistrict());\r\n dispatch(bookingActions.clearSubmitBooking());\r\n dispatch(originActions.getOrigin());\r\n dispatch(bookingActions.clearCustBookHDetail());\r\n dispatch(bookingActions.clearRecipientList());\r\n };\r\n clearData();\r\n setSubmitted(false);\r\n setEnableSubmitted(false);\r\n setResiNos(\"\");\r\n setOriginDestId(0);\r\n setOriginDestCode(\"\");\r\n setTotalKoli(1);\r\n setTrxNo(0);\r\n }\r\n\r\n function clearDataPenerima() {\r\n setReferenceNo(\"\");\r\n setRecipientId(0);\r\n setRecipientName(\"\");\r\n setRecipientMobilePhnNo(\"\");\r\n setRecipientAddress(\"\");\r\n setDropType(\"PICKUP\");\r\n setPaymentType(\"\");\r\n setTransportType(\"\");\r\n setEstItemWeight(0);\r\n setPackageContent(\"\");\r\n setPackageContentNotes(\"\");\r\n setBookingNotes(\"\");\r\n setPackageCategory(\"\");\r\n setArrTempBarang([]);\r\n setArrDetailBarangMbl([]);\r\n setIsInsurance(\"0\");\r\n setNilaiBarang(0);\r\n // setSelectedOrigin({ value: \"\", label: \"Pilih Asal\" });\r\n setSelectedDest({ value: 0, label: \"Pilih Tujuan\" });\r\n setSelectedPenerima({ value: 0, label: \"Pilih Penerima\" });\r\n const clearData = async () => {\r\n dispatch(packageContentActions.clearPackageContent());\r\n dispatch(bookingActions.clearCalculateBooking());\r\n //dispatch(districtActions.getDistrict());\r\n dispatch(bookingActions.clearSubmitBooking());\r\n dispatch(originActions.getOrigin());\r\n // dispatch(pickupActions.clearPickupAddr());\r\n dispatch(bookingActions.clearCustBookHDetail());\r\n };\r\n clearData();\r\n setSubmitted(false);\r\n setEnableSubmitted(false);\r\n setTotalKoli(1);\r\n setTrxNo(0);\r\n }\r\n\r\n function detailKoliOnChange(event, isNumeric = true) {\r\n const { name, value, type, checked } = event.target;\r\n let val = type === 'checkbox' ? checked : value;\r\n\r\n if (isNumeric) {\r\n let num = 0;\r\n if (val != \"\") {\r\n const str = val.replace(/,/g, \"\");\r\n num = parseFloat(str);\r\n }\r\n\r\n setDetailBarangMbl((prevState) => ({\r\n ...prevState,\r\n [name]: num,\r\n }));\r\n } else {\r\n setDetailBarangMbl((prevState) => ({\r\n ...prevState,\r\n [name]: val,\r\n }));\r\n }\r\n }\r\n\r\n function handleNilaiBarang(event) {\r\n let isValidNilaiBarang = true;\r\n\r\n if (event.target.value != \"\") {\r\n const str = event.target.value.replace(/,/g, \"\");\r\n setNilaiBarang(parseFloat(str));\r\n\r\n if (event.target.value == 0) {\r\n isValidNilaiBarang = false;\r\n }\r\n } else {\r\n isValidNilaiBarang = false;\r\n }\r\n\r\n if (isValidNilaiBarang) {\r\n handleError(\"nilaiBarang\", null);\r\n } else {\r\n setNilaiBarang(0);\r\n setIsError(true);\r\n setAlert({\r\n Type: \"Info\",\r\n StatusMessage: \"Harap lengkapi data penerima terlebih dahulu\",\r\n });\r\n handleError(\"nilaiBarang\", \"Harap isi nilai barang.\");\r\n }\r\n }\r\n\r\n function handleIsInsurance(_packageContent = \"\") {\r\n if (_packageContent == \"\") {\r\n _packageContent = packageContent;\r\n }\r\n\r\n if (packageContentsObj) {\r\n let selectedPackageContent = packageContentsObj.find(\r\n (rw) => rw.PackageContentCode === _packageContent\r\n );\r\n\r\n setIsInsurance(selectedPackageContent.IsInsurance);\r\n setNilaiBarang(0);\r\n setPackageContentNotes('');\r\n }\r\n }\r\n\r\n function getCustBookHDetail() {\r\n if (acc && acc.CustId && trxNo !== 0) {\r\n const custBookHDetailObj = {\r\n CustId: acc.CustId,\r\n CustBookHId: trxNo\r\n };\r\n dispatch(bookingActions.getCustBookHDetail(custBookHDetailObj));\r\n }\r\n }\r\n\r\n function getTransportType() {\r\n if (selectedDest && selectedDest.value != 0) {\r\n const transportTypeObj = {\r\n OriginDestId: originDestId,\r\n DestDistrictId: selectedDest.value,\r\n };\r\n\r\n dispatch(transportTypeActions.getTransportType(transportTypeObj));\r\n } else {\r\n dispatch(transportTypeActions.clearTransportType());\r\n }\r\n }\r\n\r\n function onSubmitDetailBarang() {\r\n setEnableSubmitted(false);\r\n setSimpanDataBarang(true);\r\n setIsError(false);\r\n\r\n setArrDetailBarangMbl(arrDetailBarangMbl.map(\r\n (detail, i) => {\r\n if (detail.CustBookDId == detailBarangMbl.CustBookDId) {\r\n detail.ItemWeight = detailBarangMbl.ItemWeight;\r\n detail.DimP = detailBarangMbl.DimP;\r\n detail.DimL = detailBarangMbl.DimL;\r\n detail.DimT = detailBarangMbl.DimT;\r\n detail.IsPacking = detailBarangMbl.PackingKayu || detailBarangMbl.BubbleWrap || detailBarangMbl.Wrapping;\r\n detail.PackingKayu = detailBarangMbl.PackingKayu;\r\n detail.BubbleWrap = detailBarangMbl.BubbleWrap;\r\n detail.Wrapping = detailBarangMbl.Wrapping;\r\n }\r\n return detail;\r\n }\r\n ));\r\n\r\n setSimpanDataBarang(false);\r\n }\r\n\r\n function onAddDetailBarang() {\r\n if (\r\n recipientName &&\r\n // recipientAddress && 26Okt\r\n // recipientMobilePhnNo &&\r\n transportType &&\r\n paymentType &&\r\n packageCategory &&\r\n packageContent &&\r\n selectedDest &&\r\n selectedDest.value != 0 &&\r\n (isInsurance == \"0\" || (isInsurance == \"1\" && nilaiBarang > 0))\r\n ) {\r\n setIsError(false);\r\n handleError(\"nilaiBarang\", null);\r\n return true;\r\n } else {\r\n setIsError(true);\r\n setAlert({\r\n Type: \"Info\",\r\n StatusMessage: \"Harap lengkapi data penerima terlebih dahulu\",\r\n });\r\n\r\n if (isInsurance == \"1\" && nilaiBarang <= 0) {\r\n handleError(\"nilaiBarang\", \"Harap isi nilai barang.\");\r\n }\r\n return false;\r\n }\r\n }\r\n\r\n function generateKoli() {\r\n let newArrTempBarang = [...arrTempBarang];\r\n let validation = onAddDetailBarang();\r\n\r\n if (!validation) {\r\n window.scrollTo(0, 0)\r\n return;\r\n }\r\n\r\n if (isEditMode) {\r\n let filterArrDetail = [];\r\n\r\n arrTempBarang.map(\r\n (detail, i) => {\r\n let newDetailBarang = {\r\n CustBookDId: detail.CustBookDId,\r\n ItemCodeNo: \"\",\r\n ItemWeight: detail.ItemWeight,\r\n DimP: detail.DimP,\r\n DimL: detail.DimL,\r\n DimT: detail.DimT,\r\n CustBookDStat: detail.CustBookDStat,\r\n IsPacking: detail.IsPacking,\r\n PackingKayu: detail.PackingKayu,\r\n BubbleWrap: detail.BubbleWrap,\r\n Wrapping: detail.Wrapping\r\n }\r\n filterArrDetail.push(newDetailBarang);\r\n }\r\n )\r\n let arrTempBarangLength = arrTempBarang.length;\r\n\r\n if (totalKoli <= totalNonCanKoli) return;\r\n else {\r\n const newTempArrDetailBarangMbl = [...filterArrDetail];\r\n\r\n const countToAdd = totalKoli - totalNonCanKoli;\r\n for (let i = 0; i < countToAdd; i++) {\r\n let newObj = {\r\n CustBookDId: arrTempBarangLength + (i + 1),\r\n ItemCodeNo: \"\",\r\n ItemWeight: 0,\r\n DimP: 0,\r\n DimL: 0,\r\n DimT: 0,\r\n CustBookDStat: \"NEW\",\r\n IsPacking: false,\r\n PackingKayu: false,\r\n BubbleWrap: false,\r\n Wrapping: false\r\n }\r\n newTempArrDetailBarangMbl.push(newObj);\r\n\r\n newObj.SeqNo = arrTempBarangLength + (i + 1);\r\n newObj.VolWeight = 0;\r\n newObj.FinalWeight = 0;\r\n newObj.TotalCalcSrc = \"Item\";\r\n newArrTempBarang.push(newObj);\r\n }\r\n setArrDetailBarangMbl(newTempArrDetailBarangMbl);\r\n setArrTempBarang(newArrTempBarang.sort((a, b) => a.SeqNo - b.SeqNo));\r\n }\r\n } else {\r\n const newKoliData = [...koliData];\r\n const newTempArrDetailBarangMbl = [...arrDetailBarangMbl];\r\n if (arrDetailBarangMbl.length > 0) {\r\n koliData.length = arrDetailBarangMbl.length\r\n }\r\n\r\n if (totalKoli > koliData.length) {\r\n for (let i = arrDetailBarangMbl.length; i < totalKoli; i++) {\r\n let newObj = {\r\n CustBookDId: i + 1,\r\n ItemCodeNo: \"\",\r\n ItemWeight: 0,\r\n DimP: 0,\r\n DimL: 0,\r\n DimT: 0,\r\n CustBookDStat: \"NEW\",\r\n IsPacking: false,\r\n PackingKayu: false,\r\n BubbleWrap: false,\r\n Wrapping: false\r\n }\r\n newTempArrDetailBarangMbl.push(newObj);\r\n\r\n newObj.SeqNo = i + 1;\r\n newObj.VolWeight = 0;\r\n newObj.FinalWeight = 0;\r\n newObj.TotalCalcSrc = \"Item\";\r\n newArrTempBarang.push(newObj);\r\n }\r\n\r\n } else if (totalKoli < koliData.length) {\r\n const countToRemove = koliData.length - totalKoli;\r\n newKoliData.splice(-countToRemove, countToRemove);\r\n newTempArrDetailBarangMbl.splice(totalKoli);\r\n }\r\n setKoliData(newKoliData);\r\n setArrDetailBarangMbl(newTempArrDetailBarangMbl);\r\n setArrTempBarang(newArrTempBarang.sort((a, b) => a.SeqNo - b.SeqNo));\r\n }\r\n }\r\n\r\n function navigateToHome() {\r\n setModalShow(false);\r\n setSubmitted(false);\r\n clearDatas();\r\n history.push(\"/Home\");\r\n }\r\n\r\n function navigateToCreateBooking() {\r\n setModalShow(false);\r\n setSubmitted(false);\r\n clearDatas();\r\n }\r\n\r\n function navigateToBookingDetail() {\r\n setModalShow(false);\r\n setSubmitted(false);\r\n if (arrResiNo.length > 0) {\r\n const myArray = arrResiNo;\r\n const arrayToString = myArray.join(\"|\");\r\n window.open(`/booking-print?trxNo=${arrayToString}`, \"_blank\");\r\n }\r\n else if (resiNos != \"\") {\r\n window.open(`/booking-print?trxNo=${resiNos}`, \"_blank\");\r\n }\r\n else {\r\n setIsError(true);\r\n setAlert({\r\n Type: \"Info\",\r\n StatusMessage: \"Harap pilih data penerima terlebih dahulu\",\r\n });\r\n }\r\n\r\n clearDataPenerima();\r\n }\r\n\r\n function handleTagihTujuan(districtId) {\r\n let _districtObj = districtObj.find((x) => x.DistrictId == districtId);\r\n let custCOD = custObj.IsAllowCOD;\r\n let tujuanCOD = false;\r\n let isAllowRcvPayment = \"1\";\r\n\r\n if (_districtObj != null) {\r\n isAllowRcvPayment = _districtObj.IsAllowRcvPayment;\r\n tujuanCOD = isAllowRcvPayment == \"1\" ? true : false;\r\n if (custCOD && tujuanCOD) setHideCOD(false);\r\n else setHideCOD(true);\r\n } else {\r\n setHideCOD(!custCOD);\r\n }\r\n }\r\n\r\n function handleCancel(ev) {\r\n if (ev.CustBookDStat == \"ACT\") {\r\n let reqObj = {\r\n Id: ev.CustBookDId,\r\n username: acc.Username\r\n }\r\n dispatch(bookingActions.cancelKoliBooking(reqObj));\r\n } else if (ev.CustBookDStat == \"NEW\") {\r\n const newArrTempBarang = [];\r\n let idx = 1;\r\n arrTempBarang.map((atb) => {\r\n if (ev.CustBookDId != atb.CustBookDId) {\r\n let newTempBarang = {\r\n ...atb,\r\n CustBookDId: idx,\r\n SeqNo: idx\r\n }\r\n newArrTempBarang.push(newTempBarang);\r\n idx++;\r\n }\r\n });\r\n setArrTempBarang(newArrTempBarang);\r\n setArrDetailBarangMbl(newArrTempBarang);\r\n }\r\n }\r\n\r\n return (\r\n <>\r\n \r\n
\r\n
\r\n Buat Booking\r\n \r\n \r\n\r\n
\r\n
\r\n
\r\n {\r\n setShowPenerimaForm(true);\r\n clearDataPenerima();\r\n setIsEditMode(false);\r\n }}\r\n >\r\n Tambah Data Penerima\r\n \r\n
\r\n
\r\n
\r\n navigateToBookingDetail()}\r\n >\r\n Cetak Label Barang\r\n \r\n
\r\n
\r\n {showPenerimaForm && showKoliForm && (\r\n {\r\n setShowPenerimaForm(false);\r\n dispatch(bookingActions.clearCustBookHDetail());\r\n setIsEditMode(false);\r\n }}\r\n >\r\n Batal\r\n \r\n )}\r\n {showPenerimaForm && showKoliForm && (\r\n \r\n Submit\r\n \r\n )}\r\n {!showPenerimaForm && (\r\n handleSelesai(e)}\r\n >\r\n Selesai\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n \r\n Summary Booking\r\n \r\n \r\n {\r\n <>\r\n \r\n
\r\n
\r\n
\r\n
\r\n Booking telah sukses dibuat\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {/* navigateToBookingDetail()}\r\n >\r\n Cetak Label Barang\r\n */}\r\n navigateToCreateBooking()}\r\n >\r\n Buat Booking Lain\r\n \r\n navigateToHome()}\r\n >\r\n Kembali ke Home\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Booking telah sukses dibuat\r\n
\r\n
\r\n
\r\n
\r\n
\r\n navigateToBookingDetail()}\r\n >\r\n Cetak Label Barang\r\n \r\n navigateToCreateBooking()}\r\n >\r\n Buat Booking Lain\r\n \r\n navigateToHome()}\r\n >\r\n Kembali ke Home\r\n \r\n
\r\n
\r\n \r\n\r\n \r\n
\r\n
\r\n Buat Booking\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n setRecipientName(e.target.value)}\r\n />\r\n \r\n Harap isi nama penerima\r\n
\r\n )}\r\n \r\n \r\n
\r\n Nomor Ponsel Penerima\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Alamat Penerima\r\n
\r\n
\r\n setRecipientAddress(e.target.value)}\r\n />\r\n
\r\n
\r\n
\r\n Nomor Referensi{acc.IsCustRefNoMandatory &&
*
}\r\n
\r\n
\r\n setReferenceNo(e.target.value)}\r\n value={referenceNo}\r\n />\r\n \r\n Harap isi Nomor Referensi.\r\n
\r\n )}\r\n \r\n \r\n
\r\n Tujuan\r\n
\r\n
\r\n {\r\n districtObj && selectedDest &&\r\n \r\n Harap isi tujuan\r\n
\r\n )}\r\n \r\n \r\n
\r\n Jalur\r\n
\r\n
\r\n setTransportType(e.target.value)}\r\n >\r\n \r\n Pilih jalur\r\n \r\n {transportTypeObj &&\r\n transportTypeObj.TransportTypes.map(\r\n (transportTypeObj) => (\r\n \r\n {transportTypeObj.TransportTypeName}\r\n \r\n )\r\n )}\r\n \r\n \r\n Harap pilih metode pengiriman\r\n
\r\n )}\r\n \r\n \r\n
\r\n Pembayaran\r\n
\r\n
\r\n setPaymentType(e.target.value)}\r\n >\r\n \r\n Pilih metode pembayaran\r\n \r\n \r\n Lunas\r\n \r\n \r\n Kredit\r\n \r\n \r\n Tagih Tujuan\r\n \r\n \r\n Kredit Penerima\r\n \r\n \r\n \r\n Harap pilih metode pembayaran\r\n
\r\n )}\r\n \r\n \r\n
\r\n Jenis Barang\r\n
\r\n
\r\n setPackageCategory(e.target.value)}\r\n >\r\n \r\n Pilih jenis barang\r\n \r\n \r\n ELEKTRONIK\r\n \r\n \r\n NON ELEKTRONIK\r\n \r\n \r\n \r\n Harap pilih jenis barang\r\n
\r\n )}\r\n \r\n \r\n
\r\n Tipe Barang\r\n
\r\n
\r\n handlePackageContentChange(e.target.value)}\r\n >\r\n \r\n Pilih tipe barang\r\n \r\n {packageContentsObj &&\r\n packageContentsObj.map((packageContentsObj) => (\r\n \r\n {packageContentsObj.PackageContentName}\r\n \r\n ))}\r\n \r\n \r\n Harap pilih tipe barang\r\n
\r\n )}\r\n \r\n \r\n
\r\n
\r\n setTotalKoli(e.target.value)}\r\n value={totalKoli}\r\n />\r\n \r\n Total Koli tidak sama dengan jumlah detail barang\r\n
\r\n )}\r\n \r\n {isInsurance && isInsurance === \"1\" && (\r\n \r\n
\r\n
\r\n handleNilaiBarang(e)}\r\n value={nilaiBarang}\r\n placeholder=\"Isi Nilai barang\"\r\n />\r\n \r\n {errors?.nilaiBarang}\r\n
\r\n )}\r\n \r\n )}\r\n \r\n
\r\n Catatan Order\r\n
\r\n
\r\n setBookingNotes(e.target.value)}\r\n />\r\n
\r\n
\r\n
\r\n
\r\n setPackageContentNotes(e.target.value)}\r\n />\r\n \r\n Harap isi catatan paket\r\n
\r\n )}\r\n \r\n )}\r\n {!showKoliForm && (\r\n <>\r\n \r\n\r\n \r\n
\r\n Estimasi Berat Barang (kg)\r\n
\r\n
\r\n detailKoliOnChange(e, true)}\r\n value={detailBarangMbl.ItemWeight}\r\n placeholder=\"Isi estimasi berat barang\"\r\n />\r\n
\r\n
\r\n
\r\n Panjang (cm)\r\n
\r\n
\r\n detailKoliOnChange(e, true)}\r\n value={detailBarangMbl.DimP}\r\n placeholder=\"Isi dimensi panjang barang\"\r\n />\r\n
\r\n
\r\n
\r\n Lebar (cm)\r\n
\r\n
\r\n detailKoliOnChange(e, true)}\r\n value={detailBarangMbl.DimL}\r\n placeholder=\"Isi dimensi lebar barang\"\r\n />\r\n
\r\n
\r\n
\r\n Tinggi (cm)\r\n
\r\n
\r\n detailKoliOnChange(e, true)}\r\n value={detailBarangMbl.DimT}\r\n placeholder=\"Isi dimensi tinggi barang\"\r\n />\r\n
\r\n
\r\n
\r\n Packing\r\n
\r\n
\r\n
\r\n detailKoliOnChange(e, false)}\r\n />\r\n Kayu\r\n
\r\n
\r\n detailKoliOnChange(e, false)}\r\n />\r\n Bubble Wrap\r\n
\r\n
\r\n detailKoliOnChange(e, false)}\r\n />\r\n Wrapping\r\n
\r\n
\r\n
\r\n
\r\n {\r\n setShowKoliForm(true);\r\n setShowPenerimaForm(true);\r\n }}\r\n >\r\n Batal\r\n \r\n
\r\n
\r\n {\r\n onSubmitDetailBarang();\r\n setShowKoliForm(true);\r\n setShowPenerimaForm(true);\r\n }}\r\n >\r\n Simpan Data Koli\r\n \r\n
\r\n
\r\n {\r\n generateKoli();\r\n }}\r\n >\r\n Generate Koli\r\n \r\n
\r\n \r\n {\r\n isEditMode ?\r\n
:\r\n
\r\n }\r\n
\r\n
\r\n \r\n Total Barang\r\n \r\n \r\n {respCalcObj && arrDetailBarangMbl.length > 0\r\n ? new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 2,\r\n }).format(respCalcObj.TotalItem)\r\n : new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 2,\r\n }).format(0)}\r\n \r\n
\r\n
\r\n \r\n Estimasi Berat Final (Kg)\r\n \r\n \r\n {respCalcObj && arrDetailBarangMbl.length > 0\r\n ? new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 2,\r\n }).format(respCalcObj.TotalFinalWeight)\r\n : new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 2,\r\n }).format(0)}\r\n \r\n
\r\n
\r\n navigateToBookingDetail()}\r\n >\r\n Cetak Label Barang\r\n \r\n {\r\n setShowPenerimaForm(true);\r\n clearDataPenerima();\r\n setIsEditMode(false);\r\n }}\r\n >\r\n Tambah Data Penerima\r\n \r\n
\r\n \r\n \r\n )}\r\n \r\n {showPenerimaForm && showKoliForm && (\r\n {\r\n setShowPenerimaForm(false);\r\n dispatch(bookingActions.clearCustBookHDetail());\r\n setIsEditMode(false);\r\n }}\r\n >\r\n Batal\r\n \r\n )}\r\n {showPenerimaForm && showKoliForm && (\r\n \r\n Submit\r\n \r\n )}\r\n {!showPenerimaForm && (\r\n handleSelesai(e)}\r\n >\r\n Selesai\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n );\r\n};\r\nexport default BookingAddFormV3;\r\n","import React, { useState, useEffect, useRef } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { masterSettingConstants } from \"../../_constants\";\r\nimport {\r\n districtActions,\r\n bookingActions,\r\n packageContentActions,\r\n pickupActions,\r\n originActions,\r\n transportTypeActions,\r\n customerActions,\r\n} from \"../../_actions\";\r\nimport {\r\n TableDetailBarang,\r\n AlertMessage,\r\n TableDetailPenerima,\r\n TableDetailBarangEdit,\r\n} from \"../../components\";\r\nimport Input from \"react-phone-number-input/input\";\r\nimport { NumericFormat } from \"react-number-format\";\r\nimport { formatPhoneNumber } from \"react-phone-number-input\";\r\nimport \"../../custom.css\";\r\nimport \"react-phone-number-input/style.css\";\r\nimport * as FaIcons from \"react-icons/fa\";\r\nimport Select, { createFilter } from \"react-select\";\r\nimport { Modal, ModalHeader, ModalBody } from \"reactstrap\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport moment from \"moment\";\r\n\r\nconst BookingAddFormV4 = ({ t }) => {\r\n const history = useHistory();\r\n const dispatch = useDispatch();\r\n const acc = useSelector((state) => state.authentication.accInfo);\r\n const packageContentsObj = useSelector(\r\n (state) => state.packagecontent.packageContentObj\r\n );\r\n const districtObj = useSelector((state) => state.district.districtObj);\r\n const respCalcObj = useSelector(\r\n (state) => state.calculateBookingPrice.calcBookingObj\r\n );\r\n const respSubmitObj = useSelector(\r\n (state) => state.submitBooking.submitBookingObj\r\n );\r\n const pickupAddressTypeObj = useSelector(\r\n (state) => state.pickupAddr.pickupAddrObj\r\n );\r\n const errCalcObj = useSelector(\r\n (state) => state.calculateBookingPrice.errCalcBookingObj\r\n );\r\n const errSubmitObj = useSelector(\r\n (state) => state.submitBooking.errSubmitBookingObj\r\n );\r\n const originObj = useSelector((state) => state.origin.origin);\r\n const transportTypeObj = useSelector(\r\n (state) => state.transportType.transportTypeObj\r\n );\r\n const errTransportTypeObj = useSelector(\r\n (state) => state.transportType.errTransportTypeObj\r\n );\r\n const custObj = useSelector((state) => state.custById.custObj);\r\n const listPenerimaObj = useSelector(\r\n (state) => state.penerimaByHint.penerimaByHintObj\r\n );\r\n const penerimaObj = useSelector((state) => state.penerimaById.penerimaObj);\r\n const recipientListObj = useSelector(\r\n (state) => state.recipientListBooking.recipientListObj\r\n );\r\n const custBookHDetailObj = useSelector(\r\n (state) => state.getCustBookHDetail.custBookHDetailObj\r\n );\r\n const cancelKoliBookingObj = useSelector(\r\n (state) => state.cancelKoliBooking.cancelKoliBookingObj\r\n );\r\n\r\n const [isError, setIsError] = useState(false);\r\n const [submitted, setSubmitted] = useState(false);\r\n const [simpanDataBarang, setSimpanDataBarang] = useState(false);\r\n const [enableSubmitted, setEnableSubmitted] = useState(false);\r\n const [newPickupAddr, setNewPickupAddr] = useState(false);\r\n const [packageCategory, setPackageCategory] = useState(\"\");\r\n const [sellerName, setSellerName] = useState(acc && acc.CustName);\r\n const [sellerAliasName, setSellerAliasName] = useState(acc && acc.CustName);\r\n const [sellerMobilePhnNo, setSellerMobilePhnNo] = useState(\r\n acc && acc.MobilePhoneNo\r\n );\r\n const [originDestId, setOriginDestId] = useState(0);\r\n const [originDestCode, setOriginDestCode] = useState(\"\");\r\n const [referenceNo, setReferenceNo] = useState(\"\");\r\n const [resiNos, setResiNos] = useState(\"\");\r\n const [recipientId, setRecipientId] = useState(0);\r\n const [recipientName, setRecipientName] = useState(\"\");\r\n const [recipientMobilePhnNo, setRecipientMobilePhnNo] = useState(\"\");\r\n const [recipientAddress, setRecipientAddress] = useState(\"\");\r\n const [dropType, setDropType] = useState(\"PICKUP\");\r\n const [paymentType, setPaymentType] = useState(\"\");\r\n const [transportType, setTransportType] = useState(\"\");\r\n const [estItemWeight, setEstItemWeight] = useState(0);\r\n const [packageContent, setPackageContent] = useState(\"\");\r\n const [packageContentNotes, setPackageContentNotes] = useState(\"\");\r\n const [pickupContactPerson, setPickupContactPerson] = useState(\"\");\r\n const [pickupAddress, setPickupAddress] = useState(\"\");\r\n const [pickupNotes, setPickupNotes] = useState(\"\");\r\n const [pickupPhnNo, setPickupPhnNo] = useState(\"\");\r\n const [pickupTime, setPickupTime] = useState(\r\n moment(new Date()).format(\"YYYY-MM-DD\")\r\n );\r\n const [minPickupTime, setMinPickupTime] = useState(\r\n moment(new Date()).format(\"YYYY-MM-DD\")\r\n );\r\n const [pickupAddrType, setPickupAddrType] = useState(\"Default\");\r\n const [bookingNotes, setBookingNotes] = useState(\"\");\r\n const [isInsurance, setIsInsurance] = useState(\"0\");\r\n const [nilaiBarang, setNilaiBarang] = useState(0);\r\n const [totalKoli, setTotalKoli] = useState(1);\r\n const [totalNonCanKoli, setTotalNonCanKoli] = useState(0);\r\n const [currStep, setCurrentStep] = useState(1);\r\n const [arrTempBarang, setArrTempBarang] = useState([]);\r\n const [arrDetailBarangMbl, setArrDetailBarangMbl] = useState([]);\r\n const [detailBarangMbl, setDetailBarangMbl] = useState({\r\n CustBookDId: 0,\r\n ItemName: \"\",\r\n ItemWeight: 0,\r\n DimP: 0,\r\n DimL: 0,\r\n DimT: 0,\r\n IsPacking: false,\r\n PackingKayu: false,\r\n BubbleWrap: false,\r\n Wrapping: false,\r\n });\r\n const [alert, setAlert] = useState({\r\n Type: \"\",\r\n StatusMessage: \"\",\r\n });\r\n const [modalShow, setModalShow] = useState(false);\r\n const [showPenerimaForm, setShowPenerimaForm] = useState(false);\r\n const [arrDetailPenerimaMbl, setArrDetailPenerimaMbl] = useState([]);\r\n const [showKoliForm, setShowKoliForm] = useState(true);\r\n const [isEditMode, setIsEditMode] = useState(false);\r\n const [isEditKoli, setIsEditKoli] = useState(false);\r\n const [koliData, setKoliData] = useState([]);\r\n const [arrResiNo, setArrResiNo] = useState([]);\r\n const [trxNo, setTrxNo] = useState(0);\r\n const [getData, setGetData] = useState(false);\r\n const [isPatching, setIsPatching] = useState(false);\r\n\r\n const [options, setOptions] = useState([]);\r\n const [selectedPckDist, setSelectedPckDist] = useState();\r\n const [originOptions, setOriginOptions] = useState([]);\r\n const [selectedDest, setSelectedDest] = useState();\r\n const [penerimaOptions, setPenerimaOptions] = useState([]);\r\n const [selectedPenerima, setSelectedPenerima] = useState(null);\r\n const [hideCOD, setHideCOD] = useState(true);\r\n const [hideCredit, setHideCredit] = useState(true);\r\n const [hideReceiverCredit, setHideReceiverCredit] = useState(true);\r\n const [isMember, setIsMember] = useState(false);\r\n const [refresh, setRefresh] = useState(\r\n moment(new Date()).format(\"YYYY-MM-DD HH:mm:ss\")\r\n );\r\n const [errors, setErrors] = useState({});\r\n\r\n const style = {\r\n control: (base, state) => ({\r\n ...base,\r\n border: \"1px solid rgba(209, 213, 219, var(--tw-border-opacity))\",\r\n boxShadow: \"none\",\r\n \"&:hover\": {\r\n border: \"1px solid rgba(209, 213, 219, var(--tw-border-opacity))\",\r\n },\r\n }),\r\n };\r\n\r\n const styleMobile = {\r\n control: (base, state) => ({\r\n ...base,\r\n border: \"none\",\r\n boxShadow: \"none\",\r\n \"&:hover\": {\r\n border: \"none\",\r\n },\r\n }),\r\n };\r\n\r\n useEffect(() => {\r\n setModalShow(false);\r\n\r\n async function clear() {\r\n await clearDatas();\r\n }\r\n clear();\r\n\r\n if (acc && acc.IsSubAccount == true) {\r\n clearDatas();\r\n history.push(\"/Home\");\r\n }\r\n\r\n if (acc) {\r\n dispatch(customerActions.requestGetCustById(acc.CustId));\r\n\r\n var phone = sellerMobilePhnNo.substring(1, 20);\r\n var area = sellerMobilePhnNo.substring(0, 1);\r\n if (area === \"0\") {\r\n setSellerMobilePhnNo(\"+62\" + phone);\r\n }\r\n\r\n const pickupAddrTypeObj = {\r\n CustId: acc.CustId,\r\n PickupReqGrpStat: \"ACT\",\r\n };\r\n setPickupTime(moment(new Date()).format(\"YYYY-MM-DD\"));\r\n setMinPickupTime(moment(new Date()).format(\"YYYY-MM-DD\"));\r\n dispatch(pickupActions.getPickupAddr(pickupAddrTypeObj));\r\n setSelectedPckDist({ value: 0, label: \"Pilih Kecamatan / Kabupaten\" });\r\n }\r\n if (trxNo !== 0) {\r\n setShowPenerimaForm(true);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (custObj != null) {\r\n setHideCredit(!custObj.IsAllowCredit);\r\n }\r\n }, [custObj]);\r\n\r\n useEffect(() => {\r\n setPackageContent(\"\");\r\n setEnableSubmitted(false);\r\n setIsInsurance(\"0\");\r\n if (packageCategory !== null && packageCategory !== \"\") {\r\n dispatch(packageContentActions.getPackageContent(packageCategory));\r\n } else {\r\n dispatch(packageContentActions.clearPackageContent());\r\n }\r\n }, [packageCategory]);\r\n\r\n useEffect(() => {\r\n if (respSubmitObj && respSubmitObj.ResiNo !== \"\") {\r\n async function clear() {\r\n await clearDataPenerima();\r\n }\r\n clear();\r\n\r\n let newArrDetailPenerimaMbl = [];\r\n newArrDetailPenerimaMbl.push(respSubmitObj);\r\n\r\n if (recipientListObj != undefined) {\r\n for (let i = 0; i < recipientListObj.length; i++) {\r\n if (respSubmitObj.ResiNo != recipientListObj[i].ResiNo) {\r\n newArrDetailPenerimaMbl.push(recipientListObj[i]);\r\n setResiNos(respSubmitObj.ResiNo);\r\n }\r\n }\r\n }\r\n dispatch(bookingActions.getListRecipient(newArrDetailPenerimaMbl));\r\n setShowPenerimaForm(false);\r\n setIsError(false);\r\n setIsEditMode(false);\r\n setAlert({ Type: \"\", StatusMessage: \"\" });\r\n }\r\n }, [respSubmitObj]);\r\n\r\n useEffect(() => {\r\n let phone = \"\";\r\n if (\r\n pickupAddrType !== \"\" &&\r\n pickupAddressTypeObj &&\r\n pickupAddressTypeObj.Result &&\r\n newPickupAddr === false &&\r\n originObj != null\r\n ) {\r\n let pickupAddrTypeObj = pickupAddressTypeObj.Result.filter(\r\n (rw) => rw.AddrType === pickupAddrType\r\n );\r\n\r\n if (pickupAddrTypeObj.length > 0) {\r\n setPickupAddress(pickupAddrTypeObj[0][\"Addr\"]);\r\n setPickupContactPerson(pickupAddrTypeObj[0][\"ContactPerson\"]);\r\n var pickupPhnNo = pickupAddrTypeObj[0][\"PhoneNo\"];\r\n phone = pickupPhnNo.substring(1, 20);\r\n var area = pickupPhnNo.substring(0, 1);\r\n if (area === \"0\") {\r\n setPickupPhnNo(\"+62\" + phone);\r\n } else {\r\n setPickupPhnNo(pickupPhnNo);\r\n }\r\n\r\n if (districtObj && pickupAddrTypeObj[0][\"DistrictId\"] !== null && pickupAddrTypeObj[0][\"DistrictId\"] > 0) {\r\n let pickupDistrictObj = districtObj.filter(\r\n (rw) => rw.DistrictId === pickupAddrTypeObj[0][\"DistrictId\"]\r\n );\r\n\r\n if (pickupDistrictObj !== null) {\r\n setSelectedPckDist({\r\n value: pickupDistrictObj[0][\"DistrictId\"],\r\n label: pickupDistrictObj[0][\"DistrictDescr\"],\r\n });\r\n\r\n if (pickupDistrictObj[0][\"OriginDestId\"] > 0) {\r\n setOriginDestId(pickupDistrictObj[0][\"OriginDestId\"]);\r\n if (originObj != null && originObj.Result != null) {\r\n let selectedOriginObj = originObj?.Result.filter(\r\n (rw) => rw.OriginId === pickupDistrictObj[0][\"OriginDestId\"]\r\n );\r\n if (selectedOriginObj.length > 0) {\r\n setOriginDestCode(selectedOriginObj[0][\"OriginCode\"]);\r\n }\r\n else {\r\n setSelectedPckDist({\r\n value: 0,\r\n label: \"Pilih Kecamatan / Kabupaten\",\r\n });\r\n }\r\n }\r\n }\r\n }\r\n } else {\r\n setSelectedPckDist({\r\n value: 0,\r\n label: \"Pilih Kecamatan / Kabupaten\",\r\n });\r\n }\r\n } else {\r\n setPickupAddress(pickupAddressTypeObj.Result[0][\"Addr\"]);\r\n setPickupContactPerson(pickupAddressTypeObj.Result[0][\"ContactPerson\"]);\r\n var pickupPhnNo = pickupAddressTypeObj.Result[0][\"PhoneNo\"];\r\n phone = pickupPhnNo.substring(1, 20);\r\n var area = pickupPhnNo.substring(0, 1);\r\n if (area === \"0\") {\r\n setPickupPhnNo(\"+62\" + phone);\r\n } else {\r\n setPickupPhnNo(pickupPhnNo);\r\n }\r\n\r\n if (\r\n districtObj &&\r\n pickupAddressTypeObj.Result[0][\"DistrictId\"] !== null\r\n ) {\r\n let pickupDistrictObj = districtObj.filter(\r\n (rw) =>\r\n rw.DistrictId === pickupAddressTypeObj.Result[0][\"DistrictId\"]\r\n );\r\n\r\n if (pickupDistrictObj !== null) {\r\n setSelectedPckDist({\r\n value: pickupDistrictObj[0][\"DistrictId\"],\r\n label: pickupDistrictObj[0][\"DistrictDescr\"],\r\n });\r\n\r\n if (pickupDistrictObj[0][\"OriginDestId\"] > 0) {\r\n setOriginDestId(pickupDistrictObj[0][\"OriginDestId\"]);\r\n if (originObj != null && originObj.Result != null) {\r\n let selectedOriginObj = originObj?.Result.filter(\r\n (rw) => rw.OriginId === pickupDistrictObj[0][\"OriginDestId\"]\r\n );\r\n setOriginDestCode(selectedOriginObj[0][\"OriginCode\"]);\r\n }\r\n }\r\n }\r\n } else {\r\n setSelectedPckDist({\r\n value: 0,\r\n label: \"Pilih Kecamatan / Kabupaten\",\r\n });\r\n }\r\n }\r\n } else {\r\n setPickupAddress(\"\");\r\n setPickupContactPerson(\"\");\r\n // setPickupPhnNo(\"\");\r\n setSelectedPckDist({ value: 0, label: \"Pilih Kecamatan / Kabupaten\" });\r\n }\r\n }, [pickupAddrType, newPickupAddr, refresh, originObj]);\r\n\r\n useEffect(() => {\r\n if (districtObj)\r\n setRefresh(moment(new Date()).format(\"YYYY-MM-DD HH:mm:ss\"));\r\n }, [districtObj]);\r\n\r\n useEffect(() => {\r\n if (!errSubmitObj && !errCalcObj && arrDetailBarangMbl.length > 0) {\r\n setAlert({ Type: \"\", StatusMessage: \"\" });\r\n }\r\n if (\r\n isError == false &&\r\n selectedDest &&\r\n selectedDest.value != 0 &&\r\n paymentType &&\r\n transportType &&\r\n packageCategory &&\r\n packageContent &&\r\n arrDetailBarangMbl.length > 0 &&\r\n originDestId > 0 &&\r\n (isInsurance == \"0\" || (isInsurance == \"1\" && nilaiBarang > 0))\r\n ) {\r\n let _bookingD = [];\r\n\r\n arrDetailBarangMbl.map((detail, i) => {\r\n let _arrTempObj = arrTempBarang.find(\r\n (x) => x.CustBookDId == detail.CustBookDId\r\n );\r\n if (_arrTempObj != undefined && _arrTempObj != null) {\r\n var packingType = \"\";\r\n if (detail.PackingKayu) {\r\n packingType = \"KAYU\";\r\n }\r\n if (detail.BubbleWrap) {\r\n packingType =\r\n (packingType != \"\" ? packingType + \";\" : \"\") + \"BUBBLEWRAP\";\r\n }\r\n if (detail.Wrapping) {\r\n packingType =\r\n (packingType != \"\" ? packingType + \";\" : \"\") + \"WRAPPING\";\r\n }\r\n\r\n let newDetailBarang = {\r\n CustBookDId: detail.CustBookDId,\r\n ItemCodeNo: \"\",\r\n ItemWeight: detail.ItemWeight,\r\n DimP: detail.DimP,\r\n DimL: detail.DimL,\r\n DimT: detail.DimT,\r\n CustBookDStat: _arrTempObj.CustBookDStat,\r\n IsPacking: detail.IsPacking,\r\n PackingType: packingType,\r\n };\r\n _bookingD.push(newDetailBarang);\r\n }\r\n });\r\n\r\n let selectedPackageContent = packageContentsObj.filter(\r\n (rw) => rw.PackageContentCode === packageContent\r\n );\r\n\r\n if (selectedPackageContent.length > 0) {\r\n if (selectedPackageContent[0].IsInsurance == \"1\" && nilaiBarang <= 0) {\r\n setIsError(true);\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: \"Harap isi nilai barang\",\r\n });\r\n }\r\n else {\r\n const bookingHObj = {\r\n CustId: acc.CustId,\r\n DestDistrictId: selectedDest.value,\r\n PaymentType: paymentType,\r\n TransportType: transportType,\r\n PackageCategory: packageCategory,\r\n PackageContentCode: packageContent,\r\n BookingD: _bookingD,\r\n EstItemPriceAmt: nilaiBarang,\r\n OriginDestCode: originDestCode,\r\n };\r\n\r\n dispatch(bookingActions.requestCalculateBooking(bookingHObj));\r\n setEnableSubmitted(true);\r\n if (arrDetailBarangMbl.length == 0 && custBookHDetailObj == 0) {\r\n setArrTempBarang([]);\r\n }\r\n }\r\n }\r\n }\r\n }, [\r\n arrDetailBarangMbl,\r\n packageCategory,\r\n packageContent,\r\n transportType,\r\n selectedDest,\r\n paymentType,\r\n originDestId,\r\n isInsurance,\r\n isError,\r\n nilaiBarang,\r\n ]);\r\n\r\n useEffect(() => {\r\n districtObj &&\r\n setOptions(\r\n districtObj.map((dist, i) => ({\r\n value: dist.DistrictId,\r\n label: dist.DistrictDescr,\r\n }))\r\n );\r\n }, [districtObj]);\r\n\r\n useEffect(() => {\r\n if (custBookHDetailObj && packageContentsObj) {\r\n let selectedPackageContent = packageContentsObj.filter(\r\n (rw) => rw.PackageContentCode === custBookHDetailObj.PackageContentCode\r\n );\r\n\r\n setPackageContentNotes(custBookHDetailObj.PackageContentNotes);\r\n if (selectedPackageContent.length > 0) {\r\n setPackageContent(selectedPackageContent[0].PackageContentCode);\r\n setIsInsurance(selectedPackageContent[0].IsInsurance);\r\n }\r\n }\r\n }, [packageContentsObj, custBookHDetailObj]);\r\n\r\n useEffect(() => {\r\n if (isEditMode) {\r\n if (isPatching && custBookHDetailObj) {\r\n setTrxNo(custBookHDetailObj.CustBookHId);\r\n setSelectedDest({\r\n value: custBookHDetailObj.DistrictId,\r\n label: custBookHDetailObj.DistrictDescr,\r\n });\r\n setPackageCategory(custBookHDetailObj.PackageCategory);\r\n setTransportType(custBookHDetailObj.TransportType);\r\n setPaymentType(custBookHDetailObj.PaymentType);\r\n setOriginDestCode(custBookHDetailObj.OriginDestCode);\r\n setRecipientName(custBookHDetailObj.RecipientName);\r\n let PhoneNo = custBookHDetailObj.RecipientMblPhoneNo;\r\n if (PhoneNo && PhoneNo.length > 1) {\r\n var phone = PhoneNo.substring(1, 20);\r\n var area = PhoneNo.substring(0, 1);\r\n if (area === \"0\") {\r\n PhoneNo = \"+62\" + phone;\r\n }\r\n setRecipientMobilePhnNo(PhoneNo);\r\n }\r\n setRecipientAddress(custBookHDetailObj.RecipientAddr);\r\n setReferenceNo(custBookHDetailObj.CustRefNo);\r\n setBookingNotes(custBookHDetailObj.BookNotes);\r\n setTotalKoli(custBookHDetailObj.ActualTotalItem);\r\n setArrTempBarang(\r\n custBookHDetailObj.CustBookDs.sort((a, b) => a.SeqNo - b.SeqNo)\r\n );\r\n setArrDetailBarangMbl(\r\n custBookHDetailObj.CustBookDs.map((detail, i) => {\r\n var packingType = [];\r\n\r\n packingType = detail.PackingType.split(\";\");\r\n detail.PackingKayu =\r\n packingType.findIndex((x) => x == \"KAYU\") != -1;\r\n detail.BubbleWrap =\r\n packingType.findIndex((x) => x == \"BUBBLEWRAP\") != -1;\r\n detail.Wrapping =\r\n packingType.findIndex((x) => x == \"WRAPPING\") != -1;\r\n\r\n return detail;\r\n })\r\n );\r\n\r\n setIsInsurance(custBookHDetailObj.IsInsurance);\r\n setNilaiBarang(custBookHDetailObj.EstItemPriceAmt);\r\n setPackageContentNotes(custBookHDetailObj.PackageContentNotes);\r\n setShowPenerimaForm(true);\r\n } else if (\r\n custBookHDetailObj == undefined &&\r\n custBookHDetailObj == null\r\n ) {\r\n setGetData(true);\r\n }\r\n }\r\n }, [custBookHDetailObj]);\r\n\r\n useEffect(() => {\r\n if (getData) {\r\n setIsPatching(true);\r\n const custBookHDetailObj = {\r\n CustId: acc.CustId,\r\n CustBookHId: trxNo,\r\n };\r\n dispatch(bookingActions.getCustBookHDetail(custBookHDetailObj));\r\n setGetData(false);\r\n }\r\n }, [getData]);\r\n\r\n useEffect(() => {\r\n getTransportType();\r\n }, [selectedDest]);\r\n\r\n useEffect(() => {\r\n if (\r\n listPenerimaObj != null &&\r\n listPenerimaObj.Result &&\r\n listPenerimaObj.Result.length > 0\r\n ) {\r\n setPenerimaOptions(\r\n listPenerimaObj.Result.map((penerima, i) => ({\r\n value: penerima.CustId,\r\n label: penerima.CustName,\r\n }))\r\n );\r\n }\r\n }, [listPenerimaObj]);\r\n\r\n useEffect(() => {\r\n if (selectedPenerima != null && selectedPenerima.value != 0) {\r\n dispatch(customerActions.requestGetPenerimaById(selectedPenerima.value));\r\n setRecipientId(selectedPenerima.value);\r\n }\r\n }, [selectedPenerima]);\r\n\r\n useEffect(() => {\r\n if (recipientName != \"\" && recipientName.length >= 3) {\r\n dispatch(customerActions.requestGetPenerimaByHint(recipientName));\r\n }\r\n }, [recipientName]);\r\n\r\n useEffect(() => {\r\n if (penerimaObj != null) {\r\n setHideReceiverCredit(!penerimaObj.IsAllowReceiverCredit);\r\n }\r\n }, [penerimaObj]);\r\n\r\n useEffect(() => {\r\n if (errCalcObj && errCalcObj.StatusCode != \"200\") {\r\n window.scrollTo(0, 0);\r\n setIsError(true);\r\n setSubmitted(false);\r\n setAlert({ Type: \"Error\", StatusMessage: errCalcObj.StatusMessage });\r\n setArrDetailBarangMbl((arrDetailBarangMbl) => [\r\n ...arrDetailBarangMbl.filter(\r\n (rw) => rw.custBookDId != arrDetailBarangMbl.length\r\n ),\r\n ]);\r\n }\r\n }, [errCalcObj]);\r\n\r\n useEffect(() => {\r\n if (respCalcObj && respCalcObj.BookingD.length > 0) {\r\n setArrTempBarang(\r\n respCalcObj.BookingD.map((bookingD) => {\r\n let splitString = bookingD.PackingType.split(\";\");\r\n let kayu =\r\n splitString.findIndex((x) => x == \"KAYU\") != -1 ? true : false;\r\n let bubbleWrap =\r\n splitString.findIndex((x) => x == \"BUBBLEWRAP\") != -1\r\n ? true\r\n : false;\r\n let wrapping =\r\n splitString.findIndex((x) => x == \"WRAPPING\") != -1 ? true : false;\r\n\r\n return {\r\n ...bookingD,\r\n IsPacking: kayu || bubbleWrap || wrapping,\r\n PackingKayu: kayu,\r\n BubbleWrap: bubbleWrap,\r\n Wrapping: wrapping,\r\n };\r\n }).sort((a, b) => a.SeqNo - b.SeqNo)\r\n );\r\n setDetailBarangMbl({\r\n CustBookDId: 0,\r\n ItemName: \"\",\r\n ItemWeight: 0,\r\n DimP: 0,\r\n DimL: 0,\r\n DimT: 0,\r\n IsPacking: false,\r\n PackingKayu: false,\r\n BubbleWrap: false,\r\n Wrapping: false,\r\n });\r\n } else {\r\n setArrTempBarang([]);\r\n }\r\n }, [respCalcObj]);\r\n\r\n useEffect(() => {\r\n if (errSubmitObj && errSubmitObj.StatusCode != \"200\") {\r\n window.scrollTo(0, 0);\r\n setIsError(true);\r\n setSubmitted(false);\r\n setAlert({ Type: \"Error\", StatusMessage: errSubmitObj.StatusMessage });\r\n }\r\n }, [errSubmitObj]);\r\n\r\n useEffect(() => {\r\n if (errTransportTypeObj && errTransportTypeObj.StatusCode != \"200\") {\r\n window.scrollTo(0, 0);\r\n setIsError(true);\r\n setSubmitted(false);\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: errTransportTypeObj.StatusMessage,\r\n });\r\n }\r\n }, [errTransportTypeObj]);\r\n\r\n useEffect(() => {\r\n if (detailBarangMbl.CustBookDId != 0) {\r\n setShowKoliForm(false);\r\n } else {\r\n setShowKoliForm(true);\r\n }\r\n }, [detailBarangMbl]);\r\n\r\n useEffect(() => {\r\n if (\r\n cancelKoliBookingObj &&\r\n cancelKoliBookingObj.CustBookDs &&\r\n cancelKoliBookingObj.CustBookDs.length > 0\r\n ) {\r\n const newArrTempBarang = [];\r\n cancelKoliBookingObj.CustBookDs.map((atb) => {\r\n if (atb.CustBookDStat == \"CAN\") {\r\n let newTempBarang = {\r\n ...atb,\r\n CustBookDId: atb.CustBookDId,\r\n SeqNo: atb.SeqNo,\r\n };\r\n newArrTempBarang.push(newTempBarang);\r\n } else {\r\n arrDetailBarangMbl.map((x, i) => {\r\n if (x.CustBookDId == atb.CustBookDId) {\r\n let newTempBarang = {\r\n ...x,\r\n CustBookDId: x.CustBookDId,\r\n SeqNo: x.SeqNo,\r\n };\r\n newArrTempBarang.push(newTempBarang);\r\n }\r\n });\r\n }\r\n });\r\n let idx = newArrTempBarang.length;\r\n arrTempBarang.map((atb) => {\r\n if (atb.CustBookDStat == \"NEW\") {\r\n idx++;\r\n let newTempBarang = {\r\n ...atb,\r\n CustBookDId: atb.CustBookDId,\r\n SeqNo: idx,\r\n };\r\n newArrTempBarang.push(newTempBarang);\r\n }\r\n });\r\n setArrTempBarang(newArrTempBarang.sort((a, b) => a.SeqNo - b.SeqNo));\r\n setArrDetailBarangMbl(newArrTempBarang.sort((a, b) => a.SeqNo - b.SeqNo));\r\n }\r\n }, [cancelKoliBookingObj]);\r\n\r\n useEffect(() => {\r\n if (isEditMode && arrTempBarang && arrTempBarang.length > 0) {\r\n setTotalNonCanKoli(\r\n arrTempBarang.filter((x) => x.CustBookDStat != \"CAN\").length\r\n );\r\n }\r\n }, [arrTempBarang]);\r\n\r\n function handlePackageContentChange(_packageContent) {\r\n setPackageContent(_packageContent);\r\n if (\r\n _packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN &&\r\n _packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN\r\n ) {\r\n setPackageContentNotes(\"\");\r\n }\r\n handleIsInsurance(_packageContent);\r\n }\r\n\r\n function handleSubmit(e) {\r\n e.preventDefault();\r\n setSubmitted(true);\r\n\r\n let isValid = true;\r\n\r\n if (recipientName == \"\") {\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: \"Harap input setidaknya 1 detail penerima\",\r\n });\r\n }\r\n\r\n if (isInsurance == \"1\") {\r\n let isValidNilaiBarang = true;\r\n let isValidPackageContentNotes = true;\r\n\r\n if (nilaiBarang <= 0) {\r\n isValidNilaiBarang = false;\r\n }\r\n if (packageContentNotes == \"\") {\r\n isValidPackageContentNotes = false;\r\n }\r\n\r\n if (!isValidNilaiBarang || !isValidPackageContentNotes) {\r\n isValid = false;\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: \"Harap isi form dengan benar.\",\r\n });\r\n }\r\n }\r\n\r\n if (isEditMode) {\r\n if (totalNonCanKoli == 0) {\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: \"Harap input setidaknya 1 detail barang\",\r\n });\r\n isValid = false;\r\n }\r\n\r\n if (totalKoli != totalNonCanKoli) {\r\n isValid = false;\r\n }\r\n } else {\r\n if (arrDetailBarangMbl.length == 0) {\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: \"Harap input setidaknya 1 detail barang\",\r\n });\r\n isValid = false;\r\n }\r\n\r\n if (totalKoli != arrDetailBarangMbl.length) {\r\n isValid = false;\r\n }\r\n }\r\n\r\n if (\r\n isValid &&\r\n enableSubmitted &&\r\n sellerName &&\r\n sellerMobilePhnNo &&\r\n recipientName &&\r\n paymentType &&\r\n packageCategory &&\r\n packageContent &&\r\n dropType &&\r\n transportType &&\r\n originDestId > 0 &&\r\n selectedDest &&\r\n selectedDest.value !== 0\r\n ) {\r\n if (\r\n ((packageContent ===\r\n masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN ||\r\n packageContent ===\r\n masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN) &&\r\n packageContentNotes) ||\r\n (packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN &&\r\n packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN)\r\n ) {\r\n if (\r\n ((dropType === masterSettingConstants.DROP_TYPE_PICKUP &&\r\n pickupTime &&\r\n pickupPhnNo &&\r\n pickupContactPerson &&\r\n selectedPckDist &&\r\n selectedPckDist.value != 0 &&\r\n originDestId > 0) ||\r\n dropType === masterSettingConstants.DROP_TYPE_DROP) &&\r\n ((newPickupAddr === true && pickupAddrType) || !newPickupAddr)\r\n ) {\r\n if (isInsurance == \"0\" || (isInsurance == \"1\" && nilaiBarang > 0)) {\r\n let selectedPackageContent = packageContentsObj.filter(\r\n (rw) => rw.PackageContentCode === packageContent\r\n );\r\n setIsInsurance(selectedPackageContent[0].IsInsurance);\r\n }\r\n\r\n if (\r\n !errSubmitObj &&\r\n !errCalcObj &&\r\n arrDetailBarangMbl.length > 0 &&\r\n totalKoli == arrDetailBarangMbl.length\r\n ) {\r\n setAlert({ Type: \"\", StatusMessage: \"\" });\r\n }\r\n\r\n let newArrDetailBarangMbl = arrDetailBarangMbl;\r\n newArrDetailBarangMbl.map((newDetail, i) => {\r\n var packingType = \"\";\r\n if (newDetail.PackingKayu) {\r\n packingType = \"KAYU\";\r\n }\r\n if (newDetail.BubbleWrap) {\r\n packingType =\r\n (packingType != \"\" ? packingType + \";\" : \"\") + \"BUBBLEWRAP\";\r\n }\r\n if (newDetail.Wrapping) {\r\n packingType =\r\n (packingType != \"\" ? packingType + \";\" : \"\") + \"WRAPPING\";\r\n }\r\n newDetail.PackingType = packingType;\r\n\r\n return newDetail;\r\n });\r\n\r\n const bookingHObj = {\r\n CustId: acc.CustId,\r\n SellerName: sellerName,\r\n AliasName: sellerAliasName,\r\n SellerMblPhoneNo: formatPhoneNumber(sellerMobilePhnNo),\r\n Username: acc.Username,\r\n CustRefNo: referenceNo,\r\n RecipientAddr: recipientAddress,\r\n RecipientMblPhoneNo: formatPhoneNumber(recipientMobilePhnNo),\r\n RecipientName: recipientName,\r\n PaymentType: paymentType,\r\n PackageCategory: packageCategory,\r\n PackageContentCode: packageContent,\r\n EstTotalWeight: estItemWeight,\r\n PackageContentNotes: packageContentNotes,\r\n PickupNotes: pickupNotes,\r\n PickupTime: pickupTime,\r\n PickupPhoneNo: pickupPhnNo,\r\n PickupContactPerson: pickupContactPerson,\r\n PickupDistrictId: selectedPckDist.value,\r\n PickupAddr: pickupAddress,\r\n DropType: dropType,\r\n TotalItem: isEditMode\r\n ? totalNonCanKoli\r\n : newArrDetailBarangMbl.length,\r\n BookNotes: bookingNotes,\r\n PickupAddrType: pickupAddrType,\r\n EstItemPriceAmt: nilaiBarang,\r\n DestDistrictId: selectedDest.value,\r\n DestDistrictName: selectedDest.label,\r\n TransportType: transportType,\r\n BookDetails: newArrDetailBarangMbl,\r\n OriginDestCode: originDestCode,\r\n CustBookHId: trxNo !== 0 ? trxNo : 0,\r\n };\r\n\r\n const submitBooking = async () => {\r\n dispatch(bookingActions.requestSubmitBooking(bookingHObj));\r\n };\r\n submitBooking();\r\n }\r\n }\r\n } else {\r\n window.scrollTo(0, 0);\r\n }\r\n }\r\n\r\n function handleNextStep(e) {\r\n e.preventDefault();\r\n setSubmitted(true);\r\n if (currStep == 1) {\r\n if (sellerName && sellerMobilePhnNo && dropType) {\r\n if (\r\n dropType === masterSettingConstants.DROP_TYPE_PICKUP &&\r\n pickupTime &&\r\n pickupPhnNo &&\r\n pickupContactPerson &&\r\n selectedPckDist &&\r\n selectedPckDist.value != 0 &&\r\n pickupAddress &&\r\n ((newPickupAddr === true && pickupAddrType) || !newPickupAddr)\r\n ) {\r\n let pickupDistrictObj = districtObj.filter(\r\n (rw) => rw.DistrictId === selectedPckDist.value\r\n );\r\n setOriginDestId(pickupDistrictObj[0].OriginDestId);\r\n if (originObj != null && originObj.Result != null) {\r\n let selectedOriginObj = originObj.Result.filter(\r\n (rw) => rw.OriginId === pickupDistrictObj[0][\"OriginDestId\"]\r\n );\r\n if (selectedOriginObj.length > 0) {\r\n setOriginDestCode(selectedOriginObj[0][\"OriginCode\"]);\r\n }\r\n }\r\n if (pickupDistrictObj.length > 0 && pickupDistrictObj[0].IsPickup === \"1\") {\r\n setIsError(false);\r\n setCurrentStep(currStep + 1);\r\n setSubmitted(false);\r\n dispatch(bookingActions.clearRecipientList());\r\n } else {\r\n setIsError(true);\r\n setSubmitted(false);\r\n setAlert({\r\n Type: \"Info\",\r\n StatusMessage: \"Maaf, Kecamatan Pickup Belum Tercover\",\r\n });\r\n }\r\n }\r\n }\r\n } else if (currStep == 2) {\r\n if (\r\n recipientName &&\r\n recipientAddress &&\r\n recipientMobilePhnNo &&\r\n transportType &&\r\n paymentType &&\r\n packageCategory &&\r\n packageContent &&\r\n selectedDest &&\r\n selectedDest.value != 0 &&\r\n (isInsurance == \"0\" || (isInsurance == \"1\" && nilaiBarang > 0))\r\n ) {\r\n if (\r\n ((packageContent ===\r\n masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN ||\r\n packageContent ===\r\n masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN) &&\r\n packageContentNotes) ||\r\n (packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN &&\r\n packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN)\r\n ) {\r\n setCurrentStep(currStep + 1);\r\n setSubmitted(false);\r\n\r\n let selectedPackageContent = packageContentsObj.filter(\r\n (rw) => rw.PackageContentCode === packageContent\r\n );\r\n setIsInsurance(selectedPackageContent[0].IsInsurance);\r\n }\r\n }\r\n }\r\n\r\n if (!errSubmitObj && !errCalcObj && arrDetailBarangMbl.length > 0) {\r\n setAlert({ Type: \"\", StatusMessage: \"\" });\r\n }\r\n }\r\n\r\n function handlePrevStep(e) {\r\n e.preventDefault();\r\n setCurrentStep(currStep - 1);\r\n }\r\n\r\n function handleSelesai(e) {\r\n if (recipientListObj && recipientListObj.length > 0) {\r\n e.preventDefault();\r\n setSubmitted(true);\r\n setModalShow(true);\r\n }\r\n }\r\n\r\n async function clearDatas() {\r\n setReferenceNo(\"\");\r\n setRecipientId(0);\r\n setRecipientName(\"\");\r\n setRecipientMobilePhnNo(\"\");\r\n setRecipientAddress(\"\");\r\n setDropType(\"PICKUP\");\r\n setPaymentType(\"\");\r\n setTransportType(\"\");\r\n setEstItemWeight(0);\r\n setPackageContent(\"\");\r\n setPackageContentNotes(\"\");\r\n setPickupContactPerson(\"\");\r\n setPickupAddress(\"\");\r\n setPickupNotes(\"\");\r\n setPickupPhnNo(\"\");\r\n setPickupTime(moment(new Date()).format(\"YYYY-MM-DD\"));\r\n setMinPickupTime(moment(new Date()).format(\"YYYY-MM-DD\"));\r\n setBookingNotes(\"\");\r\n setPackageCategory(\"\");\r\n setCurrentStep(1);\r\n setArrTempBarang([]);\r\n setArrDetailBarangMbl([]);\r\n setArrDetailPenerimaMbl([]);\r\n setIsInsurance(\"0\");\r\n setSelectedPckDist({ value: 0, label: \"Pilih Kecamatan / Kabupaten\" });\r\n setSelectedDest({ value: 0, label: \"Pilih Tujuan\" });\r\n setSelectedPenerima({ value: 0, label: \"Pilih Penerima\" });\r\n const clearData = async () => {\r\n dispatch(packageContentActions.clearPackageContent());\r\n dispatch(bookingActions.clearCalculateBooking());\r\n dispatch(districtActions.getDistrict());\r\n dispatch(bookingActions.clearSubmitBooking());\r\n dispatch(originActions.getOrigin());\r\n dispatch(transportTypeActions.clearTransportType());\r\n };\r\n clearData();\r\n setSubmitted(false);\r\n setEnableSubmitted(false);\r\n setResiNos(\"\");\r\n setOriginDestId(0);\r\n setOriginDestCode(\"\");\r\n }\r\n\r\n function clearDataPenerima() {\r\n const clearData = async () => {\r\n dispatch(bookingActions.clearCustBookHDetail());\r\n dispatch(packageContentActions.clearPackageContent());\r\n dispatch(bookingActions.clearCalculateBooking());\r\n dispatch(bookingActions.clearSubmitBooking());\r\n dispatch(originActions.getOrigin());\r\n };\r\n clearData();\r\n setReferenceNo(\"\");\r\n setRecipientId(0);\r\n setRecipientName(\"\");\r\n setRecipientMobilePhnNo(\"\");\r\n setRecipientAddress(\"\");\r\n setDropType(\"PICKUP\");\r\n setPaymentType(\"\");\r\n setTransportType(\"\");\r\n setEstItemWeight(0);\r\n setPackageContent(\"\");\r\n setPackageContentNotes(\"\");\r\n setBookingNotes(\"\");\r\n setPackageCategory(\"\");\r\n setArrTempBarang([]);\r\n setArrDetailBarangMbl([]);\r\n setIsInsurance(\"0\");\r\n setNilaiBarang(0);\r\n setSelectedDest({ value: 0, label: \"Pilih Tujuan\" });\r\n setSelectedPenerima({ value: 0, label: \"Pilih Penerima\" });\r\n setSubmitted(false);\r\n setEnableSubmitted(false);\r\n setTotalKoli(1);\r\n setTrxNo(0);\r\n }\r\n\r\n function detailKoliOnChange(event, isNumeric = true) {\r\n const { name, value, type, checked } = event.target;\r\n let val = type === \"checkbox\" ? checked : value;\r\n\r\n if (isNumeric) {\r\n let num = 0;\r\n if (val != \"\") {\r\n const str = val.replace(/,/g, \"\");\r\n num = parseFloat(str);\r\n }\r\n\r\n setDetailBarangMbl((prevState) => ({\r\n ...prevState,\r\n [name]: num,\r\n }));\r\n } else {\r\n setDetailBarangMbl((prevState) => ({\r\n ...prevState,\r\n [name]: val,\r\n }));\r\n }\r\n }\r\n\r\n function handleNilaiBarang(event) {\r\n if (event.target.value != \"\") {\r\n const str = event.target.value.replace(/,/g, \"\");\r\n setNilaiBarang(parseFloat(str));\r\n }\r\n }\r\n\r\n function handleIsInsurance(_packageContent = \"\") {\r\n if (_packageContent == \"\") {\r\n _packageContent = packageContent;\r\n }\r\n\r\n if (packageContentsObj) {\r\n let selectedPackageContent = packageContentsObj.find(\r\n (rw) => rw.PackageContentCode === _packageContent\r\n );\r\n\r\n setIsInsurance(selectedPackageContent.IsInsurance);\r\n setNilaiBarang(0);\r\n setPackageContentNotes('');\r\n }\r\n }\r\n\r\n function getTransportType() {\r\n if (selectedDest && selectedDest.value != 0) {\r\n const transportTypeObj = {\r\n OriginDestId: originDestId,\r\n DestDistrictId: selectedDest.value,\r\n };\r\n\r\n dispatch(transportTypeActions.getTransportType(transportTypeObj));\r\n } else {\r\n dispatch(transportTypeActions.clearTransportType());\r\n }\r\n }\r\n\r\n function onSubmitDetailBarang() {\r\n setEnableSubmitted(false);\r\n setSimpanDataBarang(true);\r\n setIsError(false);\r\n\r\n setArrDetailBarangMbl(\r\n arrDetailBarangMbl.map((detail, i) => {\r\n if (detail.CustBookDId == detailBarangMbl.CustBookDId) {\r\n detail.ItemWeight = detailBarangMbl.ItemWeight;\r\n detail.DimP = detailBarangMbl.DimP;\r\n detail.DimL = detailBarangMbl.DimL;\r\n detail.DimT = detailBarangMbl.DimT;\r\n detail.IsPacking =\r\n detailBarangMbl.PackingKayu ||\r\n detailBarangMbl.BubbleWrap ||\r\n detailBarangMbl.Wrapping;\r\n detail.PackingKayu = detailBarangMbl.PackingKayu;\r\n detail.BubbleWrap = detailBarangMbl.BubbleWrap;\r\n detail.Wrapping = detailBarangMbl.Wrapping;\r\n }\r\n return detail;\r\n })\r\n );\r\n\r\n setSimpanDataBarang(false);\r\n }\r\n\r\n const handleChangeDistrictPickup = (selectedOption) => {\r\n setSelectedPckDist(selectedOption);\r\n setIsError(false);\r\n };\r\n\r\n const handleChangeDest = (selectedOption) => {\r\n setSelectedDest(selectedOption);\r\n handleTagihTujuan(selectedOption.value);\r\n };\r\n\r\n function navigateToHome() {\r\n setModalShow(false);\r\n setSubmitted(false);\r\n clearDatas();\r\n history.push(\"/Home\");\r\n }\r\n\r\n function navigateToCreateBooking() {\r\n setModalShow(false);\r\n setSubmitted(false);\r\n clearDatas();\r\n }\r\n\r\n function navigateToBookingDetail() {\r\n async function clear() {\r\n await clearDataPenerima();\r\n }\r\n clear();\r\n\r\n setModalShow(false);\r\n setSubmitted(false);\r\n if (arrResiNo.length > 0) {\r\n const myArray = arrResiNo;\r\n const arrayToString = myArray.join(\"|\");\r\n window.open(`/booking-print?trxNo=${arrayToString}`, \"_blank\");\r\n } else if (resiNos != \"\") {\r\n window.open(`/booking-print?trxNo=${resiNos}`, \"_blank\");\r\n } else {\r\n setIsError(true);\r\n setAlert({\r\n Type: \"Info\",\r\n StatusMessage: \"Harap pilih data penerima terlebih dahulu\",\r\n });\r\n }\r\n }\r\n\r\n function handleTagihTujuan(districtId) {\r\n let _districtObj = districtObj.find((x) => x.DistrictId == districtId);\r\n let custCOD = custObj.IsAllowCOD;\r\n let tujuanCOD = false;\r\n let isAllowRcvPayment = \"1\";\r\n\r\n if (_districtObj != null) {\r\n isAllowRcvPayment = _districtObj.IsAllowRcvPayment;\r\n tujuanCOD = isAllowRcvPayment == \"1\" ? true : false;\r\n if (custCOD && tujuanCOD) setHideCOD(false);\r\n else setHideCOD(true);\r\n } else {\r\n setHideCOD(!custCOD);\r\n }\r\n }\r\n\r\n function onAddDetailBarang() {\r\n if (\r\n recipientName &&\r\n // recipientAddress && 26Okt\r\n // recipientMobilePhnNo &&\r\n transportType &&\r\n paymentType &&\r\n packageCategory &&\r\n packageContent &&\r\n selectedDest &&\r\n selectedDest.value != 0 &&\r\n (isInsurance == \"0\" || (isInsurance == \"1\" && nilaiBarang > 0))\r\n ) {\r\n setIsError(false);\r\n return true;\r\n } else {\r\n setIsError(true);\r\n if (isInsurance == \"1\" && nilaiBarang <= 0) {\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: \"Harap isi nilai barang\",\r\n });\r\n }\r\n else {\r\n setAlert({\r\n Type: \"Info\",\r\n StatusMessage: \"Harap lengkapi data pengirim terlebih dahulu\",\r\n });\r\n }\r\n return false;\r\n }\r\n }\r\n\r\n function generateKoli() {\r\n let newArrTempBarang = [...arrTempBarang];\r\n let validation = onAddDetailBarang();\r\n\r\n if (!validation) {\r\n window.scrollTo(0, 0);\r\n return;\r\n }\r\n\r\n if (isEditMode) {\r\n let filterArrDetail = [];\r\n\r\n arrTempBarang.map((detail, i) => {\r\n let newDetailBarang = {\r\n CustBookDId: detail.CustBookDId,\r\n ItemCodeNo: \"\",\r\n ItemWeight: detail.ItemWeight,\r\n DimP: detail.DimP,\r\n DimL: detail.DimL,\r\n DimT: detail.DimT,\r\n CustBookDStat: detail.CustBookDStat,\r\n IsPacking: detail.IsPacking,\r\n PackingKayu: detail.PackingKayu,\r\n BubbleWrap: detail.BubbleWrap,\r\n Wrapping: detail.Wrapping,\r\n };\r\n filterArrDetail.push(newDetailBarang);\r\n });\r\n let arrTempBarangLength = arrTempBarang.length;\r\n\r\n if (totalKoli <= totalNonCanKoli) return;\r\n else {\r\n const newTempArrDetailBarangMbl = [...filterArrDetail];\r\n\r\n const countToAdd = totalKoli - totalNonCanKoli;\r\n for (let i = 0; i < countToAdd; i++) {\r\n let newObj = {\r\n CustBookDId: arrTempBarangLength + (i + 1),\r\n ItemCodeNo: \"\",\r\n ItemWeight: 0,\r\n DimP: 0,\r\n DimL: 0,\r\n DimT: 0,\r\n CustBookDStat: \"NEW\",\r\n IsPacking: false,\r\n PackingKayu: false,\r\n BubbleWrap: false,\r\n Wrapping: false,\r\n };\r\n newTempArrDetailBarangMbl.push(newObj);\r\n\r\n newObj.SeqNo = arrTempBarangLength + (i + 1);\r\n newObj.VolWeight = 0;\r\n newObj.FinalWeight = 0;\r\n newObj.TotalCalcSrc = \"Item\";\r\n newArrTempBarang.push(newObj);\r\n }\r\n setArrDetailBarangMbl(newTempArrDetailBarangMbl);\r\n setArrTempBarang(newArrTempBarang.sort((a, b) => a.SeqNo - b.SeqNo));\r\n }\r\n } else {\r\n const newKoliData = [...koliData];\r\n const newTempArrDetailBarangMbl = [...arrDetailBarangMbl];\r\n if (arrDetailBarangMbl.length > 0) {\r\n koliData.length = arrDetailBarangMbl.length;\r\n }\r\n\r\n if (totalKoli > koliData.length) {\r\n for (let i = arrDetailBarangMbl.length; i < totalKoli; i++) {\r\n let newObj = {\r\n CustBookDId: i + 1,\r\n ItemCodeNo: \"\",\r\n ItemWeight: 0,\r\n DimP: 0,\r\n DimL: 0,\r\n DimT: 0,\r\n CustBookDStat: \"NEW\",\r\n IsPacking: false,\r\n PackingKayu: false,\r\n BubbleWrap: false,\r\n Wrapping: false,\r\n };\r\n newTempArrDetailBarangMbl.push(newObj);\r\n\r\n newObj.SeqNo = i + 1;\r\n newObj.VolWeight = 0;\r\n newObj.FinalWeight = 0;\r\n newObj.TotalCalcSrc = \"Item\";\r\n newArrTempBarang.push(newObj);\r\n }\r\n } else if (totalKoli < koliData.length) {\r\n const countToRemove = koliData.length - totalKoli;\r\n newKoliData.splice(-countToRemove, countToRemove);\r\n newTempArrDetailBarangMbl.splice(totalKoli);\r\n }\r\n setKoliData(newKoliData);\r\n setArrDetailBarangMbl(newTempArrDetailBarangMbl);\r\n setArrTempBarang(newArrTempBarang.sort((a, b) => a.SeqNo - b.SeqNo));\r\n }\r\n }\r\n\r\n function handleCancel(ev) {\r\n if (ev.CustBookDStat == \"ACT\") {\r\n let reqObj = {\r\n Id: ev.CustBookDId,\r\n username: acc.Username,\r\n };\r\n dispatch(bookingActions.cancelKoliBooking(reqObj));\r\n } else if (ev.CustBookDStat == \"NEW\") {\r\n const newArrTempBarang = [];\r\n let idx = 1;\r\n arrTempBarang.map((atb) => {\r\n if (ev.CustBookDId != atb.CustBookDId) {\r\n let newTempBarang = {\r\n ...atb,\r\n CustBookDId: atb.CustBookDId,\r\n SeqNo: idx,\r\n };\r\n newArrTempBarang.push(newTempBarang);\r\n idx++;\r\n }\r\n });\r\n setArrTempBarang(newArrTempBarang);\r\n setArrDetailBarangMbl(newArrTempBarang);\r\n }\r\n }\r\n\r\n return (\r\n <>\r\n \r\n
\r\n
\r\n Buat Booking\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n 1\r\n
\r\n
\r\n Pengirim\r\n
\r\n
\r\n
1 ? \"border-red-600\" : \"border-gray-500\"\r\n } `}\r\n > \r\n
\r\n
1 ? \"bg-red-600 text-white\" : \"text-red-600\"\r\n } `}\r\n >\r\n 2\r\n \r\n
\r\n Penerima\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Buat Booking\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n 1\r\n
\r\n
\r\n Pengirim\r\n
\r\n
\r\n
1 ? \"border-red-600\" : \"border-gray-500\"\r\n } `}\r\n > \r\n
\r\n
1 ? \"bg-red-600 text-white\" : \"text-red-600\"\r\n } `}\r\n >\r\n 2\r\n \r\n
\r\n Penerima\r\n
\r\n
\r\n
\r\n
\r\n Tanggal Pickup\r\n
\r\n
\r\n \r\n setPickupTime(e.target.value)\r\n }\r\n min={minPickupTime}\r\n />\r\n \r\n Harap masukkan tanggal dan jam pickup\r\n
\r\n )}\r\n \r\n \r\n
\r\n Alamat Pickup\r\n
*
\r\n
\r\n
\r\n \r\n setPickupAddress(e.target.value)\r\n }\r\n value={pickupAddress}\r\n />\r\n \r\n Harap masukkan alamat pickup\r\n
\r\n )}\r\n \r\n \r\n
\r\n Kecamatan / Kabupaten Pickup\r\n
*
\r\n
\r\n
\r\n \r\n Harap masukkan kecamatan / kabupaten\r\n
\r\n )}\r\n \r\n \r\n
\r\n Catatan\r\n
\r\n
\r\n \r\n setPickupNotes(e.target.value)\r\n }\r\n value={pickupNotes}\r\n />\r\n
\r\n
\r\n
\r\n
\r\n Alias Pengirim\r\n
*
\r\n
\r\n
\r\n \r\n setSellerAliasName(e.target.value)\r\n }\r\n />\r\n \r\n {submitted && !sellerAliasName && (\r\n
\r\n Harap isi alias pengirim\r\n
\r\n )}\r\n
\r\n
\r\n Nomor Ponsel Pengirim\r\n
*
\r\n
\r\n
\r\n \r\n Harap isi nomor ponsel pengirim\r\n
\r\n )}\r\n \r\n \r\n
\r\n Nama Penerima\r\n
*
\r\n
\r\n
\r\n \r\n setRecipientName(e.target.value)\r\n }\r\n />\r\n \r\n Harap isi nama penerima\r\n
\r\n )}\r\n \r\n \r\n
\r\n Nomor Ponsel Penerima\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Alamat Penerima\r\n
\r\n
\r\n \r\n setRecipientAddress(e.target.value)\r\n }\r\n />\r\n
\r\n
\r\n
\r\n Nomor Referensi\r\n {acc.IsCustRefNoMandatory && (\r\n
*
\r\n )}\r\n
\r\n
\r\n setReferenceNo(e.target.value)}\r\n value={referenceNo}\r\n />\r\n \r\n Harap isi Nomor Referensi.\r\n
\r\n )}\r\n \r\n \r\n
\r\n
\r\n {districtObj && selectedDest && (\r\n \r\n Harap isi tujuan\r\n
\r\n )}\r\n \r\n \r\n
\r\n
\r\n \r\n setTransportType(e.target.value)\r\n }\r\n >\r\n \r\n Pilih jalur\r\n \r\n {transportTypeObj &&\r\n transportTypeObj.TransportTypes.map(\r\n (transportTypeObj) => (\r\n \r\n {transportTypeObj.TransportTypeName}\r\n \r\n )\r\n )}\r\n \r\n \r\n Harap pilih metode pengiriman\r\n
\r\n )}\r\n \r\n \r\n
\r\n
\r\n setPaymentType(e.target.value)}\r\n >\r\n \r\n Pilih metode pembayaran\r\n \r\n \r\n Lunas\r\n \r\n \r\n Kredit\r\n \r\n \r\n Tagih Tujuan\r\n \r\n \r\n Kredit Penerima\r\n \r\n \r\n \r\n Harap pilih metode pembayaran\r\n
\r\n )}\r\n \r\n \r\n
\r\n Jenis Barang\r\n
*
\r\n
\r\n
\r\n \r\n setPackageCategory(e.target.value)\r\n }\r\n >\r\n \r\n Pilih jenis barang\r\n \r\n \r\n ELEKTRONIK\r\n \r\n \r\n NON ELEKTRONIK\r\n \r\n \r\n \r\n Harap pilih jenis barang\r\n
\r\n )}\r\n \r\n \r\n
\r\n
\r\n handlePackageContentChange(e.target.value)}>\r\n \r\n Pilih tipe barang\r\n \r\n {packageContentsObj &&\r\n packageContentsObj.map(\r\n (packageContentsObj) => (\r\n \r\n {packageContentsObj.PackageContentName}\r\n \r\n )\r\n )}\r\n \r\n \r\n Harap pilih tipe barang\r\n
\r\n )}\r\n \r\n \r\n
\r\n
\r\n setTotalKoli(e.target.value)}\r\n value={totalKoli}\r\n />\r\n \r\n Total Koli tidak sama dengan jumlah detail\r\n barang\r\n
\r\n )}\r\n \r\n {isInsurance && isInsurance === \"1\" && (\r\n \r\n
\r\n
\r\n handleNilaiBarang(e)}\r\n value={nilaiBarang}\r\n placeholder=\"Isi Nilai barang\"\r\n />\r\n \r\n Harap isi nilai barang\r\n
\r\n )}\r\n \r\n )}\r\n \r\n
\r\n Catatan Order\r\n
\r\n
\r\n \r\n setBookingNotes(e.target.value)\r\n }\r\n />\r\n
\r\n
\r\n
\r\n
\r\n \r\n setPackageContentNotes(e.target.value)\r\n }\r\n />\r\n \r\n Harap isi catatan paket\r\n
\r\n )}\r\n \r\n )}\r\n {!showKoliForm && (\r\n <>\r\n \r\n\r\n \r\n
\r\n Estimasi Berat Barang (kg)\r\n
\r\n
\r\n \r\n detailKoliOnChange(e, true)\r\n }\r\n value={detailBarangMbl.ItemWeight}\r\n placeholder=\"Isi estimasi berat barang\"\r\n />\r\n
\r\n
\r\n
\r\n Panjang (cm)\r\n
\r\n
\r\n \r\n detailKoliOnChange(e, true)\r\n }\r\n value={detailBarangMbl.DimP}\r\n placeholder=\"Isi dimensi panjang barang\"\r\n />\r\n
\r\n
\r\n
\r\n Lebar (cm)\r\n
\r\n
\r\n \r\n detailKoliOnChange(e, true)\r\n }\r\n value={detailBarangMbl.DimL}\r\n placeholder=\"Isi dimensi lebar barang\"\r\n />\r\n
\r\n
\r\n
\r\n Tinggi (cm)\r\n
\r\n
\r\n \r\n detailKoliOnChange(e, true)\r\n }\r\n value={detailBarangMbl.DimT}\r\n placeholder=\"Isi dimensi tinggi barang\"\r\n />\r\n
\r\n
\r\n
\r\n Packing\r\n
\r\n
\r\n
\r\n \r\n detailKoliOnChange(e, false)\r\n }\r\n />\r\n Kayu\r\n
\r\n \r\n
\r\n \r\n detailKoliOnChange(e, false)\r\n }\r\n />\r\n Bubble Wrap\r\n
\r\n \r\n
\r\n \r\n detailKoliOnChange(e, false)\r\n }\r\n />\r\n Wrapping\r\n
\r\n
\r\n
\r\n
\r\n {\r\n setShowKoliForm(true);\r\n setShowPenerimaForm(true);\r\n }}\r\n >\r\n Batal\r\n \r\n
\r\n
\r\n {\r\n onSubmitDetailBarang();\r\n setShowKoliForm(true);\r\n setShowPenerimaForm(true);\r\n }}\r\n >\r\n Simpan Data Koli\r\n \r\n
\r\n
\r\n {\r\n generateKoli();\r\n }}\r\n >\r\n Generate Koli\r\n \r\n
\r\n \r\n {isEditMode ? (\r\n
\r\n ) : (\r\n
\r\n )}\r\n
\r\n
\r\n \r\n Total Barang\r\n \r\n \r\n {respCalcObj &&\r\n arrDetailBarangMbl.length > 0\r\n ? new Intl.NumberFormat(\r\n \"en\",\r\n {\r\n minimumFractionDigits: 2,\r\n }\r\n ).format(respCalcObj.TotalItem)\r\n : new Intl.NumberFormat(\r\n \"en\",\r\n {\r\n minimumFractionDigits: 2,\r\n }\r\n ).format(0)}\r\n \r\n
\r\n
\r\n \r\n Estimasi Berat Final (Kg)\r\n \r\n \r\n {respCalcObj &&\r\n arrDetailBarangMbl.length > 0\r\n ? new Intl.NumberFormat(\r\n \"en\",\r\n {\r\n minimumFractionDigits: 2,\r\n }\r\n ).format(respCalcObj.TotalFinalWeight)\r\n : new Intl.NumberFormat(\r\n \"en\",\r\n {\r\n minimumFractionDigits: 2,\r\n }\r\n ).format(0)}\r\n \r\n
\r\n
\r\n navigateToBookingDetail()}\r\n >\r\n Cetak Label Barang\r\n \r\n {\r\n setShowPenerimaForm(true);\r\n clearDataPenerima();\r\n setIsEditMode(false);\r\n }}\r\n >\r\n Tambah Data Penerima\r\n \r\n
\r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n {currStep < 2 ? (\r\n 1 && \"mx-1\"\r\n } py-2 border border-transparent font-medium rounded-full text-white bg-red-600`}\r\n onClick={(e) => handleNextStep(e)}\r\n >\r\n Lanjutkan\r\n \r\n ) : (\r\n \r\n Simpan\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Summary Booking\r\n \r\n \r\n {\r\n <>\r\n \r\n
\r\n
\r\n
\r\n
\r\n Booking telah sukses dibuat\r\n
\r\n
\r\n
\r\n
\r\n
\r\n navigateToBookingDetail()}\r\n >\r\n Cetak Label Barang\r\n \r\n navigateToCreateBooking()}\r\n >\r\n Buat Booking Lain\r\n \r\n navigateToHome()}\r\n >\r\n Kembali ke Home\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Booking telah sukses dibuat\r\n
\r\n
\r\n
\r\n
\r\n
\r\n navigateToBookingDetail()}\r\n >\r\n Cetak Label Barang\r\n \r\n navigateToCreateBooking()}\r\n >\r\n Buat Booking Lain\r\n \r\n navigateToHome()}\r\n >\r\n Kembali ke Home\r\n \r\n
\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default BookingAddFormV4;\r\n","import React, { useState, useEffect, useRef } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { masterSettingConstants } from \"../../_constants\";\r\nimport {\r\n districtActions,\r\n bookingActions,\r\n packageContentActions,\r\n originActions,\r\n transportTypeActions,\r\n customerActions,\r\n} from \"../../_actions\";\r\nimport {\r\n TableDetailBarangEdit,\r\n AlertMessage\r\n} from \"../../components\";\r\nimport Input from \"react-phone-number-input/input\";\r\nimport { NumericFormat } from \"react-number-format\";\r\nimport { formatPhoneNumber } from \"react-phone-number-input\";\r\nimport \"../../custom.css\";\r\nimport { pickupAddr, selectedPickupAddr } from \"../../_reducers/pickup.reducer\";\r\nimport \"react-phone-number-input/style.css\";\r\nimport Select, { createFilter } from \"react-select\";\r\nimport { useHistory, useLocation } from \"react-router-dom\";\r\nimport moment from \"moment\";\r\n\r\nconst BookingDetailEdit = ({ }) => {\r\n const dispatch = useDispatch();\r\n const acc = useSelector((state) => state.authentication.accInfo);\r\n const pickupAddrSelectedObj = useSelector(\r\n (state) => state.selectedPickupAddr.selectedPickupAddrObj\r\n );\r\n const packageContentsObj = useSelector(\r\n (state) => state.packagecontent.packageContentObj\r\n );\r\n const districtObj = useSelector((state) => state.district.districtObj);\r\n const respCalcObj = useSelector(\r\n (state) => state.calculateBookingPrice.calcBookingObj\r\n );\r\n const respSubmitObj = useSelector(\r\n (state) => state.submitBooking.submitBookingObj\r\n );\r\n const errCalcObj = useSelector(\r\n (state) => state.calculateBookingPrice.errCalcBookingObj\r\n );\r\n const errSubmitObj = useSelector(\r\n (state) => state.submitBooking.errSubmitBookingObj\r\n );\r\n const originObj = useSelector((state) => state.origin.origin);\r\n const transportTypeObj = useSelector(\r\n (state) => state.transportType.transportTypeObj\r\n );\r\n const errTransportTypeObj = useSelector(\r\n (state) => state.transportType.errTransportTypeObj\r\n );\r\n const custObj = useSelector((state) => state.custById.custObj);\r\n const listPenerimaObj = useSelector(\r\n (state) => state.penerimaByHint.penerimaByHintObj\r\n );\r\n const penerimaObj = useSelector((state) => state.penerimaById.penerimaObj);\r\n const custBookHDetailObj = useSelector(\r\n (state) => state.getCustBookHDetail.custBookHDetailObj\r\n );\r\n const cancelKoliBookingObj = useSelector(\r\n (state) => state.cancelKoliBooking.cancelKoliBookingObj\r\n );\r\n\r\n const history = useHistory();\r\n const [isError, setIsError] = useState(false);\r\n const [submitted, setSubmitted] = useState(false);\r\n const [simpanDataBarang, setSimpanDataBarang] = useState(false);\r\n const [enableSubmitted, setEnableSubmitted] = useState(false);\r\n const [newPickupAddr, setNewPickupAddr] = useState(false);\r\n const [packageCategory, setPackageCategory] = useState(\"\");\r\n const [sellerName, setSellerName] = useState(acc && acc.CustName);\r\n const [sellerAliasName, setSellerAliasName] = useState(acc && acc.CustName);\r\n const [sellerMobilePhnNo, setSellerMobilePhnNo] = useState(\r\n acc && acc.MobilePhoneNo\r\n );\r\n const [originDestId, setOriginDestId] = useState(0);\r\n const [originDestCode, setOriginDestCode] = useState(\"\");\r\n const [referenceNo, setReferenceNo] = useState(\"\");\r\n const [recipientId, setRecipientId] = useState(0);\r\n const [recipientName, setRecipientName] = useState(\"\");\r\n const [recipientMobilePhnNo, setRecipientMobilePhnNo] = useState(\"\");\r\n const [recipientAddress, setRecipientAddress] = useState(\"\");\r\n const [dropType, setDropType] = useState(\"PICKUP\");\r\n const [paymentType, setPaymentType] = useState(\"\");\r\n const [transportType, setTransportType] = useState(\"\");\r\n const [estItemWeight, setEstItemWeight] = useState(0);\r\n const [packageContent, setPackageContent] = useState(\"\");\r\n const [packageContentNotes, setPackageContentNotes] = useState(\"\");\r\n const [pickupContactPerson, setPickupContactPerson] = useState(\"\");\r\n const [pickupAddress, setPickupAddress] = useState(\"\");\r\n const [pickupNotes, setPickupNotes] = useState(\"\");\r\n const [pickupPhnNo, setPickupPhnNo] = useState(\"\");\r\n const [pickupTime, setPickupTime] = useState(\r\n moment(new Date()).format(\"YYYY-MM-DD\")\r\n );\r\n const [minPickupTime, setMinPickupTime] = useState(\r\n moment(new Date()).format(\"YYYY-MM-DD\")\r\n );\r\n const [pickupAddrType, setPickupAddrType] = useState(\"\");\r\n const [bookingNotes, setBookingNotes] = useState(\"\");\r\n const [isInsurance, setIsInsurance] = useState(\"0\");\r\n const [nilaiBarang, setNilaiBarang] = useState(0);\r\n const [totalKoli, setTotalKoli] = useState(1);\r\n const [totalNonCanKoli, setTotalNonCanKoli] = useState(0);\r\n const [arrTempBarang, setArrTempBarang] = useState([]);\r\n const [arrDetailBarangMbl, setArrDetailBarangMbl] = useState([]);\r\n const [detailBarangMbl, setDetailBarangMbl] = useState({\r\n CustBookDId: 0,\r\n ItemCodeNo: \"\",\r\n ItemWeight: 0,\r\n DimP: 0,\r\n DimL: 0,\r\n DimT: 0,\r\n });\r\n const [alert, setAlert] = useState({\r\n Type: \"\",\r\n StatusMessage: \"\",\r\n });\r\n const [showPenerimaForm, setShowPenerimaForm] = useState(false);\r\n const [showKoliForm, setShowKoliForm] = useState(false);\r\n function useQuery() {\r\n const { search } = useLocation();\r\n return React.useMemo(() => new URLSearchParams(search), [search]);\r\n }\r\n const query = useQuery();\r\n const _trxNo = query.get(\"trxNo\");\r\n const noResi = query.get(\"noResi\");\r\n function dateParser(value) {\r\n const date = new Date(value);\r\n const dateParsed =\r\n date.getFullYear() +\r\n \"-\" +\r\n date.toLocaleString(\"en-us\", { month: \"2-digit\" }) +\r\n \"-\" +\r\n date.toLocaleString(\"en-us\", { day: \"2-digit\" });\r\n return dateParsed;\r\n }\r\n const maxDate = new Date();\r\n const minDate = new Date();\r\n const finalMinDate = new Date(minDate.getFullYear(), minDate.getMonth(), 1);\r\n const [requestObj, setRequestObj] = useState({\r\n trxDtFrom: dateParser(finalMinDate),\r\n trxDtTo: dateParser(maxDate),\r\n });\r\n const [options, setOptions] = useState([]);\r\n const [selectedPckDist, setSelectedPckDist] = useState();\r\n const [selectedDest, setSelectedDest] = useState();\r\n const [penerimaOptions, setPenerimaOptions] = useState([]);\r\n const [hideCOD, setHideCOD] = useState(true);\r\n const [hideCredit, setHideCredit] = useState(true);\r\n const [hideReceiverCredit, setHideReceiverCredit] = useState(true);\r\n const [isMember, setIsMember] = useState(false);\r\n\r\n const [isEditKoli, setIsEditKoli] = useState(false);\r\n\r\n const scrollToTop = () => {\r\n window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });\r\n };\r\n\r\n useEffect(() => {\r\n if (acc) {\r\n dispatch(customerActions.requestGetCustById(acc.CustId));\r\n\r\n var phone = sellerMobilePhnNo.substring(1, 20);\r\n var area = sellerMobilePhnNo.substring(0, 1);\r\n if (area === \"0\") {\r\n setSellerMobilePhnNo(\"+62\" + phone);\r\n }\r\n\r\n setPickupTime(moment(new Date()).format(\"YYYY-MM-DD\"));\r\n setMinPickupTime(moment(new Date()).format(\"YYYY-MM-DD\"));\r\n setSelectedPckDist({ value: 0, label: \"Pilih Kecamatan / Kabupaten\" });\r\n if (!districtObj) {\r\n dispatch(districtActions.getDistrict());\r\n }\r\n }\r\n if (pickupAddrSelectedObj) {\r\n setPickupAddress(pickupAddrSelectedObj.Addr);\r\n setPickupContactPerson(pickupAddrSelectedObj.ContactPerson);\r\n setPickupPhnNo(pickupAddrSelectedObj.PhoneNo);\r\n setPickupAddrType(pickupAddrSelectedObj.AddrType);\r\n }\r\n\r\n if (_trxNo !== 0) {\r\n getCustBookHDetail();\r\n setShowPenerimaForm(true);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (errCalcObj && errCalcObj.StatusCode != \"200\") {\r\n setIsError(true);\r\n setSubmitted(false);\r\n setAlert({ Type: \"Error\", StatusMessage: errCalcObj.StatusMessage });\r\n setArrDetailBarangMbl((arrDetailBarangMbl) => [\r\n ...arrDetailBarangMbl.filter(\r\n (rw) => rw.CustBookDId != arrDetailBarangMbl.length\r\n ),\r\n ]);\r\n }\r\n }, [errCalcObj]);\r\n\r\n useEffect(() => {\r\n if (respCalcObj && respCalcObj.BookingD.length > 0) {\r\n setArrTempBarang(respCalcObj.BookingD.sort((a, b) => a.SeqNo - b.SeqNo));\r\n setDetailBarangMbl({\r\n CustBookDId: 0,\r\n ItemCodeNo: \"\",\r\n ItemWeight: 0,\r\n DimP: 0,\r\n DimL: 0,\r\n DimT: 0,\r\n });\r\n // dispatch(bookingActions.clearCustBookHDetail());\r\n } else {\r\n setArrTempBarang([]);\r\n }\r\n }, [respCalcObj]);\r\n\r\n useEffect(() => {\r\n if (errSubmitObj && errSubmitObj.StatusCode != \"200\") {\r\n setIsError(true);\r\n setSubmitted(false);\r\n setAlert({ Type: \"Error\", StatusMessage: errSubmitObj.StatusMessage });\r\n }\r\n }, [errSubmitObj]);\r\n\r\n useEffect(() => {\r\n if (errTransportTypeObj && errTransportTypeObj.StatusCode != \"200\") {\r\n setIsError(true);\r\n setSubmitted(false);\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: errTransportTypeObj.StatusMessage,\r\n });\r\n }\r\n }, [errTransportTypeObj]);\r\n\r\n useEffect(() => {\r\n if (detailBarangMbl.CustBookDId != 0) {\r\n setShowKoliForm(false);\r\n } else {\r\n setShowKoliForm(true);\r\n }\r\n }, [detailBarangMbl]);\r\n\r\n useEffect(() => {\r\n if (custObj != null) {\r\n setHideCredit(!custObj.IsAllowCredit);\r\n }\r\n }, [custObj]);\r\n\r\n useEffect(() => {\r\n setPackageContent(\"\");\r\n setEnableSubmitted(false);\r\n setIsInsurance(\"0\");\r\n if (packageCategory !== null && packageCategory !== \"\") {\r\n\r\n dispatch(packageContentActions.getPackageContent(packageCategory));\r\n } else {\r\n dispatch(packageContentActions.clearPackageContent());\r\n }\r\n }, [packageCategory]);\r\n\r\n useEffect(() => {\r\n if (\r\n packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN &&\r\n packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN\r\n ) {\r\n setPackageContentNotes(\"\");\r\n }\r\n handleIsInsurance();\r\n }, [packageContent]);\r\n\r\n useEffect(() => {\r\n if (respSubmitObj && respSubmitObj.ResiNo !== \"\") {\r\n history.push(`/booking-details?noResi=${respSubmitObj.ResiNo}`)\r\n clearDataPenerima();\r\n }\r\n }, [respSubmitObj]);\r\n\r\n useEffect(() => {\r\n if (!errSubmitObj && !errCalcObj && arrDetailBarangMbl.length > 0) {\r\n setAlert({ Type: \"\", StatusMessage: \"\" });\r\n }\r\n if (\r\n isError == false &&\r\n selectedDest &&\r\n selectedDest.value != 0 &&\r\n paymentType &&\r\n transportType &&\r\n packageCategory &&\r\n packageContent &&\r\n arrDetailBarangMbl.length > 0 &&\r\n originDestId > 0\r\n ) {\r\n\r\n let _bookingD = [];\r\n\r\n arrDetailBarangMbl.map(\r\n (detail, i) => {\r\n let _arrTempObj = arrTempBarang.find(x => x.CustBookDId == detail.CustBookDId);\r\n if (_arrTempObj != undefined && _arrTempObj != null) {\r\n let newDetailBarang = {\r\n CustBookDId: detail.CustBookDId,\r\n ItemCodeNo: \"\",\r\n ItemWeight: detail.ItemWeight,\r\n DimP: detail.DimP,\r\n DimL: detail.DimL,\r\n DimT: detail.DimT,\r\n CustBookDStat: _arrTempObj.CustBookDStat\r\n }\r\n _bookingD.push(newDetailBarang);\r\n }\r\n }\r\n )\r\n\r\n const bookingHObj = {\r\n CustId: acc.CustId,\r\n DestDistrictId: selectedDest.value,\r\n PaymentType: paymentType,\r\n TransportType: transportType,\r\n PackageCategory: packageCategory,\r\n PackageContentCode: packageContent,\r\n BookingD: _bookingD,\r\n EstItemPriceAmt: nilaiBarang,\r\n OriginDestCode: originDestCode,\r\n };\r\n dispatch(bookingActions.requestCalculateBooking(bookingHObj));\r\n setEnableSubmitted(true);\r\n }\r\n if (arrDetailBarangMbl.length == 0 && custBookHDetailObj == 0) {\r\n setArrTempBarang([]);\r\n }\r\n }, [\r\n arrDetailBarangMbl,\r\n packageCategory,\r\n packageContent,\r\n transportType,\r\n selectedDest,\r\n paymentType,\r\n originDestId\r\n ]);\r\n\r\n useEffect(() => {\r\n if (districtObj) {\r\n setOptions(\r\n districtObj.map((dist, i) => ({\r\n value: dist.DistrictId,\r\n label: dist.DistrictDescr,\r\n }))\r\n );\r\n if (pickupAddrSelectedObj.DistrictId !== undefined && pickupAddrSelectedObj.DistrictId !== null && pickupAddrSelectedObj.DistrictId > 0) {\r\n let pickupDistrictObj = districtObj.filter(\r\n (rw) => rw.DistrictId === pickupAddrSelectedObj.DistrictId\r\n );\r\n if (pickupDistrictObj !== null) {\r\n setSelectedPckDist({\r\n value: pickupDistrictObj[0][\"DistrictId\"],\r\n label: pickupDistrictObj[0][\"DistrictDescr\"],\r\n });\r\n\r\n if (pickupDistrictObj[0][\"OriginDestId\"] > 0) {\r\n setOriginDestId(pickupDistrictObj[0][\"OriginDestId\"]);\r\n if (originObj != null && originObj.Result != null) {\r\n let selectedOriginObj = originObj?.Result.filter(\r\n (rw) => rw.OriginId === pickupDistrictObj[0][\"OriginDestId\"]\r\n );\r\n setOriginDestCode(selectedOriginObj[0][\"OriginCode\"]);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }, [districtObj, originObj]);\r\n\r\n useEffect(() => {\r\n if (custBookHDetailObj && packageContentsObj) {\r\n let selectedPackageContent = packageContentsObj.filter(\r\n (rw) => rw.PackageContentCode === custBookHDetailObj.PackageContentCode\r\n );\r\n\r\n setPackageContentNotes(custBookHDetailObj.PackageContentNotes);\r\n if (selectedPackageContent.length > 0) {\r\n setPackageContent(selectedPackageContent[0].PackageContentCode);\r\n setIsInsurance(selectedPackageContent[0].IsInsurance);\r\n }\r\n }\r\n }, [packageContentsObj, custBookHDetailObj])\r\n\r\n useEffect(() => {\r\n if (custBookHDetailObj) {\r\n setSelectedDest({ value: custBookHDetailObj.DistrictId, label: custBookHDetailObj.DistrictDescr });\r\n setPackageCategory(custBookHDetailObj.PackageCategory);\r\n setTransportType(custBookHDetailObj.TransportType);\r\n setPaymentType(custBookHDetailObj.PaymentType);\r\n setOriginDestCode(custBookHDetailObj.OriginDestCode);\r\n setRecipientName(custBookHDetailObj.RecipientName);\r\n let PhoneNo = custBookHDetailObj.RecipientMblPhoneNo;\r\n if (PhoneNo && PhoneNo.length > 1) {\r\n var phone = PhoneNo.substring(1, 20);\r\n var area = PhoneNo.substring(0, 1);\r\n if (area === \"0\") {\r\n PhoneNo = \"+62\" + phone;\r\n }\r\n setRecipientMobilePhnNo(PhoneNo);\r\n }\r\n setRecipientAddress(custBookHDetailObj.RecipientAddr);\r\n setReferenceNo(custBookHDetailObj.CustRefNo);\r\n setBookingNotes(custBookHDetailObj.BookNotes);\r\n setTotalKoli(custBookHDetailObj.ActualTotalItem);\r\n setArrTempBarang(custBookHDetailObj.CustBookDs.sort((a, b) => a.SeqNo - b.SeqNo));\r\n setArrDetailBarangMbl(custBookHDetailObj.CustBookDs.map(\r\n (detail, i) => {\r\n if (detail.CustBookDId == detailBarangMbl.CustBookDId) {\r\n detail.ItemWeight = detailBarangMbl.ItemWeight;\r\n detail.DimP = detailBarangMbl.DimP;\r\n detail.DimL = detailBarangMbl.DimL;\r\n detail.DimT = detailBarangMbl.DimT;\r\n }\r\n return detail;\r\n }\r\n ));\r\n\r\n setIsInsurance(custBookHDetailObj.IsInsurance)\r\n setNilaiBarang(custBookHDetailObj.EstItemPriceAmt)\r\n setPackageContentNotes(custBookHDetailObj.PackageContentNotes);\r\n setShowPenerimaForm(true);\r\n }\r\n }, [custBookHDetailObj]);\r\n\r\n useEffect(() => {\r\n getTransportType();\r\n }, [selectedDest]);\r\n\r\n useEffect(() => {\r\n if (\r\n listPenerimaObj != null &&\r\n listPenerimaObj.Result &&\r\n listPenerimaObj.Result.length > 0\r\n ) {\r\n setPenerimaOptions(\r\n listPenerimaObj.Result.map((penerima, i) => ({\r\n value: penerima.CustId,\r\n label: penerima.CustName,\r\n }))\r\n );\r\n }\r\n }, [listPenerimaObj]);\r\n\r\n useEffect(() => {\r\n if (recipientName != \"\" && recipientName.length >= 3) {\r\n dispatch(customerActions.requestGetPenerimaByHint(recipientName));\r\n }\r\n }, [recipientName]);\r\n\r\n useEffect(() => {\r\n if (penerimaObj != null) {\r\n setHideReceiverCredit(!penerimaObj.IsAllowReceiverCredit);\r\n }\r\n }, [penerimaObj]);\r\n\r\n useEffect(() => {\r\n if (cancelKoliBookingObj && cancelKoliBookingObj.CustBookDs && cancelKoliBookingObj.CustBookDs.length > 0) {\r\n setArrTempBarang(cancelKoliBookingObj.CustBookDs.sort((a, b) => a.SeqNo - b.SeqNo));\r\n }\r\n }, [cancelKoliBookingObj]);\r\n\r\n useEffect(() => {\r\n if (arrTempBarang && arrTempBarang.length > 0) {\r\n setTotalNonCanKoli(arrTempBarang.filter(x => x.CustBookDStat != \"CAN\").length);\r\n }\r\n }, [arrTempBarang]);\r\n\r\n useEffect(() => {\r\n if (alert.Type != \"\") scrollToTop()\r\n }, [alert])\r\n\r\n function handleSubmit(e) {\r\n e.preventDefault();\r\n setSubmitted(true);\r\n\r\n if (recipientName == \"\") {\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: \"Harap input setidaknya 1 detail penerima\",\r\n });\r\n } else if (totalNonCanKoli == 0) {\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: \"Harap input setidaknya 1 detail barang\",\r\n });\r\n }\r\n\r\n if (\r\n totalKoli == totalNonCanKoli &&\r\n enableSubmitted &&\r\n sellerName &&\r\n sellerMobilePhnNo &&\r\n recipientName &&\r\n paymentType &&\r\n packageCategory &&\r\n packageContent &&\r\n dropType &&\r\n transportType &&\r\n totalNonCanKoli > 0 &&\r\n originDestId > 0 &&\r\n selectedDest &&\r\n selectedDest.value !== 0\r\n ) {\r\n if (\r\n ((packageContent ===\r\n masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN ||\r\n packageContent ===\r\n masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN) &&\r\n packageContentNotes) ||\r\n (packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN &&\r\n packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN)\r\n ) {\r\n if (\r\n ((dropType === masterSettingConstants.DROP_TYPE_PICKUP &&\r\n pickupTime &&\r\n pickupPhnNo &&\r\n pickupContactPerson &&\r\n selectedPckDist &&\r\n selectedPckDist.value != 0 &&\r\n originDestId > 0 &&\r\n pickupAddr) ||\r\n dropType === masterSettingConstants.DROP_TYPE_DROP) &&\r\n ((newPickupAddr === true && pickupAddrType) || !newPickupAddr)\r\n ) {\r\n if (isInsurance == \"0\" || (isInsurance == \"1\" && nilaiBarang > 0)) {\r\n let selectedPackageContent = packageContentsObj.filter(\r\n (rw) => rw.PackageContentCode === packageContent\r\n );\r\n setIsInsurance(selectedPackageContent[0].IsInsurance);\r\n }\r\n\r\n if (!errSubmitObj && !errCalcObj && arrDetailBarangMbl.length > 0 && totalKoli == arrDetailBarangMbl.length) {\r\n setAlert({ Type: \"\", StatusMessage: \"\" });\r\n }\r\n\r\n const bookingHObj = {\r\n CustId: acc.CustId,\r\n SellerName: sellerName,\r\n AliasName: sellerAliasName,\r\n SellerMblPhoneNo: formatPhoneNumber(sellerMobilePhnNo),\r\n Username: acc.Username,\r\n CustRefNo: referenceNo,\r\n // RecipientId: recipientId != 0 ? recipientId : null,\r\n RecipientAddr: recipientAddress,\r\n RecipientMblPhoneNo: formatPhoneNumber(recipientMobilePhnNo),\r\n RecipientName: recipientName,\r\n PaymentType: paymentType,\r\n PackageCategory: packageCategory,\r\n PackageContentCode: packageContent,\r\n EstTotalWeight: estItemWeight,\r\n PackageContentNotes: packageContentNotes,\r\n PickupNotes: pickupNotes,\r\n PickupTime: pickupTime,\r\n PickupPhoneNo: pickupPhnNo,\r\n PickupContactPerson: pickupContactPerson,\r\n PickupDistrictId: selectedPckDist.value,\r\n PickupAddr: pickupAddress,\r\n DropType: dropType,\r\n TotalItem: totalNonCanKoli,\r\n BookNotes: bookingNotes,\r\n PickupAddrType: pickupAddrType,\r\n EstItemPriceAmt: nilaiBarang,\r\n DestDistrictId: selectedDest.value,\r\n DestDistrictName: selectedDest.label,\r\n TransportType: transportType,\r\n BookDetails: arrDetailBarangMbl,\r\n OriginDestCode: originDestCode,\r\n CustBookHId: _trxNo !== 0 ? _trxNo : 0\r\n };\r\n\r\n console.log(\"requestSubmitBooking**\", bookingHObj);\r\n const submitBooking = async () => {\r\n dispatch(bookingActions.requestSubmitBooking(bookingHObj));\r\n };\r\n submitBooking();\r\n }\r\n }\r\n }\r\n }\r\n\r\n function clearDataPenerima() {\r\n setReferenceNo(\"\");\r\n setRecipientId(0);\r\n setRecipientName(\"\");\r\n setRecipientMobilePhnNo(\"\");\r\n setRecipientAddress(\"\");\r\n setDropType(\"PICKUP\");\r\n setPaymentType(\"\");\r\n setTransportType(\"\");\r\n setEstItemWeight(0);\r\n setPackageContent(\"\");\r\n setPackageContentNotes(\"\");\r\n setBookingNotes(\"\");\r\n setPackageCategory(\"\");\r\n setArrTempBarang([]);\r\n setArrDetailBarangMbl([]);\r\n setIsInsurance(\"0\");\r\n setNilaiBarang(0);\r\n setSelectedDest({ value: 0, label: \"Pilih Tujuan\" });\r\n const clearData = async () => {\r\n dispatch(packageContentActions.clearPackageContent());\r\n dispatch(bookingActions.clearCalculateBooking());\r\n dispatch(bookingActions.clearSubmitBooking());\r\n dispatch(originActions.getOrigin());\r\n dispatch(bookingActions.clearCustBookHDetail());\r\n dispatch(bookingActions.clearCancelKoliBooking());\r\n };\r\n clearData();\r\n setSubmitted(false);\r\n setEnableSubmitted(false);\r\n setTotalKoli(1);\r\n }\r\n\r\n function onChange(event, isNumeric = true) {\r\n setDetailBarangMbl((prevState) => ({\r\n ...prevState,\r\n }));\r\n\r\n if (isNumeric) {\r\n let num = 0;\r\n if (event.target.value != \"\") {\r\n const str = event.target.value.replace(/,/g, \"\");\r\n num = parseFloat(str);\r\n }\r\n\r\n const { name, value } = event.target;\r\n setDetailBarangMbl((prevState) => ({\r\n ...prevState,\r\n [name]: num,\r\n }));\r\n } else {\r\n const { name, value } = event.target;\r\n setDetailBarangMbl((prevState) => ({\r\n ...prevState,\r\n [name]: value,\r\n }));\r\n }\r\n }\r\n\r\n function handleNilaiBarang(event) {\r\n if (event.target.value != \"\") {\r\n const str = event.target.value.replace(/,/g, \"\");\r\n setNilaiBarang(parseFloat(str));\r\n }\r\n }\r\n\r\n function handleIsInsurance() {\r\n if (packageContentsObj) {\r\n let selectedPackageContent = packageContentsObj.filter(\r\n (rw) => rw.PackageContentCode === packageContent\r\n );\r\n if (selectedPackageContent.length > 0) {\r\n setIsInsurance(selectedPackageContent[0].IsInsurance);\r\n }\r\n }\r\n }\r\n\r\n function getCustBookHDetail() {\r\n if (acc && acc.CustId && _trxNo !== 0) {\r\n const custBookHDetailObj = {\r\n CustId: acc.CustId,\r\n CustBookHId: _trxNo\r\n };\r\n dispatch(bookingActions.getCustBookHDetail(custBookHDetailObj));\r\n }\r\n }\r\n\r\n function getTransportType() {\r\n if (selectedDest && selectedDest.value != 0) {\r\n const transportTypeObj = {\r\n OriginDestId: originDestId,\r\n DestDistrictId: selectedDest.value,\r\n };\r\n\r\n dispatch(transportTypeActions.getTransportType(transportTypeObj));\r\n } else {\r\n dispatch(transportTypeActions.clearTransportType());\r\n }\r\n }\r\n\r\n function onSubmitDetailBarang() {\r\n setEnableSubmitted(false);\r\n setSimpanDataBarang(true);\r\n setIsError(false);\r\n\r\n setArrDetailBarangMbl(arrDetailBarangMbl.map(\r\n (detail, i) => {\r\n if (detail.CustBookDId == detailBarangMbl.CustBookDId) {\r\n detail.ItemWeight = detailBarangMbl.ItemWeight;\r\n detail.DimP = detailBarangMbl.DimP;\r\n detail.DimL = detailBarangMbl.DimL;\r\n detail.DimT = detailBarangMbl.DimT;\r\n }\r\n return detail;\r\n }\r\n ));\r\n\r\n setSimpanDataBarang(false);\r\n }\r\n\r\n function onAddDetailBarang() {\r\n if (\r\n recipientName &&\r\n transportType &&\r\n paymentType &&\r\n packageCategory &&\r\n packageContent &&\r\n selectedDest &&\r\n selectedDest.value != 0 &&\r\n (isInsurance == \"0\" || (isInsurance == \"1\" && nilaiBarang > 0))\r\n ) {\r\n setIsError(false);\r\n } else {\r\n setIsError(true);\r\n setAlert({\r\n Type: \"Info\",\r\n StatusMessage: \"Harap lengkapi data pengirim terlebih dahulu\",\r\n });\r\n }\r\n }\r\n\r\n function generateKoli() {\r\n onAddDetailBarang();\r\n\r\n if (isError) return;\r\n\r\n let newArrTempBarang = [...arrTempBarang];\r\n let filterArrDetail = [];\r\n\r\n arrTempBarang.map(\r\n (detail, i) => {\r\n let newDetailBarang = {\r\n CustBookDId: detail.CustBookDId,\r\n ItemCodeNo: \"\",\r\n ItemWeight: detail.ItemWeight,\r\n DimP: detail.DimP,\r\n DimL: detail.DimL,\r\n DimT: detail.DimT,\r\n CustBookDStat: detail.CustBookDStat,\r\n }\r\n filterArrDetail.push(newDetailBarang);\r\n }\r\n )\r\n let arrTempBarangLength = arrTempBarang.length;\r\n\r\n if (totalKoli <= totalNonCanKoli) return;\r\n else {\r\n const newTempArrDetailBarangMbl = [...filterArrDetail];\r\n\r\n const countToAdd = totalKoli - totalNonCanKoli;\r\n for (let i = 0; i < countToAdd; i++) {\r\n let newObj = {\r\n CustBookDId: arrTempBarangLength + (i + 1),\r\n ItemCodeNo: \"\",\r\n ItemWeight: 0,\r\n DimP: 0,\r\n DimL: 0,\r\n DimT: 0,\r\n CustBookDStat: \"NEW\"\r\n }\r\n newTempArrDetailBarangMbl.push(newObj);\r\n\r\n newObj.SeqNo = arrTempBarangLength + (i + 1);\r\n newObj.VolWeight = 0;\r\n newObj.FinalWeight = 0;\r\n newObj.TotalCalcSrc = \"Item\";\r\n newArrTempBarang.push(newObj);\r\n }\r\n setArrDetailBarangMbl(newTempArrDetailBarangMbl);\r\n setArrTempBarang(newArrTempBarang.sort((a, b) => a.SeqNo - b.SeqNo));\r\n }\r\n }\r\n\r\n const handleChangeDest = (selectedOption) => {\r\n setSelectedDest(selectedOption);\r\n handleTagihTujuan(selectedOption.value);\r\n };\r\n\r\n function handleTagihTujuan(districtId) {\r\n let _districtObj = districtObj.find((x) => x.DistrictId == districtId);\r\n let custCOD = custObj.IsAllowCOD;\r\n let tujuanCOD = false;\r\n let isAllowRcvPayment = \"1\";\r\n\r\n if (_districtObj != null) {\r\n isAllowRcvPayment = _districtObj.IsAllowRcvPayment;\r\n tujuanCOD = isAllowRcvPayment == \"1\" ? true : false;\r\n if (custCOD && tujuanCOD) setHideCOD(false);\r\n else setHideCOD(true);\r\n } else {\r\n setHideCOD(!custCOD);\r\n }\r\n }\r\n\r\n function handleCancel(ev) {\r\n if (ev.CustBookDStat == \"ACT\") {\r\n let reqObj = {\r\n Id: ev.CustBookDId,\r\n username: acc.Username\r\n }\r\n dispatch(bookingActions.cancelKoliBooking(reqObj));\r\n } else if (ev.CustBookDStat == \"NEW\") {\r\n const newArrTempBarang = [];\r\n let idx = 1;\r\n arrTempBarang.map((atb) => {\r\n if (ev.CustBookDId != atb.CustBookDId) {\r\n let newTempBarang = {\r\n ...atb,\r\n CustBookDId: idx,\r\n SeqNo: idx\r\n }\r\n newArrTempBarang.push(newTempBarang);\r\n idx++;\r\n }\r\n });\r\n setArrTempBarang(newArrTempBarang);\r\n setArrDetailBarangMbl(newArrTempBarang);\r\n }\r\n }\r\n\r\n const style = {\r\n control: (base, state) => ({\r\n ...base,\r\n border: \"1px solid rgba(209, 213, 219, var(--tw-border-opacity))\",\r\n boxShadow: \"none\",\r\n \"&:hover\": {\r\n border: \"1px solid rgba(209, 213, 219, var(--tw-border-opacity))\",\r\n },\r\n }),\r\n };\r\n\r\n const styleMobile = {\r\n control: (base, state) => ({\r\n ...base,\r\n border: \"none\",\r\n boxShadow: \"none\",\r\n \"&:hover\": {\r\n border: \"none\",\r\n },\r\n }),\r\n };\r\n\r\n return (\r\n <>\r\n \r\n
\r\n
\r\n Buat Booking\r\n \r\n \r\n\r\n
\r\n
\r\n {showPenerimaForm && showKoliForm && (\r\n {\r\n history.push(`/booking-details?custId=${acc.CustId}&trxDtFrom=${requestObj.trxDtFrom}&trxDtTo=${requestObj.trxDtTo}&addrType=${pickupAddrSelectedObj.AddrType}`);\r\n }}\r\n >\r\n Batal\r\n \r\n )}\r\n {showPenerimaForm && showKoliForm && (\r\n \r\n Submit\r\n \r\n )}\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n
\r\n Buat Booking\r\n \r\n \r\n
\r\n\r\n
\r\n
\r\n Jalur\r\n
\r\n
\r\n setTransportType(e.target.value)}\r\n >\r\n \r\n Pilih jalur\r\n \r\n {transportTypeObj &&\r\n transportTypeObj.TransportTypes.map(\r\n (transportTypeObj) => (\r\n \r\n {transportTypeObj.TransportTypeName}\r\n \r\n )\r\n )}\r\n \r\n \r\n Harap pilih metode pengiriman\r\n
\r\n )}\r\n \r\n \r\n
\r\n Pembayaran\r\n
\r\n
\r\n setPaymentType(e.target.value)}\r\n >\r\n \r\n Pilih metode pembayaran\r\n \r\n \r\n Lunas\r\n \r\n \r\n Kredit\r\n \r\n \r\n Tagih Tujuan\r\n \r\n \r\n Kredit Penerima\r\n \r\n \r\n \r\n Harap pilih metode pembayaran\r\n
\r\n )}\r\n \r\n \r\n
\r\n Jenis Barang\r\n
\r\n
\r\n setPackageCategory(e.target.value)}\r\n >\r\n \r\n Pilih jenis barang\r\n \r\n \r\n ELEKTRONIK\r\n \r\n \r\n NON ELEKTRONIK\r\n \r\n \r\n \r\n Harap pilih jenis barang\r\n
\r\n )}\r\n \r\n \r\n
\r\n Tipe Barang\r\n
\r\n
\r\n setPackageContent(e.target.value)}\r\n >\r\n \r\n Pilih tipe barang\r\n \r\n {packageContentsObj &&\r\n packageContentsObj.map((packageContentsObj) => (\r\n \r\n {packageContentsObj.PackageContentName}\r\n \r\n ))}\r\n \r\n \r\n Harap pilih tipe barang\r\n
\r\n )}\r\n \r\n \r\n
\r\n Total Koli\r\n
\r\n
\r\n setTotalKoli(e.target.value)}\r\n value={totalKoli}\r\n />\r\n \r\n Total Koli tidak sama dengan jumlah detail barang\r\n
\r\n )}\r\n \r\n \r\n
\r\n Catatan Order\r\n
\r\n
\r\n setBookingNotes(e.target.value)}\r\n />\r\n
\r\n
\r\n
\r\n Nilai Barang\r\n
\r\n
\r\n handleNilaiBarang(e)}\r\n value={nilaiBarang}\r\n placeholder=\"Isi Nilai barang\"\r\n />\r\n \r\n Harap isi nilai barang\r\n
\r\n )}\r\n \r\n )}\r\n {(packageContent ===\r\n masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN ||\r\n packageContent ===\r\n masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN) && (\r\n \r\n
\r\n Catatan Paket\r\n
\r\n
\r\n setPackageContentNotes(e.target.value)}\r\n />\r\n \r\n Harap isi catatan paket\r\n
\r\n )}\r\n \r\n )}\r\n {!showKoliForm && (\r\n <>\r\n \r\n\r\n \r\n
\r\n Estimasi Berat Barang (kg)\r\n
\r\n
\r\n onChange(e, true)}\r\n value={detailBarangMbl.ItemWeight}\r\n placeholder=\"Isi estimasi berat barang\"\r\n />\r\n
\r\n
\r\n
\r\n Panjang (cm)\r\n
\r\n
\r\n onChange(e, true)}\r\n value={detailBarangMbl.DimP}\r\n placeholder=\"Isi dimensi panjang barang\"\r\n />\r\n
\r\n
\r\n
\r\n Lebar (cm)\r\n
\r\n
\r\n onChange(e, true)}\r\n value={detailBarangMbl.DimL}\r\n placeholder=\"Isi dimensi lebar barang\"\r\n />\r\n
\r\n
\r\n
\r\n Tinggi (cm)\r\n
\r\n
\r\n onChange(e, true)}\r\n value={detailBarangMbl.DimT}\r\n placeholder=\"Isi dimensi tinggi barang\"\r\n />\r\n
\r\n
\r\n
\r\n {\r\n setShowKoliForm(true);\r\n setShowPenerimaForm(true);\r\n }}\r\n >\r\n Batal\r\n \r\n
\r\n
\r\n {\r\n onSubmitDetailBarang();\r\n setShowKoliForm(true);\r\n setShowPenerimaForm(true);\r\n }}\r\n >\r\n Simpan Data Koli\r\n \r\n
\r\n
\r\n {\r\n generateKoli();\r\n }}\r\n >\r\n Generate Koli\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n Total Barang\r\n \r\n \r\n {respCalcObj && arrDetailBarangMbl.length > 0\r\n ? new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 2,\r\n }).format(respCalcObj.TotalItem)\r\n : new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 2,\r\n }).format(0)}\r\n \r\n
\r\n
\r\n \r\n Estimasi Berat Final (Kg)\r\n \r\n \r\n {respCalcObj && arrDetailBarangMbl.length > 0\r\n ? new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 2,\r\n }).format(respCalcObj.TotalFinalWeight)\r\n : new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 2,\r\n }).format(0)}\r\n \r\n
\r\n
\r\n {showPenerimaForm && showKoliForm && (\r\n {\r\n history.push(`/booking-details?custId=${acc.CustId}&trxDtFrom=${requestObj.trxDtFrom}&trxDtTo=${requestObj.trxDtTo}&addrType=${pickupAddrSelectedObj.AddrType}`);\r\n }}\r\n >\r\n Batal\r\n \r\n )}\r\n {showPenerimaForm && showKoliForm && (\r\n \r\n Submit\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n );\r\n};\r\n\r\n\r\nexport default BookingDetailEdit;","import React, { useState, useEffect, useRef } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { masterSettingConstants } from \"../../_constants\";\r\nimport {\r\n districtActions,\r\n bookingActions,\r\n packageContentActions,\r\n originActions,\r\n transportTypeActions,\r\n customerActions,\r\n} from \"../../_actions\";\r\nimport {\r\n TableDetailBarangEdit,\r\n AlertMessage\r\n} from \"../../components\";\r\nimport Input from \"react-phone-number-input/input\";\r\nimport { NumericFormat } from \"react-number-format\";\r\nimport { formatPhoneNumber } from \"react-phone-number-input\";\r\nimport \"../../custom.css\";\r\nimport \"react-phone-number-input/style.css\";\r\nimport Select, { createFilter } from \"react-select\";\r\nimport { useHistory, useLocation } from \"react-router-dom\";\r\nimport moment from \"moment\";\r\n\r\nconst BookingDetailEditV2 = ({ }) => {\r\n const dispatch = useDispatch();\r\n const acc = useSelector((state) => state.authentication.accInfo);\r\n const packageContentsObj = useSelector(\r\n (state) => state.packagecontent.packageContentObj\r\n );\r\n const districtObj = useSelector((state) => state.district.districtObj);\r\n const respCalcObj = useSelector(\r\n (state) => state.calculateBookingPrice.calcBookingObj\r\n );\r\n const respSubmitObj = useSelector(\r\n (state) => state.submitBooking.submitBookingObj\r\n );\r\n const errCalcObj = useSelector(\r\n (state) => state.calculateBookingPrice.errCalcBookingObj\r\n );\r\n const errSubmitObj = useSelector(\r\n (state) => state.submitBooking.errSubmitBookingObj\r\n );\r\n const originObj = useSelector((state) => state.origin.origin);\r\n const transportTypeObj = useSelector(\r\n (state) => state.transportType.transportTypeObj\r\n );\r\n const errTransportTypeObj = useSelector(\r\n (state) => state.transportType.errTransportTypeObj\r\n );\r\n const custObj = useSelector((state) => state.custById.custObj);\r\n const listPenerimaObj = useSelector(\r\n (state) => state.penerimaByHint.penerimaByHintObj\r\n );\r\n const penerimaObj = useSelector((state) => state.penerimaById.penerimaObj);\r\n const custBookHDetailObj = useSelector(\r\n (state) => state.getCustBookHDetail.custBookHDetailObj\r\n );\r\n const cancelKoliBookingObj = useSelector(\r\n (state) => state.cancelKoliBooking.cancelKoliBookingObj\r\n );\r\n\r\n const history = useHistory();\r\n const [isError, setIsError] = useState(false);\r\n const [submitted, setSubmitted] = useState(false);\r\n const [simpanDataBarang, setSimpanDataBarang] = useState(false);\r\n const [enableSubmitted, setEnableSubmitted] = useState(false);\r\n const [newPickupAddr, setNewPickupAddr] = useState(false);\r\n const [packageCategory, setPackageCategory] = useState(\"\");\r\n const [sellerName, setSellerName] = useState(acc && acc.CustName);\r\n const [sellerAliasName, setSellerAliasName] = useState(acc && acc.CustName);\r\n const [sellerMobilePhnNo, setSellerMobilePhnNo] = useState(\r\n acc && acc.MobilePhoneNo\r\n );\r\n const [originDestId, setOriginDestId] = useState(0);\r\n const [originDestCode, setOriginDestCode] = useState(\"\");\r\n const [referenceNo, setReferenceNo] = useState(\"\");\r\n const [recipientId, setRecipientId] = useState(0);\r\n const [recipientName, setRecipientName] = useState(\"\");\r\n const [recipientMobilePhnNo, setRecipientMobilePhnNo] = useState(\"\");\r\n const [recipientAddress, setRecipientAddress] = useState(\"\");\r\n const [dropType, setDropType] = useState(\"PICKUP\");\r\n const [paymentType, setPaymentType] = useState(\"\");\r\n const [transportType, setTransportType] = useState(\"\");\r\n const [estItemWeight, setEstItemWeight] = useState(0);\r\n const [packageContent, setPackageContent] = useState(\"\");\r\n const [packageContentNotes, setPackageContentNotes] = useState(\"\");\r\n const [pickupContactPerson, setPickupContactPerson] = useState(\"\");\r\n const [pickupAddress, setPickupAddress] = useState(\"\");\r\n const [pickupNotes, setPickupNotes] = useState(\"\");\r\n const [pickupPhnNo, setPickupPhnNo] = useState(\"\");\r\n const [pickupTime, setPickupTime] = useState(\r\n moment(new Date()).format(\"YYYY-MM-DD\")\r\n );\r\n const [minPickupTime, setMinPickupTime] = useState(\r\n moment(new Date()).format(\"YYYY-MM-DD\")\r\n );\r\n const [pickupAddrType, setPickupAddrType] = useState(\"\");\r\n const [bookingNotes, setBookingNotes] = useState(\"\");\r\n const [isInsurance, setIsInsurance] = useState(\"0\");\r\n const [nilaiBarang, setNilaiBarang] = useState(0);\r\n const [totalKoli, setTotalKoli] = useState(1);\r\n const [totalNonCanKoli, setTotalNonCanKoli] = useState(0);\r\n const [arrTempBarang, setArrTempBarang] = useState([]);\r\n const [arrDetailBarangMbl, setArrDetailBarangMbl] = useState([]);\r\n const [detailBarangMbl, setDetailBarangMbl] = useState({\r\n CustBookDId: 0,\r\n ItemCodeNo: \"\",\r\n ItemWeight: 0,\r\n DimP: 0,\r\n DimL: 0,\r\n DimT: 0,\r\n IsPacking: false,\r\n PackingKayu: false,\r\n BubbleWrap: false,\r\n Wrapping: false\r\n });\r\n const [alert, setAlert] = useState({\r\n Type: \"\",\r\n StatusMessage: \"\",\r\n });\r\n const [showPenerimaForm, setShowPenerimaForm] = useState(false);\r\n const [showKoliForm, setShowKoliForm] = useState(false);\r\n const [errors, setErrors] = useState({});\r\n\r\n function useQuery() {\r\n const { search } = useLocation();\r\n return React.useMemo(() => new URLSearchParams(search), [search]);\r\n }\r\n const query = useQuery();\r\n const _trxNo = query.get(\"trxNo\");\r\n const noResi = query.get(\"noResi\");\r\n function dateParser(value) {\r\n const date = new Date(value);\r\n const dateParsed =\r\n date.getFullYear() +\r\n \"-\" +\r\n date.toLocaleString(\"en-us\", { month: \"2-digit\" }) +\r\n \"-\" +\r\n date.toLocaleString(\"en-us\", { day: \"2-digit\" });\r\n return dateParsed;\r\n }\r\n const maxDate = new Date();\r\n const minDate = new Date();\r\n const finalMinDate = new Date(minDate.getFullYear(), minDate.getMonth(), 1);\r\n const [requestObj, setRequestObj] = useState({\r\n trxDtFrom: dateParser(finalMinDate),\r\n trxDtTo: dateParser(maxDate),\r\n });\r\n const [options, setOptions] = useState([]);\r\n const [selectedPckDist, setSelectedPckDist] = useState();\r\n const [selectedDest, setSelectedDest] = useState();\r\n const [penerimaOptions, setPenerimaOptions] = useState([]);\r\n const [hideCOD, setHideCOD] = useState(true);\r\n const [hideCredit, setHideCredit] = useState(true);\r\n const [hideReceiverCredit, setHideReceiverCredit] = useState(true);\r\n const [isMember, setIsMember] = useState(false);\r\n const [isEditKoli, setIsEditKoli] = useState(false);\r\n\r\n const scrollToTop = () => {\r\n window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });\r\n };\r\n\r\n useEffect(() => {\r\n if (acc) {\r\n dispatch(customerActions.requestGetCustById(acc.CustId));\r\n\r\n var phone = sellerMobilePhnNo.substring(1, 20);\r\n var area = sellerMobilePhnNo.substring(0, 1);\r\n if (area === \"0\") {\r\n setSellerMobilePhnNo(\"+62\" + phone);\r\n }\r\n\r\n setPickupTime(moment(new Date()).format(\"YYYY-MM-DD\"));\r\n setMinPickupTime(moment(new Date()).format(\"YYYY-MM-DD\"));\r\n setSelectedPckDist({ value: 0, label: \"Pilih Kecamatan / Kabupaten\" });\r\n if (!districtObj) {\r\n dispatch(districtActions.getDistrict());\r\n }\r\n }\r\n\r\n if (custBookHDetailObj) {\r\n setPickupAddress(custBookHDetailObj.Pengirim.PickupAddr);\r\n setPickupContactPerson(custBookHDetailObj.Pengirim.PickupContactPerson);\r\n setPickupPhnNo(custBookHDetailObj.Pengirim.PickupPhoneNo);\r\n setPickupAddrType(custBookHDetailObj.Pengirim.PickupAddrType);\r\n }\r\n\r\n if (_trxNo !== 0) {\r\n getCustBookHDetail();\r\n setShowPenerimaForm(true);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (errCalcObj && errCalcObj.StatusCode != \"200\") {\r\n setIsError(true);\r\n setSubmitted(false);\r\n setAlert({ Type: \"Error\", StatusMessage: errCalcObj.StatusMessage });\r\n setArrDetailBarangMbl((arrDetailBarangMbl) => [\r\n ...arrDetailBarangMbl.filter(\r\n (rw) => rw.CustBookDId != arrDetailBarangMbl.length\r\n ),\r\n ]);\r\n }\r\n }, [errCalcObj]);\r\n\r\n useEffect(() => {\r\n if (respCalcObj && respCalcObj.BookingD.length > 0) {\r\n setArrTempBarang(respCalcObj.BookingD.map(bookingD => {\r\n let splitString = bookingD.PackingType.split(';');\r\n let kayu = splitString.findIndex(x => x == \"KAYU\") != -1 ? true : false;\r\n let bubbleWrap = splitString.findIndex(x => x == \"BUBBLEWRAP\") != -1 ? true : false;\r\n let wrapping = splitString.findIndex(x => x == \"WRAPPING\") != -1 ? true : false;\r\n\r\n return {\r\n ...bookingD,\r\n IsPacking: kayu || bubbleWrap || wrapping,\r\n PackingKayu: kayu,\r\n BubbleWrap: bubbleWrap,\r\n Wrapping: wrapping\r\n }\r\n }).sort((a, b) => a.SeqNo - b.SeqNo));\r\n setDetailBarangMbl({\r\n CustBookDId: 0,\r\n ItemName: \"\",\r\n ItemWeight: 0,\r\n DimP: 0,\r\n DimL: 0,\r\n DimT: 0,\r\n IsPacking: false,\r\n PackingKayu: false,\r\n BubbleWrap: false,\r\n Wrapping: false\r\n });\r\n } else {\r\n setArrTempBarang([]);\r\n }\r\n }, [respCalcObj]);\r\n\r\n useEffect(() => {\r\n if (errSubmitObj && errSubmitObj.StatusCode != \"200\") {\r\n setIsError(true);\r\n setSubmitted(false);\r\n setAlert({ Type: \"Error\", StatusMessage: errSubmitObj.StatusMessage });\r\n }\r\n }, [errSubmitObj]);\r\n\r\n useEffect(() => {\r\n if (errTransportTypeObj && errTransportTypeObj.StatusCode != \"200\") {\r\n setIsError(true);\r\n setSubmitted(false);\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: errTransportTypeObj.StatusMessage,\r\n });\r\n }\r\n }, [errTransportTypeObj]);\r\n\r\n useEffect(() => {\r\n if (detailBarangMbl.CustBookDId != 0) {\r\n setShowKoliForm(false);\r\n } else {\r\n setShowKoliForm(true);\r\n }\r\n }, [detailBarangMbl]);\r\n\r\n useEffect(() => {\r\n if (custObj != null) {\r\n setHideCredit(!custObj.IsAllowCredit);\r\n }\r\n }, [custObj]);\r\n\r\n useEffect(() => {\r\n setPackageContent(\"\");\r\n setEnableSubmitted(false);\r\n setIsInsurance(\"0\");\r\n if (packageCategory !== null && packageCategory !== \"\") {\r\n\r\n dispatch(packageContentActions.getPackageContent(packageCategory));\r\n } else {\r\n dispatch(packageContentActions.clearPackageContent());\r\n }\r\n }, [packageCategory]);\r\n\r\n useEffect(() => {\r\n if (respSubmitObj && respSubmitObj.ResiNo !== \"\") {\r\n history.push(`/booking-details?noResi=${respSubmitObj.ResiNo}`)\r\n clearDataPenerima();\r\n }\r\n }, [respSubmitObj]);\r\n\r\n useEffect(() => {\r\n if (!errSubmitObj && !errCalcObj && arrDetailBarangMbl.length > 0) {\r\n setAlert({ Type: \"\", StatusMessage: \"\" });\r\n }\r\n if (\r\n isError == false &&\r\n selectedDest &&\r\n selectedDest.value != 0 &&\r\n paymentType &&\r\n transportType &&\r\n packageCategory &&\r\n packageContent &&\r\n arrDetailBarangMbl.length > 0 &&\r\n originDestId > 0 && (isInsurance == \"0\" || (isInsurance == \"1\" && nilaiBarang > 0))\r\n ) {\r\n let _bookingD = [];\r\n\r\n arrDetailBarangMbl.map(\r\n (detail, i) => {\r\n let _arrTempObj = arrTempBarang.find(x => x.CustBookDId == detail.CustBookDId);\r\n if (_arrTempObj != undefined && _arrTempObj != null) {\r\n var packingType = \"\";\r\n if (detail.PackingKayu) {\r\n packingType = \"KAYU\"\r\n }\r\n if (detail.BubbleWrap) {\r\n packingType = (packingType != \"\" ? packingType + \";\" : \"\") + \"BUBBLEWRAP\"\r\n }\r\n if (detail.Wrapping) {\r\n packingType = (packingType != \"\" ? packingType + \";\" : \"\") + \"WRAPPING\"\r\n }\r\n\r\n let newDetailBarang = {\r\n CustBookDId: detail.CustBookDId,\r\n ItemCodeNo: \"\",\r\n ItemWeight: detail.ItemWeight,\r\n DimP: detail.DimP,\r\n DimL: detail.DimL,\r\n DimT: detail.DimT,\r\n CustBookDStat: _arrTempObj.CustBookDStat,\r\n IsPacking: detail.IsPacking,\r\n PackingType: packingType\r\n }\r\n _bookingD.push(newDetailBarang);\r\n }\r\n }\r\n )\r\n\r\n const bookingHObj = {\r\n CustId: acc.CustId,\r\n DestDistrictId: selectedDest.value,\r\n PaymentType: paymentType,\r\n TransportType: transportType,\r\n PackageCategory: packageCategory,\r\n PackageContentCode: packageContent,\r\n BookingD: _bookingD,\r\n EstItemPriceAmt: nilaiBarang,\r\n OriginDestCode: originDestCode,\r\n };\r\n dispatch(bookingActions.requestCalculateBooking(bookingHObj));\r\n setEnableSubmitted(true);\r\n }\r\n if (arrDetailBarangMbl.length == 0 && custBookHDetailObj == 0) {\r\n setArrTempBarang([]);\r\n }\r\n }, [\r\n arrDetailBarangMbl,\r\n packageCategory,\r\n packageContent,\r\n transportType,\r\n selectedDest,\r\n paymentType,\r\n originDestId\r\n ]);\r\n\r\n useEffect(() => {\r\n if (districtObj) {\r\n setOptions(\r\n districtObj.map((dist, i) => ({\r\n value: dist.DistrictId,\r\n label: dist.DistrictDescr,\r\n }))\r\n );\r\n if (custBookHDetailObj && custBookHDetailObj.DistrictId !== undefined && custBookHDetailObj.DistrictId !== null && custBookHDetailObj.DistrictId > 0) {\r\n if (custBookHDetailObj.Pengirim !== null) {\r\n setSelectedPckDist({\r\n value: custBookHDetailObj.Pengirim.PickupDistrictId,\r\n label: custBookHDetailObj.Pengirim.PickupDistrictDescr,\r\n });\r\n\r\n setOriginDestId(custBookHDetailObj.Pengirim.OriginDestId);\r\n setOriginDestCode(custBookHDetailObj.OriginDestCode);\r\n }\r\n }\r\n }\r\n }, [custBookHDetailObj, districtObj, originObj]);\r\n\r\n useEffect(() => {\r\n if (custBookHDetailObj && packageContentsObj) {\r\n let selectedPackageContent = packageContentsObj.filter(\r\n (rw) => rw.PackageContentCode === custBookHDetailObj.PackageContentCode\r\n );\r\n\r\n setPackageContentNotes(custBookHDetailObj.PackageContentNotes);\r\n if (selectedPackageContent.length > 0) {\r\n setPackageContent(selectedPackageContent[0].PackageContentCode);\r\n setIsInsurance(selectedPackageContent[0].IsInsurance);\r\n }\r\n }\r\n }, [packageContentsObj, custBookHDetailObj])\r\n\r\n useEffect(() => {\r\n if (custBookHDetailObj) {\r\n setSelectedDest({ value: custBookHDetailObj.DistrictId, label: custBookHDetailObj.DistrictDescr });\r\n setPackageCategory(custBookHDetailObj.PackageCategory);\r\n setTransportType(custBookHDetailObj.TransportType);\r\n setPaymentType(custBookHDetailObj.PaymentType);\r\n setOriginDestCode(custBookHDetailObj.OriginDestCode);\r\n setRecipientName(custBookHDetailObj.RecipientName);\r\n let PhoneNo = custBookHDetailObj.RecipientMblPhoneNo;\r\n if (PhoneNo && PhoneNo.length > 1) {\r\n var phone = PhoneNo.substring(1, 20);\r\n var area = PhoneNo.substring(0, 1);\r\n if (area === \"0\") {\r\n PhoneNo = \"+62\" + phone;\r\n }\r\n setRecipientMobilePhnNo(PhoneNo);\r\n }\r\n setRecipientAddress(custBookHDetailObj.RecipientAddr);\r\n setReferenceNo(custBookHDetailObj.CustRefNo);\r\n setBookingNotes(custBookHDetailObj.BookNotes);\r\n setTotalKoli(custBookHDetailObj.ActualTotalItem);\r\n setArrTempBarang(custBookHDetailObj.CustBookDs.sort((a, b) => a.SeqNo - b.SeqNo));\r\n setArrDetailBarangMbl(custBookHDetailObj.CustBookDs.map(\r\n (detail, i) => {\r\n var packingType = [];\r\n\r\n packingType = detail.PackingType.split(';');\r\n detail.PackingKayu = packingType.findIndex(x => x == \"KAYU\") != -1;\r\n detail.BubbleWrap = packingType.findIndex(x => x == \"BUBBLEWRAP\") != -1;\r\n detail.Wrapping = packingType.findIndex(x => x == \"WRAPPING\") != -1;\r\n\r\n return detail;\r\n }\r\n ));\r\n\r\n setIsInsurance(custBookHDetailObj.IsInsurance)\r\n setNilaiBarang(custBookHDetailObj.EstItemPriceAmt)\r\n setPackageContentNotes(custBookHDetailObj.PackageContentNotes);\r\n setPickupAddress(custBookHDetailObj.Pengirim.PickupAddr);\r\n setPickupContactPerson(custBookHDetailObj.Pengirim.PickupContactPerson);\r\n setPickupPhnNo(custBookHDetailObj.Pengirim.PickupPhoneNo);\r\n setPickupAddrType(custBookHDetailObj.Pengirim.PickupAddrType);\r\n setShowPenerimaForm(true);\r\n }\r\n }, [custBookHDetailObj]);\r\n\r\n useEffect(() => {\r\n getTransportType();\r\n }, [selectedDest]);\r\n\r\n useEffect(() => {\r\n if (\r\n listPenerimaObj != null &&\r\n listPenerimaObj.Result &&\r\n listPenerimaObj.Result.length > 0\r\n ) {\r\n setPenerimaOptions(\r\n listPenerimaObj.Result.map((penerima, i) => ({\r\n value: penerima.CustId,\r\n label: penerima.CustName,\r\n }))\r\n );\r\n }\r\n }, [listPenerimaObj]);\r\n\r\n useEffect(() => {\r\n if (recipientName != \"\" && recipientName.length >= 3) {\r\n dispatch(customerActions.requestGetPenerimaByHint(recipientName));\r\n }\r\n }, [recipientName]);\r\n\r\n useEffect(() => {\r\n if (penerimaObj != null) {\r\n setHideReceiverCredit(!penerimaObj.IsAllowReceiverCredit);\r\n }\r\n }, [penerimaObj]);\r\n\r\n useEffect(() => {\r\n if (cancelKoliBookingObj && cancelKoliBookingObj.CustBookDs && cancelKoliBookingObj.CustBookDs.length > 0) {\r\n const newArrTempBarang = [];\r\n cancelKoliBookingObj.CustBookDs.map((atb) => {\r\n if (atb.CustBookDStat == \"CAN\") {\r\n let newTempBarang = {\r\n ...atb,\r\n CustBookDId: atb.CustBookDId,\r\n SeqNo: atb.SeqNo\r\n }\r\n newArrTempBarang.push(newTempBarang);\r\n }\r\n else {\r\n arrDetailBarangMbl.map(\r\n (x, i) => {\r\n if (x.CustBookDId == atb.CustBookDId) {\r\n let newTempBarang = {\r\n ...x,\r\n CustBookDId: x.CustBookDId,\r\n SeqNo: x.SeqNo\r\n }\r\n newArrTempBarang.push(newTempBarang);\r\n }\r\n }\r\n )\r\n }\r\n });\r\n\r\n let idx = newArrTempBarang.length;\r\n arrTempBarang.map((atb) => {\r\n if (atb.CustBookDStat == \"NEW\") {\r\n idx++;\r\n let newTempBarang = {\r\n ...atb,\r\n CustBookDId: atb.CustBookDId,\r\n SeqNo: idx\r\n }\r\n newArrTempBarang.push(newTempBarang);\r\n }\r\n });\r\n setArrTempBarang(newArrTempBarang.sort((a, b) => a.SeqNo - b.SeqNo));\r\n setArrDetailBarangMbl(newArrTempBarang.sort((a, b) => a.SeqNo - b.SeqNo));\r\n }\r\n }, [cancelKoliBookingObj]);\r\n\r\n useEffect(() => {\r\n if (arrTempBarang && arrTempBarang.length > 0) {\r\n setTotalNonCanKoli(arrTempBarang.filter(x => x.CustBookDStat != \"CAN\").length);\r\n }\r\n }, [arrTempBarang]);\r\n\r\n useEffect(() => {\r\n if (alert.Type != \"\") scrollToTop()\r\n }, [alert])\r\n\r\n function handlePackageContentChange(_packageContent) {\r\n setPackageContent(_packageContent);\r\n if (\r\n _packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN &&\r\n _packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN\r\n ) {\r\n setPackageContentNotes(\"\");\r\n }\r\n handleIsInsurance(_packageContent);\r\n }\r\n\r\n function handleError(input, errorMsg) {\r\n setErrors((prevState) => ({\r\n ...prevState,\r\n [input]: errorMsg,\r\n }));\r\n }\r\n\r\n function handleSubmit(e) {\r\n e.preventDefault();\r\n setSubmitted(true);\r\n let isValid = true;\r\n\r\n if (recipientName == \"\") {\r\n isValid = false;\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: \"Harap input setidaknya 1 detail penerima\",\r\n });\r\n } else if (totalNonCanKoli == 0) {\r\n isValid = false;\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: \"Harap input setidaknya 1 detail barang\",\r\n });\r\n }\r\n\r\n if (isInsurance == \"1\") {\r\n let isValidNilaiBarang = true;\r\n let isValidPackageContentNotes = true;\r\n\r\n if (nilaiBarang <= 0) {\r\n isValidNilaiBarang = false;\r\n handleError(\"nilaiBarang\", \"Harap isi nilai barang.\");\r\n }\r\n if (packageContentNotes == \"\") {\r\n isValidPackageContentNotes = false;\r\n }\r\n\r\n if (!isValidNilaiBarang || !isValidPackageContentNotes) {\r\n isValid = false;\r\n setAlert({\r\n Type: \"Error\",\r\n StatusMessage: \"Harap isi form dengan benar.\",\r\n });\r\n }\r\n }\r\n\r\n if (\r\n isValid &&\r\n totalKoli == totalNonCanKoli &&\r\n enableSubmitted &&\r\n sellerName &&\r\n sellerMobilePhnNo &&\r\n recipientName &&\r\n paymentType &&\r\n packageCategory &&\r\n packageContent &&\r\n dropType &&\r\n transportType &&\r\n totalNonCanKoli > 0 &&\r\n originDestId > 0 &&\r\n selectedDest &&\r\n selectedDest.value !== 0\r\n ) {\r\n if (\r\n ((packageContent ===\r\n masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN ||\r\n packageContent ===\r\n masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN) &&\r\n packageContentNotes) ||\r\n (packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_ELEKTRONIK_LAIN_LAIN &&\r\n packageContent !==\r\n masterSettingConstants.PACKAGE_CONTENT_NON_ELEKTRONIK_LAIN_LAIN)\r\n ) {\r\n if (\r\n ((dropType === masterSettingConstants.DROP_TYPE_PICKUP &&\r\n pickupTime &&\r\n pickupPhnNo &&\r\n pickupContactPerson &&\r\n selectedPckDist &&\r\n selectedPckDist.value != 0 &&\r\n originDestId > 0) ||\r\n dropType === masterSettingConstants.DROP_TYPE_DROP) &&\r\n ((newPickupAddr === true && pickupAddrType) || !newPickupAddr)\r\n ) {\r\n handleError(\"nilaiBarang\", null);\r\n\r\n if (!errSubmitObj && !errCalcObj && arrDetailBarangMbl.length > 0 && totalKoli == arrDetailBarangMbl.length) {\r\n setAlert({ Type: \"\", StatusMessage: \"\" });\r\n }\r\n\r\n let newArrDetailBarangMbl = arrDetailBarangMbl;\r\n newArrDetailBarangMbl.map((newDetail, i) => {\r\n var packingType = \"\";\r\n if (newDetail.PackingKayu) {\r\n packingType = \"KAYU\"\r\n }\r\n if (newDetail.BubbleWrap) {\r\n packingType = (packingType != \"\" ? packingType + \";\" : \"\") + \"BUBBLEWRAP\"\r\n }\r\n if (newDetail.Wrapping) {\r\n packingType = (packingType != \"\" ? packingType + \";\" : \"\") + \"WRAPPING\"\r\n }\r\n newDetail.PackingType = packingType\r\n\r\n return newDetail;\r\n })\r\n\r\n const bookingHObj = {\r\n CustId: acc.CustId,\r\n SellerName: sellerName,\r\n AliasName: sellerAliasName,\r\n SellerMblPhoneNo: formatPhoneNumber(sellerMobilePhnNo),\r\n Username: acc.Username,\r\n CustRefNo: referenceNo,\r\n RecipientAddr: recipientAddress,\r\n RecipientMblPhoneNo: formatPhoneNumber(recipientMobilePhnNo),\r\n RecipientName: recipientName,\r\n PaymentType: paymentType,\r\n PackageCategory: packageCategory,\r\n PackageContentCode: packageContent,\r\n EstTotalWeight: estItemWeight,\r\n PackageContentNotes: packageContentNotes,\r\n PickupNotes: pickupNotes,\r\n PickupTime: pickupTime,\r\n PickupPhoneNo: pickupPhnNo,\r\n PickupContactPerson: pickupContactPerson,\r\n PickupDistrictId: selectedPckDist.value,\r\n PickupAddr: pickupAddress,\r\n DropType: dropType,\r\n TotalItem: totalNonCanKoli,\r\n BookNotes: bookingNotes,\r\n PickupAddrType: pickupAddrType,\r\n EstItemPriceAmt: nilaiBarang,\r\n DestDistrictId: selectedDest.value,\r\n DestDistrictName: selectedDest.label,\r\n TransportType: transportType,\r\n BookDetails: newArrDetailBarangMbl,\r\n OriginDestCode: originDestCode,\r\n CustBookHId: _trxNo !== 0 ? _trxNo : 0\r\n };\r\n\r\n const submitBooking = async () => {\r\n dispatch(bookingActions.requestSubmitBooking(bookingHObj));\r\n };\r\n submitBooking();\r\n }\r\n }\r\n }\r\n }\r\n\r\n function clearDataPenerima() {\r\n setReferenceNo(\"\");\r\n setRecipientId(0);\r\n setRecipientName(\"\");\r\n setRecipientMobilePhnNo(\"\");\r\n setRecipientAddress(\"\");\r\n setDropType(\"PICKUP\");\r\n setPaymentType(\"\");\r\n setTransportType(\"\");\r\n setEstItemWeight(0);\r\n setPackageContent(\"\");\r\n setPackageContentNotes(\"\");\r\n setBookingNotes(\"\");\r\n setPackageCategory(\"\");\r\n setArrTempBarang([]);\r\n setArrDetailBarangMbl([]);\r\n setIsInsurance(\"0\");\r\n setNilaiBarang(0);\r\n setSelectedDest({ value: 0, label: \"Pilih Tujuan\" });\r\n const clearData = async () => {\r\n dispatch(packageContentActions.clearPackageContent());\r\n dispatch(bookingActions.clearCalculateBooking());\r\n dispatch(bookingActions.clearSubmitBooking());\r\n dispatch(originActions.getOrigin());\r\n dispatch(bookingActions.clearCustBookHDetail());\r\n dispatch(bookingActions.clearCancelKoliBooking());\r\n };\r\n clearData();\r\n setSubmitted(false);\r\n setEnableSubmitted(false);\r\n setTotalKoli(1);\r\n }\r\n\r\n function detailKoliOnChange(event, isNumeric = true) {\r\n const { name, value, type, checked } = event.target;\r\n let val = type === 'checkbox' ? checked : value;\r\n\r\n if (isNumeric) {\r\n let num = 0;\r\n if (val != \"\") {\r\n const str = val.replace(/,/g, \"\");\r\n num = parseFloat(str);\r\n }\r\n\r\n setDetailBarangMbl((prevState) => ({\r\n ...prevState,\r\n [name]: num,\r\n }));\r\n } else {\r\n setDetailBarangMbl((prevState) => ({\r\n ...prevState,\r\n [name]: val,\r\n }));\r\n }\r\n }\r\n\r\n function handleNilaiBarang(event) {\r\n let isValidNilaiBarang = true;\r\n\r\n if (event.target.value != \"\") {\r\n const str = event.target.value.replace(/,/g, \"\");\r\n setNilaiBarang(parseFloat(str));\r\n\r\n if (event.target.value == 0) {\r\n isValidNilaiBarang = false;\r\n }\r\n } else {\r\n isValidNilaiBarang = false;\r\n }\r\n\r\n if (isValidNilaiBarang) {\r\n handleError(\"nilaiBarang\", null);\r\n } else {\r\n setNilaiBarang(0);\r\n setIsError(true);\r\n setAlert({\r\n Type: \"Info\",\r\n StatusMessage: \"Harap lengkapi data penerima terlebih dahulu\",\r\n });\r\n handleError(\"nilaiBarang\", \"Harap isi nilai barang.\");\r\n }\r\n }\r\n\r\n function handleIsInsurance(_packageContent = \"\") {\r\n if (_packageContent == \"\") {\r\n _packageContent = packageContent;\r\n }\r\n\r\n if (packageContentsObj) {\r\n let selectedPackageContent = packageContentsObj.find(\r\n (rw) => rw.PackageContentCode === _packageContent\r\n );\r\n\r\n setIsInsurance(selectedPackageContent.IsInsurance);\r\n setNilaiBarang(0);\r\n setPackageContentNotes('');\r\n }\r\n }\r\n\r\n function getCustBookHDetail() {\r\n if (acc && acc.CustId && _trxNo !== 0) {\r\n const custBookHDetailObj = {\r\n CustId: acc.CustId,\r\n CustBookHId: _trxNo\r\n };\r\n dispatch(bookingActions.getCustBookHDetail(custBookHDetailObj));\r\n }\r\n }\r\n\r\n function getTransportType() {\r\n if (selectedDest && selectedDest.value != 0) {\r\n const transportTypeObj = {\r\n OriginDestId: originDestId,\r\n DestDistrictId: selectedDest.value,\r\n };\r\n\r\n dispatch(transportTypeActions.getTransportType(transportTypeObj));\r\n } else {\r\n dispatch(transportTypeActions.clearTransportType());\r\n }\r\n }\r\n\r\n function onSubmitDetailBarang() {\r\n setEnableSubmitted(false);\r\n setSimpanDataBarang(true);\r\n setIsError(false);\r\n\r\n setArrDetailBarangMbl(arrDetailBarangMbl.map(\r\n (detail, i) => {\r\n if (detail.CustBookDId == detailBarangMbl.CustBookDId) {\r\n detail.ItemWeight = detailBarangMbl.ItemWeight;\r\n detail.DimP = detailBarangMbl.DimP;\r\n detail.DimL = detailBarangMbl.DimL;\r\n detail.DimT = detailBarangMbl.DimT;\r\n detail.IsPacking = detailBarangMbl.PackingKayu || detailBarangMbl.BubbleWrap || detailBarangMbl.Wrapping;\r\n detail.PackingKayu = detailBarangMbl.PackingKayu;\r\n detail.BubbleWrap = detailBarangMbl.BubbleWrap;\r\n detail.Wrapping = detailBarangMbl.Wrapping;\r\n }\r\n return detail;\r\n }\r\n ));\r\n\r\n setSimpanDataBarang(false);\r\n }\r\n\r\n function onAddDetailBarang() {\r\n if (\r\n recipientName &&\r\n transportType &&\r\n paymentType &&\r\n packageCategory &&\r\n packageContent &&\r\n selectedDest &&\r\n selectedDest.value != 0 &&\r\n (isInsurance == \"0\" || (isInsurance == \"1\" && nilaiBarang > 0))\r\n ) {\r\n setIsError(false);\r\n handleError(\"nilaiBarang\", null);\r\n } else {\r\n setIsError(true);\r\n setAlert({\r\n Type: \"Info\",\r\n StatusMessage: \"Harap lengkapi data penerima terlebih dahulu\",\r\n });\r\n\r\n if (isInsurance == \"1\" && nilaiBarang <= 0) {\r\n handleError(\"nilaiBarang\", \"Harap isi nilai barang.\");\r\n }\r\n return false;\r\n }\r\n }\r\n\r\n function generateKoli() {\r\n onAddDetailBarang();\r\n\r\n if (isError) return;\r\n\r\n let newArrTempBarang = [...arrTempBarang];\r\n let filterArrDetail = [];\r\n\r\n arrTempBarang.map(\r\n (detail, i) => {\r\n let newDetailBarang = {\r\n CustBookDId: detail.CustBookDId,\r\n ItemCodeNo: \"\",\r\n ItemWeight: detail.ItemWeight,\r\n DimP: detail.DimP,\r\n DimL: detail.DimL,\r\n DimT: detail.DimT,\r\n CustBookDStat: detail.CustBookDStat,\r\n IsPacking: detail.IsPacking,\r\n PackingKayu: detail.PackingKayu,\r\n BubbleWrap: detail.BubbleWrap,\r\n Wrapping: detail.Wrapping\r\n }\r\n filterArrDetail.push(newDetailBarang);\r\n }\r\n )\r\n let arrTempBarangLength = arrTempBarang.length;\r\n\r\n if (totalKoli <= totalNonCanKoli) return;\r\n else {\r\n const newTempArrDetailBarangMbl = [...filterArrDetail];\r\n\r\n const countToAdd = totalKoli - totalNonCanKoli;\r\n for (let i = 0; i < countToAdd; i++) {\r\n let newObj = {\r\n CustBookDId: arrTempBarangLength + (i + 1),\r\n ItemCodeNo: \"\",\r\n ItemWeight: 0,\r\n DimP: 0,\r\n DimL: 0,\r\n DimT: 0,\r\n CustBookDStat: \"NEW\",\r\n IsPacking: false,\r\n PackingKayu: false,\r\n BubbleWrap: false,\r\n Wrapping: false\r\n }\r\n newTempArrDetailBarangMbl.push(newObj);\r\n\r\n newObj.SeqNo = arrTempBarangLength + (i + 1);\r\n newObj.VolWeight = 0;\r\n newObj.FinalWeight = 0;\r\n newObj.TotalCalcSrc = \"Item\";\r\n newArrTempBarang.push(newObj);\r\n }\r\n setArrDetailBarangMbl(newTempArrDetailBarangMbl);\r\n setArrTempBarang(newArrTempBarang.sort((a, b) => a.SeqNo - b.SeqNo));\r\n }\r\n }\r\n\r\n const handleChangeDest = (selectedOption) => {\r\n setSelectedDest(selectedOption);\r\n handleTagihTujuan(selectedOption.value);\r\n };\r\n\r\n function handleTagihTujuan(districtId) {\r\n let _districtObj = districtObj.find((x) => x.DistrictId == districtId);\r\n let custCOD = custObj.IsAllowCOD;\r\n let tujuanCOD = false;\r\n let isAllowRcvPayment = \"1\";\r\n\r\n if (_districtObj != null) {\r\n isAllowRcvPayment = _districtObj.IsAllowRcvPayment;\r\n tujuanCOD = isAllowRcvPayment == \"1\" ? true : false;\r\n if (custCOD && tujuanCOD) setHideCOD(false);\r\n else setHideCOD(true);\r\n } else {\r\n setHideCOD(!custCOD);\r\n }\r\n }\r\n\r\n function handleCancel(ev) {\r\n if (ev.CustBookDStat == \"ACT\") {\r\n let reqObj = {\r\n Id: ev.CustBookDId,\r\n username: acc.Username\r\n }\r\n dispatch(bookingActions.cancelKoliBooking(reqObj));\r\n } else if (ev.CustBookDStat == \"NEW\") {\r\n const newArrTempBarang = [];\r\n let idx = 1;\r\n arrTempBarang.map((atb) => {\r\n if (ev.CustBookDId != atb.CustBookDId) {\r\n let newTempBarang = {\r\n ...atb,\r\n CustBookDId: atb.CustBookDId,\r\n SeqNo: idx\r\n }\r\n newArrTempBarang.push(newTempBarang);\r\n idx++;\r\n }\r\n });\r\n setArrTempBarang(newArrTempBarang);\r\n setArrDetailBarangMbl(newArrTempBarang);\r\n }\r\n }\r\n\r\n const style = {\r\n control: (base, state) => ({\r\n ...base,\r\n border: \"1px solid rgba(209, 213, 219, var(--tw-border-opacity))\",\r\n boxShadow: \"none\",\r\n \"&:hover\": {\r\n border: \"1px solid rgba(209, 213, 219, var(--tw-border-opacity))\",\r\n },\r\n }),\r\n };\r\n\r\n const styleMobile = {\r\n control: (base, state) => ({\r\n ...base,\r\n border: \"none\",\r\n boxShadow: \"none\",\r\n \"&:hover\": {\r\n border: \"none\",\r\n },\r\n }),\r\n };\r\n\r\n return (\r\n <>\r\n \r\n
\r\n
\r\n Buat Booking\r\n \r\n \r\n\r\n
\r\n
\r\n {showPenerimaForm && showKoliForm && (\r\n {\r\n history.push(`/booking-details?custId=${acc.CustId}&trxDtFrom=${requestObj.trxDtFrom}&trxDtTo=${requestObj.trxDtTo}`);\r\n }}\r\n >\r\n Batal\r\n \r\n )}\r\n {showPenerimaForm && showKoliForm && (\r\n \r\n Submit\r\n \r\n )}\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n
\r\n Buat Booking\r\n \r\n \r\n
\r\n\r\n
\r\n
\r\n
\r\n setRecipientName(e.target.value)}\r\n />\r\n \r\n Harap isi nama penerima\r\n
\r\n )}\r\n \r\n \r\n
\r\n Nomor Ponsel Penerima\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Alamat Penerima\r\n
\r\n
\r\n setRecipientAddress(e.target.value)}\r\n />\r\n
\r\n
\r\n
\r\n Nomor Referensi{acc.IsCustRefNoMandatory &&
*
}\r\n
\r\n
\r\n setReferenceNo(e.target.value)}\r\n value={referenceNo}\r\n />\r\n \r\n Harap isi Nomor Referensi.\r\n
\r\n )}\r\n \r\n \r\n
\r\n
\r\n {\r\n districtObj && selectedDest &&\r\n \r\n Harap isi tujuan\r\n
\r\n )}\r\n \r\n \r\n
\r\n
\r\n setTransportType(e.target.value)}\r\n >\r\n \r\n Pilih jalur\r\n \r\n {transportTypeObj &&\r\n transportTypeObj.TransportTypes.map(\r\n (transportTypeObj) => (\r\n \r\n {transportTypeObj.TransportTypeName}\r\n \r\n )\r\n )}\r\n \r\n \r\n Harap pilih metode pengiriman\r\n
\r\n )}\r\n \r\n \r\n
\r\n
\r\n setPaymentType(e.target.value)}\r\n >\r\n \r\n Pilih metode pembayaran\r\n \r\n \r\n Lunas\r\n \r\n \r\n Kredit\r\n \r\n \r\n Tagih Tujuan\r\n \r\n \r\n Kredit Penerima\r\n \r\n \r\n \r\n Harap pilih metode pembayaran\r\n
\r\n )}\r\n \r\n \r\n
\r\n
\r\n setPackageCategory(e.target.value)}\r\n >\r\n \r\n Pilih jenis barang\r\n \r\n \r\n ELEKTRONIK\r\n \r\n \r\n NON ELEKTRONIK\r\n \r\n \r\n \r\n Harap pilih jenis barang\r\n
\r\n )}\r\n \r\n \r\n
\r\n
\r\n handlePackageContentChange(e.target.value)}\r\n >\r\n \r\n Pilih tipe barang\r\n \r\n {packageContentsObj &&\r\n packageContentsObj.map((packageContentsObj) => (\r\n \r\n {packageContentsObj.PackageContentName}\r\n \r\n ))}\r\n \r\n \r\n Harap pilih tipe barang\r\n
\r\n )}\r\n \r\n \r\n
\r\n
\r\n setTotalKoli(e.target.value)}\r\n value={totalKoli}\r\n />\r\n \r\n Total Koli tidak sama dengan jumlah detail barang\r\n
\r\n )}\r\n \r\n {isInsurance && isInsurance === \"1\" && (\r\n \r\n
\r\n
\r\n handleNilaiBarang(e)}\r\n value={nilaiBarang}\r\n placeholder=\"Isi Nilai barang\"\r\n />\r\n \r\n {errors?.nilaiBarang}\r\n
\r\n )}\r\n \r\n )}\r\n \r\n
\r\n Catatan Order\r\n
\r\n
\r\n setBookingNotes(e.target.value)}\r\n />\r\n
\r\n
\r\n
\r\n
\r\n setPackageContentNotes(e.target.value)}\r\n />\r\n \r\n Harap isi catatan paket\r\n
\r\n )}\r\n \r\n )}\r\n {!showKoliForm && (\r\n <>\r\n \r\n\r\n \r\n
\r\n Estimasi Berat Barang (kg)\r\n
\r\n
\r\n detailKoliOnChange(e, true)}\r\n value={detailBarangMbl.ItemWeight}\r\n placeholder=\"Isi estimasi berat barang\"\r\n />\r\n
\r\n
\r\n
\r\n Panjang (cm)\r\n
\r\n
\r\n detailKoliOnChange(e, true)}\r\n value={detailBarangMbl.DimP}\r\n placeholder=\"Isi dimensi panjang barang\"\r\n />\r\n
\r\n
\r\n
\r\n Lebar (cm)\r\n
\r\n
\r\n detailKoliOnChange(e, true)}\r\n value={detailBarangMbl.DimL}\r\n placeholder=\"Isi dimensi lebar barang\"\r\n />\r\n
\r\n
\r\n
\r\n Tinggi (cm)\r\n
\r\n
\r\n detailKoliOnChange(e, true)}\r\n value={detailBarangMbl.DimT}\r\n placeholder=\"Isi dimensi tinggi barang\"\r\n />\r\n
\r\n
\r\n
\r\n Packing\r\n
\r\n
\r\n
\r\n detailKoliOnChange(e, false)}\r\n />\r\n Kayu\r\n
\r\n
\r\n detailKoliOnChange(e, false)}\r\n />\r\n Bubble Wrap\r\n
\r\n
\r\n detailKoliOnChange(e, false)}\r\n />\r\n Wrapping\r\n
\r\n
\r\n
\r\n
\r\n {\r\n setShowKoliForm(true);\r\n setShowPenerimaForm(true);\r\n }}\r\n >\r\n Batal\r\n \r\n
\r\n
\r\n {\r\n onSubmitDetailBarang();\r\n setShowKoliForm(true);\r\n setShowPenerimaForm(true);\r\n }}\r\n >\r\n Simpan Data Koli\r\n \r\n
\r\n
\r\n {\r\n generateKoli();\r\n }}\r\n >\r\n Generate Koli\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n Total Barang\r\n \r\n \r\n {respCalcObj && arrDetailBarangMbl.length > 0\r\n ? new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 2,\r\n }).format(respCalcObj.TotalItem)\r\n : new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 2,\r\n }).format(0)}\r\n \r\n
\r\n
\r\n \r\n Estimasi Berat Final (Kg)\r\n \r\n \r\n {respCalcObj && arrDetailBarangMbl.length > 0\r\n ? new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 2,\r\n }).format(respCalcObj.TotalFinalWeight)\r\n : new Intl.NumberFormat(\"en\", {\r\n minimumFractionDigits: 2,\r\n }).format(0)}\r\n \r\n
\r\n
\r\n {showPenerimaForm && showKoliForm && (\r\n {\r\n history.push(`/booking-details?custId=${acc.CustId}&trxDtFrom=${requestObj.trxDtFrom}&trxDtTo=${requestObj.trxDtTo}`);\r\n }}\r\n >\r\n Batal\r\n \r\n )}\r\n {showPenerimaForm && showKoliForm && (\r\n \r\n Submit\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n );\r\n};\r\n\r\n\r\nexport default BookingDetailEditV2;","import React, { useState, useEffect } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { pickupActions } from \"../../_actions\";\r\nimport { masterSettingConstants } from \"../../_constants\";\r\nimport { PickupMonitoringTable, Pagination, AlertMessage, ShortcutDate } from \"../../components\";\r\nimport { useParams, useLocation } from \"react-router-dom\";\r\n\r\nconst PickupMonitoring = ({ t }) => {\r\n const acc = useSelector((state) => state.authentication.accInfo);\r\n const pickupMonitoringState = useSelector(\r\n (state) => state.pickupMonitoring.pickupMonitoring\r\n );\r\n\r\n const dispatch = useDispatch();\r\n const [submitted, setSubmitted] = useState(false);\r\n const [isError, setIsError] = useState(false);\r\n const [shortcut, setShortcut] = useState(false);\r\n const [sortConfig, setSortConfig] = useState({\r\n key: \"PickupDt\",\r\n direction: \"Desc\",\r\n });\r\n const { noResi } = useParams();\r\n const [totalRecord, setTotalRecord] = useState(0);\r\n const [loadMore, setLoadmore] = useState(1);\r\n const [rowPerPage, setRowPerPage] = useState(99);\r\n let [num, setNum] = useState(1);\r\n let [cur, setCur] = useState(1);\r\n function useQuery() {\r\n const { search } = useLocation();\r\n return React.useMemo(() => new URLSearchParams(search), [search]);\r\n }\r\n\r\n const query = useQuery();\r\n const _pickupReqGrpId = query.get(\"pickupReqGrpId\");\r\n\r\n const [pickupMonitoring, setPickupMonitoring] = useState({\r\n trxDtFrom: dateParser(new Date()),\r\n trxDtTo: dateParser(new Date()),\r\n pickupProcessStat: masterSettingConstants.PICKUP_STAT_ACT,\r\n pickupReqGrpId: _pickupReqGrpId != undefined ? _pickupReqGrpId : \"\"\r\n });\r\n\r\n function dateParser(value) {\r\n const date = new Date(value);\r\n const dateParsed =\r\n date.getFullYear() +\r\n \"-\" +\r\n date.toLocaleString(\"en-us\", { month: \"2-digit\" }) +\r\n \"-\" +\r\n date.toLocaleString(\"en-us\", { day: \"2-digit\" });\r\n return dateParsed;\r\n }\r\n\r\n function handleChange(e) {\r\n const { name, value } = e.target;\r\n setPickupMonitoring((prevState) => ({\r\n ...prevState,\r\n [name]: value,\r\n }));\r\n }\r\n\r\n function handleSearch(e) {\r\n e.preventDefault();\r\n\r\n setNum(1);\r\n setSubmitted(true);\r\n callPickupMonitoring(1, rowPerPage);\r\n }\r\n\r\n function callPickupMonitoring(pageNo, rowPerPages) {\r\n if (acc != undefined) {\r\n let custName = \"RatriWidyaningrum|Ratri Widyaningrum\"; //acc.CustNo + \"|\" + acc.CustName\r\n let pickupMonitoringObj = {\r\n custName: custName,\r\n pickupProcessStat: pickupMonitoring.pickupProcessStat,\r\n trxDtFrom: pickupMonitoring.trxDtFrom,\r\n trxDtTo: pickupMonitoring.trxDtTo,\r\n PickupReqGrpId: pickupMonitoring.pickupReqGrpId,\r\n RowPerPage: rowPerPages,\r\n PageNo: pageNo,\r\n OrderBy: sortConfig,\r\n };\r\n dispatch(pickupActions.pickupMonitoring(pickupMonitoringObj));\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (totalRecord > 0 && pickupMonitoring.trxDtFrom && pickupMonitoring.trxDtTo) {\r\n callPickupMonitoring(cur, rowPerPage);\r\n }\r\n }, [cur]);\r\n\r\n useEffect(() => {\r\n if (pickupMonitoringState && pickupMonitoringState.TotalRecord) {\r\n setTotalRecord(pickupMonitoringState.TotalRecord);\r\n }\r\n }, [pickupMonitoringState]);\r\n\r\n useEffect(() => {\r\n if (sortConfig != null && sortConfig != undefined) {\r\n if (\r\n totalRecord > 0 &&\r\n pickupMonitoring.trxDtFrom &&\r\n pickupMonitoring.trxDtTo\r\n ) {\r\n callPickupMonitoring(1, rowPerPage);\r\n }\r\n }\r\n }, [sortConfig]);\r\n\r\n const getDate = (dateObj) => {\r\n setPickupMonitoring({\r\n trxDtFrom: dateObj.dateFrom,\r\n trxDtTo: dateObj.dateTo,\r\n pickupProcessStat: pickupMonitoring.pickupProcessStat\r\n });\r\n\r\n setShortcut(true);\r\n };\r\n\r\n useEffect(() => {\r\n if (shortcut) {\r\n callPickupMonitoring(cur, rowPerPage);\r\n setSubmitted(true);\r\n setShortcut(false);\r\n }\r\n }, [shortcut]);\r\n\r\n\r\n useEffect(() => {\r\n setSubmitted(false);\r\n setShortcut(false);\r\n setCur(1);\r\n setNum(1);\r\n setTotalRecord(0);\r\n setLoadmore(1);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (totalRecord > 0) {\r\n callPickupMonitoring(1, loadMore * rowPerPage);\r\n }\r\n }, [loadMore]);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n
PICKUP MONITORING \r\n \r\n
\r\n
\r\n {submitted && pickupMonitoringState && (\r\n
\r\n )}\r\n
\r\n
\r\n
\r\n
\r\n PICKUP MONITORING\r\n \r\n \r\n
\r\n {submitted && pickupMonitoringState && (\r\n
\r\n )}\r\n
\r\n CANCEL PICKUP ORDER\r\n \r\n \r\n
\r\n
\r\n \r\n
Alasan
\r\n
\r\n
setCancelNotes(e.target.value)}\r\n className=\"col-md-9\"\r\n style={{ boxShadow: \"0px 0px 5px 1px rgba(0,0,0,0.03)\" }}\r\n />\r\n {submitted && !cancelNotes && (\r\n \r\n Tidak boleh kosong\r\n
\r\n )}\r\n \r\n
\r\n
\r\n
\r\n \r\n Simpan\r\n \r\n \r\n Batal\r\n \r\n
\r\n
\r\n
\r\n
\r\n LIST PICKUP ORDER\r\n \r\n \r\n
\r\n
\r\n
\r\n
Pickup Monitoring \r\n \r\n
\r\n
\r\n
\r\n
\r\n Pickup Monitoring\r\n \r\n \r\n
\r\n
\r\n
\r\n
Pickup Request Detail \r\n \r\n
\r\n
\r\n
\r\n
\r\n Pickup Request Detail\r\n \r\n \r\n
\r\n
\r\n
\r\n {pickupReqDetail.Result.length > 0 && (\r\n
\r\n )}\r\n
\r\n
\r\n
Pickup Address \r\n \r\n
\r\n {\r\n isError == true &&\r\n
\r\n }\r\n {pickupAddressTypeObj && pickupAddressTypeObj.Result && (\r\n <>\r\n
\r\n
\r\n \r\n )}\r\n
\r\n
\r\n
\r\n Pickup Address\r\n \r\n \r\n\r\n
\r\n {\r\n isError == true &&\r\n
\r\n }\r\n {pickupAddressTypeObj && pickupAddressTypeObj.Result && (\r\n <>\r\n
\r\n
\r\n \r\n )}\r\n
\r\n
\r\n
Pickup Address \r\n \r\n {\r\n isError == true &&\r\n
\r\n }\r\n
\r\n
\r\n
\r\n
\r\n Pickup Address\r\n \r\n \r\n
\r\n {\r\n isError == true &&\r\n
\r\n }\r\n
\r\n Summary Pickup Address \r\n \r\n {pickupAddEditObj && selectedPckDist && modalShow && submitted &&\r\n <>\r\n \r\n
\r\n
\r\n
\r\n
\r\n {pickupAddr.PickupReqGrpId > 0 ?\r\n `Ubah alamat pickup dengan nama alamat ${pickupAddr.AddrType} telah sukses` :\r\n `Buat alamat pickup dengan nama alamat ${pickupAddr.AddrType} telah sukses`\r\n }\r\n
\r\n
\r\n
\r\n
\r\n SUMMARY\r\n
\r\n
\r\n
\r\n
\r\n Nama Alamat\r\n
\r\n
\r\n {pickupAddr.AddrType}\r\n
\r\n
\r\n
\r\n
\r\n Kecamatan / Kabupaten\r\n
\r\n
\r\n {selectedPckDist.label}\r\n
\r\n
\r\n
\r\n
\r\n Alamat\r\n
\r\n
\r\n {pickupAddr.Addr}\r\n
\r\n
\r\n
\r\n
\r\n Contact Person\r\n
\r\n
\r\n {pickupAddr.ContactPerson}\r\n
\r\n
\r\n
\r\n
\r\n Nomor Ponsel\r\n
\r\n
\r\n {phoneNo}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n navigateToPickupAddr()}\r\n >\r\n Lihat Alamat Pickup\r\n \r\n navigateToCreatePickupAddr()}\r\n >\r\n Buat Pickup Address Lain\r\n \r\n navigateToHome()}\r\n >\r\n Kembali ke Home\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {pickupAddr.PickupReqGrpId > 0 ?\r\n `Ubah alamat pickup dengan nama alamat ${pickupAddr.AddrType} telah sukses` :\r\n `Buat alamat pickup dengan nama alamat ${pickupAddr.AddrType} telah sukses`\r\n }\r\n
\r\n
\r\n
\r\n
\r\n SUMMARY\r\n
\r\n
\r\n
\r\n
\r\n Nama Alamat\r\n
\r\n
\r\n {pickupAddr.AddrType}\r\n
\r\n
\r\n
\r\n
\r\n Kecamatan / Kabupaten\r\n
\r\n
\r\n {selectedPckDist.label}\r\n
\r\n
\r\n
\r\n
\r\n Alamat\r\n
\r\n
\r\n {pickupAddr.Addr}\r\n
\r\n
\r\n
\r\n
\r\n Contact Person\r\n
\r\n
\r\n {pickupAddr.ContactPerson}\r\n
\r\n
\r\n
\r\n
\r\n Nomor Ponsel\r\n
\r\n
\r\n {phoneNo}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n navigateToPickupAddr()}\r\n >\r\n Lihat Alamat Pickup\r\n \r\n navigateToCreatePickupAddr()}\r\n >\r\n Buat Pickup Address Lain\r\n \r\n navigateToHome()}\r\n >\r\n Kembali ke Home\r\n \r\n
\r\n
\r\n \r\n \r\n );\r\n}\r\nexport default PickupAddressForm;","import React, { useState, useEffect } from \"react\";\r\nimport { profileActions } from \"../../_actions\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { Link } from \"react-router-dom\";\r\nimport moment from \"moment\";\r\nimport {\r\n Pagination\r\n} from \"../../components\";\r\nimport { FaRegCopy } from \"react-icons/fa\";\r\n\r\nconst ProfileCustPointHist = ({ t }) => {\r\n const acc = useSelector((state) => state.authentication.accInfo);\r\n const dispatch = useDispatch();\r\n const custPointHistTrx = useSelector(\r\n (state) => state.custPointHistTrx.custPointHistTrx\r\n );\r\n\r\n const [totalRecord, setTotalRecord] = useState(0);\r\n const [loadMore, setLoadmore] = useState(1);\r\n const [rowPerPage, setRowPerPage] = useState(10);\r\n const [sortConfig, setSortConfig] = useState({\r\n key: \"TrxDt\",\r\n direction: \"Desc\",\r\n });\r\n let [num, setNum] = useState(1);\r\n let [cur, setCur] = useState(1);\r\n\r\n useEffect(() => {\r\n console.log(\"TEST\");\r\n setCur(1);\r\n setNum(1);\r\n setTotalRecord(0);\r\n setLoadmore(1);\r\n callAPI(1, rowPerPage);\r\n }, []);\r\n\r\n function callAPI(pageNo, rowPerPages) {\r\n var reqObj = {\r\n CustId: acc.CustId,\r\n RowPerPage: rowPerPages,\r\n PageNo: pageNo,\r\n OrderBy: sortConfig,\r\n };\r\n dispatch(profileActions.getListCustPointHistTrx(reqObj));\r\n }\r\n\r\n useEffect(() => {\r\n if (totalRecord > 0) {\r\n callAPI(1, loadMore * rowPerPage);\r\n }\r\n }, [loadMore]);\r\n\r\n useEffect(() => {\r\n if (totalRecord > 0) {\r\n callAPI(cur, rowPerPage);\r\n }\r\n }, [cur]);\r\n\r\n useEffect(() => {\r\n if (custPointHistTrx && custPointHistTrx.TotalRecord) {\r\n console.log(custPointHistTrx);\r\n setTotalRecord(custPointHistTrx.TotalRecord);\r\n }\r\n }, [custPointHistTrx]);\r\n\r\n function copyToClipboard(e, value) {\r\n e.stopPropagation();\r\n navigator.clipboard.writeText(value);\r\n }\r\n\r\n return (\r\n \r\n {custPointHistTrx && custPointHistTrx.Result && (\r\n <>\r\n {custPointHistTrx.Result.length === 0 && (\r\n
Tidak ada ada data
\r\n )}\r\n {custPointHistTrx.Result.length > 0 && (\r\n <>\r\n
\r\n
\r\n \r\n \r\n Resi No \r\n Points \r\n Incentive/Kg Amount \r\n Incentive Amount \r\n Transaction Date \r\n Transaction Status \r\n \r\n \r\n \r\n {custPointHistTrx.Result.map((cpht) => (\r\n \r\n \r\n \r\n {cpht.ResiHNo}\r\n \r\n \r\n {cpht.Points} \r\n {cpht.IncentivePerKgAmt.toLocaleString(\"en\", { minimumFractionDigits: 2 })} \r\n {cpht.IncentiveAmt.toLocaleString(\"en\", { minimumFractionDigits: 2 })} \r\n \r\n {moment(cpht.TrxDt).format(\"DD-MM-YY HH:mm\")}\r\n \r\n {cpht.TrxStat} \r\n \r\n ))}\r\n \r\n \r\n \r\n
\r\n
\r\n {custPointHistTrx.Result.map((cpht) => (\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {cpht.TrxStat === \"ACT\" ? \"Aktif\" : \"Cancel\"}
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Resi No
\r\n
\r\n copyToClipboard(e, cpht.ResiHNo)}\r\n style={{ display: \"inline-block\" }}\r\n />\r\n
\r\n
\r\n
\r\n
\r\n {cpht.ResiHNo}\r\n
\r\n
\r\n
\r\n
\r\n Points\r\n
\r\n
\r\n {cpht.Points}\r\n
\r\n
\r\n
\r\n
\r\n Incentive/Kg Amount\r\n
\r\n
\r\n {cpht.IncentivePerKgAmt.toLocaleString(\"en\", { minimumFractionDigits: 2 })}\r\n
\r\n
\r\n
\r\n
\r\n Incentive Amount\r\n
\r\n
\r\n {cpht.IncentiveAmt.toLocaleString(\"en\", { minimumFractionDigits: 2 })}\r\n
\r\n
\r\n
\r\n
\r\n Transaction Date\r\n
\r\n
\r\n {moment(cpht.TrxDt).format(\"DD-MM-YY HH:mm\")}\r\n
\r\n
\r\n
\r\n
\r\n \r\n ))}\r\n
\r\n
\r\n {custPointRedemptionTrx && custPointRedemptionTrx.Result && (\r\n <>\r\n {custPointRedemptionTrx.Result.length === 0 && (\r\n
Tidak ada ada data
\r\n )}\r\n {custPointRedemptionTrx.Result.length > 0 && (\r\n <>\r\n
\r\n
\r\n \r\n \r\n Incentive Amount \r\n Redeem Date \r\n Redeem Office Name \r\n Cashier Name \r\n Redeem By \r\n Redeem Notes \r\n \r\n \r\n \r\n {custPointRedemptionTrx.Result.map((cprt) => (\r\n \r\n {cprt.IncentiveAmt} \r\n \r\n {moment(cprt.RedeemDt).format(\"DD-MM-YY HH:mm\")}\r\n \r\n {cprt.RedeemOfficeName} \r\n {cprt.CashierName} \r\n {cprt.RedeemBy} \r\n {cprt.RedeemNotes} \r\n \r\n ))}\r\n \r\n \r\n \r\n
\r\n
\r\n {custPointRedemptionTrx.Result.map((cprt) => (\r\n
\r\n \r\n
\r\n
\r\n
\r\n Incentive Amount\r\n
\r\n
\r\n {cprt.IncentiveAmt}\r\n
\r\n
\r\n
\r\n
\r\n Redeem Date\r\n
\r\n
\r\n {moment(cprt.RedeemDt).format(\"DD-MM-YY HH:mm\")}\r\n
\r\n
\r\n
\r\n
\r\n Redeem Office Name\r\n
\r\n
\r\n {cprt.RedeemOfficeName}\r\n
\r\n
\r\n
\r\n
\r\n Cashier Name\r\n
\r\n
\r\n {cprt.CashierName}\r\n
\r\n
\r\n
\r\n
\r\n Redeem By\r\n
\r\n
\r\n {cprt.RedeemBy}\r\n
\r\n
\r\n
\r\n
\r\n Redeem Notes\r\n
\r\n
\r\n {cprt.RedeemNotes}\r\n
\r\n
\r\n
\r\n
\r\n ))}\r\n
\r\n
\r\n {\r\n isError == true &&\r\n
\r\n }\r\n
\r\n {\r\n getQrCodeMemberObj && getQrCodeMemberObj != '' && getQrCodeMemberObj != null &&\r\n <>\r\n
\r\n
\r\n
\r\n
Silahkan simpan QR Code ini dengan aman. \r\n
Kegunaan QR Code :
\r\n
1. Mengenali customer member Sentral Cargo
\r\n
2. Otorisasi validasi jenis pembayaran kredit.
\r\n
3. Tidak berlaku di semua Sentral Cargo Point.
\r\n
Notes : Tunjukan QR Code Member, setiap kali transaksi pengiriman Walk In
\r\n
\r\n
\r\n
\r\n downloadPDF(getQrCodeMemberObj)}\r\n className=\"w-25 mx-2 my-2 py-2 px-4 border border-transparent font-medium rounded-full text-white bg-blue-600\"\r\n >\r\n Download\r\n \r\n sendEmailQrCodeCust()}\r\n className=\"w-25 mx-2 my-2 py-2 px-4 border border-transparent font-medium rounded-full text-white bg-red-600\"\r\n >\r\n Kirim ke Email\r\n \r\n
\r\n
\r\n {\r\n isError == true &&\r\n
\r\n }\r\n
\r\n {\r\n getQrCodeMemberObj && getQrCodeMemberObj != '' && getQrCodeMemberObj != null &&\r\n <>\r\n
\r\n
\r\n
\r\n
Silahkan simpan QR Code ini dengan aman. \r\n
Kegunaan QR Code :
\r\n
1. Mengenali customer member Sentral Cargo
\r\n
2. Otorisasi validasi jenis pembayaran kredit.
\r\n
3. Tidak berlaku di semua Sentral Cargo Point.
\r\n
Notes : Tunjukan QR Code Member, setiap kali transaksi pengiriman Walk In
\r\n
\r\n
\r\n
\r\n downloadPDF(getQrCodeMemberObj)}\r\n className=\"mx-3 w-40 my-2 py-2 px-4 border border-transparent font-medium rounded-full text-white bg-blue-600\"\r\n >\r\n Download\r\n \r\n sendEmailQrCodeCust()}\r\n className=\"mx-3 w-40 my-2 py-2 px-4 border border-transparent font-medium rounded-full text-white bg-red-600\"\r\n >\r\n Kirim ke Email\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {isOpen === \"1\"\r\n ? \"My Account\"\r\n : isOpen === \"2\"\r\n ? \"Point History Transaction\"\r\n : isOpen === \"3\"\r\n ? \"Point Redemption Transaction\"\r\n : \"QR Code Member\"}\r\n \r\n \r\n
\r\n
\r\n {isOpen === \"1\" && (\r\n
\r\n
\r\n Nama \r\n \r\n {profileData && profileData.CustName}\r\n \r\n
\r\n
\r\n \r\n Tanggal Bergabung\r\n \r\n \r\n {profileData &&\r\n moment(profileData.JoinDt).format(\"DD MMMM YYYY\")}\r\n \r\n
\r\n
\r\n Main Contact Person \r\n \r\n {profileData && (\r\n <>{`${profileData.ContactPerson} - ${profileData.MobilePhoneNo}`}\r\n )}\r\n \r\n
\r\n
\r\n Email \r\n \r\n {profileData && profileData.Email}\r\n \r\n
\r\n
\r\n Sales \r\n \r\n {profileData && profileData.SalesName}\r\n \r\n
\r\n
\r\n CRO \r\n \r\n {profileData && profileData.CROName}\r\n \r\n
\r\n
\r\n Point \r\n \r\n {profileData &&\r\n profileData.PointAmt.toLocaleString(\"en\", {\r\n minimumFractionDigits: 0,\r\n })}\r\n \r\n
\r\n {/*
\r\n Kode Alamat \r\n \r\n {pickupAddrSelectedObj && pickupAddrSelectedObj.AddrType}\r\n \r\n
\r\n
\r\n Alamat \r\n \r\n {pickupAddrSelectedObj && pickupAddrSelectedObj.Addr}\r\n \r\n
\r\n
\r\n Contact Person \r\n \r\n {pickupAddrSelectedObj && pickupAddrSelectedObj.ContactPerson}\r\n \r\n
\r\n
\r\n No HP Contact Person \r\n \r\n {pickupAddrSelectedObj && pickupAddrSelectedObj.PhoneNo}\r\n \r\n
\r\n
\r\n Kecamatan \r\n \r\n {pickupAddrSelectedObj && pickupAddrSelectedObj.Kecamatan}\r\n \r\n
*/}\r\n {/*
\r\n
Password \r\n
\r\n \r\n toggle(\"WChangePassword\", modalShow.WChangePassword)\r\n }\r\n >\r\n Change Password\r\n \r\n
\r\n
\r\n \r\n closeModal(\"WChangePassword\", modalShow.WChangePassword)\r\n }\r\n >\r\n Change Password Form\r\n \r\n \r\n \r\n \r\n \r\n */}\r\n
\r\n )}\r\n {isOpen === \"2\" &&
}\r\n {isOpen === \"3\" &&
}\r\n {isOpen === \"4\" &&
}\r\n
\r\n
\r\n setIsOpen(\"1\")}\r\n >\r\n My Account\r\n \r\n setIsOpen(\"2\")}\r\n >\r\n Point History Transaction\r\n \r\n setIsOpen(\"3\")}\r\n >\r\n Point Redemption Transaction\r\n \r\n setIsOpen(\"4\")}\r\n >\r\n QR Code Member\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {isOpen === \"1\"\r\n ? \"My Account\"\r\n : isOpen === \"2\"\r\n ? \"Point History Transaction\"\r\n : isOpen === \"3\"\r\n ? \"Point Redemption Transaction\"\r\n : \"QR Code Member\"}\r\n \r\n \r\n
\r\n
\r\n
\r\n setIsOpen(\"1\")}\r\n className=\"flex-grow group relative inline-block justify-center items-center py-2 px-4 border border-transparent text-xs leading-5 font-medium rounded-md text-white bg-indigo-600\"\r\n >\r\n My Account\r\n \r\n setIsOpen(\"2\")}\r\n className=\"flex-grow group relative inline-block justify-center items-center py-2 px-4 border border-transparent text-xs leading-5 font-medium rounded-md text-white bg-indigo-600\"\r\n >\r\n Point History Transaction\r\n \r\n setIsOpen(\"3\")}\r\n className=\"flex-grow group relative inline-block justify-center items-center py-2 px-4 border border-transparent text-xs leading-5 font-medium rounded-md text-white bg-indigo-600\"\r\n >\r\n Point Redemption Transaction\r\n \r\n setIsOpen(\"4\")}\r\n className=\"flex-grow group relative inline-block justify-center items-center py-2 px-4 border border-transparent text-xs leading-5 font-medium rounded-md text-white bg-indigo-600\"\r\n >\r\n QR Code Member\r\n \r\n
\r\n
\r\n {isOpen === \"1\" && (\r\n
\r\n
\r\n Nama \r\n \r\n {profileData && profileData.CustName}\r\n \r\n
\r\n
\r\n \r\n Tanggal Bergabung\r\n \r\n \r\n {profileData &&\r\n moment(profileData.JoinDt).format(\"DD MMMM YYYY\")}\r\n \r\n
\r\n
\r\n Contact Person \r\n \r\n {profileData && (\r\n <>{`${profileData.ContactPerson} - ${profileData.MobilePhoneNo}`}\r\n )}\r\n \r\n
\r\n
\r\n Email \r\n \r\n {profileData && profileData.Email}\r\n \r\n
\r\n
\r\n Sales \r\n \r\n {profileData && profileData.SalesName}\r\n \r\n
\r\n
\r\n CRO \r\n \r\n {profileData && profileData.CROName}\r\n \r\n
\r\n
\r\n Point \r\n \r\n {profileData &&\r\n profileData.PointAmt.toLocaleString(\"en\", {\r\n minimumFractionDigits: 0,\r\n })}\r\n \r\n
\r\n {/*
\r\n
Password \r\n
\r\n \r\n toggle(\"WChangePassword\", modalShow.WChangePassword)\r\n }\r\n >\r\n Change Password\r\n \r\n
\r\n
\r\n \r\n closeModal(\"WChangePassword\", modalShow.WChangePassword)\r\n }\r\n >\r\n Change Password Form\r\n \r\n \r\n \r\n \r\n \r\n */}\r\n
\r\n )}\r\n {isOpen === \"2\" &&
}\r\n {isOpen === \"3\" &&
}\r\n {isOpen === \"4\" &&
}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Origin Dictionary\r\n \r\n
\r\n
\r\n Nama Origin\r\n
\r\n
\r\n handleOriginChange(e.target.value)}\r\n />\r\n
\r\n
\r\n download()}\r\n className=\"relative w-40 flex justify-center items-center mr-2 py-2 px-4 border border-transparent font-medium rounded-full text-white bg-red-600 hover:bg-red-500 focus:outline-none focus:border-red-700 focus:shadow-outline-red active:bg-red-700 transition duration-150 ease-in-out\"\r\n >\r\n Export to Excel\r\n \r\n
\r\n
\r\n\r\n {originList &&\r\n originList &&\r\n originList.length == 0 && (\r\n
\r\n )}\r\n\r\n {originList &&\r\n originList &&\r\n originList.length > 0 && (\r\n
\r\n
\r\n \r\n \r\n Kode Origin \r\n Nama Origin \r\n \r\n \r\n \r\n {originList.map((o, i) => (\r\n \r\n {o.OriginCode} \r\n {o.OriginName} \r\n \r\n ))}\r\n \r\n
\r\n
\r\n )}\r\n
\r\n
\r\n
\r\n Origin Dictionary\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Nama Origin\r\n
\r\n
\r\n handleOriginChange(e.target.value)}\r\n />\r\n
\r\n
\r\n
\r\n download()}\r\n className=\"mx-3 my-2 py-2 px-4 border border-transparent font-medium rounded-full text-white bg-red-600\"\r\n >\r\n Export to Excel\r\n \r\n
\r\n
\r\n
\r\n
\r\n {originList &&\r\n originList &&\r\n originList.length == 0 && (\r\n
\r\n )}\r\n {originList &&\r\n originList &&\r\n originList.length > 0 &&\r\n originList.map((o, i) => (\r\n <>\r\n
\r\n \r\n
\r\n
\r\n
\r\n Kode Origin\r\n
\r\n
\r\n {o.OriginCode}\r\n
\r\n
\r\n
\r\n
\r\n Nama Origin\r\n
\r\n
\r\n {o.OriginName}\r\n
\r\n
\r\n
\r\n
\r\n \r\n ))}\r\n
\r\n
\r\n
\r\n District Dictionary\r\n \r\n
\r\n
\r\n Nama District\r\n
\r\n
\r\n handleDistrictChange(e.target.value)}\r\n />\r\n
\r\n
\r\n download()}\r\n className=\"relative w-40 flex justify-center items-center mr-2 py-2 px-4 border border-transparent font-medium rounded-full text-white bg-red-600 hover:bg-red-500 focus:outline-none focus:border-red-700 focus:shadow-outline-red active:bg-red-700 transition duration-150 ease-in-out\"\r\n >\r\n Export to Excel\r\n \r\n
\r\n
\r\n\r\n {districtList &&\r\n districtList &&\r\n districtList.length == 0 && (\r\n
\r\n )}\r\n\r\n {districtList &&\r\n districtList &&\r\n districtList.length > 0 && (\r\n
\r\n
\r\n \r\n \r\n Kode District \r\n Nama District (Kecamatan, KabupatenName, ProvinceName) \r\n \r\n \r\n \r\n {districtList.map((o, i) => (\r\n \r\n {o.DistrictCode} \r\n {o.DistrictDescr} \r\n \r\n ))}\r\n \r\n
\r\n
\r\n )}\r\n
\r\n
\r\n
\r\n District Dictionary\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Nama District\r\n
\r\n
\r\n handleDistrictChange(e.target.value)}\r\n />\r\n
\r\n
\r\n
\r\n download()}\r\n className=\"mx-3 my-2 py-2 px-4 border border-transparent font-medium rounded-full text-white bg-red-600\"\r\n >\r\n Export to Excel\r\n \r\n
\r\n
\r\n
\r\n
\r\n {districtList &&\r\n districtList &&\r\n districtList.length == 0 && (\r\n
\r\n )}\r\n {districtList &&\r\n districtList &&\r\n districtList.length > 0 &&\r\n districtList.map((o, i) => (\r\n <>\r\n
\r\n \r\n
\r\n
\r\n
\r\n Kode District\r\n
\r\n
\r\n {o.DistrictCode}\r\n
\r\n
\r\n
\r\n
\r\n Nama District\r\n
\r\n
\r\n {o.DistrictDescr}\r\n
\r\n
\r\n
\r\n
\r\n \r\n ))}\r\n
\r\n
\r\n
\r\n Package Content Dictionary\r\n \r\n
\r\n {packageContent &&\r\n packageContent &&\r\n packageContent.length == 0 && (\r\n
\r\n )}\r\n\r\n {packageContent &&\r\n packageContent &&\r\n packageContent.length > 0 && (\r\n
\r\n
\r\n \r\n \r\n Kode Package Content \r\n Nama Package Content \r\n \r\n \r\n \r\n {packageContent.map((o, i) => (\r\n \r\n {o.PackageContentCode} \r\n {o.PackageContentName} \r\n \r\n ))}\r\n \r\n
\r\n
\r\n )}\r\n
\r\n
\r\n
\r\n
\r\n Package Content Dictionary\r\n \r\n \r\n
\r\n
\r\n {packageContent &&\r\n packageContent &&\r\n packageContent.length == 0 && (\r\n
\r\n )}\r\n {packageContent &&\r\n packageContent &&\r\n packageContent.length > 0 &&\r\n packageContent.map((o, i) => (\r\n <>\r\n
\r\n \r\n
\r\n
\r\n
\r\n Kode Package Content\r\n
\r\n
\r\n {o.PackageContentCode}\r\n
\r\n
\r\n
\r\n
\r\n Nama Package Content\r\n
\r\n
\r\n {o.PackageContentName}\r\n
\r\n
\r\n
\r\n
\r\n \r\n ))}\r\n
\r\n
\r\n
\r\n
Upload Monitoring \r\n \r\n
\r\n
\r\n
\r\n
\r\n Upload Monitoring\r\n \r\n \r\n
\r\n
\r\n
\r\n {uploadMonitoring.Result.length > 0 && (\r\n
\r\n )}\r\n
\r\n
\r\n
Upload Detail \r\n \r\n
\r\n \r\n Export\r\n \r\n
\r\n
\r\n
\r\n
\r\n Upload Detail\r\n \r\n \r\n
\r\n
\r\n {uploadDetail.Result.length > 0 && (\r\n
\r\n )}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n","// In production, we register a service worker to serve assets from local cache.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\r\n// cached resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\r\n// This link also includes instructions on opting out of this behavior.\r\n\r\nconst isLocalhost = Boolean(\r\n window.location.hostname === 'localhost' ||\r\n // [::1] is the IPv6 localhost address.\r\n window.location.hostname === '[::1]' ||\r\n // 127.0.0.1/8 is considered localhost for IPv4.\r\n window.location.hostname.match(\r\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\r\n )\r\n);\r\n\r\nexport default function register () {\r\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n // The URL constructor is available in all browsers that support SW.\r\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location);\r\n if (publicUrl.origin !== window.location.origin) {\r\n // Our service worker won't work if PUBLIC_URL is on a different origin\r\n // from what our page is served on. This might happen if a CDN is used to\r\n // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374\r\n return;\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n\r\n if (isLocalhost) {\r\n // This is running on localhost. Lets check if a service worker still exists or not.\r\n checkValidServiceWorker(swUrl);\r\n } else {\r\n // Is not local host. Just register service worker\r\n registerValidSW(swUrl);\r\n }\r\n });\r\n }\r\n}\r\n\r\nfunction registerValidSW (swUrl) {\r\n navigator.serviceWorker\r\n .register(swUrl)\r\n .then(registration => {\r\n registration.onupdatefound = () => {\r\n const installingWorker = registration.installing;\r\n installingWorker.onstatechange = () => {\r\n if (installingWorker.state === 'installed') {\r\n if (navigator.serviceWorker.controller) {\r\n // At this point, the old content will have been purged and\r\n // the fresh content will have been added to the cache.\r\n // It's the perfect time to display a \"New content is\r\n // available; please refresh.\" message in your web app.\r\n console.log('New content is available; please refresh.');\r\n } else {\r\n // At this point, everything has been precached.\r\n // It's the perfect time to display a\r\n // \"Content is cached for offline use.\" message.\r\n console.log('Content is cached for offline use.');\r\n }\r\n }\r\n };\r\n };\r\n })\r\n .catch(error => {\r\n console.error('Error during service worker registration:', error);\r\n });\r\n}\r\n\r\nfunction checkValidServiceWorker (swUrl) {\r\n // Check if the service worker can be found. If it can't reload the page.\r\n fetch(swUrl)\r\n .then(response => {\r\n // Ensure service worker exists, and that we really are getting a JS file.\r\n if (\r\n response.status === 404 ||\r\n response.headers.get('content-type').indexOf('javascript') === -1\r\n ) {\r\n // No service worker found. Probably a different app. Reload the page.\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister().then(() => {\r\n window.location.reload();\r\n });\r\n });\r\n } else {\r\n // Service worker found. Proceed as normal.\r\n registerValidSW(swUrl);\r\n }\r\n })\r\n .catch(() => {\r\n console.log(\r\n 'No internet connection found. App is running in offline mode.'\r\n );\r\n });\r\n}\r\n\r\nexport function unregister () {\r\n if ('serviceWorker' in navigator) {\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister();\r\n });\r\n }\r\n}\r\n","import 'bootstrap/dist/css/bootstrap.css';\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { Provider } from 'react-redux';\r\nimport { store } from './_helpers/';\r\nimport App from './App';\r\nimport registerServiceWorker from './registerServiceWorker';\r\n//import './index.css';\r\nconst rootElement = document.getElementById('root');\r\n\r\nReactDOM.render(\r\n \r\n ,\r\n rootElement);\r\n\r\nregisterServiceWorker();\r\n\r\n","module.exports = __webpack_public_path__ + \"static/media/bg.41c0dd39.png\";","module.exports = __webpack_public_path__ + \"static/media/NewSentralCargo_320.7c305d70.png\";","module.exports = __webpack_public_path__ + \"static/media/NewSentralCargo_Wht_320.87c600bd.png\";"],"sourceRoot":""} 
\r\n \r\n