Add custom push notification

mrafei · Jul 7, 2020 · d16bda5 · d16bda5
1 parent 812530d
commit d16bda5
Show file tree

Hide file tree

Showing 7 changed files with 332 additions and 54 deletions.
diff --git a/assets/notification.css b/assets/notification.css
@@ -0,0 +1,154 @@
+@font-face {
+  font-family: "IranSans";
+  src: url("./fonts/IRANSansWeb.ttf") format("truetype"),
+    url("./fonts/IRANSansWeb.woff") format("woff");
+  font-weight: normal;
+  font-display: swap;
+}
+html {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+body {
+  font-family: "IranSans", serif !important;
+  direction: rtl;
+  text-align: right !important;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  padding: 8px;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.h-100 {
+  height: 100%;
+}
+
+.u-border-radius-8 {
+  width: calc(100% - 16px);
+  height: calc(100% - 16px);
+  border-radius: 8px;
+}
+
+.u-background-primary-blue {
+  background-color: #168fd5;
+}
+.px-3 {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+.u-fontVerySmall {
+  font-size: 13px;
+}
+
+.py-1 {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.px-2 {
+  padding-right: 10px;
+  padding-left: 10px;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.justify-content-between {
+  justify-content: space-between;
+}
+.justify-content-center {
+  justify-content: center;
+}
+.text-center {
+  text-align: center;
+}
+.u-lineHeight-22 {
+  line-height: 22px;
+}
+.align-items-center {
+  align-items: center;
+}
+.u-fontLarge {
+  font-size: 18px;
+}
+.u-fontMedium {
+  font-size: 16px;
+}
+.u-border-bottom-dark {
+  border-bottom: 1px solid black;
+}
+
+.u-fontWeightBold {
+  font-weight: bold;
+}
+
+.mt-1 {
+  margin-top: 5px;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.pb-1 {
+  padding-bottom: 5px;
+}
+
+.u-background-black {
+  background-color: black;
+}
+
+.u-text-white {
+  color: white;
+}
+
+.mr-2 {
+  margin-right: 10px;
+}
+
+.p-1 {
+  padding: 5px;
+}
+
+.position-absolute {
+  position: absolute;
+}
+
+.position-relative {
+  position: relative;
+}
+
+.left-0 {
+  left: 0;
+}
+.right-0 {
+  right: 0;
+}
+.bottom-0 {
+  bottom: 0;
+}
+.top-0 {
+  top: 0;
+}
+.h-20 {
+  vertical-align: middle;
+  line-height: 20px;
+  height: 20px;
+}
+.ml-1 {
+  margin-left: 3px;
+}
+.u-cursor-pointer {
+  cursor: pointer;
+}
diff --git a/assets/notification.html b/assets/notification.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Title</title>
+    <link rel="stylesheet" href="./notification.css" type="text/css" />
+  </head>
+  <body>
+    <div
+      class="position-relative u-cursor-pointer u-border-radius-8 u-background-primary-blue overflow-hidden u-text-white d-flex justify-content-center align-items-center"
+    >
+      <div class="text-center">
+        <svg
+          width="35"
+          height="35"
+          viewBox="0 0 35 35"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M26.2498 23.334V16.0423C26.2498 11.5652 23.8581 7.81732 19.6873 6.82565V5.83398C19.6873 4.62357 18.6956 3.64648 17.4852 3.64648C16.2748 3.64648 15.3123 4.62357 15.3123 5.83398V6.82565C11.1269 7.81732 8.7498 11.5507 8.7498 16.0423V23.334L6.85397 25.2152C5.93522 26.134 6.57689 27.709 7.8748 27.709H27.0811C28.379 27.709 29.0352 26.134 28.1165 25.2152L26.2498 23.334ZM17.4852 32.084C19.0894 32.084 20.4019 30.7715 20.4019 29.1673H14.5686C14.5686 30.7715 15.8665 32.084 17.4852 32.084ZM9.87272 6.89857C10.4852 6.3444 10.4998 5.39648 9.91647 4.81315C9.3623 4.25898 8.45814 4.2444 7.88939 4.78398C5.39564 7.05898 3.6748 10.1507 3.12064 13.6215C2.98939 14.5111 3.6748 15.3132 4.57897 15.3132C5.27897 15.3132 5.89147 14.8027 6.00814 14.1027C6.44564 11.2736 7.84564 8.75065 9.87272 6.89857ZM27.1248 4.78398C26.5415 4.2444 25.6373 4.25898 25.0831 4.81315C24.4998 5.39648 24.529 6.32982 25.1269 6.88398C27.1394 8.73607 28.554 11.259 28.9915 14.0882C29.0936 14.7882 29.7061 15.2986 30.4206 15.2986C31.3102 15.2986 32.0102 14.4965 31.8644 13.6069C31.3102 10.1507 29.604 7.07357 27.1248 4.78398Z"
+            fill="white"
+          />
+        </svg>
+        <div class="d-flex u-fontMedium u-fontWeightBold">
+          <span id="order-number" class="ml-1">۱</span>
+          <span>سفارش جدید دارید.</span>
+        </div>
+        <div class="d-flex justify-content-center align-items-center mt-1">
+          <span class="h-20 u-fontVerySmall">دیدن سفارش</span>
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M14.9005 6.70024C14.8101 6.60548 14.7015 6.53005 14.5812 6.47851C14.4609 6.42697 14.3313 6.40039 14.2004 6.40039C14.0695 6.40039 13.94 6.42697 13.8196 6.47851C13.6993 6.53005 13.5907 6.60548 13.5004 6.70024L8.90045 11.3002C8.8057 11.3906 8.73025 11.4992 8.67871 11.6195C8.62717 11.7398 8.60059 11.8693 8.60059 12.0002C8.60059 12.1311 8.62717 12.2607 8.67871 12.381C8.73025 12.5013 8.8057 12.6099 8.90045 12.7002L13.5004 17.3002C13.6867 17.4828 13.9375 17.5845 14.1984 17.5832C14.4592 17.5818 14.7089 17.4776 14.8934 17.2932C15.0778 17.1088 15.182 16.859 15.1833 16.5982C15.1847 16.3373 15.083 16.0865 14.9005 15.9002L11.0004 12.0002L14.9005 8.10024C14.9952 8.00993 15.0706 7.90132 15.1221 7.781C15.1737 7.66068 15.2003 7.53114 15.2003 7.40024C15.2003 7.26934 15.1737 7.13981 15.1221 7.01948C15.0706 6.89916 14.9952 6.79055 14.9005 6.70024Z"
+              fill="white"
+            />
+          </svg>
+        </div>
+      </div>
+      <svg
+        class="position-absolute left-0 top-0"
+        width="58"
+        height="56"
+        viewBox="0 0 58 56"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          opacity="0.4"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M18.1579 55.7763C11.8379 55.7763 5.74254 54.3147 0.257812 51.5514V47.9993C5.55698 50.9692 11.6633 52.6636 18.1579 52.6636C38.4106 52.6636 54.8873 36.1869 54.8873 15.9341C54.8873 10.3636 53.6408 5.07869 51.412 0.34375H54.8465C56.9147 5.20909 58 10.4882 58 15.9341C58 26.5763 53.8556 36.5815 46.3306 44.1067C38.8053 51.6321 28.8001 55.7763 18.1579 55.7763ZM4.84532 44.5842C3.29442 44.6176 1.70772 44.6518 0.257812 44.248V40.8929C1.31769 41.5466 3.00086 41.5103 4.77862 41.472L4.78022 41.4719L4.81163 41.4713L4.81206 41.4712C5.22993 41.4624 5.65127 41.4536 6.07291 41.4536C7.31533 41.4536 8.55978 41.5309 9.72267 41.9096C11.224 42.3984 12.5478 43.4163 13.8281 44.4008L13.8303 44.4025C15.3438 45.5666 16.7736 46.6662 18.1586 46.6662C19.5436 46.6662 20.9732 45.5666 22.4868 44.4025C23.7676 43.4173 25.0921 42.3987 26.5944 41.9094C28.1618 41.3991 29.8772 41.4361 31.5367 41.4721C33.4046 41.5125 35.1687 41.5507 36.2147 40.7888C37.2785 40.014 37.7863 38.3133 38.3239 36.5128C38.7964 34.93 39.285 33.2932 40.2458 31.9744C41.1936 30.6736 42.5891 29.7158 43.9385 28.7896L43.9393 28.7891C45.4998 27.7181 46.9738 26.7065 47.3895 25.4302C47.7785 24.2359 47.2034 22.5897 46.5945 20.8464L46.5939 20.8448C46.0397 19.2585 45.4666 17.6183 45.4666 15.9342C45.4666 14.2501 46.0397 12.6099 46.5939 11.0237L46.5941 11.0231C47.2032 9.2796 47.7785 7.63261 47.3895 6.4381C46.9738 5.16191 45.4998 4.15029 43.9393 3.07938L43.9382 3.07864C42.7491 2.26258 41.5243 1.42206 40.6017 0.34375H45.4542L45.7003 0.512728L45.7003 0.512753L45.7004 0.512828C47.5313 1.7691 49.6063 3.19315 50.3492 5.47411C51.0634 7.6676 50.2851 9.89565 49.5323 12.0501L49.5319 12.0512C49.0419 13.4536 48.5792 14.7783 48.5792 15.9339C48.5792 17.0895 49.0419 18.4142 49.5319 19.8166L49.5323 19.8177C50.2851 21.9723 51.0634 24.2002 50.3492 26.3936C49.6063 28.6747 47.5313 30.0987 45.7004 31.355L45.6978 31.3568C44.5133 32.1698 43.3946 32.9376 42.7616 33.8067C42.1149 34.6944 41.7221 36.01 41.3063 37.4027L41.3059 37.4039C40.675 39.5167 39.9601 41.9109 38.0475 43.3042C36.1526 44.6845 33.7727 44.6332 31.4716 44.5835L31.4693 44.5835C30.0049 44.5518 28.6228 44.5219 27.5582 44.8686C26.5657 45.1918 25.5071 46.0058 24.3863 46.8677L24.3863 46.8677L24.3844 46.8691C22.6114 48.2333 20.6019 49.7789 18.1585 49.7789C15.715 49.7789 13.7055 48.2334 11.9327 46.8699C10.8112 46.0072 9.75177 45.1926 8.75868 44.8692C7.69383 44.5225 6.31072 44.5524 4.84762 44.5841L4.84532 44.5842ZM0.521077 26.2592C0.432645 26.2592 0.344794 26.2548 0.257812 26.2461V22.6715L0.458669 22.8705C0.970546 22.0465 1.79618 20.6511 2.84048 18.8433C3.08249 18.4243 3.5055 18.1419 3.98516 18.0787C4.46311 18.0158 4.94635 18.1791 5.28859 18.5211L7.78526 21.0178C7.92424 21.1569 8.14757 21.1689 8.30492 21.0457C8.55097 20.8528 8.7866 20.6392 9.00527 20.4104C11.4271 17.8773 11.3908 13.7889 8.92418 11.2971C7.69079 10.0511 6.04652 9.36243 4.29409 9.35807H4.27697C2.80166 9.35807 1.40156 9.8431 0.257812 10.7385V7.11658C1.50857 6.54333 2.88032 6.24317 4.30188 6.24556C6.88881 6.2521 9.31606 7.26854 11.1365 9.1075C12.9079 10.8971 13.8957 13.2775 13.9185 15.8106C13.9412 18.3442 12.9951 20.7417 11.2551 22.5617C10.934 22.8975 10.5874 23.2118 10.2251 23.4958C8.83065 24.5888 6.83543 24.4702 5.58445 23.2189L4.51727 22.1518C3.83933 23.3078 3.16544 24.4344 2.76173 25.0501C2.31817 25.7266 1.60211 26.1621 0.797015 26.2451C0.704413 26.2546 0.612434 26.2592 0.521077 26.2592ZM1.32975 17.3324C1.02008 17.5113 0.651654 17.7247 0.257812 17.9542V13.4904L1.65175 14.8843C1.99384 15.2264 2.1574 15.7081 2.09437 16.1877C2.03119 16.6674 1.74856 17.0904 1.32975 17.3324ZM7.4719 0.34375C7.40485 0.843384 7.37023 1.35314 7.37023 1.87084C7.37023 2.7304 8.06716 3.42717 8.92657 3.42717H28.6579C29.5174 3.42717 30.2143 2.7304 30.2144 1.87084C30.2144 1.35314 30.1798 0.843384 30.1128 0.34375H7.4719ZM37.628 24.0093C37.8994 23.194 38.7806 22.7529 39.5963 23.0242C40.4118 23.2958 40.8529 24.177 40.5814 24.9925C37.7061 33.63 29.663 39.4334 20.5668 39.4334C19.7074 39.4334 19.0105 38.7366 19.0105 37.877C19.0105 37.0175 19.7074 36.3207 20.5668 36.3207C28.3203 36.3207 35.1767 31.3731 37.628 24.0093ZM40.0988 16.7848H40.0766C39.2172 16.7848 38.5202 17.4815 38.5202 18.3411C38.5202 19.2007 39.2172 19.8974 40.0766 19.8974H40.0988C40.9584 19.8974 41.6552 19.2007 41.6552 18.3411C41.6552 17.4815 40.9584 16.7848 40.0988 16.7848ZM19.0105 11.3159C19.0105 10.4563 19.7074 9.75954 20.5668 9.75954C26.7923 9.75954 31.8572 14.8243 31.8572 21.0498C31.8572 27.2755 26.7923 32.3404 20.5668 32.3404C19.7074 32.3404 19.0105 31.6436 19.0105 30.7841V11.3159ZM22.1231 13.0208V29.0791C25.8907 28.3503 28.7445 25.0272 28.7445 21.05C28.7445 17.0728 25.8907 13.7497 22.1231 13.0208ZM37.2842 3.65221C34.1089 3.65221 31.5257 6.23541 31.5257 9.41064C31.5257 12.5859 34.1089 15.1691 37.2842 15.1691C40.4595 15.1691 43.0426 12.5859 43.0426 9.41064C43.0426 6.23541 40.4594 3.65221 37.2842 3.65221ZM37.2842 12.0564C35.8252 12.0564 34.6384 10.8695 34.6384 9.41064C34.6384 7.95173 35.8252 6.76487 37.2842 6.76487C38.7431 6.76487 39.9299 7.95173 39.9299 9.41064C39.9299 10.8695 38.7431 12.0564 37.2842 12.0564ZM3.71276 34.3628C3.71276 31.1876 6.29597 28.6044 9.47119 28.6044C12.6464 28.6044 15.2296 31.1876 15.2296 34.3628C15.2296 37.538 12.6464 40.1212 9.47119 40.1212C6.29597 40.1212 3.71276 37.538 3.71276 34.3628ZM6.82543 34.3628C6.82543 35.8217 8.01229 37.0086 9.47119 37.0086C10.9301 37.0086 12.117 35.8217 12.117 34.3628C12.117 32.9039 10.9301 31.717 9.47119 31.717C8.01229 31.717 6.82543 32.9039 6.82543 34.3628Z"
+          fill="white"
+        />
+      </svg>
+      <svg
+        class="position-absolute bottom-0 right-0"
+        width="35"
+        height="51"
+        viewBox="0 0 35 51"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          opacity="0.3"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M34.8906 6.8199C34.8272 6.71995 34.7447 6.6297 34.644 6.55481C28.8804 2.26788 22.0162 0.00195312 14.794 0.00195312C14.3616 0.00195312 13.9785 0.280948 13.846 0.692519L3.5551 32.6224L3.55022 32.6383L0.163829 43.1457C-0.22553 44.3554 0.090718 45.6673 0.989161 46.5697C1.89667 47.481 3.22371 47.8053 4.45265 47.4151L19.013 42.7941V46.7847C19.013 49.0478 20.8329 50.9381 23.0698 50.9987C23.1092 50.9998 23.1485 51.0004 23.1878 51.0004C24.286 51.0004 25.3184 50.5825 26.1057 49.8161C26.9145 49.0289 27.3601 47.9757 27.3601 46.8506V40.1449L32.5923 38.4843V43.0017C32.5923 44.5062 33.5497 45.7925 34.8906 46.2904V43.909C34.6984 43.6558 34.5844 43.3416 34.5844 43.0017V37.123C34.5844 36.8053 34.4328 36.5068 34.1766 36.3192C33.9203 36.1316 33.5898 36.0775 33.287 36.1736L26.0626 38.4667C25.6489 38.5979 25.3678 38.982 25.3678 39.416V46.8506C25.3678 47.4334 25.1365 47.9796 24.7162 48.3885C24.2895 48.8038 23.7265 49.025 23.1238 49.0074C21.9555 48.9757 21.0051 47.9787 21.0051 46.7847V42.0595C21.7538 41.7846 22.4559 41.3492 23.0563 40.7534C24.1389 39.6791 24.7351 38.2499 24.7351 36.7295C24.7351 35.209 24.1389 33.7801 23.0563 32.7058C20.8264 30.4928 17.1982 30.4927 14.9682 32.7057C13.8855 33.78 13.2894 35.2092 13.2894 36.7295C13.2894 38.2499 13.8855 39.679 14.9682 40.7533C15.3161 41.0985 15.6981 41.39 16.1034 41.6275L12.6017 42.7389C11.7728 41.1973 10.1395 40.1859 8.34026 40.1859C5.67541 40.1859 3.50739 42.3541 3.50739 45.0189C3.50739 45.2074 3.51825 45.3946 3.53976 45.5803C3.11963 45.6205 2.70955 45.4744 2.40077 45.1642C2.02516 44.7869 1.89776 44.2606 2.06002 43.7565L5.16802 34.113C5.46873 34.1599 5.77013 34.1832 6.07014 34.1832C7.58096 34.1832 9.05094 33.5942 10.1644 32.4892C11.2639 31.3981 11.8694 29.947 11.8694 28.4032C11.8694 26.8588 11.2636 25.4071 10.1635 24.3155C9.72567 23.8809 9.22007 23.5187 8.67115 23.2434L13.6637 7.75256C22.8442 8.94405 29.7537 12.5262 34.2319 18.4132C32.7261 19.2572 31.7305 20.875 31.7305 22.6674C31.7305 24.7511 33.0463 26.5333 34.8906 27.2267V24.9799C34.1826 24.4554 33.7228 23.614 33.7228 22.6671C33.7228 21.736 34.1769 20.8846 34.8906 20.3535V16.0543C30.1487 10.4873 23.2346 7.05329 14.2846 5.8254L15.5168 2.00213C22.0424 2.14776 28.2301 4.26697 33.4552 8.15328C33.6338 8.28605 33.8422 8.3502 34.0489 8.3502C34.3531 8.3502 34.6534 8.21125 34.8489 7.94849C34.8637 7.92865 34.8776 7.90844 34.8906 7.88791V6.8199ZM5.79105 32.1797C6.88143 32.2581 7.96106 31.8689 8.76119 31.0749C9.48094 30.3607 9.87727 29.4118 9.87737 28.403C9.87737 27.3936 9.48074 26.4441 8.76039 25.7293C8.54564 25.5162 8.30639 25.3296 8.04911 25.1735L5.79105 32.1797ZM8.34026 42.1779C6.78262 42.1779 5.51385 43.4382 5.4996 44.9924L10.6456 43.3594C10.1213 42.6354 9.26828 42.1779 8.34026 42.1779ZM16.3715 39.3393C17.8276 40.7844 20.1969 40.7845 21.653 39.3393C22.356 38.6419 22.743 37.7149 22.7431 36.7296C22.7431 35.7442 22.3561 34.8173 21.6531 34.1198C20.925 33.3972 19.9687 33.036 19.0123 33.036C18.0559 33.036 17.0996 33.3972 16.3715 34.1198C15.6685 34.8174 15.2815 35.7441 15.2815 36.7296C15.2815 37.7149 15.6684 38.6418 16.3715 39.3393ZM25.3351 16.8685C25.3351 15.2667 24.7069 13.7612 23.5663 12.6292C21.2168 10.2978 17.3938 10.2978 15.0443 12.6292C13.9037 13.7611 13.2755 15.2666 13.2755 16.8685C13.2755 18.4702 13.9037 19.9757 15.0443 21.1077C16.2191 22.2734 17.7622 22.8563 19.3053 22.8563C20.8484 22.8563 22.3915 22.2734 23.5662 21.1077C24.7069 19.9757 25.3351 18.4702 25.3351 16.8685ZM22.1631 19.6935C20.5873 21.2572 18.0233 21.2572 16.4476 19.6935C15.6866 18.9385 15.2676 17.9352 15.2676 16.8685C15.2676 15.8017 15.6866 14.7984 16.4476 14.0434C17.2354 13.2615 18.2703 12.8707 19.3053 12.8707C20.3403 12.8707 21.3751 13.2616 22.163 14.0434C22.924 14.7984 23.3429 15.8017 23.3429 16.8685C23.343 17.9352 22.9241 18.9385 22.1631 19.6935ZM21.7367 25.3193C23.8423 23.2807 27.2035 23.3244 29.2295 25.4167C31.2555 27.5091 31.1907 30.8699 29.0852 32.9086C28.8919 33.0957 28.642 33.189 28.3925 33.189C28.1321 33.189 27.8721 33.0876 27.6768 32.8858L21.714 26.7277C21.5302 26.538 21.4294 26.2829 21.4336 26.0188C21.4379 25.7548 21.5469 25.5032 21.7367 25.3193ZM23.943 26.1661L28.3101 30.6762C28.9857 29.4374 28.8213 27.8589 27.7982 26.8025C26.7754 25.7461 25.203 25.5308 23.943 26.1661Z"
+          fill="white"
+        />
+      </svg>
+    </div>
+    <script>
+      const ipcRenderer = require("electron").ipcRenderer;
+      let notificationStack = [];
+      function englishNumberToPersianNumber(num) {
+        const id = ["۰", "۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹"];
+        if (num && num.toString()) return num.toString().replace(/[0-9]/g, (w) => id[+w]);
+        return "۰";
+      }
+      function writeContents() {
+        document.getElementById("order-number").innerHTML = englishNumberToPersianNumber(
+          notificationStack.length
+        );
+      }
+      ipcRenderer.on("orderReceived", (event, notification) => {
+        console.log(notification);
+        notificationStack.push(notification);
+        writeContents();
+      });
+      document.addEventListener("click", function () {
+        ipcRenderer.send("redirectOrder", notificationStack.pop());
+        writeContents();
+        if (notificationStack.length === 0) ipcRenderer.send("hideNotification");
+      });
+    </script>
+  </body>
+</html>
diff --git a/assets/printStyle.css b/assets/printStyle.css
@@ -1,7 +1,3 @@
-/*body {*/
-/*  transform: rotate(-90deg);*/
-/*}*/
-
 @font-face {
   font-family: "IranSans";
   src: url("./fonts/IRANSansWeb.ttf") format("truetype"),

diff --git a/main.js b/main.js
@@ -3,7 +3,7 @@
 // Import parts of electron to use
 const { testDataBase } = require("./utils/database");
 
-const { app, BrowserWindow, ipcMain } = require("electron");
+const { app, BrowserWindow, ipcMain, screen } = require("electron");
 const path = require("path");
 const url = require("url");
 const { setup: setupPushReceiver } = require("electron-push-receiver");
@@ -20,6 +20,7 @@ testDataBase();
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow;
 let workerWindow;
+let notifWindow;
 
 // Keep a reference for dev mode
 let dev = false;
@@ -41,6 +42,10 @@ if (process.platform === "win32") {
 }
 
 function createWindow() {
+  let display = screen.getPrimaryDisplay();
+  let width = display.bounds.width;
+  let height = display.bounds.height;
+
   // Create the browser window.
   mainWindow = new BrowserWindow({
     width: 1024,
@@ -98,15 +103,33 @@ function createWindow() {
     // when you should delete the corresponding element.
     mainWindow = null;
     workerWindow = null;
+    notifWindow = null;
     app.quit();
   });
   workerWindow = new BrowserWindow({
+    show: false,
     webPreferences: {
       nodeIntegration: true,
     },
   });
   workerWindow.loadURL("file://" + __dirname + "/assets/printerWindow.html");
-  workerWindow.hide();
+
+  notifWindow = new BrowserWindow({
+    width: 240,
+    height: 135,
+    show: false,
+    transparent: true,
+    frame: false,
+    focusable: false,
+    x: width - 250,
+    y: height - 195,
+    webPreferences: {
+      nodeIntegration: true,
+    },
+  });
+  notifWindow.loadURL("file://" + __dirname + "/assets/notification.html");
+  notifWindow.setAlwaysOnTop(true, "floating", 1);
+  notifWindow.setVisibleOnAllWorkspaces(true);
 }
 
 // This method will be called when Electron has finished
@@ -145,6 +168,22 @@ ipcMain.on("readyToPrint", (event, printOptions) => {
   });
 });
 
+ipcMain.on("orderReceived", (event, notification) => {
+  notifWindow.webContents.send("orderReceived", notification);
+  notifWindow.show();
+});
+ipcMain.on("hideNotification", () => {
+  notifWindow.hide();
+});
+
+ipcMain.on("redirectOrder", (event, notification) => {
+  if (notification.click_action) {
+    let split = notification.click_action.split("/");
+    const orderId = split[split.length - 1];
+    mainWindow.webContents.send("redirectOrder", orderId);
+  }
+});
+
 function handleSquirrelEvent() {
   if (process.argv.length === 1) {
     return false;

diff --git a/src/components/Flickity/index.js b/src/components/Flickity/index.js
@@ -14,7 +14,6 @@ function Flickity({ dragging, flickityRef, ...props }) {
   useEffect(() => {
     if (flkty.current && dragging) {
       flkty.current.on('dragStart', () => {
-        console.log("#$%")
         dragging.current = true;
       });
       flkty.current.on('dragEnd', () => {

diff --git a/src/containers/OnlineOrder/index.js b/src/containers/OnlineOrder/index.js
@@ -55,7 +55,7 @@ export function OnlineOrder({
     setTimeout(() => {
       _getAdminOrder({ id: match.params.id });
     }, 0);
-  }, []);
+  }, [match]);
   useEffect(() => {
     setDeliverer(order.deliverer_name);
     setDuration(order.delivery_time ? order.delivery_time / 60 : "");
@@ -82,7 +82,7 @@ export function OnlineOrder({
               printOptions.website,
               printOptions.printers[index]
             ),
-          200 * index
+          index * 200
         );
     });
   }, [printOptions, business, order]);