@subiz/widget-v4 4.0.48 → 4.0.52

package/dist/assets/img/rating--average.1ea492c.svg

@@ -0,0 +1,12 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill="#FCD063"/>
+<path d="M49.249 7.00098C53.614 12.2116 56.2502 18.9204 56.2502 26.2497C56.2502 42.8173 42.8177 56.2498 26.2502 56.2498C18.9208 56.2498 12.2121 53.6135 7.00146 49.2485C12.5046 55.8185 20.7602 59.9998 30.0002 59.9998C46.5677 59.9998 60.0002 46.5673 60.0002 29.9997C60.0002 20.7597 55.819 12.5041 49.249 7.00098Z" fill="#F7B84E"/>
+<path d="M40.2281 35.625H19.7719C19.2075 35.625 18.75 36.045 18.75 36.5625C18.75 42.2494 23.7956 46.875 30 46.875C36.2044 46.875 41.25 42.2494 41.25 36.5625C41.25 36.045 40.7925 35.625 40.2281 35.625Z" fill="#C98E3F"/>
+<path d="M41.175 37.5C41.2087 37.1888 41.25 36.8813 41.25 36.5625C41.25 36.045 40.7925 35.625 40.2281 35.625H19.7719C19.2075 35.625 18.75 36.045 18.75 36.5625C18.75 36.8813 18.7912 37.1888 18.825 37.5H41.175Z" fill="#AB7934"/>
+<path d="M18.75 30C20.8211 30 22.5 28.3211 22.5 26.25C22.5 24.1789 20.8211 22.5 18.75 22.5C16.6789 22.5 15 24.1789 15 26.25C15 28.3211 16.6789 30 18.75 30Z" fill="#C98E3F"/>
+<path d="M18.75 24.375C20.4956 24.375 21.9488 25.5731 22.3669 27.1875C22.4456 26.8856 22.5 26.5763 22.5 26.25C22.5 24.18 20.82 22.5 18.75 22.5C16.68 22.5 15 24.18 15 26.25C15 26.5763 15.0544 26.8856 15.1331 27.1875C15.5513 25.5731 17.0044 24.375 18.75 24.375Z" fill="#AB7934"/>
+<path d="M41.25 30C43.3211 30 45 28.3211 45 26.25C45 24.1789 43.3211 22.5 41.25 22.5C39.1789 22.5 37.5 24.1789 37.5 26.25C37.5 28.3211 39.1789 30 41.25 30Z" fill="#C98E3F"/>
+<path d="M47.8125 35.625C49.3658 35.625 50.625 34.3658 50.625 32.8125C50.625 31.2592 49.3658 30 47.8125 30C46.2592 30 45 31.2592 45 32.8125C45 34.3658 46.2592 35.625 47.8125 35.625Z" fill="#F7B84E"/>
+<path d="M12.1875 35.625C13.7408 35.625 15 34.3658 15 32.8125C15 31.2592 13.7408 30 12.1875 30C10.6342 30 9.375 31.2592 9.375 32.8125C9.375 34.3658 10.6342 35.625 12.1875 35.625Z" fill="#F7B84E"/>
+<path d="M41.25 24.375C42.9956 24.375 44.4488 25.5731 44.8688 27.1875C44.9456 26.8856 45 26.5763 45 26.25C45 24.18 43.32 22.5 41.25 22.5C39.18 22.5 37.5 24.18 37.5 26.25C37.5 26.5763 37.5544 26.8856 37.6312 27.1875C38.0512 25.5731 39.5044 24.375 41.25 24.375Z" fill="#AB7934"/>
+</svg>

package/dist/assets/img/rating--great.e3d712e.svg

