{"id":17102,"date":"2024-12-03T16:58:06","date_gmt":"2024-12-03T16:58:06","guid":{"rendered":"https:\/\/papslogistics.com\/?page_id=17102"},"modified":"2026-02-25T14:11:25","modified_gmt":"2026-02-25T14:11:25","slug":"tracking","status":"publish","type":"page","link":"https:\/\/papslogistics.com\/en\/tracking\/","title":{"rendered":"Tracking"},"content":{"rendered":"
<\/div><\/div><\/div>

Track Your Order
\nInstantly<\/span><\/h3><\/div><\/div><\/div>
<\/div><\/div><\/div><\/div><\/div>
<\/div><\/div><\/div>
<\/div><\/div><\/div>

Track Your Order
\nInstantly<\/span><\/h3><\/div><\/div><\/div>
<\/div><\/div><\/div><\/div><\/div>
<\/div><\/div><\/div>
\r\n\t
\r\n\t\t
\r\n\t\t\t\n\n \n \n \n D\u00e9tails de commande et Avis<\/title>\n <link\n rel=\"stylesheet\"\n href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.css\"\n \/>\n <link\n href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\"\n rel=\"stylesheet\"\n \/>\n <style>\n @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Jost:wght@400;500;600;700&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap\");\n\n body {\n font-family: \"Ubuntu\", serif;\n background-color: #f8f9fa;\n }\n\n .search-container {\n margin: auto;\n text-align: center;\n font-family: \"Ubuntu\", serif;\n }\n\n a {\n text-decoration: none;\n }\n\n .tracking {\n font-family: \"Ubuntu\", serif;\n padding: 20px;\n border-radius: 8px;\n width: 100%;\n justify-items: center;\n }\n\n h1 {\n color: #333;\n margin-bottom: 20px;\n }\n\n .tracking-form {\n display: flex;\n width: 85%;\n gap: 10px;\n margin-bottom: 20px;\n font-family: \"Ubuntu\", serif;\n background: #fff;\n padding: 25px 30px;\n border-radius: 10px;\n }\n\n input {\n padding: 10px;\n font-size: 16px;\n border: 1px solid #ccc;\n border-radius: 5px;\n }\n\n input[type=\"text\"] {\n flex: 1;\n padding: 10px;\n font-size: 14px;\n border: 1px solid #fff;\n border-radius: 5px;\n }\n\n select,\n textarea {\n font-size: 16px;\n }\n\n button {\n padding: 10px 40px;\n font-size: 14px;\n background-color: #f90;\n color: #fff;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s;\n }\n\n button:hover {\n background-color: #f90;\n }\n\n .order-details {\n display: flex;\n font-size: 14px;\n text-align: center;\n justify-content: space-between;\n margin: 0 auto;\n max-width: 920px;\n background-color: rgba(227, 242, 253, 0.3);\n border: 1px solid #399ebf;\n border-radius: 25px;\n font-family: \"Ubuntu\", serif;\n padding: 15px;\n }\n\n .order-details p {\n padding: 2px 20px;\n margin: 15px;\n }\n\n .tracking-status {\n width: 100%;\n background-color: #fff;\n font-size: 16px;\n transform: translate(10px, 150px);\n border-radius: 20px;\n }\n\n .status-step {\n display: flex;\n margin-bottom: 10px;\n margin-right: 65px;\n padding: 5px 12px;\n }\n\n .status-step .circle {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n margin-right: 10px;\n text-align: center;\n font-weight: 700;\n line-height: 1;\n }\n\n .status-step.completed .circle {\n background-color: #399ebf;\n color: #fff;\n border: 1px solid rgba(57, 158, 191, 0.13);\n }\n\n .status-step.pending .circle {\n background-color: #e9e9e9;\n color: #aaa;\n }\n\n .circle img {\n width: 10px;\n height: 10px;\n }\n\n .status-step .details {\n line-height: 1.5;\n flex: 1;\n }\n\n .status-step .details .label {\n font-weight: 500;\n }\n\n .status-step .details .timestamp {\n color: #555;\n font-size: 14px;\n }\n\n .status-step .details .location {\n color: #777;\n font-size: 14px;\n }\n\n .result {\n padding: 20px;\n border-radius: 10px;\n transform: translate(0, 100%);\n }\n\n .status {\n display: inline-flex;\n gap: 20px;\n padding: 10px;\n margin: 10px 0;\n border-radius: 5px;\n color: #1a224b;\n }\n\n .status.green {\n \/*background-color: #FFF;*\/\n }\n\n .status.gray {\n \/*background-color: #FFF;*\/\n }\n\n .status .check {\n align-items: center;\n justify-content: center;\n font-size: 12px;\n }\n\n .status .label {\n font-weight: 500;\n font-size: 18px;\n font-family: \"Ubuntu\", serif;\n }\n\n .status .date {\n font-size: 12px;\n font-weight: 300;\n margin-top: 5px;\n color: #1a224b;\n }\n\n .error {\n color: red;\n text-align: center;\n font-weight: 700;\n }\n\n .track-statut {\n display: inline-grid;\n justify-items: left;\n }\n\n .track {\n display: inline-flex;\n margin: 10px 0px;\n display: flex;\n flex-direction: row;\n gap: 10px;\n }\n\n .order-dt {\n text-align: center;\n transform: translate(0px, -50px);\n }\n\n .track-number {\n display: inline-flex;\n padding: 10px 25px;\n }\n\n .track-number img {\n width: 60px;\n }\n\n .track-numer-txt p {\n text-align: left;\n padding: 2px 10px;\n margin: 0;\n }\n\n .track-numer-txt {\n margin: 10px 5px;\n }\n\n .track-sender {\n display: inline-block;\n padding: 10px 25px;\n margin: 10px 5px;\n }\n\n .track-sender p {\n margin: 0;\n text-align: left;\n }\n\n .track-recip {\n display: inline-block;\n padding: 10px 25px;\n margin: 10px 5px;\n }\n\n .track-recip p {\n margin: 0;\n text-align: left;\n }\n\n .track-head {\n font-size: 16px;\n font-weight: 500;\n color: #399ebf;\n }\n\n .track-num {\n font-size: 14px;\n font-weight: 400;\n }\n\n .line {\n border: 0.3px solid rgba(57, 158, 191, 0.5);\n height: 0.3px;\n width: 50px;\n margin-top: 10px;\n border-radius: 50px;\n flex-direction: row;\n align-items: center;\n margin: 12px 10px;\n }\n\n .line-v {\n border: 0.3px solid rgba(57, 158, 191, 0.5);\n height: 20px;\n width: 0.3px;\n margin-left: 20px;\n border-radius: 50px;\n flex-direction: row;\n align-items: center;\n }\n\n .line-v:last-of-type {\n display: none;\n }\n\n .line:last-of-type {\n display: none;\n }\n\n .line-order {\n border: 0.3px solid rgba(57, 158, 191, 0.5);\n height: 60px;\n width: 0.3px;\n margin-top: 25px;\n border-radius: 50px;\n flex-direction: row;\n align-items: center;\n }\n\n .client-info,\n .receiver-info,\n .delivery-address,\n .parcels {\n background: #fff;\n border-radius: 15px;\n padding: 50px 80px;\n margin-bottom: 20px;\n }\n\n .stepper {\n display: flex;\n justify-content: center;\n gap: 0;\n margin: 50px 0;\n padding: 30px 130px;\n }\n\n .step {\n display: flex;\n flex-direction: row;\n text-align: center;\n gap: 10px;\n }\n\n .step-icon {\n width: 25px;\n height: 25px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n }\n\n .step.completed .step-icon {\n padding: 0;\n }\n\n .step.completed .step-label {\n font-weight: 500;\n color: #399ebf;\n }\n\n .step-label {\n font-size: 18px;\n font-weight: 500;\n font-family: \"Ubuntu\", serif;\n }\n\n .statut-txt {\n display: flex;\n justify-content: center;\n margin-top: 100px;\n margin-bottom: 40px;\n }\n\n .statut-txt h4 {\n font-size: 24px;\n font-weight: 500;\n text-align: center;\n font-family: \"Ubuntu\", serif;\n padding: 10px;\n }\n\n .statut-txt img {\n padding: 10px;\n }\n\n .parcel {\n display: flex;\n justify-content: space-between;\n gap: 90px;\n padding: 10px 100px;\n border: 1px solid #ddd;\n margin: 10px;\n border-radius: 15px;\n }\n\n .parcels > h4 {\n font-size: 16px;\n font-family: \"Ubuntu\", serif;\n margin-bottom: 10px;\n padding: 10px 40px;\n border-radius: 50px;\n border: 1px solid #399ebf;\n color: #399ebf;\n display: inline-flex;\n align-content: center;\n }\n\n .sect-parcel h4 {\n font-size: 16px;\n font-family: \"Ubuntu\", serif;\n }\n\n .desc-parcel {\n font-size: 16px;\n }\n\n .sect-parcel {\n display: flex;\n justify-content: space-between;\n margin: 0 104px;\n }\n\n .inputgroup {\n width: 950px;\n background-color: #fff;\n padding: 20px 15px 20px 35px;\n border-radius: 20px;\n }\n\n .all-input {\n background-image: url(https:\/\/papslogistics.com\/wp-content\/uploads\/Img-banner-1.jpg);\n position: absolute;\n width: 100%;\n height: 680px;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 0;\n background-size: cover;\n background-repeat: no-repeat;\n }\n\n .input-img {\n display: flex;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n margin-top: 20px;\n }\n\n th,\n td {\n padding: 12px;\n text-align: left;\n }\n\n td {\n color: #252e59;\n background-color: rgba(227, 242, 253, 0.2);\n }\n\n th {\n background-color: #399ebf;\n color: #fff;\n font-weight: 400;\n }\n\n th:last-child {\n border-radius: 0 10px 0 0;\n }\n\n th:first-child {\n border-radius: 10px 0 0 0;\n }\n\n tr:nth-child(even) {\n background-color: #fff;\n }\n\n tr:hover {\n background-color: #fbfbfb;\n }\n\n .rating-section,\n .feedback-section {\n margin: 35px 0;\n padding: 0 60px;\n }\n\n .rating-section h3 {\n font-size: 18px;\n color: #252e59;\n text-align: left;\n }\n\n .btn {\n padding: 10px 30px;\n margin: 5px;\n border: none;\n cursor: pointer;\n font-size: 14px;\n border-radius: 50px;\n }\n\n .btn:hover {\n border: 1px solid #399ebf;\n background-color: rgba(57, 158, 191, 0.3);\n }\n\n .btn-bad {\n border: 1px solid #757a93;\n color: #252e59;\n }\n\n .btn-decent {\n border: 1px solid #757a93;\n color: #252e59;\n }\n\n .btn-decent img {\n width: 26px;\n }\n\n .btn-love {\n border: 1px solid #757a93;\n color: #252e59;\n }\n\n .btn-selected {\n border: 1px solid #2ac3f6;\n background-color: rgba(57, 158, 191, 0.2);\n color: #0580aa;\n font-weight: 500;\n }\n\n .stars {\n display: flex;\n justify-content: left;\n gap: 5px;\n cursor: pointer;\n }\n\n .star {\n font-size: 50px;\n color: #d7d8dd;\n }\n\n .star.selected {\n color: gold;\n }\n\n textarea {\n width: 100%;\n height: 250px;\n margin-top: 10px;\n padding: 10px;\n font-size: 16px;\n background-color: rgba(117, 122, 147, 0.01);\n border: 1px solid rgba(117, 122, 147, 0.8);\n border-radius: 15px;\n }\n\n textarea::placeholder {\n font-size: 14px;\n font-weight: 300;\n color: #757a93;\n padding: 10px;\n }\n\n textarea::selection {\n border-color: #757a93;\n }\n\n .submit-btn {\n background: #399ebf;\n color: #fff;\n padding: 10px 20px;\n font-size: 18px;\n border: none;\n cursor: pointer;\n border-radius: 5px;\n margin-left: 0px;\n width: 80%;\n }\n\n .ev-papser {\n text-align: left;\n padding-top: 10px;\n }\n\n .liv-rating {\n margin-top: 50px;\n }\n\n .papser {\n margin-top: 40px;\n }\n\n .head-review {\n display: flex;\n justify-content: center;\n padding-bottom: 30px;\n }\n\n .head-review h3 {\n padding: 10px;\n font-size: 20px;\n color: #252e59;\n }\n\n .modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.4);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .modal-content {\n background-color: #fff;\n width: 50%;\n max-width: 600px;\n padding: 20px;\n border-radius: 10px;\n text-align: center;\n position: relative;\n }\n\n .close {\n position: absolute;\n top: 10px;\n right: 20px;\n font-size: 30px;\n cursor: pointer;\n }\n\n .modal button {\n background: #399ebf;\n color: #fff;\n border: none;\n padding: 10px 20px;\n margin-top: 15px;\n cursor: pointer;\n border-radius: 5px;\n }\n\n .review {\n background: #fff;\n border-radius: 15px;\n padding: 50px 80px;\n }\n\n .env-submit {\n align-content: center;\n text-align: center;\n }\n\n .bloc-statut {\n display: inline-block;\n text-align: left;\n }\n\n .step-text {\n font-size: 13px;\n color: #545f71;\n font-weight: 300;\n }\n\n .change-livraison {\n text-align: center;\n }\n\n .change-livraison h4 {\n color: #1a224b;\n font-size: 18px;\n margin-bottom: 20px;\n }\n\n .btn-change-date {\n background-color: #399ebf;\n color: #fff;\n border-radius: 50px;\n }\n\n .thankYouMessage {\n }\n\n .chg-date {\n display: inline-flex;\n }\n\n .colis {\n padding: 80px 20px;\n background-color: #399ebf;\n border-radius: 20px;\n }\n\n .container.colis {\n gap: 20px;\n margin-top: 20px;\n transform: translate(0, 65%);\n }\n\n .parcels,\n .change-livraison {\n flex: 1;\n padding: 40px 30px;\n background: #fff;\n border-radius: 8px;\n }\n\n .btn-confirm {\n background-color: #f90;\n color: #fff;\n border: none;\n padding: 10px;\n cursor: pointer;\n border-radius: 5px;\n width: 100%;\n margin-top: 30px;\n }\n\n .btn-confirm:hover {\n background-color: #de8602;\n }\n\n .btn-confirm::selection {\n background-color: #f90;\n }\n\n .search {\n justify-items: center;\n display: inline-block;\n padding: 30px;\n width: 100%;\n }\n\n .text-header {\n margin-top: 350px;\n padding: 0px 250px;\n }\n\n .text-header h1 {\n font-size: 70px;\n font-weight: 500;\n text-align: left;\n color: #fff;\n }\n\n .quality-options {\n margin-top: 20px;\n }\n\n .quality-btn {\n background-color: transparent;\n border: 1px solid #757a93;\n color: #252e59;\n border-radius: 50px;\n padding: 8px 12px;\n cursor: pointer;\n margin-right: 5px;\n margin-bottom: 5px;\n }\n\n .quality-btn:hover {\n background-color: rgba(57, 158, 191, 0.3);\n border-color: #2ac3f6;\n }\n .quality-btn:disabled{\n background-color:#ddd\n border-color: #2ac3f6;\n }\n\n .quality-btn.btn-selected {\n background-color: #399ebf;\n color: #fff;\n border-color: #2ac3f6;\n }\n\n\n .container-fluid {\n margin-bottom: 20px;\n }\n\n .all-input .inputgroup {\n margin-bottom: 20px;\n }\n\n .alert.alert-danger {\n color: #a94442;\n background-color: #f2dede;\n padding: 10px;\n border: 1px solid #ebccd1;\n border-radius: 4px;\n margin-bottom: 20px;\n transform: translate(0px, -50px);\n }\n\n .loader {\n text-align: center;\n padding: 20px;\n font-size: 18px;\n }\n\n .flatpickr-input[readonly] {\n cursor: pointer;\n border: 1px solid #ccc;\n border-radius: 5px;\n padding: 12px;\n }\n\n .delivery-container {\n display: flex;\n gap: 20px;\n margin-top: 20px;\n padding: 80px 50px;\n background-color: #399ebf;\n border-radius: 10px;\n }\n\n .col-8 {\n flex: 2;\n padding: 20px;\n border-radius: 8px;\n }\n\n .col-4 {\n flex: 1;\n padding: 20px;\n border-radius: 8px;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n margin-top: 10px;\n }\n\n .statut-txt,\n .order-details,\n .stepper {\n margin-bottom: 20px;\n }\n\n .line {\n vertical-align: middle;\n margin-right: 10px;\n }\n\n .btn-details {\n background-color: #399ebf;\n color: #fff;\n border: none;\n padding: 10px 50px;\n border-radius: 50px;\n cursor: pointer;\n margin-bottom: 20px;\n display: none;\n }\n\n .btn-details:hover {\n background-color: #0580aa;\n }\n\n .modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: rgba(0, 0, 0, 0.6);\n }\n\n .modal-content {\n background-color: #fefefe;\n margin: 5% auto;\n padding: 0;\n border: 1px solid #888;\n width: 80%;\n max-width: 500px;\n border-radius: 8px;\n position: relative;\n }\n\n .close-modal {\n color: #aaa;\n position: absolute;\n top: 10px;\n right: 20px;\n font-size: 28px;\n font-weight: 700;\n cursor: pointer;\n }\n\n .close-modal:hover,\n .close-modal:focus {\n color: #000;\n }\n\n .modal-content h3 {\n font-size: 18px;\n text-align: left;\n color: #399ebf;\n padding: 10px;\n }\n\n .head-modal {\n padding: 10px;\n border-bottom: 1px solid rgba(57, 158, 191, 0.3);\n }\n\n .modal-status-list {\n max-height: 450px;\n overflow-y: auto;\n margin-bottom: 20px;\n padding: 10px 40px;\n }\n\n .modal-status {\n padding: 5px 10px;\n }\n\n .modal-status:last-child {\n border-bottom: none;\n }\n\n .review {\n margin-top: 30px;\n }\n\n .head-review {\n text-align: center;\n margin-bottom: 20px;\n }\n\n .head-review img {\n width: 40px;\n margin-bottom: 10px;\n }\n\n .feedback-section textarea {\n width: 100%;\n height: 250px;\n padding: 20px;\n font-size: 16px;\n }\n\n .quality-options {\n margin-top: 20px;\n }\n\n .driver-rating {\n margin-bottom: 20px;\n }\n\n .rating-buttons {\n margin-top: 20px;\n }\n\n .rating-btn,\n .nps-btn {\n background-color: transparent;\n border: 1px solid #ccc;\n border-radius: 50%;\n color: #1a224b;\n width: 40px;\n height: 40px;\n margin-right: 5px;\n cursor: pointer;\n padding: 0;\n }\n\n .rating-btn.btn-selected,\n .nps-btn.btn-selected {\n background-color: rgba(57, 158, 191, 0.3);\n color: #399ebf;\n border-color: #2ac3f6;\n }\n\n .rating-btn:hover,\n .nps-btn:hover {\n background-color: rgba(57, 158, 191, 0.2);\n border-color: #2ac3f6;\n }\n\n .change-livraison select {\n width: 100%;\n padding: 14px;\n font-size: 14px;\n border: 1px solid #ccc;\n border-radius: 5px;\n color: #7b7979;\n }\n\n .change-livraison option::-ms-value {\n color: #ccc;\n }\n\n #result {\n margin-top: 760px;\n }\n\n input[type=\"checkbox\" i] {\n background-color: #0580aa;\n }\n\n #suggestions-container label {\n font-size: 16px;\n padding: 5px;\n }\n\n #quality-suggestions-container label {\n font-size: 16px;\n padding: 5px;\n }\n\n .head-conf-modal {\n padding-top: 15px;\n border-bottom: 1px solid rgba(57, 158, 191, 0.3);\n }\n\n .head-conf-modal h3 {\n padding: 10px 20px;\n }\n\n .btn-conf-modal {\n padding: 10px 20px;\n }\n\n .btn-conf-modal button {\n font-size: 18px;\n margin-bottom: 10px;\n }\n\n #confirmMessage {\n margin: 12px 20px;\n }\n\n .num-commande {\n display: grid;\n padding: 20px 50px;\n display: none;\n }\n\n .num-commande input {\n border: 1px solid #ccc;\n }\n\n .num-commande label {\n text-align: left;\n margin-bottom: 12px;\n }\n\n .confirm {\n font-size: 15px;\n }\n\n .round {\n width: 5px;\n height: 5px;\n border: 1px solid #e9e9e9;\n border-radius: 50px;\n }\n\n .step-date {\n font-size: 12px;\n margin-bottom: 0;\n }\n\n .quality-options {\n margin-top: 20px;\n }\n\n .quality-btn {\n background-color: transparent;\n border: 1px solid #757a93;\n color: #252e59;\n border-radius: 50px;\n padding: 8px 12px;\n cursor: pointer;\n margin-right: 5px;\n margin-bottom: 5px;\n }\n\n .quality-btn:hover {\n background-color: rgba(57, 158, 191, 0.3);\n border-color: #2ac3f6;\n }\n\n .quality-btn.btn-selected {\n background-color: #399ebf;\n color: #fff;\n border-color: #2ac3f6;\n }\n\n .user-info-section {\n padding: 0 190px 0 60px;\n }\n\n #papser-rating-buttons,\n #quality-rating-buttons {\n display: flex;\n }\n\n label {\n display: inline-block;\n margin: 5px;\n text-align: left;\n }\n\n .thankYouMessage h3 {\n font-size: 18px;\n }\n\n .thankYouMessage p {\n font-size: 16px;\n }\n\n .thankYouMessage button {\n margin: 0;\n padding: 5px 10px;\n width: 30%;\n font-size: 14px;\n }\n\n @media only screen and (min-width: 768px) {\n .order {\n margin: 0px 200px;\n }\n\n .exept {\n margin: 0px 150px;\n padding: 30px 60px;\n }\n\n .faq {\n margin: auto 100px;\n }\n\n .inputgroup {\n width: 740px;\n }\n\n .text-header {\n margin-top: 350px;\n padding: 0px 50px;\n }\n\n .order-details {\n flex: none;\n }\n\n .rating-section,\n .feedback-section {\n padding: 0;\n }\n\n .submit-btn {\n width: 100%;\n }\n }\n\n @media only screen and (min-width: 1024px) {\n .faq {\n margin: auto 100px;\n }\n\n .inputgroup {\n width: 1000px;\n }\n\n .submit-btn {\n width: 100%;\n }\n\n .rating-section,\n .feedback-section {\n padding: 0;\n }\n\n .text-header {\n margin-top: 350px;\n padding: 0px 220px;\n }\n }\n\n @media only screen and (max-width: 600px) {\n .tracking-form {\n width: 100%;\n padding: 20px;\n border-radius: 20px;\n margin-top: -110px;\n }\n\n .inputgroup {\n width: 100%;\n }\n\n .col-lg-9,\n .col-lg-3 {\n width: 100%;\n }\n\n .order-details,\n .order-details-sh {\n margin: 0 10px;\n flex-direction: column;\n align-items: center;\n }\n\n .track-number {\n padding: 10px 5px;\n margin: 0;\n }\n\n .track-sender {\n padding: 10px 5px;\n margin: 0;\n }\n\n .track-recip {\n padding: 10px 5px;\n margin: 0;\n }\n\n .btn-details {\n margin: 10px;\n visibility: hidden;\n }\n\n #result {\n margin-top: 10%;\n }\n\n .delivery-container {\n flex-direction: column;\n padding: 0px;\n }\n\n .parcels {\n padding: 24px 15px;\n }\n\n .parcels > h4 {\n font-size: 14px;\n padding: 5px 20px;\n }\n\n th {\n font-size: 12px;\n padding: 10px;\n }\n\n td {\n font-size: 12px;\n padding: 10px;\n }\n\n .review {\n padding: 20px;\n }\n\n .submit-btn {\n margin-left: 0;\n width: 100%;\n }\n\n .stepper {\n flex-direction: column;\n padding: 10px 20px;\n }\n\n .step {\n margin-bottom: 0px;\n }\n\n .step-label {\n font-size: 20px;\n }\n\n .status .label {\n font-size: 18px;\n font-weight: 500;\n }\n\n table thead tr th:first-child,\n table tbody tr td:first-child {\n display: none;\n }\n\n button {\n width: 90%;\n margin-top: 10px;\n }\n\n .inputgroup {\n padding: 20px 35px 20px 35px;\n }\n\n .line-order {\n height: 0.3px;\n width: 30px;\n margin: 0;\n }\n\n .line {\n height: 25px;\n width: 0.3px;\n margin-bottom: 10px;\n }\n\n .rating-section,\n .feedback-section {\n margin: 25px 0;\n padding: 0 0px;\n }\n\n .head-review {\n padding-bottom: 0;\n margin-bottom: 0;\n }\n\n .quality-btn {\n font-size: 16px;\n padding: 8px 12px;\n cursor: pointer;\n margin-right: 5px;\n margin-bottom: 5px;\n }\n\n #quality-rating-buttons {\n display: inline-block;\n }\n\n .rating-btn {\n font-size: 16px;\n width: 40px;\n height: 40px;\n }\n\n .rating-section h3 {\n font-size: 20px;\n color: #252e59;\n text-align: left;\n }\n\n .head-review h3 {\n font-size: 18px;\n padding: 5px;\n }\n\n .statut-txt {\n margin-top: 460px;\n }\n\n .all-input {\n height: 380px;\n }\n\n .statut-txt h4 {\n font-size: 18px;\n padding: 15px 5px;\n }\n\n .search {\n justify-items: center;\n display: inline-block;\n margin-top: 0px;\n padding: 0;\n width: 90%;\n }\n\n .step-text {\n font-size: 14px;\n }\n\n .text-header {\n padding: 20px;\n visibility: visible;\n margin-top: 0;\n }\n\n .text-header h1 {\n margin-top: 100px;\n font-weight: 600;\n font-size: 35px;\n color: #fff;\n }\n\n .order {\n background-color: rgba(227, 242, 253, 0.3);\n border: 1px solid #399ebf;\n border-radius: 25px;\n font-family: \"Ubuntu\", serif;\n padding: 45px;\n margin: 0;\n flex-direction: column;\n }\n\n .stepper {\n background-color: rgba(227, 242, 253, 0.3);\n border: 1px solid #399ebf;\n border-radius: 25px;\n font-family: \"Ubuntu\", serif;\n padding: 45px;\n }\n\n .thankYouMessage h3 {\n margin-top: 30px;\n font-size: 16px;\n }\n\n .thankYouMessage {\n transform: translate(0, 0);\n width: 100%;\n }\n\n .thankYouMessage p {\n font-size: 14px;\n }\n\n .thankYouMessage button {\n margin: 0;\n padding: 5px 10px;\n font-size: 14px;\n width: 100%;\n }\n\n .exept {\n padding: 0rem;\n margin: 1rem 0.5rem 8px;\n }\n\n .track-exception img {\n width: 40px;\n }\n\n .alert.alert-danger {\n transform: translate(0px, 360px);\n }\n\n .faq {\n margin-top: 410px;\n }\n }\n\n .track-exception img {\n justify-content: flex-start;\n margin-bottom: 30px;\n padding: 10px;\n vertical-align: top;\n }\n\n .social-media {\n display: inline-block;\n margin-bottom: 10px;\n }\n\n .social-media img {\n width: 40px;\n height: 40px;\n padding: 5px;\n text-align: center;\n justify-content: center;\n }\n\n .text-avis {\n font-size: 14px;\n }\n\n .line-separation {\n width: 40px;\n height: 1px;\n color: #545f71;\n }\n\n .soc-media {\n margin-top: 30px;\n }\n\n .order-details-sh {\n display: flex;\n flex-wrap: wrap;\n font-size: 14px;\n text-align: center;\n justify-content: space-between;\n margin: 0 auto;\n max-width: 920px;\n background-color: rgba(227, 242, 253, 0.3);\n border: 1px solid #399ebf;\n border-radius: 25px;\n font-family: \"Ubuntu\", serif;\n padding: 15px;\n }\n\n .order {\n background-color: rgba(227, 242, 253, 0.3);\n border: 1px solid #399ebf;\n border-radius: 25px;\n font-family: \"Ubuntu\", serif;\n text-align: left;\n padding: 30px 60px;\n flex-direction: column;\n }\n\n .track-exception {\n display: flex;\n margin-top: 1rem;\n padding: 0.5rem 1rem;\n background: rgba(252, 204, 204, 0.5);\n border: 1px solid #f56767;\n border-radius: 14px;\n }\n\n .track-exception .track-head {\n font-size: 18px;\n font-weight: 500;\n margin-bottom: 0.25rem;\n color: #f56767;\n }\n\n .track-exception .excep-txt {\n color: #f56767;\n font-size: 16px;\n font-weight: 400;\n }\n\n .text-excep {\n margin-top: 10px;\n }\n\n .line-sh {\n border: 0.3px solid rgba(57, 158, 191, 0.3);\n height: 50px;\n margin-top: 15px;\n border-radius: 50px;\n }\n\n .exept {\n text-align: left;\n }\n\n .loader-container {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 9999;\n }\n\n .loader {\n border: 6px solid #f3f3f3;\n border-top: 6px solid #ff9900;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n animation: spin 1s linear infinite;\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n\n .faq {\n padding: 20px;\n border-radius: 10px;\n font-family: \"Ubuntu\", sans-serif;\n }\n\n .faq h2 {\n text-align: center;\n color: #333;\n margin-bottom: 20px;\n font-size: 26px;\n font-family: \"Ubuntu\";\n }\n\n .faq-item {\n border-bottom: 1px solid #ddd;\n }\n\n .faq-item button:hover {\n background-color: transparent;\n }\n\n .faq-question {\n background: none;\n border: none;\n padding: 24px;\n width: 100%;\n font-family: \"Ubuntu\";\n text-align: left;\n font-size: 16px;\n font-weight: 500;\n color: #333;\n cursor: pointer;\n position: relative;\n transition: color 0.3s ease;\n }\n\n .faq-question::after {\n content: \"+\";\n position: absolute;\n right: 15px;\n font-size: 18px;\n transition: transform 0.3s ease;\n }\n\n .faq-question.active {\n color: #1a224b;\n }\n\n .faq-question.active::after {\n content: \"\u2212\";\n transform: rotate(180deg);\n }\n\n .faq-answer {\n max-height: 0;\n overflow: hidden;\n background: #fff;\n color: #555;\n font-size: 15px;\n padding: 0 15px;\n transition:\n max-height 0.4s ease,\n padding 0.3s ease;\n border-left: 3px solid transparent;\n }\n\n .faq-answer.show {\n padding: 24px 15px;\n font-size: 16px;\n border-left: 3px solid #1a224b;\n max-height: 500px;\n }\n\n .faq-item:last-child {\n border-bottom: none;\n }\n .submit-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n <\/style>\n <\/head>\n\n <body>\n <div class=\"container-fluid\">\n <div class=\"row\">\n <div class=\"col-lg-12\">\n <div class=\"mb-4 all-input\">\n <div class=\"text-header\">\n <h1>Suivez votre commande Instantan\u00e9ment<\/h1>\n <\/div>\n <div class=\"search\">\n <div class=\"inputgroup\">\n <div class=\"row\">\n <div class=\"col-lg-9 col-md-12\">\n <div class=\"input-img\">\n <img decoding=\"async\"\n src=\"https:\/\/papslogistics.com\/wp-content\/uploads\/package-search.svg\"\n alt=\"\"\n \/>\n <input\n type=\"text\"\n class=\"form-control\"\n id=\"orderId\"\n placeholder=\"Entrez le num\u00e9ro de commande\"\n \/>\n <\/div>\n <\/div>\n <div class=\"col-lg-3 col-md-12\">\n <button id=\"searchButton\">\n Suivre ma commande\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"loader\" class=\"loader-container\" style=\"display: none\">\n <div class=\"loader\"><\/div>\n <\/div>\n <div id=\"result\"><\/div>\n <\/div>\n <div style=\"text-align: center; margin-top: 20px\">\n <button\n class=\"btn-details\"\n id=\"btnDetails\"\n onclick=\"openStatusModal()\"\n style=\"display: none\"\n >\n D\u00e9tails de tous les statuts\n <\/button>\n <\/div>\n <div\n class=\"delivery-container\"\n id=\"delivery-container\"\n style=\"display: none\"\n >\n <div class=\"col-8 col-lg-9 col-md-12\" id=\"colis-container\"><\/div>\n <\/div>\n <div id=\"review-section\" class=\"review\">\n <div class=\"head-review\">\n <img decoding=\"async\"\n src=\"https:\/\/papslogistics.com\/wp-content\/uploads\/message-chat-circle.svg\"\n alt=\"\"\n \/>\n <h3>\u00c9valuez votre Livraison<\/h3>\n <\/div>\n <div id=\"review-form\">\n <div class=\"row\">\n <div class=\"col-lg-6\">\n <div class=\"rating-section papser\">\n <h3>\n Sur une \u00e9chelle de 0 \u00e0 10 comment \u00e9valueriez\n vous la qualit\u00e9 de la prestation du livreur ?\n (10 \u00e9tant la plus grande note)\n <\/h3>\n <div id=\"papser-rating-buttons\">\n <button\n class=\"btn rating-btn\"\n onclick=\"selectPapserRating(0, this)\"\n >\n 0\n <\/button>\n <button\n class=\"btn rating-btn\"\n onclick=\"selectPapserRating(1, this)\"\n >\n 1\n <\/button>\n <button\n class=\"btn rating-btn\"\n onclick=\"selectPapserRating(2, this)\"\n >\n 2\n <\/button>\n <button\n class=\"btn rating-btn\"\n onclick=\"selectPapserRating(3, this)\"\n >\n 3\n <\/button>\n <button\n class=\"btn rating-btn\"\n onclick=\"selectPapserRating(4, this)\"\n >\n 4\n <\/button>\n <button\n class=\"btn rating-btn\"\n onclick=\"selectPapserRating(5, this)\"\n >\n 5\n <\/button>\n <button\n class=\"btn rating-btn\"\n onclick=\"selectPapserRating(6, this)\"\n >\n 6\n <\/button>\n <button\n class=\"btn rating-btn\"\n onclick=\"selectPapserRating(5, this)\"\n >\n 7\n <\/button>\n <button\n class=\"btn rating-btn\"\n onclick=\"selectPapserRating(8, this)\"\n >\n 8\n <\/button>\n <button\n class=\"btn rating-btn\"\n onclick=\"selectPapserRating(9, this)\"\n >\n 9\n <\/button>\n <button\n class=\"btn rating-btn\"\n onclick=\"selectPapserRating(10, this)\"\n >\n 10\n <\/button>\n <\/div>\n <div\n id=\"papserSuggestions\"\n style=\"margin-top: 10px\"\n ><\/div>\n <\/div>\n <div class=\"rating-section papser\">\n <h3>\n Sur une \u00e9chelle de 0 \u00e0 10, quelle est la\n probabilit\u00e9 pour que vous recommandiez notre\n marque \u00e0 un ami\u2009?\n <\/h3>\n <div id=\"papser-nps-buttons\">\n <button\n class=\"btn nps-btn\"\n onclick=\"selectNpsRating(0, this)\"\n >\n 0\n <\/button>\n <button\n class=\"btn nps-btn\"\n onclick=\"selectNpsRating(1, this)\"\n >\n 1\n <\/button>\n <button\n class=\"btn nps-btn\"\n onclick=\"selectNpsRating(2, this)\"\n >\n 2\n <\/button>\n <button\n class=\"btn nps-btn\"\n onclick=\"selectNpsRating(3, this)\"\n >\n 3\n <\/button>\n <button\n class=\"btn nps-btn\"\n onclick=\"selectNpsRating(4, this)\"\n >\n 4\n <\/button>\n <button\n class=\"btn nps-btn\"\n onclick=\"selectNpsRating(5, this)\"\n >\n 5\n <\/button>\n <button\n class=\"btn nps-btn\"\n onclick=\"selectNpsRating(6, this)\"\n >\n 6\n <\/button>\n <button\n class=\"btn nps-btn\"\n onclick=\"selectNpsRating(7, this)\"\n >\n 7\n <\/button>\n <button\n class=\"btn nps-btn\"\n onclick=\"selectNpsRating(8, this)\"\n >\n 8\n <\/button>\n <button\n class=\"btn nps-btn\"\n onclick=\"selectNpsRating(9, this)\"\n >\n 9\n <\/button>\n <button\n class=\"btn nps-btn\"\n onclick=\"selectNpsRating(10, this)\"\n >\n 10\n <\/button>\n <\/div>\n <div\n id=\"papserSuggestions\"\n style=\"margin-top: 10px\"\n ><\/div>\n <\/div>\n <div class=\"rating-section quality\">\n <h3>Comment s\u2019est pass\u00e9 la livraison ?<\/h3>\n <div id=\"quality-rating-buttons\">\n <button\n class=\"btn quality-btn\"\n id=\"mauvaise\"\n onclick=\" selectQualityRating('mauvaise', this) \"\n >\n Mauvaise\n <\/button>\n <button\n class=\"btn quality-btn\"\n id=\"a-bien\"\n onclick=\" selectQualityRating('assez bien', this) \"\n >\n Assez bien\n <\/button>\n <button\n class=\"btn quality-btn\"\n id=\"bien\"\n onclick=\"selectQualityRating('bien', this)\"\n >\n Bien\n <\/button>\n <button\n class=\"btn quality-btn\"\n id=\"tres-bien\"\n onclick=\" selectQualityRating('tr\u00e8s bien', this) \"\n >\n Tr\u00e8s bien\n <\/button>\n <\/div>\n <div\n id=\"qualitySuggestions\"\n style=\"margin-top: 10px\"\n ><\/div>\n <\/div>\n <\/div>\n <div class=\"col-lg-6\">\n <div class=\"feedback-section\">\n <textarea\n id=\"comment\"\n placeholder=\"Partagez votre exp\u00e9rience...\"\n ><\/textarea>\n <\/div>\n <button\n class=\"submit-btn\"\n onclick=\"submitFeedback(this)\"\n >\n Subscribe\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <div\n id=\"thankYouMessage\"\n class=\"thankYouMessage\"\n style=\"display: none; text-align: center\"\n >\n <h3>Merci pour votre avis ! \ud83c\udf89<\/h3>\n <p>Votre retour nous aide \u00e0 am\u00e9liorer notre service.<\/p>\n <button class=\"submit-btn\" onclick=\"resetReviewForm()\">\n OK\n <\/button>\n <div class=\"row\">\n <div class=\"soc-media col-lg-12\">\n <span class=\"line-separation\"><\/span>\n <h4 class=\"text-avis\">\n Suivez-nous sur les r\u00e9seaux sociaux\n <\/h4>\n <div class=\"social-media\">\n <a href=\"https:\/\/www.facebook.com\/Papsapp\"\n ><img decoding=\"async\"\n src=\"https:\/\/papslogistics.com\/wp-content\/uploads\/facebook.png\"\n alt=\"\"\n \/><\/a>\n <a href=\"https:\/\/www.instagram.com\/paps_sn\/\"\n ><img decoding=\"async\"\n src=\"https:\/\/papslogistics.com\/wp-content\/uploads\/instagram.png\"\n alt=\"\"\n \/><\/a>\n <a href=\"https:\/\/sn.linkedin.com\/company\/paps\"\n ><img decoding=\"async\"\n src=\"https:\/\/papslogistics.com\/wp-content\/uploads\/linkedin.png\"\n alt=\"\"\n \/><\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"statusModal\" class=\"modal\" style=\"display: none\">\n <div class=\"modal-content\">\n <div class=\"head-modal\">\n <span class=\"close-modal\" onclick=\"closeStatusModal()\">\n <img decoding=\"async\"\n src=\"https:\/\/papslogistics.com\/wp-content\/uploads\/x-circle-1.svg\"\n alt=\"\"\n \/>\n <\/span>\n <h3>D\u00e9tails de la commande<\/h3>\n <\/div>\n <div id=\"modalStatusList\" class=\"modal-status-list\"><\/div>\n <\/div>\n <\/div>\n <div id=\"dateConfirmModal\" class=\"modal\" style=\"display: none\">\n <div class=\"modal-content\">\n <div class=\"head-conf-modal\">\n <span class=\"close-modal\" onclick=\"closeDateConfirmModal()\">\n <img decoding=\"async\"\n src=\"https:\/\/papslogistics.com\/wp-content\/uploads\/x-circle-1.svg\"\n alt=\"\"\n \/>\n <\/span>\n <h3>Confirmer le changement de date<\/h3>\n <\/div>\n <p id=\"confirmMessage\"><\/p>\n <div class=\"num-commande\">\n <label for=\"orderUidInput\"\n >Entrer le num\u00e9ro de la commande<\/label\n>\n <input\n type=\"text\"\n id=\"orderUidInput\"\n placeholder=\"Order UID\"\n value=\"\"\n \/>\n <\/div>\n <div class=\"btn-conf-modal\">\n <button class=\"btn-confirm\" onclick=\"confirmReschedule()\">\n Confirmer\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"faq\">\n <h2>Frequently Asked Questions<\/h2>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\">\n Comment acc\u00e9der au suivi de mon colis ?\n <\/button>\n <div class=\"faq-answer\">\n D\u00e8s que votre commande est exp\u00e9di\u00e9e, vous recevez un message\n (SMS) contenant un lien de suivi. Il vous suffit de cliquer\n dessus pour acc\u00e9der \u00e0 votre page de tracking en temps r\u00e9el,\n sans avoir besoin de vous connecter.\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\">\n Que puis-je voir sur la page de suivi ?\n <\/button>\n <div class=\"faq-answer\">\n Votre page de suivi vous indique en temps r\u00e9el : Le statut\n actuel de votre commande La date et l\u2019heure estim\u00e9es de\n livraison\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\">\n Mon lien ne fonctionne plus, que faire ?\n <\/button>\n <div class=\"faq-answer\">\n Le lien reste actif jusqu\u2019\u00e0 la livraison de votre colis. Si\n vous rencontrez un probl\u00e8me : V\u00e9rifiez que vous avez bien\n cliqu\u00e9 sur le dernier message re\u00e7u Essayez d\u2019ouvrir le lien\n depuis un autre navigateur ou appareil Si le probl\u00e8me\n persiste, contactez notre service client via le bouton\n d\u2019assistance en bas de page\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\">\n \u00c0 quelle fr\u00e9quence les informations sont-elles mises \u00e0 jour\n ?\n <\/button>\n <div class=\"faq-answer\">\n Le statut est mis \u00e0 jour automatiquement et en temps r\u00e9el, \u00e0\n chaque changement effectu\u00e9 par le livreur ou le syst\u00e8me de\n livraison.\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\">\n Puis-je reprogrammer ma livraison ?\n <\/button>\n <div class=\"faq-answer\">\n Si l\u2019option est disponible, vous verrez un bouton \u00ab Modifier\n la date de livraison \u00bb directement sur votre page de suivi\n (jours, cr\u00e9neaux horaires). Sinon, contactez notre support.\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\">\n Mon lien de tracking est-il s\u00e9curis\u00e9 ?\n <\/button>\n <div class=\"faq-answer\">\n Oui, chaque lien est unique. Seule la personne ayant re\u00e7u le\n lien peut acc\u00e9der \u00e0 vos informations de suivi.\n <\/div>\n <\/div>\n <\/div>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\"><\/script>\n <script>\n const apiUrl = \"https:\/\/paps-api.papslogistics.com\/orders\/fetch\/\";\n const token = \"\";\n const googleSheetUrl =\n \"https:\/\/script.google.com\/macros\/s\/AKfycbxZxJUQnX_xq8_VQwSIXJR0GnERCkIkn0ynPL_2ocpmDyxrGIJAY582U93qU7SJpDpH\/exec\";\n const googleEmailUrl =\n \"https:\/\/script.google.com\/macros\/s\/AKfycbyEMAIL_SCRIPT\/exec\";\n const rescheduleApiUrl =\n \"https:\/\/api.papslogistics.com\/orders\/fetch\";\n const exportApiUrl =\n \"https:\/\/script.google.com\/macros\/s\/AKfycbymBEbqj5rNsPoHmmSFaB83iTgr6vDoozttqgPpa1kTSHWkIuobUMys5yZ0oUHU-Xw0\/exec\";\n const importApiUrl =\n \"https:\/\/script.google.com\/macros\/s\/AKfycbxZZ5bhKxIY6-pDbYjlN1WdC7-iGCc_o_U7ZjJbIFGMb2ZjQipE2pcJafTdLjEmiR6K\/exec\";\n const sheinUrl =\n \"https:\/\/script.google.com\/macros\/s\/AKfycbxfJJG97TA7H1uRiIcTSggbqRJ_VudIzUxNbohBuoJe_YF4keYkVqyhJBqnkKS9cdTn\/exec\";\n\n let orderDetails = {};\n let selectedPapserRating = null;\n let driverSuggestions = [];\n let qualitySuggestions = [];\n let selectedStars = 0;\n let selectedQualityRating = null;\n let selectedNpsRating = null;\n const mauvaiseBtn = document.getElementById(\"mauvaise\");\n const bienBtn = document.getElementById(\"bien\");\n const aBienBtn = document.getElementById(\"a-bien\");\n const tresBienBtn = document.getElementById(\"tres-bien\");\n const allbtns = [mauvaiseBtn, bienBtn, aBienBtn, tresBienBtn];\n const ranges = [\n { range: [0, 1, 2, 3, 4, 5], value: [mauvaiseBtn] },\n { range: [6, 7], value: [mauvaiseBtn, aBienBtn] },\n { range: [7, 8], value: [bienBtn, aBienBtn] },\n { range: [9, 10], value: [tresBienBtn, bienBtn] },\n ];\n\n function getMapper(num) {\n return ranges.find((r) => r.range.includes(num))?.value;\n }\n allbtns.forEach((btn) => {\n btn.disabled = true;\n });\n const activateBtns = (num) => {\n \/\/ const numb =\n \/\/ Number(selectedNpsRating) + Number(selectedPapserRating);\n \/\/ const avg = numb > 0 ? numb \/ 2 : num;\n \/\/ const realNumber = Math.round(avg);\n \/\/ console.log({ realNumber });\n allbtns.forEach((btn) => {\n btn.disabled = true;\n });\n selectedQualityRating = null;\n suggestions = [];\n document\n .querySelectorAll(\"#quality-rating-buttons .btn\")\n .forEach((btn) => btn.classList.remove(\"btn-selected\"));\n const btns = getMapper(num);\n btns.forEach((btn) => {\n btn.disabled = false;\n });\n };\n document.addEventListener(\"DOMContentLoaded\", function () {\n document.getElementById(\"review-section\").style.display =\n \"none\";\n flatpickr(\"#dateTimePicker\", {\n enableTime: false,\n dateFormat: \"Y-m-d\",\n minDate: \"today\",\n locale: \"fr\",\n });\n document.getElementById(\"statusModal\").style.display = \"none\";\n document.getElementById(\"dateConfirmModal\").style.display =\n \"none\";\n });\n\n document\n .getElementById(\"searchButton\")\n .addEventListener(\"click\", () => {\n const orderId = document\n .getElementById(\"orderId\")\n .value.trim();\n if (orderId) {\n history.pushState(\n null,\n \"\",\n \"?uid=\" + encodeURIComponent(orderId),\n );\n }\n fetchOrderDetails(orderId);\n });\n\n document.addEventListener(\"DOMContentLoaded\", () => {\n const params = new URLSearchParams(window.location.search);\n const trackingCode = params.get(\"uid\");\n if (trackingCode) {\n document.getElementById(\"orderId\").value = trackingCode;\n fetchOrderDetails(trackingCode);\n }\n });\n document.querySelectorAll(\".faq-question\").forEach((button) => {\n button.addEventListener(\"click\", () => {\n const answer = button.nextElementSibling;\n\n document.querySelectorAll(\".faq-answer\").forEach((a) => {\n if (a !== answer) {\n a.classList.remove(\"show\");\n a.previousElementSibling.classList.remove(\"active\");\n }\n });\n button.classList.toggle(\"active\");\n answer.classList.toggle(\"show\");\n });\n });\n\n async function fetchOrderDetails(orderId) {\n if (orderId.startsWith(\"SN\")) {\n searchOrder(orderId);\n return;\n }\n const resultDiv = document.getElementById(\"result\");\n resultDiv.innerHTML = '<div class=\"loader\"><\/div>';\n document.getElementById(\"review-section\").style.display =\n \"none\";\n document.getElementById(\"delivery-container\").style.display =\n \"none\";\n document.getElementById(\"btnDetails\").style.display = \"none\";\n\n if (!orderId) {\n displayError(\n \"Veuillez entrer un num\u00e9ro de commande.\",\n resultDiv,\n );\n return;\n }\n\n try {\n const response = await fetch(`${apiUrl}\/${orderId}`, {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n });\n\n if (!response.ok) {\n throw new Error(\n \"Erreur lors de la r\u00e9cup\u00e9ration des donn\u00e9es.\",\n );\n }\n\n const data = await response.json();\n if (data.code === 200) {\n const prefix = orderId.startsWith(\"PP-\")\n ? \"PP\"\n : \"DEFAULT\";\n orderDetails = {\n shipmentId: data.data.uid,\n sender: data.data.client.companyName,\n receiver: `${data.data.receiver.firstname} ${data.data.receiver.lastname}`,\n receiverPhone: data.data.receiver.phoneNumber,\n jobType:\n data.data.mission && data.data.mission.jobType\n ? data.data.mission.jobType.toUpperCase()\n : null,\n activities: data.data.activities,\n prefix: prefix,\n status: data?.data?.status,\n country: data?.data?.client?.address?.country,\n driverName:\n `${data?.data?.papser?.firstname || \"\"} ${data?.data?.papser?.lastname || \"\"}` ||\n null,\n driverPhone:\n data?.data?.papser?.phoneNumber || null,\n };\n\n displayOrderDetails(data.data, resultDiv);\n\n if (\n orderDetails.prefix === \"PP\" &&\n orderDetails.activities &&\n orderDetails.activities.length > 0\n ) {\n setTimeout(() => {\n document.getElementById(\n \"btnDetails\",\n ).style.display = \"inline-block\";\n }, 300);\n } else {\n document.getElementById(\n \"btnDetails\",\n ).style.display = \"none\";\n }\n document.getElementById(\n \"delivery-container\",\n ).style.display = \"flex\";\n\n const STATUS_TO_REVIEW = [\n \"DELIVERED\",\n \"CANCELLED\",\n \"FAILED\",\n ];\n if (\n orderDetails?.status &&\n STATUS_TO_REVIEW.includes(\n orderDetails.status.toUpperCase(),\n )\n ) {\n document.getElementById(\n \"review-section\",\n ).style.display = \"block\";\n } else {\n document.getElementById(\n \"review-section\",\n ).style.display = \"none\";\n }\n } else {\n displayError(\n data.message || \"Donn\u00e9es non trouv\u00e9es.\",\n resultDiv,\n );\n }\n } catch (error) {\n displayError(\"Erreur de connexion au serveur.\", resultDiv);\n console.error(error);\n }\n }\n\n async function searchOrder(trackingID) {\n const resultDiv = document.getElementById(\"result\");\n const loader = document.getElementById(\"loader\");\n\n resultDiv.innerHTML = '<div class=\"loader\"><\/div>';\n if (!trackingID) {\n displayError(\n \"Veuillez entrer un num\u00e9ro de suivi.\",\n resultDiv,\n );\n return;\n }\n try {\n loader.style.display = \"flex\";\n\n const [exportData, importData, sheinData] =\n await Promise.allSettled([\n fetch(`${exportApiUrl}?ID=${trackingID}`).then(\n (res) => res.json(),\n ),\n fetch(`${importApiUrl}?ID=${trackingID}`).then(\n (res) => res.json(),\n ),\n fetch(`${sheinUrl}?ID=${trackingID}`).then((res) =>\n res.json(),\n ),\n ]);\n\n if (\n sheinData.status === \"fulfilled\" &&\n sheinData.value.result === \"success\"\n ) {\n document.getElementById(\"btnDetails\").style.display =\n \"none\";\n displayOrderDetailsSH(\n sheinData.value.data,\n resultDiv,\n \"export\",\n );\n } else if (\n importData.status === \"fulfilled\" &&\n importData.value.result === \"success\"\n ) {\n document.getElementById(\"btnDetails\").style.display =\n \"none\";\n displayOrderDetailsSH(\n importData.value.data,\n resultDiv,\n \"import\",\n );\n } else {\n const errorMessage =\n sheinData.status === \"fulfilled\"\n ? sheinData.value.message\n : importData.status === \"fulfilled\"\n ? importData.value.message\n : \"Erreur de connexion au serveur.\";\n displayError(errorMessage, resultDiv);\n }\n } catch (error) {\n displayError(\"Erreur de connexion au serveur.\", resultDiv);\n console.error(error);\n } finally {\n loader.style.display = \"none\";\n }\n }\n\n function formatDate(dateString) {\n if (!dateString) return \"\";\n const dateObj = new Date(dateString);\n if (isNaN(dateObj.getTime())) return dateString;\n const day = String(dateObj.getUTCDate()).padStart(2, \"0\");\n const month = String(dateObj.getUTCMonth() + 1).padStart(\n 2,\n \"0\",\n );\n const year = dateObj.getUTCFullYear();\n const hours = String(dateObj.getUTCHours()).padStart(2, \"0\");\n const minutes = String(dateObj.getUTCMinutes()).padStart(\n 2,\n \"0\",\n );\n const seconds = String(dateObj.getUTCSeconds()).padStart(\n 2,\n \"0\",\n );\n return `${day}-${month}-${year}<br><span class=\"time\">${hours}:${minutes}:${seconds} GMT<\/span>`;\n }\n\n function displayOrderDetailsSH(data, container, sheetType) {\n const { orderInfo, statuses, exception } = data;\n const senderLabel = \"Exp\u00e9diteur\";\n const recipientLabel = \"Destinataire\";\n\n document.getElementById(\"review-section\").style.display =\n \"none\";\n document.getElementById(\"delivery-container\").style.display =\n \"none\";\n\n const orderHtml = `\n <div class=\"statut-txt\">\n <img decoding=\"async\" src=\"https:\/\/papslogistics.com\/wp-content\/uploads\/package.svg\" alt=\"\" \/>\n <h4>D\u00e9tails de la commande<\/h4>\n <\/div>\n <div class=\"order-details-sh\">\n <div class=\"track-number\">\n <img decoding=\"async\" src=\"https:\/\/papslogistics.com\/wp-content\/uploads\/shipping-car.svg\" alt=\"\" \/>\n <div class=\"track-numer-txt\">\n <p class=\"track-head\">Shipment ID<\/p>\n <p>${orderInfo.trackingNumber}<\/p>\n <\/div>\n <\/div>\n <div class=\"line-sh\"><\/div>\n\n <div class=\"track-sender\">\n <p class=\"track-head\">${senderLabel}<\/p>\n <p>${orderInfo.sender || orderInfo.senderImport}<\/p>\n <\/div>\n\n <div class=\"line-sh\"><\/div>\n <div class=\"track-recip\">\n <p class=\"track-head\">${recipientLabel}<\/p>\n <p>${orderInfo.recipient || orderInfo.recipientImport}<\/p>\n <\/div>\n <\/div>\n `;\n\n const statusesHtml = statuses\n .map(\n (status) => `\n <div class=\"track status ${status.color}\">\n <div class=\"check ${status.completed ? \"blue\" : \"gray\"}\">\n ${status.completed ? '<img decoding=\"async\" src=\"https:\/\/papslogistics.com\/wp-content\/uploads\/check.svg\" \/>' : '<img decoding=\"async\" src=\"https:\/\/papslogistics.com\/wp-content\/uploads\/check-gris.svg\" \/>'}\n <\/div>\n <div class=\"track-statut\">\n <span class=\"label ${status.completed ? \"\" : \"pending\"}\">${status.label}<\/span>\n <span class=\"date\">${status.date ? formatDate(status.date) : \"Non sp\u00e9cifi\u00e9e\"}<\/span>\n <\/div>\n <\/div>\n <div class=\"line-v\"><\/div>\n `,\n )\n .join(\"\");\n\n const exceptionHtml = exception\n ? `\n <div class=\"track-exception\">\n <img decoding=\"async\" src=\"https:\/\/papslogistics.com\/wp-content\/uploads\/info-circle-.svg\" alt=\"\" \/>\n <div class=\"text-excep\">\n <p class=\"track-head\">Exception<\/p>\n <p class=\"excep-txt\">${exception}<\/p>\n <\/div>\n <\/div>\n `\n : \"\";\n\n container.innerHTML = `\n <div class=\"order-dt\">${orderHtml}<\/div>\n <div class=\"order\">${statusesHtml}<\/div>\n <div class=\"exept\">${exceptionHtml}<\/div>\n `;\n }\n\n function displayOrderDetails(data, container) {\n const { uid, client, parcels, receiver } = data;\n const clientAddress = client.address || {};\n const receiverAddress = receiver.address || {};\n const job = orderDetails.jobType;\n\n const parcelsTable = `\n <table>\n <thead>\n <tr>\n <th>UID<\/th>\n <th>Description<\/th>\n <th>Taille<\/th>\n <th>Statut<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n ${parcels\n .map(\n (parcel) => `\n <tr>\n <td>${parcel.uid}<\/td>\n <td>${parcel.description}<\/td>\n <td>${parcel.size}<\/td>\n <td>${parcel.status}<\/td>\n <\/tr>\n `,\n )\n .join(\"\")}\n <\/tbody>\n <\/table>\n `;\n\n const stepperHtml = generateStepper(\n orderDetails.activities,\n job,\n );\n\n container.innerHTML = `\n <div class=\"statut-txt\">\n <img decoding=\"async\" src=\"https:\/\/papslogistics.com\/wp-content\/uploads\/package.svg\" alt=\"\" \/>\n <h4>D\u00e9tails de la commande<\/h4>\n <\/div>\n <div class=\"order-details\">\n <div class=\"track-number\">\n <img decoding=\"async\" src=\"https:\/\/papslogistics.com\/wp-content\/uploads\/shipping-car.svg\" \/>\n <div class=\"track-numer-txt\">\n <p class=\"track-head\">Shipment ID<\/p>\n <p class=\"track-num\">${uid}<\/p>\n <\/div>\n <\/div>\n <div class=\"line-order\"><\/div>\n <div class=\"track-sender\">\n <p class=\"track-head\">Exp\u00e9diteur<\/p>\n <p class=\"track-num\">${client.companyName}<\/p>\n <p class=\"track-num\">${clientAddress.address}<\/p>\n <\/div>\n <div class=\"line-order\"><\/div>\n <div class=\"track-recip\">\n <p class=\"track-head\">Destinataire<\/p>\n <p class=\"track-num\">${receiver.firstname} ${receiver.lastname}<\/p>\n <p class=\"track-num\">${receiverAddress.address}<\/p>\n <\/div>\n <\/div>\n <div class=\"stepper\">\n ${stepperHtml}\n <\/div>\n `;\n document.getElementById(\"colis-container\").innerHTML = `\n <div class=\"parcels\">\n <h4>Colis<\/h4>\n ${parcelsTable}\n <\/div>\n `;\n }\n\n function generateStepper(activities, job, status) {\n let statuses = [];\n\n if (job === \"PICKUP\") {\n statuses = [\n {\n label: \"En cours de r\u00e9cup\u00e9ration\",\n keys: [\"TO_PICK\", \"PICKED\"],\n text: \"Votre commande est en cours de r\u00e9cup\u00e9ration chez le client.\",\n },\n {\n label: \"D\u00e9p\u00f4t \u00e0 l\u2019entrep\u00f4t\",\n keys: [\"DROPPED\"],\n text: \"Votre commande a \u00e9t\u00e9 d\u00e9pos\u00e9e \u00e0 l\u2019entrep\u00f4t de Paps.\",\n },\n {\n label: \"En attente de livraison\",\n keys: [\n \"AWAITING_DELIVERY\",\n \"TO_BE_ASSIGNED\",\n \"TO_HAND_OVER\",\n ],\n text: \"Votre commande est en attente d\u2019\u00eatre assign\u00e9e \u00e0 un Papser.\",\n },\n {\n label: \"En cours de livraison\",\n keys: [\"ON_DELIVERY\"],\n text: \"Votre commande est en cours de livraison.\",\n },\n\n {\n label: \"Livr\u00e9\",\n keys: [\n \"MONEY_TO_COLLECT\",\n \"COMPLETED\",\n \"DELIVERED\",\n ],\n text: \"Votre commande a \u00e9t\u00e9 livr\u00e9e.\",\n },\n ];\n } else if (job === \"FROM_STOCK\") {\n statuses = [\n {\n label: \"En pr\u00e9paration\",\n keys: [\"TO_PREPARE\"],\n text: \"Votre commande est en cours de pr\u00e9paration.\",\n },\n {\n label: \"En attente de livraison\",\n keys: [\n \"AWAITING_DELIVERY\",\n \"TO_BE_ASSIGNED\",\n \"TO_HAND_OVER\",\n ],\n text: \"Votre commande est en attente d\u2019\u00eatre assign\u00e9e \u00e0 un Papser.\",\n },\n {\n label: \"En cours de livraison\",\n keys: [\"ON_DELIVERY\"],\n text: \"Votre commande est en cours de livraison.\",\n },\n {\n label: \"Livr\u00e9\",\n keys: [\n \"MONEY_TO_COLLECT\",\n \"COMPLETED\",\n \"DELIVERED\",\n ],\n text: \"Votre commande a \u00e9t\u00e9 livr\u00e9e.\",\n },\n ];\n } else if (job === \"DROPOFF\") {\n statuses = [\n {\n label: \"En attente de r\u00e9ception\",\n keys: [\"TO_RECEIVE\", \"NOT_COLLECTED\"],\n text: \"Votre commande est en attente de r\u00e9ception dans notre entrep\u00f4t\",\n },\n {\n label: \"En attente de livraison\",\n keys: [\n \"AWAITING_DELIVERY\",\n \"TO_BE_ASSIGNED\",\n \"TO_HAND_OVER\",\n ],\n text: \"Votre commande est en attente d\u2019\u00eatre assign\u00e9e \u00e0 un Papser.\",\n },\n {\n label: \"En cours de livraison\",\n keys: [\"ON_DELIVERY\"],\n text: \"Votre commande est en cours de livraison.\",\n },\n {\n label: \"Livr\u00e9\",\n keys: [\n \"DELIVERED\",\n \"COMPLETED\",\n \"MONEY_TO_COLLECT\",\n ],\n text: \"Votre commande a \u00e9t\u00e9 livr\u00e9e.\",\n },\n ];\n } else {\n return `<p>JobType non d\u00e9fini ou invalide.<\/p>`;\n }\n\n const sortedActivities = activities\n .slice()\n .sort((a, b) => new Date(a.date) - new Date(b.date));\n\n const filteredStatuses = statuses.filter((status) => {\n const specialKeys = [\"FAILED\", \"ON_RETURN\", \"CANCELLED\"];\n const hasSpecialKey = status.keys.some((k) =>\n specialKeys.includes(k),\n );\n\n if (hasSpecialKey) {\n return activities.some((act) =>\n status.keys.includes(act.triggerActionData),\n );\n }\n return true;\n });\n\n return filteredStatuses\n .map((status) => {\n const matchingActivity = sortedActivities.find((act) =>\n status.keys.includes(act.triggerActionData),\n );\n const isCompleted = !!matchingActivity;\n const activityDate = isCompleted\n ? new Date(matchingActivity.date).toLocaleString(\n \"fr-FR\",\n )\n : \"\";\n return `\n <div class=\"step\">\n <div class=\"step-icon ${isCompleted ? \"completed\" : \"\"}\">\n <img decoding=\"async\" src=\"https:\/\/papslogistics.com\/wp-content\/uploads\/${isCompleted ? \"check\" : \"check-gris\"}.svg\" alt=\"${isCompleted ? \"Completed\" : \"Not Completed\"}\">\n <\/div>\n <div class=\"bloc-statut\">\n <p class=\"step-date\">${activityDate}<\/p>\n <div class=\"step-label\">${status.label}<\/div>\n <p class=\"step-text\">${isCompleted ? status.text : \"\"}<\/p>\n <\/div>\n <\/div>\n <div class=\"line\"><\/div>\n `;\n })\n .join(\"\");\n }\n\n function generateFullStatusModal(activities, job) {\n let statuses = [];\n if (job === \"PICKUP\") {\n statuses = [\n {\n label: \"En cours de r\u00e9cup\u00e9ration\",\n keys: [\"TO_PICK\", \"PICK_FAILED\"],\n text: \"Votre commande est en cours de r\u00e9cup\u00e9ration chez le client.\",\n },\n {\n label: \"R\u00e9cup\u00e9ration\",\n keys: [\"PICKED\"],\n text: \"La commande a \u00e9t\u00e9 r\u00e9cup\u00e9r\u00e9e.\",\n },\n {\n label: \"D\u00e9p\u00f4t \u00e0 l\u2019entrep\u00f4t\",\n keys: [\"DROPPED\"],\n text: \"Votre commande a \u00e9t\u00e9 d\u00e9pos\u00e9e \u00e0 l\u2019entrep\u00f4t de Paps.\",\n },\n {\n label: \"En attente de livraison\",\n keys: [\n \"AWAITING_DELIVERY\",\n \"TO_BE_ASSIGNED\",\n \"TO_HAND_OVER\",\n ],\n text: \"Votre commande est en attente d\u2019\u00eatre assign\u00e9e \u00e0 un Papser.\",\n },\n {\n label: \"Commande transmise \u00e0 un livreur\",\n keys: [\"HANDED_OVER\"],\n text: \"Votre commande est assign\u00e9e \u00e0 un Papser pour livraison.\",\n },\n {\n label: \"En cours de livraison\",\n keys: [\"ON_DELIVERY\"],\n text: \"Votre commande est en cours de livraison.\",\n },\n {\n label: \"La livraison a \u00e9t\u00e9 annuler\",\n keys: [\"CANCELLED\"],\n text: \"La livraison de votre commande a \u00e9t\u00e9 annuler.\",\n },\n {\n label: \"La livraison a echou\u00e9e\",\n keys: [\"FAILED\"],\n text: \"La livraison de votre commande a \u00e9chou\u00e9e.\",\n },\n {\n label: \"Retour en cours\",\n keys: [\"ON_RETURN\"],\n text: \"Votre commande est en cours de retour.\",\n },\n {\n label: \"Livr\u00e9\",\n keys: [\n \"MONEY_TO_COLLECT\",\n \"COMPLETED\",\n \"DELIVERED\",\n ],\n text: \"Votre commande a \u00e9t\u00e9 livr\u00e9e.\",\n },\n ];\n } else if (job === \"FROM_STOCK\") {\n statuses = [\n {\n label: \"En pr\u00e9paration\",\n keys: [\"TO_PREPARE\"],\n text: \"Votre commande est en cours de pr\u00e9paration.\",\n },\n {\n label: \"En attente de livraison\",\n keys: [\n \"AWAITING_DELIVERY\",\n \"TO_BE_ASSIGNED\",\n \"TO_HAND_OVER\",\n ],\n text: \"Votre commande est en attente d\u2019\u00eatre assign\u00e9e \u00e0 un Papser.\",\n },\n {\n label: \"Commande transmise \u00e0 un Papser\",\n keys: [\"HANDED_OVER\"],\n text: \"Votre commande est assign\u00e9e \u00e0 un Papser pour livraison.\",\n },\n {\n label: \"En cours de livraison\",\n keys: [\"ON_DELIVERY\"],\n text: \"Votre commande est en cours de livraison.\",\n },\n {\n label: \"La livraison a \u00e9t\u00e9 annuler\",\n keys: [\"CANCELLED\"],\n text: \"La livraison de votre commande a \u00e9t\u00e9 annuler.\",\n },\n {\n label: \"La livraison a echou\u00e9e\",\n keys: [\"FAILED\"],\n text: \"La livraison de votre commande a \u00e9chou\u00e9e.\",\n },\n {\n label: \"Retour en cours\",\n keys: [\"ON_RETURN\"],\n text: \"Votre commande est en cours de retour.\",\n },\n {\n label: \"Livr\u00e9\",\n keys: [\n \"MONEY_TO_COLLECT\",\n \"COMPLETED\",\n \"DELIVERED\",\n ],\n text: \"Votre commande a \u00e9t\u00e9 livr\u00e9e.\",\n },\n ];\n } else if (job === \"DROPOFF\") {\n statuses = [\n {\n label: \"En attente de r\u00e9ception\",\n keys: [\"TO_RECEIVE\", \"NOT_COLLECTED\"],\n text: \"Votre commande est en attente de r\u00e9ception dans notre entrep\u00f4t\",\n },\n {\n label: \"En attente de livraison\",\n keys: [\n \"AWAITING_DELIVERY\",\n \"TO_BE_ASSIGNED\",\n \"TO_HAND_OVER\",\n \"FAILED\",\n ],\n text: \"Votre commande est en attente d\u2019\u00eatre assign\u00e9e \u00e0 un Papser.\",\n },\n {\n label: \"Commande transmise \u00e0 un Papser\",\n keys: [\"HANDED_OVER\"],\n text: \"Votre commande est assign\u00e9e \u00e0 un Papser pour livraison.\",\n },\n {\n label: \"En cours de livraison\",\n keys: [\"ON_DELIVERY\"],\n text: \"Votre commande est en cours de livraison.\",\n },\n {\n label: \"La livraison a \u00e9t\u00e9 annuler\",\n keys: [\"CANCELLED\"],\n text: \"La livraison de votre commande a \u00e9t\u00e9 annuler.\",\n },\n {\n label: \"La livraison a echou\u00e9e\",\n keys: [\"FAILED\"],\n text: \"La livraison de votre commande a \u00e9chou\u00e9e.\",\n },\n {\n label: \"Retour en cours\",\n keys: [\"ON_RETURN\"],\n text: \"Votre commande est en cours de retour.\",\n },\n {\n label: \"Livr\u00e9\",\n keys: [\n \"DELIVERED\",\n \"COMPLETED\",\n \"MONEY_TO_COLLECT\",\n ],\n text: \"Votre commande a \u00e9t\u00e9 livr\u00e9e.\",\n },\n ];\n } else {\n return `<p>JobType non d\u00e9fini ou invalide.<\/p>`;\n }\n\n const sortedActivities = activities\n .slice()\n .sort((a, b) => new Date(a.date) - new Date(b.date));\n\n return statuses\n .map((status) => {\n const matchingActivities = sortedActivities.filter(\n (act) =>\n status.keys.includes(act.triggerActionData),\n );\n const isCompleted = matchingActivities.length > 0;\n\n const hiddenKeys = [\"FAILED\", \"ON_RETURN\", \"CANCELLED\"];\n const mustHide =\n hiddenKeys.some((key) =>\n status.keys.includes(key),\n ) && !isCompleted;\n if (mustHide) return \"\";\n\n let activityDate = \"\";\n if (isCompleted) {\n const latestActivity = matchingActivities.reduce(\n (prev, curr) =>\n new Date(prev.date) > new Date(curr.date)\n ? prev\n : curr,\n );\n activityDate = new Date(\n latestActivity.date,\n ).toLocaleString(\"fr-FR\");\n }\n\n return `\n <div class=\"modal-status\">\n <div class=\"step\">\n <div class=\"step-icon ${isCompleted ? \"completed\" : \"\"}\">\n <img decoding=\"async\" src=\"https:\/\/papslogistics.com\/wp-content\/uploads\/${isCompleted ? \"check\" : \"check-gris\"}.svg\" alt=\"${isCompleted ? \"Completed\" : \"Not Completed\"}\">\n <\/div>\n <div class=\"bloc-statut\">\n <p class=\"step-date\">${activityDate}<\/p>\n <div class=\"step-label\">${status.label}<\/div>\n <p class=\"step-text\">${isCompleted ? status.text : \"\"}<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"line-v\"><\/div>\n `;\n })\n .join(\"\");\n }\n\n function openStatusModal() {\n const modalContent = document.getElementById(\"modalStatusList\");\n modalContent.innerHTML =\n '<div class=\"loader\">Chargement des statuts...<\/div>';\n document.getElementById(\"statusModal\").style.display = \"block\";\n setTimeout(() => {\n const job = orderDetails.jobType;\n modalContent.innerHTML = generateFullStatusModal(\n orderDetails.activities,\n job,\n );\n }, 300);\n }\n\n function closeStatusModal() {\n document.getElementById(\"statusModal\").style.display = \"none\";\n }\n\n function displayError(message, container) {\n container.innerHTML = `<div class=\"alert alert-danger\">${message}<\/div>`;\n document.getElementById(\"review-section\").style.display =\n \"none\";\n document.getElementById(\"delivery-container\").style.display =\n \"none\";\n }\n\n document\n .getElementById(\"searchButton\")\n .addEventListener(\"click\", () => {\n const orderId = document\n .getElementById(\"orderId\")\n .value.trim();\n fetchOrderDetails(orderId);\n });\n\n function selectNpsRating(npsRating, element) {\n activateBtns(npsRating);\n selectedNpsRating = npsRating;\n document\n .querySelectorAll(\"#papser-nps-buttons .btn\")\n .forEach((btn) => btn.classList.remove(\"btn-selected\"));\n element.classList.add(\"btn-selected\");\n }\n\n function selectPapserRating(rating, element) {\n activateBtns(rating);\n\n selectedPapserRating = rating;\n document\n .querySelectorAll(\"#papser-rating-buttons .btn\")\n .forEach((btn) => btn.classList.remove(\"btn-selected\"));\n element.classList.add(\"btn-selected\");\n const suggestionsContainer =\n document.getElementById(\"papserSuggestions\");\n suggestionsContainer.innerHTML = \"\";\n let suggestions = [];\n if (rating <= 4) {\n suggestions = [\n \"Le livreur n'\u00e9tait pas courtois\",\n \"Comportement irrespectueux\",\n \"Ne portait pas de tenue de livreur\",\n \"Le livreur n\u2019est pas arriv\u00e9 \u00e0 l'heure pr\u00e9vue pour la livraison\",\n ];\n } else if (rating > 4 && rating <= 6) {\n suggestions = [\n \"Correct\",\n \"Bonne attitude\",\n \"Il a r\u00e9pondu \u00e0 mes questions\/demandes de mani\u00e8re satisfaisante\",\n ];\n } else if (rating >= 7) {\n suggestions = [\n \"Le livreur \u00e9tait courtois et professionnel\",\n \"Tr\u00e8s serviable et attentif\",\n \"Bonne communication\",\n ];\n }\n suggestions.forEach((text, index) => {\n const checkbox = document.createElement(\"input\");\n checkbox.type = \"checkbox\";\n checkbox.id = `papserSuggestion${index}`;\n checkbox.value = text;\n checkbox.classList.add(\"papser-suggestion\");\n const label = document.createElement(\"label\");\n label.htmlFor = checkbox.id;\n label.textContent = text;\n const suggestionDiv = document.createElement(\"div\");\n suggestionDiv.style.display = \"flex\";\n suggestionDiv.style.marginRight = \"10px\";\n suggestionDiv.appendChild(checkbox);\n suggestionDiv.appendChild(label);\n suggestionsContainer.appendChild(suggestionDiv);\n });\n }\n\n function selectQualityRating(rating, element) {\n selectedQualityRating = rating;\n document\n .querySelectorAll(\"#quality-rating-buttons .btn\")\n .forEach((btn) => btn.classList.remove(\"btn-selected\"));\n element.classList.add(\"btn-selected\");\n const qualitySuggestionsContainer =\n document.getElementById(\"qualitySuggestions\");\n qualitySuggestionsContainer.innerHTML = \"\";\n let suggestions = [];\n if (rating === \"mauvaise\") {\n suggestions = [\n \"Le colis est arriv\u00e9 en retard\",\n \"Colis endommag\u00e9\",\n ];\n } else if (rating === \"assez bien\") {\n suggestions = [\n \"J'ai pas re\u00e7u une notification ou un suivi clair concernant la livraison\",\n \"J'ai re\u00e7u mon colis dans les d\u00e9lais\",\n ];\n } else if (rating === \"bien\" || rating === \"tr\u00e8s bien\") {\n suggestions = [\n \"Le colis est arriv\u00e9 en parfait \u00e9tat\",\n \"Livraison rapide et efficace\",\n \"Le processus de livraison est fluide et bien organis\u00e9\",\n ];\n }\n suggestions.forEach((text, index) => {\n const checkbox = document.createElement(\"input\");\n checkbox.type = \"checkbox\";\n checkbox.id = `qualitySuggestion${index}`;\n checkbox.value = text;\n checkbox.classList.add(\"quality-suggestion\");\n const label = document.createElement(\"label\");\n label.htmlFor = checkbox.id;\n label.textContent = text;\n const suggestionDiv = document.createElement(\"div\");\n suggestionDiv.style.display = \"flex\";\n suggestionDiv.style.marginRight = \"10px\";\n suggestionDiv.appendChild(checkbox);\n suggestionDiv.appendChild(label);\n qualitySuggestionsContainer.appendChild(suggestionDiv);\n });\n }\n\n async function submitFeedback(btn) {\n const comment = document.getElementById(\"comment\").value.trim();\n if (selectedPapserRating === null) {\n alert(\n \"Veuillez s\u00e9lectionner une note pour le comportement du livreur.\",\n );\n return;\n }\n if (!selectedQualityRating) {\n alert(\"Veuillez s\u00e9lectionner une qualit\u00e9 de livraison.\");\n return;\n }\n if (!orderDetails.shipmentId) {\n alert(\"Veuillez d'abord rechercher une commande.\");\n return;\n }\n const papserSuggestionElements =\n document.querySelectorAll(\".papser-suggestion\");\n let papserSuggestions = [];\n papserSuggestionElements.forEach((el) => {\n if (el.checked) papserSuggestions.push(el.value);\n });\n const qualitySuggestionElements = document.querySelectorAll(\n \".quality-suggestion\",\n );\n let qualitySuggestions = [];\n qualitySuggestionElements.forEach((el) => {\n if (el.checked) qualitySuggestions.push(el.value);\n });\n const feedbackData = {\n shipmentId: orderDetails.shipmentId,\n sender: orderDetails.sender,\n receiver: orderDetails.receiver,\n receiverPhone: orderDetails.receiverPhone,\n papserRating: selectedPapserRating,\n papserSuggestions: papserSuggestions,\n qualityRating: selectedQualityRating,\n qualitySuggestions: qualitySuggestions,\n comment: comment,\n sendEmail: true,\n country: orderDetails.country,\n status: orderDetails.status.toUpperCase(),\n nps: selectedNpsRating,\n driverName: orderDetails.driverName,\n driverPhone: orderDetails.driverPhone,\n };\n\n try {\n btn.disabled = true;\n await fetch(googleSheetUrl, {\n method: \"POST\",\n mode: \"no-cors\",\n headers: { \"Content-Type\": \"application\/json\" },\n body: JSON.stringify(feedbackData),\n });\n if (selectedQualityRating === \"Mauvaise\") {\n await sendEmailNotification(feedbackData);\n }\n document.getElementById(\"review-form\").style.display =\n \"none\";\n document.getElementById(\"thankYouMessage\").style.display =\n \"block\";\n } catch (error) {\n console.error(\"Erreur lors de l'envoi :\", error);\n alert(\"Une erreur s'est produite. Veuillez r\u00e9essayer.\");\n } finally {\n btn.disabled = false;\n }\n }\n\n async function sendEmailNotification(feedbackData) {\n try {\n await fetch(googleEmailUrl, {\n method: \"POST\",\n mode: \"no-cors\",\n headers: { \"Content-Type\": \"application\/json\" },\n body: JSON.stringify(feedbackData),\n });\n } catch (error) {\n console.error(\"Erreur lors de l'envoi de l'email :\", error);\n }\n }\n\n function resetReviewForm() {\n document\n .querySelectorAll(\"#papser-rating-buttons .btn\")\n .forEach((btn) => btn.classList.remove(\"btn-selected\"));\n selectedPapserRating = null;\n document.getElementById(\"papserSuggestions\").innerHTML = \"\";\n document\n .querySelectorAll(\"#quality-rating-buttons .btn\")\n .forEach((btn) => btn.classList.remove(\"btn-selected\"));\n selectedQualityRating = null;\n document.getElementById(\"qualitySuggestions\").innerHTML = \"\";\n document.getElementById(\"comment\").value = \"\";\n document.getElementById(\"review-form\").style.display = \"block\";\n document.getElementById(\"thankYouMessage\").style.display =\n \"none\";\n }\n\n function changeDeliveryDate() {\n if (\n orderDetails.activities &&\n orderDetails.activities.some(\n (activity) =>\n activity.triggerActionData === \"HANDED_OVER\" ||\n activity.triggerActionData === \"ON_DELIVERY\" ||\n activity.triggerActionData === \"DELIVERED\",\n )\n ) {\n alert(\n \"Impossible de modifier la date de livraison car la commande est d\u00e9j\u00e0 en cours de livraison ou livr\u00e9e.\",\n );\n return;\n }\n if (\n !orderDetails.activities ||\n orderDetails.activities.length === 0\n ) {\n alert(\n \"Les statuts ne sont pas encore disponibles pour cette commande.\",\n );\n return;\n }\n const newDate = document.getElementById(\"dateTimePicker\").value;\n const timeSlot = document.getElementById(\"timeSlot\").value;\n if (!newDate || !timeSlot) {\n alert(\n \"Veuillez s\u00e9lectionner une date et un cr\u00e9neau horaire.\",\n );\n return;\n }\n const newDeliveryDateTime = newDate + \" : \" + timeSlot;\n document.getElementById(\"confirmMessage\").innerText =\n \"Voulez-vous confirmer le changement de date \\n \" +\n newDeliveryDateTime;\n if (orderDetails.shipmentId) {\n document.getElementById(\"orderUidInput\").value =\n orderDetails.shipmentId;\n }\n document.getElementById(\"dateConfirmModal\").style.display =\n \"block\";\n }\n\n async function confirmReschedule() {\n const orderUidInput =\n document.getElementById(\"orderUidInput\").value.trim() ||\n orderDetails.shipmentId;\n const newDateStr =\n document.getElementById(\"dateTimePicker\").value;\n const timeSlot = document.getElementById(\"timeSlot\").value;\n if (!orderUidInput) {\n alert(\"Order UID ne doit pas \u00eatre vide.\");\n return;\n }\n if (!newDateStr || !timeSlot) {\n alert(\n \"Veuillez s\u00e9lectionner une date et un cr\u00e9neau horaire.\",\n );\n return;\n }\n const isoDate = new Date(newDateStr).toISOString();\n let rescheduleSlotStart = \"\",\n rescheduleSlotEnd = \"\";\n if (timeSlot === \"8h-13h\") {\n rescheduleSlotStart = \"08:00\";\n rescheduleSlotEnd = \"13:00\";\n } else if (timeSlot === \"15h-18h\") {\n rescheduleSlotStart = \"15:00\";\n rescheduleSlotEnd = \"18:00\";\n } else {\n alert(\"Cr\u00e9neau horaire invalide.\");\n return;\n }\n const endpoint = `${rescheduleApiUrl}\/${orderUidInput}\/reschedule`;\n const payload = {\n orderUid: orderUidInput,\n rescheduledDate: isoDate,\n rescheduleSlotStart: rescheduleSlotStart,\n rescheduleSlotEnd: rescheduleSlotEnd,\n };\n try {\n const response = await fetch(endpoint, {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${token}`,\n \"Content-Type\": \"application\/json\",\n },\n body: JSON.stringify(payload),\n });\n const result = await response.json();\n if (result.code === 200) {\n alert(\n \"Changement de date valid\u00e9 : \" +\n isoDate +\n \" \" +\n timeSlot,\n );\n closeDateConfirmModal();\n } else {\n alert(\"Erreur : \" + result.message);\n }\n } catch (error) {\n console.error(\n \"Erreur lors de l'envoi du changement de date :\",\n error,\n );\n alert(\n \"Une erreur s'est produite lors du changement de date.\",\n );\n }\n }\n\n function closeDateConfirmModal() {\n document.getElementById(\"dateConfirmModal\").style.display =\n \"none\";\n }\n <\/script>\n <\/body>\n<\/html>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div><\/div><\/div><\/div><\/div><\/div><div class=\"grve-section grve-row-section grve-fullwidth-background grve-padding-top-1x grve-padding-bottom-1x grve-with-bg-transparent\" data-header-color=\"default\"><div class=\"grve-container\"><div class=\"grve-row grve-bookmark grve-columns-gap-default grve-mobile-vertical-gap-30\"><div class=\"grve-column wpb_column grve-bookmark grve-column-1 grve-with-bg-transparent\"><div class=\"grve-column-wrapper\"><div class=\"grve-column-content\" ><div style=\"height: 230px;\" class=\"grve-empty-space\"><\/div><\/div><\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"Track Your Order Instantly Track Your Order Instantly D\u00e9tails de commande et Avis Suivez votre commande Instantan\u00e9ment Suivre ma commande D\u00e9tails de tous les statuts \u00c9valuez votre Livraison Sur une \u00e9chelle de 0 \u00e0 10 comment \u00e9valueriez vous la qualit\u00e9 de la prestation du livreur ? (10 \u00e9tant la plus grande note) 0 1 2 [...]","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-17102","page","type-page","status-publish","hentry","grve-entry-item"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tracking - Paps Logistique<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/papslogistics.com\/en\/tracking\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tracking - Paps Logistique\" \/>\n<meta property=\"og:url\" content=\"https:\/\/papslogistics.com\/en\/tracking\/\" \/>\n<meta property=\"og:site_name\" content=\"Paps Logistique\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-25T14:11:25+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/papslogistics.com\/tracking\/\",\"url\":\"https:\/\/papslogistics.com\/tracking\/\",\"name\":\"Tracking - Paps Logistique\",\"isPartOf\":{\"@id\":\"https:\/\/papslogistics.com\/#website\"},\"datePublished\":\"2024-12-03T16:58:06+00:00\",\"dateModified\":\"2026-02-25T14:11:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/papslogistics.com\/tracking\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/papslogistics.com\/tracking\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/papslogistics.com\/tracking\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/papslogistics.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tracking\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/papslogistics.com\/#website\",\"url\":\"https:\/\/papslogistics.com\/\",\"name\":\"Paps Logistique\",\"description\":\"Une exp\u00e9rience de logistique unique\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/papslogistics.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tracking - Paps Logistique","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/papslogistics.com\/en\/tracking\/","og_locale":"en_GB","og_type":"article","og_title":"Tracking - Paps Logistique","og_url":"https:\/\/papslogistics.com\/en\/tracking\/","og_site_name":"Paps Logistique","article_modified_time":"2026-02-25T14:11:25+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/papslogistics.com\/tracking\/","url":"https:\/\/papslogistics.com\/tracking\/","name":"Tracking - Paps Logistique","isPartOf":{"@id":"https:\/\/papslogistics.com\/#website"},"datePublished":"2024-12-03T16:58:06+00:00","dateModified":"2026-02-25T14:11:25+00:00","breadcrumb":{"@id":"https:\/\/papslogistics.com\/tracking\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/papslogistics.com\/tracking\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/papslogistics.com\/tracking\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/papslogistics.com\/"},{"@type":"ListItem","position":2,"name":"Tracking"}]},{"@type":"WebSite","@id":"https:\/\/papslogistics.com\/#website","url":"https:\/\/papslogistics.com\/","name":"Paps Logistique","description":"An unparalleled logistic experience","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/papslogistics.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"}]}},"_links":{"self":[{"href":"https:\/\/papslogistics.com\/en\/wp-json\/wp\/v2\/pages\/17102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/papslogistics.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/papslogistics.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/papslogistics.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/papslogistics.com\/en\/wp-json\/wp\/v2\/comments?post=17102"}],"version-history":[{"count":0,"href":"https:\/\/papslogistics.com\/en\/wp-json\/wp\/v2\/pages\/17102\/revisions"}],"wp:attachment":[{"href":"https:\/\/papslogistics.com\/en\/wp-json\/wp\/v2\/media?parent=17102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}