Dev/add map directions

package.json

@@ -13,6 +13,7 @@
     "@internationalized/date": "^3.0.0",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.8.0",
+    "@react-google-maps/api": "^2.18.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
@@ -26,6 +27,7 @@
     "firebase": "^9.18.0",
     "firebaseui": "^6.0.2",
     "formik": "^2.2.9",
+    "google-map-react": "^2.2.0",
     "react": "^18.1.0",
     "react-bootstrap": "^2.3.1",
     "react-bootstrap-time-picker": "^2.0.1",

public/index.html

@@ -36,5 +36,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=04e9e6107e23bbb2571a7b33d5faeef1"></script>
   </body>
 </html>

src/App.css

@@ -20,3 +20,4 @@ App {
   background-repeat: repeat;
   background-size: cover;
 } */
+

src/components/BookingMenu/BookingMenu.js

@@ -1,17 +1,18 @@
 import React from "react";
 import Button from "react-bootstrap/Button";
-
+import MapDirections from "../MapDirections/MapDirections";
 import "./BookingMenu.css";
+
 const BookingMenu = ({ onMakeAppointment, onModifyAppointment, onBack }) => {
+
+
   return (
-    <div className="d-flex flex-column px-3 pt-5 pt-md-0 justify-content-md-center booking-page">
-      {/* <h2>Booking Menu</h2> */}
+    <div className="d-flex flex-column px-3 pt-5 pt-md-0 justify-content-md-center booking-page ">
       <div className="d-flex flex-column ">
         <div className="text-capitalize fs-1 text-success big-text mb-4 text-left text-md-left">A good look reflects your story and your spirit</div>
         <div className="text-danger fs-5 small-text text-muted text-left text-md-left mb-3 d-flex flex-column">Need to look fabulous fast? Book your next hair cut today!</div>
       </div>
 
-      {/* testing about */}
       <div className="mt-4">
         <div className="d-flex flex-column  buttons">
           <div className="mb-2">
@@ -42,15 +43,8 @@ const BookingMenu = ({ onMakeAppointment, onModifyAppointment, onBack }) => {
                 <img alt="Chat on WhatsApp" src="assets/images/whatsapp/WhatsAppButtonGreenLarge.svg" />
               </a>
             </div>
-            {/* <Button
-            className="btn-secondary"
-            onClick={() => {
-              onBack();
-            }}
-          >
-            Go Back
-          </Button> */}
           </div>
+          <MapDirections/>
         </div>
       </div>
     </div>

src/components/MapDirections/MapDirections.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Button from "react-bootstrap/Button";
+
+
+const MapDirections = () => {
+
+  const handleViewKakaoMapClick = () => {
+    window.open(`https://map.kakao.com/link/to/Elkpro services,37.531619,127.001225`);
+  };
+  const handleViewGoogleMapClick = () => {
+    window.open(`https://www.google.com/maps/search/?api=1&query=37.531619,127.001225`);
+  };
+  return (
+    <div className="mb-2 row p-3 gap-2">
+      <Button variant="outline-primary col" className="d-block w-100" onClick={handleViewKakaoMapClick}>
+        Kakao Map Directions
+      </Button>
+      <Button variant="outline-primary col" className="d-block w-100" onClick={handleViewGoogleMapClick}>
+        Google Map Directions
+      </Button>
+    </div>
+  );
+}
+
+export default MapDirections

src/env.json

@@ -1,3 +1,3 @@
 {
-  "current-env": "production"
+  "current-env": "development"
 }

src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "1.14.0"
+  "version": "1.15.0"
 }

yarn.lock

@@ -1815,6 +1815,21 @@
   dependencies:
     tslib "2.4.0"
 
+"@googlemaps/js-api-loader@1.15.1", "@googlemaps/js-api-loader@^1.7.0":
+  version "1.15.1"
+  resolved "https://registry.yarnpkg.com/@googlemaps/js-api-loader/-/js-api-loader-1.15.1.tgz#7d5f1d55a4ec5c99b1d8f0708f3a46b83a71384c"
+  integrity sha512-AsnEgNsB7S/VdrHGEQUaUM2e5tmjFGKBAfzR/AqO8O7TPq/jQGvoRw5liPBw4EMF38RDsHmKDV89q/X+qiUREQ==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+
+"@googlemaps/markerclusterer@2.0.15":
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/@googlemaps/markerclusterer/-/markerclusterer-2.0.15.tgz#72052a23a061789c6055a13713b8852359cc03a9"
+  integrity sha512-/I6Esi5FtyeVHsezN9Kut8zRJoqe7KkTIJXGVqpKFf6BjC7qQ1xRajLMkOz0s8XKgLevbr+KdYjuvmj+LohOGg==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    supercluster "^7.1.3"
+
 "@grpc/grpc-js@~1.7.0":
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.7.3.tgz#f2ea79f65e31622d7f86d4b4c9ae38f13ccab99a"
@@ -2172,6 +2187,11 @@
   resolved "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
+"@mapbox/point-geometry@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz#8a83f9335c7860effa2eeeca254332aa0aeed8f2"
+  integrity sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==
+
 "@mui/base@5.0.0-alpha.92":
   version "5.0.0-alpha.92"
   resolved "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.92.tgz"
@@ -2880,6 +2900,28 @@
     "@react-types/shared" "^3.14.0"
     clsx "^1.1.1"
 
+"@react-google-maps/api@^2.18.1":
+  version "2.18.1"
+  resolved "https://registry.yarnpkg.com/@react-google-maps/api/-/api-2.18.1.tgz#140bb134f50c98939b6eb440d01dbb7df562090c"
+  integrity sha512-KVlUO/Shh+0g/3egWaKmY0sz6+0QOnYkBGvrBMJbz23519LauA+iJFc4NDCmWNHqD5Vhb/Bkg0kSJgq0Stz3Iw==
+  dependencies:
+    "@googlemaps/js-api-loader" "1.15.1"
+    "@googlemaps/markerclusterer" "2.0.15"
+    "@react-google-maps/infobox" "2.16.0"
+    "@react-google-maps/marker-clusterer" "2.16.1"
+    "@types/google.maps" "3.50.5"
+    invariant "2.2.4"
+
+"@react-google-maps/infobox@2.16.0":
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/@react-google-maps/infobox/-/infobox-2.16.0.tgz#871423de1a1ffb08518927b083b239d92e58ce4e"
+  integrity sha512-ZojiMS25388RcUHQPycUAerSqdHDom+3dHczVcXHdT/i8fka3O8InkHxXwMhvBoM143ips7mv2BPaYOAJ5f4Nw==
+
+"@react-google-maps/marker-clusterer@2.16.1":
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/@react-google-maps/marker-clusterer/-/marker-clusterer-2.16.1.tgz#882878a7b49ce9ae44c7b02ff6fbc4c2aeb77c95"
+  integrity sha512-jOuyqzWLeXvQcoAu6TCVWHAuko+sDt0JjawNHBGqUNLywMtTCvYP0L0PiqJZOUCUeRYGdUy0AKxQ+30vAkvwag==
+
 "@react-spectrum/actiongroup@^3.6.0":
   version "3.6.0"
   resolved "https://registry.npmjs.org/@react-spectrum/actiongroup/-/actiongroup-3.6.0.tgz"
@@ -4596,6 +4638,11 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
+"@types/google.maps@3.50.5":
+  version "3.50.5"
+  resolved "https://registry.yarnpkg.com/@types/google.maps/-/google.maps-3.50.5.tgz#a0d12675b547205fc163c4b8d999db305ba3862a"
+  integrity sha512-RuZf1MJtctGlpW+Gd4a/eGtAufUDjMf+eyN1l+B3fbe2YLScJbg8KEljJfb+6vnSPFAeM1/48geVIEg3vqOkxw==
+
 "@types/graceful-fs@^4.1.2":
   version "4.1.5"
   resolved "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz"
@@ -7106,7 +7153,7 @@ etag@~1.8.1:
   resolved "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz"
   integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
 
-eventemitter3@^4.0.0:
+eventemitter3@^4.0.0, eventemitter3@^4.0.4:
   version "4.0.7"
   resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
@@ -7621,9 +7668,19 @@ globby@^11.0.4, globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
+google-map-react@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/google-map-react/-/google-map-react-2.2.0.tgz#10b23a42526556adaacbaeec114a72bf3b733053"
+  integrity sha512-UPiTwR3qNKJJizURXTuCbnBr8kLtLsiikj/KH1UTLGhadnU6fT+CE3CLw1lzZwk5zZIduQQODyIcEwNInECmUg==
+  dependencies:
+    "@googlemaps/js-api-loader" "^1.7.0"
+    "@mapbox/point-geometry" "^0.1.0"
+    eventemitter3 "^4.0.4"
+    prop-types "^15.7.2"
+
 gopd@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
   integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
   dependencies:
     get-intrinsic "^1.1.3"
@@ -7978,7 +8035,7 @@ intl-messageformat@^10.1.0:
     "@formatjs/icu-messageformat-parser" "2.1.4"
     tslib "2.4.0"
 
-invariant@^2.2.4:
+invariant@2.2.4, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -8891,6 +8948,11 @@ jsonpointer@^5.0.0:
     array-includes "^3.1.5"
     object.assign "^4.1.2"
 
+kdbush@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-3.0.0.tgz#f8484794d47004cc2d85ed3a79353dbe0abc2bf0"
+  integrity sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==
+
 kind-of@^6.0.2:
   version "6.0.3"
   resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
@@ -11882,6 +11944,13 @@ stylis@4.0.13:
   resolved "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz"
   integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
 
+supercluster@^7.1.3:
+  version "7.1.5"
+  resolved "https://registry.yarnpkg.com/supercluster/-/supercluster-7.1.5.tgz#65a6ce4a037a972767740614c19051b64b8be5a3"
+  integrity sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==
+  dependencies:
+    kdbush "^3.0.0"
+
 supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"