@@ -0,0 +1,16 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill="#A7D544"/>
+<path d="M49.2485 7.00098C53.6135 12.2116 56.2498 18.9204 56.2498 26.2497C56.2498 42.8173 42.8173 56.2498 26.2497 56.2498C18.9204 56.2498 12.2116 53.6135 7.00098 49.2485C12.5041 55.8185 20.7597 59.9998 29.9998 59.9998C46.5673 59.9998 59.9998 46.5673 59.9998 29.9997C59.9998 20.7597 55.8185 12.5041 49.2485 7.00098Z" fill="#88BB1A"/>
+<path d="M47.0475 33.75H12.9544C12.0131 33.75 11.25 34.4494 11.25 35.3137C11.25 44.7919 19.6613 52.5 30 52.5C40.3387 52.5 48.75 44.7919 48.75 35.3137C48.75 34.4494 47.9887 33.75 47.0475 33.75Z" fill="#5BAA1D"/>
+<path d="M48.6263 36.8737C48.6806 36.3581 48.75 35.8444 48.75 35.3137C48.75 34.4494 47.9887 33.75 47.0475 33.75H12.9544C12.0131 33.75 11.25 34.4494 11.25 35.3137C11.25 35.8444 11.3212 36.3581 11.3756 36.8737H48.6263Z" fill="#187E1B"/>
+<path d="M49.6875 30C51.2408 30 52.5 28.7408 52.5 27.1875C52.5 25.6342 51.2408 24.375 49.6875 24.375C48.1342 24.375 46.875 25.6342 46.875 27.1875C46.875 28.7408 48.1342 30 49.6875 30Z" fill="#AFE881"/>
+<path d="M10.3125 30C11.8658 30 13.125 28.7408 13.125 27.1875C13.125 25.6342 11.8658 24.375 10.3125 24.375C8.7592 24.375 7.5 25.6342 7.5 27.1875C7.5 28.7408 8.7592 30 10.3125 30Z" fill="#AFE881"/>
+<path d="M45.1272 26.25C44.9322 26.25 44.7372 26.2012 44.5591 26.1037L41.2497 24.2887L37.9384 26.1037C37.5259 26.3306 37.0272 26.2912 36.6484 26.0062C36.2716 25.7194 36.0841 25.2337 36.1628 24.7556L36.7947 20.9175L34.1172 18.2006C33.7834 17.8594 33.6616 17.3512 33.8059 16.8862C33.9503 16.4231 34.3328 16.0856 34.7941 16.0162L38.4953 15.4556L40.1491 11.9625C40.3572 11.5256 40.7828 11.25 41.2497 11.25C41.7147 11.25 42.1403 11.5256 42.3466 11.9606L44.0022 15.4537L47.7035 16.0144C48.1628 16.0838 48.5453 16.4212 48.6897 16.8844C48.8341 17.3494 48.7141 17.8594 48.3766 18.1988L45.7028 20.9156L46.3347 24.7537C46.4135 25.2337 46.2222 25.7175 45.8491 26.0044C45.6353 26.1675 45.3803 26.25 45.1272 26.25Z" fill="#529F16"/>
+<path d="M22.6273 26.25C22.4323 26.25 22.2373 26.2012 22.0591 26.1037L18.7498 24.2887L15.4385 26.1037C15.026 26.3306 14.5273 26.2912 14.1485 26.0062C13.7716 25.7194 13.5841 25.2337 13.6629 24.7556L14.2929 20.9175L11.6191 18.2006C11.2854 17.8594 11.1635 17.3494 11.3079 16.8844C11.4523 16.4212 11.8348 16.0838 12.2979 16.0144L15.9973 15.4537L17.651 11.9606C17.8573 11.5256 18.2829 11.25 18.7498 11.25C19.2148 11.25 19.6404 11.5256 19.8466 11.9606L21.5023 15.4537L25.2016 16.0144C25.6629 16.0838 26.0454 16.4212 26.1898 16.8844C26.3341 17.3494 26.2123 17.8594 25.8766 18.1988L23.2029 20.9156L23.8348 24.7537C23.9135 25.2337 23.7241 25.7175 23.3491 26.0044C23.1354 26.1675 22.8823 26.25 22.6273 26.25Z" fill="#529F16"/>
+<path d="M14.2965 20.9155L13.6665 24.7537C13.6177 25.0518 13.7002 25.333 13.8371 25.5862L14.2965 22.7905V20.9155Z" fill="#187E1B"/>
+<path d="M11.6491 18.2306C11.8291 18.0563 12.0466 17.9288 12.2979 17.8913L15.9973 17.3306L17.651 13.8375C17.8573 13.4006 18.2829 13.125 18.7498 13.125C19.2148 13.125 19.6404 13.4006 19.8466 13.8356L21.5023 17.3288L25.2016 17.8894C25.4529 17.9269 25.6685 18.0544 25.8466 18.2288L25.8766 18.1988C26.2123 17.8575 26.3341 17.3494 26.1898 16.8844C26.0454 16.4213 25.6629 16.0838 25.2016 16.0144L21.5023 15.4538L19.8466 11.9606C19.6404 11.5256 19.2148 11.25 18.7498 11.25C18.2829 11.25 17.8573 11.5256 17.651 11.9606L15.9973 15.4538L12.2979 16.0163C11.8348 16.0856 11.4523 16.4231 11.3079 16.8844C11.1635 17.3494 11.2854 17.8594 11.6191 18.1988L11.6491 18.2306Z" fill="#187E1B"/>
+<path d="M23.2031 22.7905L23.6625 25.5843C23.8013 25.3312 23.8838 25.0518 23.835 24.7537L23.2031 20.9155V22.7905Z" fill="#187E1B"/>
+<path d="M36.7964 20.9155L36.1645 24.7537C36.1158 25.0518 36.1983 25.333 36.3351 25.5862L36.7964 22.7905V20.9155Z" fill="#187E1B"/>
+<path d="M34.1491 18.2306C34.3291 18.0563 34.5466 17.9269 34.7979 17.8894L38.4991 17.3288L40.1529 13.8356C40.3573 13.4006 40.7829 13.125 41.2498 13.125C41.7148 13.125 42.1404 13.4006 42.3466 13.8356L44.0023 17.3288L47.7035 17.8894C47.9529 17.9269 48.1685 18.0544 48.3485 18.2288L48.3785 18.1988C48.716 17.8575 48.836 17.3494 48.6916 16.8844C48.5473 16.4213 48.1648 16.0838 47.7054 16.0144L44.0041 15.4538L42.3485 11.9606C42.1404 11.5256 41.7148 11.25 41.2498 11.25C40.7829 11.25 40.3573 11.5256 40.151 11.9606L38.4973 15.4538L34.796 16.0144C34.3348 16.0838 33.9523 16.4213 33.8079 16.8844C33.6635 17.3494 33.7854 17.8594 34.1191 18.1988L34.1491 18.2306Z" fill="#187E1B"/>
+<path d="M45.7031 22.7905L46.1625 25.5843C46.2994 25.3312 46.3838 25.0518 46.335 24.7537L45.7031 20.9155V22.7905Z" fill="#187E1B"/>
+</svg>

package/dist/assets/img/rating--poor.2938a25.svg

@@ -0,0 +1,12 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill="#FC6363"/>
+<path d="M49.249 7.00098C53.614 12.2116 56.2502 18.9204 56.2502 26.2497C56.2502 42.8173 42.8177 56.2498 26.2502 56.2498C18.9208 56.2498 12.2121 53.6135 7.00146 49.2485C12.5046 55.8185 20.7602 59.9998 30.0002 59.9998C46.5677 59.9998 60.0002 46.5673 60.0002 29.9997C60.0002 20.7597 55.819 12.5041 49.249 7.00098Z" fill="#E84242"/>
+<path d="M38.1769 43.1254C37.6369 43.1254 37.0913 42.9942 36.5944 42.7186C33.0807 40.7742 26.9157 40.7742 23.4019 42.7186C21.9525 43.523 20.0644 43.0954 19.1888 41.7642C18.3132 40.4329 18.78 38.7023 20.2294 37.8979C25.7063 34.8661 34.2882 34.8661 39.765 37.8979C41.2144 38.7023 41.6813 40.4329 40.8057 41.7642C40.2319 42.6398 39.2175 43.1254 38.1769 43.1254Z" fill="#BD1F1F"/>
+<path d="M18.75 31.875C20.8211 31.875 22.5 30.1961 22.5 28.125C22.5 26.0539 20.8211 24.375 18.75 24.375C16.6789 24.375 15 26.0539 15 28.125C15 30.1961 16.6789 31.875 18.75 31.875Z" fill="#BD1F1F"/>
+<path d="M41.25 31.875C43.3211 31.875 45 30.1961 45 28.125C45 26.0539 43.3211 24.375 41.25 24.375C39.1789 24.375 37.5 26.0539 37.5 28.125C37.5 30.1961 39.1789 31.875 41.25 31.875Z" fill="#BD1F1F"/>
+<path d="M20.2313 39.7749C25.7082 36.743 34.2901 36.743 39.7669 39.7749C40.4044 40.1293 40.8394 40.6655 41.0663 41.2655C41.5538 40.028 41.0401 38.6068 39.7669 37.8999C34.2901 34.868 25.7082 34.868 20.2313 37.8999C18.9563 38.6068 18.4444 40.028 18.9319 41.2655C19.1588 40.6655 19.5938 40.1293 20.2313 39.7749Z" fill="#982020"/>
+<path d="M18.75 26.25C20.4956 26.25 21.9488 27.4481 22.3669 29.0625C22.4456 28.7606 22.5 28.4513 22.5 28.125C22.5 26.055 20.82 24.375 18.75 24.375C16.68 24.375 15 26.055 15 28.125C15 28.4513 15.0544 28.7606 15.1331 29.0625C15.5513 27.4481 17.0044 26.25 18.75 26.25Z" fill="#982020"/>
+<path d="M41.25 26.25C42.9956 26.25 44.4488 27.4481 44.8688 29.0625C44.9456 28.7606 45 28.4513 45 28.125C45 26.055 43.32 24.375 41.25 24.375C39.18 24.375 37.5 26.055 37.5 28.125C37.5 28.4513 37.5544 28.7606 37.6312 29.0625C38.0512 27.4481 39.5044 26.25 41.25 26.25Z" fill="#982020"/>
+<path d="M47.8125 37.5C49.3658 37.5 50.625 36.2408 50.625 34.6875C50.625 33.1342 49.3658 31.875 47.8125 31.875C46.2592 31.875 45 33.1342 45 34.6875C45 36.2408 46.2592 37.5 47.8125 37.5Z" fill="#FF9F9F"/>
+<path d="M12.1875 37.5C13.7408 37.5 15 36.2408 15 34.6875C15 33.1342 13.7408 31.875 12.1875 31.875C10.6342 31.875 9.375 33.1342 9.375 34.6875C9.375 36.2408 10.6342 37.5 12.1875 37.5Z" fill="#FF9F9F"/>
+</svg>

package/dist/assets/img/send.6db52a9.svg

@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.9901 12.7278C24.9893 12.2942 24.7395 11.8965 24.3465 11.7119L9.2318 4.55228C8.82529 4.35897 8.34162 4.42739 8.00511 4.72571C7.66782 5.02482 7.54133 5.49497 7.68373 5.92375L9.50863 11.3953L17.5012 12.7278L9.50704 14.0603L7.68214 19.5318C7.54849 19.9375 7.65509 20.383 7.955 20.6829C7.9717 20.6996 7.98841 20.7147 8.00511 20.7298C8.34241 21.029 8.82529 21.0982 9.23339 20.9049L24.3481 13.7452C24.7395 13.5591 24.9901 13.1621 24.9901 12.7278Z" fill="white"/>
+</svg>

package/dist/assets/img/subiz-mono.877e9f5.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="15" viewBox="0 0 21 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.2176 15C18.4857 15 16.7537 15 15.0379 15C13.0955 15 11.1693 15 9.22689 15C8.35282 15 7.49492 14.8374 6.65322 14.6259C5.87626 14.4308 5.11549 14.1543 4.38709 13.7802C3.62632 13.3898 2.93029 12.9182 2.29901 12.3489C1.60298 11.7309 1.03645 11.0153 0.631786 10.2021C0.227119 9.38886 0.0166929 8.51059 0.000506273 7.58354C-0.0156804 6.29867 0.356612 5.14391 1.06882 4.103C1.73248 3.09463 2.62274 2.31395 3.6425 1.67964C4.67845 1.02908 5.81151 0.606207 6.99314 0.329716C7.6406 0.183339 8.28807 0.0857536 8.96791 0.0369611C9.37257 0.020697 9.77724 -0.0118315 10.1819 0.00443267C11.0236 0.0206968 11.8653 0.118282 12.6908 0.313452C13.6782 0.541151 14.6332 0.882698 15.5397 1.35436C16.2519 1.7447 16.9156 2.2001 17.5306 2.75308C18.2752 3.43617 18.8579 4.23312 19.2626 5.16018C19.4892 5.68063 19.6349 6.23361 19.7158 6.81912C19.8453 7.86003 19.6997 8.83588 19.3112 9.79547C19.0684 10.3972 18.7285 10.934 18.3238 11.4381C18.1943 11.6008 18.0648 11.7472 17.9353 11.8773C17.8706 11.9423 17.8544 11.9911 17.8867 12.0887C18.1457 12.9019 18.5504 13.6338 19.1817 14.2193C19.4245 14.447 19.6997 14.6585 20.0072 14.8048C20.0881 14.8374 20.1691 14.9024 20.25 14.9349C20.2338 14.9675 20.2338 14.9837 20.2176 15ZM12.8365 8.70576C13.2736 8.70576 13.7268 8.6895 14.1638 8.70576C14.3581 8.70576 14.3904 8.64071 14.3904 8.4618C14.3742 7.81124 14.3742 7.16067 14.3904 6.49384C14.3904 6.31493 14.3419 6.26614 14.1638 6.26614C13.2736 6.2824 12.3995 6.26614 11.5092 6.2824C11.2988 6.2824 11.2664 6.21735 11.2664 6.02218C11.2826 5.14391 11.2664 4.28191 11.2664 3.40364C11.2664 3.241 11.234 3.19221 11.056 3.19221C10.3761 3.20847 9.68012 3.20847 9.00028 3.19221C8.82223 3.19221 8.78986 3.25727 8.78986 3.40364C8.78986 4.28191 8.78986 5.16018 8.78986 6.03844C8.78986 6.21735 8.74129 6.26614 8.56324 6.26614C7.68916 6.24988 6.83127 6.26614 5.95719 6.24988C5.74677 6.24988 5.71439 6.31493 5.71439 6.5101C5.73058 7.16067 5.73058 7.79497 5.71439 8.44554C5.71439 8.62444 5.76295 8.6895 5.94101 8.6895C6.7989 8.67324 7.65679 8.6895 8.51468 8.67324C8.72511 8.67324 8.77367 8.73829 8.77367 8.93346C8.75748 9.81173 8.77367 10.6737 8.75748 11.552C8.75748 11.6984 8.78986 11.7472 8.95172 11.7472C9.63156 11.7309 10.3276 11.7309 11.0074 11.7472C11.1855 11.7472 11.2179 11.6821 11.2179 11.5195C11.2017 10.6412 11.2179 9.76294 11.2179 8.88467C11.2179 8.72203 11.2502 8.67324 11.4283 8.67324C11.9463 8.72203 12.3995 8.70576 12.8365 8.70576Z" fill="#ccc"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.0.48",
+	"version": "4.0.52",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -9,33 +9,33 @@
 		"lib": "rm -rf compiled_src && npx babel --out-dir=compiled_src src"
 	},
 	"dependencies": {
-		"@babel/core": "^7.15.8",
+		"@babel/core": "^7.16.0",
 		"@googlemaps/js-api-loader": "^1.11.4",
-		"@subiz/ajax": "^3.0.9",
+		"@subiz/ajax": "^3.0.12",
 		"@subiz/flow": "^1.0.9",
 		"@subiz/storage": "0.0.8",
-		"@subiz/wsclient": "^3.1.2",
-		"babel-loader": "^8.2.2",
+		"@subiz/wsclient": "^3.1.7",
+		"babel-loader": "^8.2.3",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.18.2",
+		"core-js": "^3.19.1",
 		"css-loader": "^5.2.6",
 		"file-loader": "^6.2.0",
 		"less": "^4.1.2",
-		"less-loader": "^10.0.1",
-		"marked": "^3.0.7",
-		"preact": "^10.5.14"
+		"less-loader": "^10.2.0",
+		"marked": "^4.0.4",
+		"preact": "^10.6.0"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.15.7",
-		"@babel/plugin-proposal-class-properties": "^7.14.5",
-		"@babel/plugin-transform-react-jsx": "^7.14.9",
-		"@babel/preset-env": "^7.15.8",
+		"@babel/cli": "^7.16.0",
+		"@babel/plugin-proposal-class-properties": "^7.16.0",
+		"@babel/plugin-transform-react-jsx": "^7.16.0",
+		"@babel/preset-env": "^7.16.4",
 		"babel-plugin-syntax-jsx": "^6.18.0",
-		"html-webpack-plugin": "^5.3.2",
+		"html-webpack-plugin": "^5.5.0",
 		"prettier": "^2.4.1",
-		"webpack": "^5.58.1",
-		"webpack-bundle-analyzer": "^4.4.2",
-		"webpack-cli": "^4.9.0",
-		"webpack-dev-server": "^4.3.1"
+		"webpack": "^5.64.3",
+		"webpack-bundle-analyzer": "^4.5.0",
+		"webpack-cli": "^4.9.1",
+		"webpack-dev-server": "^4.5.0"
 	}
 }

package/src/chatbox/Event.js

@@ -6,6 +6,8 @@ import QuickReplies from './QuickReplies.js'
 import FormAttachments from './FormAttachments.js'
 import FormSubmitAttachments from './FormSubmitAttachments.js'
 import GenericTemplateAttachments from './GenericTemplateAttachments.js'
+import ProductAttachments from './ProductAttachments.js'
+import OrderAttachments from './OrderAttachments.js'
 //import FormSubmitAttachment from './formSubmitAttachment.js'
 import VideoAttachments from './VideoAttachments.js'
 import TextMessage from './TextMessage.js'
@@ -13,68 +15,72 @@ import InfoMessage from './InfoMessage.js' // message by system like convo join,
 
 import sb from '../util/index.js'
 import Time from './time.js'
-import { Com } from '../common.js'
-import { h, createRef } from 'preact'
+import {Com} from '../common.js'
+import {h, createRef} from 'preact'
 
 // ['event'],
 export default class Event extends Com {
-	constructor (props) {
+	constructor(props) {
 		super(props)
 		this.refForm = createRef()
 	}
 
-	render () {
+	render() {
 		var ev = sb.get(this.props.event, 'ev', {})
 		switch (ev.type) {
-		case 'conversation_joined':
-			// return this.renderMessageChatJoin()
-			break
-		case 'message_sent':
-			return this.renderMessageSent()
-		case 'conversation_state_updated':
-		case 'conversation_rating_requested':
-		case 'conversation_rated':
-			if (!sb.startsWith(ev.id, 'ev')) return null // don't show local msg (id == idempotency key)
-			return <InfoMessage t={this.props.t} store={this.props.store} ev={this.props.event} />
+			case 'conversation_joined':
+				// return this.renderMessageChatJoin()
+				break
+			case 'message_sent':
+				return this.renderMessageSent()
+			case 'conversation_state_updated':
+			case 'conversation_rating_requested':
+			case 'conversation_rated':
+				if (!sb.startsWith(ev.id, 'ev')) return null // don't show local msg (id == idempotency key)
+				return <InfoMessage t={this.props.t} store={this.props.store} ev={this.props.event} />
 		}
 		return null
 	}
 
-	focus () {
+	focus() {
 		this.refForm.current && this.refForm.current.focus()
 	}
 
-	chooseQuickReply (reply) {
+	chooseQuickReply(reply) {
 		let ev = sb.get(this.props.event, 'ev', {})
-		let message = { text: reply.title, format: 'plaintext' }
+		let message = {text: reply.title, format: 'plaintext'}
 		if (reply.payload) {
-			message.attachments = [{
-				type: 'postback',
-				postback: {
-					event_id: ev.id,
-					payload: reply.payload,
+			message.attachments = [
+				{
+					type: 'postback',
+					postback: {
+						event_id: ev.id,
+						payload: reply.payload,
+					},
 				},
-			}]
+			]
 		}
 		this.props.onSend(message)
 	}
 
-	choosePostbackBtn (button) {
+	choosePostbackBtn(button) {
 		let ev = sb.get(this.props.event, 'ev', {})
-		let message = { text: button.title, format: 'plaintext' }
+		let message = {text: button.title, format: 'plaintext'}
 		if (button.payload) {
-			message.attachments = [{
-				type: 'postback',
-				postback: {
-					event_id: ev.id,
-					payload: button.payload,
+			message.attachments = [
+				{
+					type: 'postback',
+					postback: {
+						event_id: ev.id,
+						payload: button.payload,
+					},
 				},
-			}]
+			]
 		}
 		this.props.onSend(message)
 	}
 
-	renderAgentAvatar (ev) {
+	renderAgentAvatar(ev) {
 		let bytype = sb.get(ev, 'by.type')
 		let byid = sb.get(ev, 'by.display_id', sb.get(ev, 'by.id'))
 
@@ -91,31 +97,32 @@ export default class Event extends Com {
 		}
 
 		return (
-			<div class="message-sender">
-				<img alt="sender" class="message-sender-avatar" src={this.props.store.replaceFileUrl(uri)} />
-				<p class="message-sender-name">{senderName}</p>
+			<div class='message-sender'>
+				<img alt='sender' class='message-sender-avatar' src={this.props.store.replaceFileUrl(uri)} />
+				<p class='message-sender-name'>{senderName}</p>
 			</div>
 		)
 	}
 
-	renderMessageSent () {
+	renderMessageSent() {
 		let ev = this.props.event.ev
 
 		var $time = null
 		if (this.props.event.show_time) {
 			$time = (
-				<div class="convo-event-time">
+				<div class='convo-event-time'>
 					<Time time={ev.created} />
 				</div>
 			)
 		}
 
+		let t = new sb.Date(ev.created).toLocaleString()
 		// message of agent
 		if (sb.get(ev, 'by.type') !== 'user') {
 			let $sender = null
 			if (this.props.event.mode === 'lead') $sender = this.renderAgentAvatar(ev)
 			return (
-				<div class="convo-event agent-message">
+				<div class='convo-event agent-message' title={t}>
 					{$time}
 					{$sender}
 					<TextMessage store={this.props.store} ev={ev} />
@@ -124,43 +131,51 @@ export default class Event extends Com {
 					<VideoAttachments store={this.props.store} ev={ev} />
 					<FileAttachments store={this.props.store} ev={ev} />
 					<ButtonAttachments store={this.props.store} ev={ev} />
-					<FormAttachments store={this.props.store} onSubmit={this.props.onFormSubmit} ref={this.refForm} ev={ev} t={this.props.t}/>
-					<FormSubmitAttachments store={this.props.store} ev={ev} t={this.props.t}/>
-					<GenericTemplateAttachments store={this.props.store} ev={ev} onSelect={e => this.choosePostbackBtn(e)} />
-					<QuickReplies store={this.props.store} ev={ev} onSelect={e => this.chooseQuickReply(e)} />
+					<FormAttachments
+						store={this.props.store}
+						onSubmit={this.props.onFormSubmit}
+						ref={this.refForm}
+						ev={ev}
+						t={this.props.t}
+					/>
+					<FormSubmitAttachments store={this.props.store} ev={ev} t={this.props.t} />
+					<GenericTemplateAttachments store={this.props.store} ev={ev} onSelect={(e) => this.choosePostbackBtn(e)} />
+					<ProductAttachments t={this.props.t} store={this.props.store} ev={ev} />
+					<OrderAttachments t={this.props.t} store={this.props.store} ev={ev} />
+					<QuickReplies store={this.props.store} ev={ev} onSelect={(e) => this.chooseQuickReply(e)} />
 				</div>
 			)
 		}
 
 		if (sb.getMsgField(ev, 'idempotency') === ev.id && this.props.store.now() - ev.created < 900) {
-			setTimeout(() => this.setState({ refresh: this.state.refresh }), 1000)
+			setTimeout(() => this.setState({refresh: this.state.refresh}), 1000)
 		}
 
 		// only show sending while the message is send too long (>300ms) but haven't returned from
 		// the server
-		let $dot = <div class="sending_dot"></div>
+		let $dot = <div class='sending_dot'></div>
 		if (this.props.store.now() - ev.created < 900 || sb.getMsgField(ev, 'idempotency') !== ev.id) {
-			$dot = <div class="sending_dot sending_dot__hide"></div>
+			$dot = <div class='sending_dot sending_dot__hide'></div>
 		}
 
 		let $sender = null
-		if (this.props.event.mode === 'lead') $sender = <div class="pt-3"></div>
+		if (this.props.event.mode === 'lead') $sender = <div class='pt-3'></div>
 
 		let $error = null
 		if (ev._error && ev.type === 'message_sent') {
 			$error = (
-				<a class="message_error" src="javascript:;" onClick={e => this.resendMessage()}>
-					<div class="message_error__text">{this.props.t('error_send_message')}</div>
-					<div class="message_error__icon" />
+				<a class='message_error' src='javascript:;' onClick={(e) => this.resendMessage()}>
+					<div class='message_error__text'>{this.props.t('error_send_message')}</div>
+					<div class='message_error__icon' />
 				</a>
 			)
 		}
 
 		return (
-			<div class="convo-event user-message">
+			<div class='convo-event user-message' title={t}>
 				{$time}
 				{$sender}
-				<div class="message-user__container">
+				<div class='message-user__container'>
 					{$dot}
 					<TextMessage store={this.props.store} ev={ev} refresh={this.state.refresh} />
 					<ImageAttachments store={this.props.store} ev={ev} />
@@ -169,6 +184,7 @@ export default class Event extends Com {
 					<FileAttachments store={this.props.store} ev={ev} />
 					<ButtonAttachments store={this.props.store} ev={ev} />
 					<FormAttachments store={this.props.store} onSubmit={this.props.onFormSubmit} ref={this.refForm} ev={ev} />
+					<ProductAttachments t={this.props.t} store={this.props.store} ev={ev} />
 					<FormSubmitAttachments store={this.props.store} ev={ev} />
 				</div>
 				{$error}
@@ -176,20 +192,20 @@ export default class Event extends Com {
 		)
 	}
 
-	renderUpdateConvo (ev) {
+	renderUpdateConvo(ev) {
 		var state = sb.get(ev, 'data.conversation.state')
 		if (state === 'active') return null
 		if (state === 'pending') return null
-		return <div class="message-system">{this.props.t('conversation_state_updated', { state })}</div>
+		return <div class='message-system'>{this.props.t('conversation_state_updated', {state})}</div>
 	}
 
-	resendMessage () {
+	resendMessage() {
 		let cid = sb.convoOfEv(this.props.event.ev)
 		const message = sb.get(this.props.event, 'ev.data.message')
-		this.props.store.sendConvoEvent(cid, 'message_sent', { message })
+		this.props.store.sendConvoEvent(cid, 'message_sent', {message})
 	}
 
-	getSenderName (ev) {
+	getSenderName(ev) {
 		let bytype = sb.get(ev, 'by.type')
 		let byid = sb.get(ev, 'by.display_id', sb.get(ev, 'by.id'))
 		if (byid === 'system' || bytype === 'dummy') return 'system'

package/src/chatbox/OrderAttachments.js

@@ -0,0 +1,109 @@
+import sb from '../util/index.js'
+import {Com} from '../common.js'
+import {h, createRef, Fragment} from 'preact'
+
+export default class ProductAttachments extends Com {
+	render() {
+		let byType = sb.get(this.props.ev, 'by.type')
+		if (byType === 'user') return null
+		// filter out all generic
+
+		let acc = this.props.store.matchAccount()
+		var attachments = sb.get(this.props.ev, 'data.message.attachments', [])
+		let orders = sb.filter(attachments, (att) => att.type === 'order' && att.order).map((att) => att.order)
+
+		if (orders.length === 0) return null
+
+		let $orders = sb.map(orders, (order, index) => {
+			let $note = null
+			if (order.note) {
+				$note = (
+					<div>
+						<div class='order_attachment__label'>{this.props.t('note')}</div>
+						<div class='order_attachment__text_truncate'>{order.note}</div>
+					</div>
+				)
+			}
+
+			let $products = null
+			if (sb.size(order.items) > 0) {
+				$products = (
+					<div>
+						<div class='order_attachment__label'>{this.props.t('product')}</div>
+						{sb.map(order.items, (item) => {
+							let product = item.product || {}
+
+							return (
+								<div class='order_attachment__product'>
+									<img
+										class='order_attachment__product_img'
+										src={(sb.get(product, 'images.0'), require('../../assets/img/default.jpg'))}
+									/>
+									<div style='overflow: hidden !important;'>
+										<div class='order_attachment__product_name'>{product.name}</div>
+										<div class='order_attachment__product_desc'>{product.description || product.long_description}</div>
+										<div class='order_attachment__product_desc'>
+											{this.props.t('qty')} {item.quantity}&nbsp;·&nbsp;{sb.formatCurrency(product.price)}
+										</div>
+									</div>
+								</div>
+							)
+						})}
+					</div>
+				)
+			}
+
+			let {total} = this.props.store.getOrderTotal(order)
+
+			let $total = (
+				<div class='order_attachment__footer'>
+					<div>{this.props.t('total')}</div>{' '}
+					<div>
+						<b>{sb.formatCurrency(total)}</b>
+					</div>
+				</div>
+			)
+
+			let addr = sb.get(order, 'shipping.address', {})
+			let fulladdr = [addr.street, addr.ward, addr.district, addr.region, addr.country].filter((a) => a).join(', ')
+			let address = fulladdr
+
+			let phoneattr = sb.find(sb.get(order, 'user.attributes', []), (attr) => attr.key === 'phones') || {
+				key: 'phones',
+				text: '',
+			}
+			let phone = sb.get(order, 'shipping.address.phone', '').trim()
+			phone = phone || sb.trim(phoneattr.text)
+			if (phone) phone = this.props.t('phn') + ': ' + phone
+
+			let $shipto = null
+			if (address || phone) {
+				$shipto = (
+					<div>
+						<div class='order_attachment__label'>{this.props.t('ship_to')}</div>
+						<div class='order_attachment__text_truncate'>{address}</div>
+						<div class='order_attachment__text_truncate'>{phone}</div>
+					</div>
+				)
+			}
+
+			return (
+				<div class={`order_attachment order_attachment__${byType}`}>
+					<div class='order_attachment__header'>
+						{this.props.t('order')}
+						<span class='order_attachment__text_muted order_attachment__text_sm'>#{order.id}</span>
+					</div>
+					{$products}
+					{$shipto}
+					<div>
+						<div class='order_attachment__label'>{this.props.t('payment')}</div>
+						<div>COD</div>
+					</div>
+					{$note}
+					{$total}
+				</div>
+			)
+		})
+		return $orders
+	}
+}

package/src/chatbox/ProductAttachments.js

@@ -0,0 +1,70 @@
+import sb from '../util/index.js'
+import {Com} from '../common.js'
+import {h, createRef, Fragment} from 'preact'
+
+export default class ProductAttachments extends Com {
+	render() {
+		let byType = sb.get(this.props.ev, 'by.type')
+		if (byType === 'user') return null
+		// filter out all generic
+		let attachments = sb.get(this.props.ev, 'data.message.attachments', [])
+		let products = sb.filter(
+			attachments,
+			(att) => sb.get(att, 'type') === 'product' || sb.get(att, 'type') === 'product_preview',
+		)
+
+		products = products.filter((product) => product.product && product.product.name)
+
+		if (products.length === 0) return null
+
+		let acc = this.props.store.matchAccount()
+
+		let $products = sb.map(products, (att, index) => {
+			let product = att.product
+
+			let $detailbtn = null
+			let url = product.url || product.mobile_url
+			if (this.props.store.isMobile()) url = product.mobile_url || product.url
+			if (url)
+				$detailbtn = (
+					<a class='product_attachment__btn' href={url} target='_blank'>
+						{this.props.t('detail')}
+						<img src={require('../../assets/img/external-link.svg')} class='product_attachment__btn_external_link' />
+					</a>
+				)
+
+			let $title = (
+				<a href={url} class='product_attachment__title' target='_blank'>
+					{product.name}
+				</a>
+			)
+			let $subtitle = null
+			let desc = product.description || product.long_description
+			if (desc) $subtitle = <div class='product_attachment__subtitle'>{desc}</div>
+
+			let $price = null
+			if (product.price) {
+				$price = (
+					<div class='product_attachment__price'>
+						{product.currency || sb.get(acc, 'currency', '')} {sb.formatCurrency(product.price)}
+					</div>
+				)
+			}
+			return (
+				<div class={'product_attachment product_attachment__' + byType}>
+					<div>
+						<a href={this.props.store.replaceFileUrl(product.image)} target='_blank'>
+							<img class='product_attachment__img' src={this.props.store.replaceFileUrl(product.image)} />
+						</a>
+					</div>
+					{$title}
+					{$subtitle}
+					{$price}
+					<div class='product_attachment__btns'>{$detailbtn}</div>
+				</div>
+			)
+		})
+
+		return $products
+	}
+}

package/src/chatbox/TextMessage.js

@@ -7,7 +7,7 @@ let marked = (obj, text) => {
 
 const loadMarked = () => import(/*webpackChunkName: "marked" */ 'marked')
 ;(async () => {
-	let markedf = (await loadMarked()).default
+	let markedf = (await loadMarked()).marked
 	marked = (obj, text) => markedf(text)
 	sb.map(mustrerender, obj => obj.forceUpdate())
 	mustrerender = []

package/src/plugin.js

@@ -29,7 +29,7 @@ function Plugin(plugin, store, $container, lib) {
 
 	this.getState = () => state
 
-	var run = async function() {
+	var run = async function () {
 		if (_destroy) return
 		if (state !== 'hold') return
 
@@ -370,10 +370,15 @@ function downloadLanguage(store, locale, force) {
 }
 
 const getLocale = (plugin, loc) => {
-	let found = sb.find(plugin.locales, (l) => l === loc)
+	if (!loc) loc = ''
+	let found = sb.find(plugin.locales, (l) => l.toLowerCase().trim() === loc.toLowerCase().trim())
 	if (found) return loc
-	found = sb.find(plugin.locales, (l) => (l || '').toLowerCase().includes(loc.toLowerCase()))
-	if (found) return found
 
+	found = sb.find(plugin.locales, (l) => {
+		l = l.replace('-', '_').split('_')[0].trim().toLowerCase()
+		let compareloc = loc.replace('-', '_').split('_')[0].trim().toLowerCase()
+		return l == compareloc
+	})
+	if (found) return found
 	return plugin.locale || 'en-US'
 }

package/src/store/api.js

@@ -47,10 +47,7 @@ export default class {
 			.get('/conversations')
 
 	listMessages = (cid, limit, start_id) =>
-		this.apireq
-			.addQuery('limit', limit)
-			.addQuery('start_id', start_id)
-			.get(`/conversations/${cid}/messages`)
+		this.apireq.addQuery('limit', limit).addQuery('start_id', start_id).get(`/conversations/${cid}/messages`)
 
 	ajax = ajax
 
@@ -85,7 +82,7 @@ export default class {
 		return this.sendEvent({
 			by: {id: this.uid, device: device},
 			type: 'content_viewed',
-			data: {product: {url: pageUrl, title: pageTitle}},
+			data: {product: {url: pageUrl, name: pageTitle, title: pageTitle}},
 		})
 	}