diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..bd1a581 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,18 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Launch via Yarn", + "runtimeExecutable": "yarn", + "cwd": "${workspaceFolder}", + "args": [ + "start" + ], + } + ] +} \ No newline at end of file diff --git a/package.json b/package.json index 6a532a2..a4be7b7 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "homepage": "https://ngs.covisart.com/", "dependencies": { + "@ant-design/icons": "^5.2.6", "@pmndrs/branding": "^0.0.8", "@react-three/drei": "^9.84.3", "@react-three/fiber": "^8.14.3", @@ -27,6 +28,7 @@ "react-axios": "^2.0.6", "react-bootstrap": "^2.8.0", "react-circular-progressbar": "^2.0.4", + "react-country-dropdown": "^1.1.0", "react-countup": "^6.4.2", "react-dom": "^18.2.0", "react-ga4": "^2.1.0", diff --git a/src/covisart/Product.js b/src/covisart/Product.js index 176af26..fa88827 100644 --- a/src/covisart/Product.js +++ b/src/covisart/Product.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -import { Space, Table, notification } from 'antd'; -import { PhoneOutlined } from '@ant-design/icons'; +import { Grid, Space, Table, notification, Row } from 'antd'; +import { PhoneOutlined, CheckCircleTwoTone } from '@ant-design/icons'; import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; import SectionTitle from "../elements/sectionTitle/SectionTitle"; @@ -10,8 +10,12 @@ import { PayloadSelection } from './Selections/PayloadSelection' import { useSnapshot } from 'valtio' import { state } from './store' import Configuration from './Configuration' -import { Order, PingAPI } from './system/OrderRequest'; +import { Order, PingAPI, LocalOrder } from './system/OrderRequest'; import ReactGA from "react-ga4"; + +import { ReactCountryDropdown } from 'react-country-dropdown' +import 'react-country-dropdown/dist/index.css' + const Product = () => { const [selectedTab, setSelectedTab] = useState(0); const [api, contextHolder] = notification.useNotification(); @@ -44,6 +48,7 @@ const Product = () => { event.preventDefault(); // 👈️ prevent page refresh PingAPI(); Order(state); + //LocalOrder(state); openNotification('bottomRight') ReactGA.gtag("event", "purchase", { @@ -54,35 +59,35 @@ const Product = () => { currency: "USD", coupon: "PreOrder", items: [ - { - item_id: "SKU_2110", - item_name: "NGS-360-3 Motion Simulator", - affiliation: "Covisart Online Store", - coupon: "PreOrder", - discount: 1.15, - index: 0, - item_brand: "COVISART", - item_category: "Simulator", - item_list_id: "related_products", - item_list_name: "Related Products", - item_variant: "green", - location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo", - price: 75000, - quantity: 1 - }] + { + item_id: "SKU_2110", + item_name: "NGS-360-3 Motion Simulator", + affiliation: "Covisart Online Store", + coupon: "PreOrder", + discount: 1.15, + index: 0, + item_brand: "COVISART", + item_category: "Simulator", + item_list_id: "related_products", + item_list_name: "Related Products", + item_variant: "green", + location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo", + price: 75000, + quantity: 1 + }] }); }; return (
{contextHolder}
+ setSelectedTab(index)}>
-
@@ -97,126 +102,164 @@ const Product = () => {
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
-
- -
-
- - -
-
- -
-
-

NGS-360-3 Motion Platform has 3 different color available. All colors are matte and powder painted

- - -
-
- - -
-
-

Unit of measurement Kg. It can be changed after later for an extra fee.

- - -
-
- - -
-
-

You can only add one accessory on same time, there are 2 accessories available.

-
- -
- - + {!state.ordered + ? ( +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+
+ +
-
- - -
-
-

Required motors applied with pre configured payload selection. If you want more motor power, please contact with us.

- -
-
- - -
- - -
-
- - { console.log(e.currentTarget.value) }} onChange={(e) => { state.name = e.currentTarget.value; console.log(e.currentTarget.value) }} /> - { state.phone = e.currentTarget.value }} /> - { state.email = e.currentTarget.value }} /> - - - +
+ +
+
+

NGS-360-3 Motion Platform has 3 different color available. All colors are matte and powder painted

+ + +
+
+ + +
+
+

Unit of measurement Kg. It can be changed after later for an extra fee.

+ + +
+
+ + +
+
+

You can only add one accessory on same time, there are 2 accessories available.

+
+ +
+ + +
+
+ + +
+
+

Required motors applied with pre configured payload selection. If you want more motor power, please contact with us.

+ +
+
+ + +
+
+ +
+
+ + { console.log(e.currentTarget.value) }} + onChange={(e) => { state.name = e.currentTarget.value; console.log(e.currentTarget.value) }} /> + + { state.phone = e.currentTarget.value }} + onSubmit={(e) => { }} /> + + { state.email = e.currentTarget.value }} /> + + +
Select Country:
+ { state.country = e.name; console.log(state.country); }} countryCode='TR' /> + + + + + +
+ + - - + ) + : ( +
+ +
+ ) + } + + ) diff --git a/src/covisart/store.js b/src/covisart/store.js index f53aada..a68aa68 100644 --- a/src/covisart/store.js +++ b/src/covisart/store.js @@ -4,7 +4,9 @@ const state = proxy({ name: "", phone:"0", email:"", - ruler: false, + country:"Turkey", + ruler: true, + ordered: false, sizes: ["450", "850"], size: '450', accessories:['JustSim','RaceSeat', 'cockpit' ], diff --git a/src/covisart/system/OrderRequest.js b/src/covisart/system/OrderRequest.js index 703fc61..680a745 100644 --- a/src/covisart/system/OrderRequest.js +++ b/src/covisart/system/OrderRequest.js @@ -1,11 +1,32 @@ import Axios from "axios"; -import { useSnapshot } from 'valtio' -import { state } from '../store' +export const LocalOrder = async (state) => { + const data = { + email: state.email, + name: state.name, + country: state.country, + description: state.decal, + size: state.size, + phone: state.phone, + accessory: state.accessory, + color: state.color, + reservedObjects: [ + "string" + ] + } + const resp = await Axios.post("http://localhost:5290/api/Orders/", data,) + .then((res) => { + console.log(res) + }) + .catch((err) => { + console.log(err) + }); +}; export const Order = async (state) => { const data = { email: state.email, name: state.name, + country: state.country, description: state.decal, size: state.size, phone: state.phone, diff --git a/yarn.lock b/yarn.lock index 1648210..92b2ee6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6634,6 +6634,7 @@ __metadata: version: 0.0.0-use.local resolution: "doob@workspace:." dependencies: + "@ant-design/icons": ^5.2.6 "@pmndrs/branding": ^0.0.8 "@react-three/drei": ^9.84.3 "@react-three/fiber": ^8.14.3 @@ -6658,6 +6659,7 @@ __metadata: react-axios: ^2.0.6 react-bootstrap: ^2.8.0 react-circular-progressbar: ^2.0.4 + react-country-dropdown: ^1.1.0 react-countup: ^6.4.2 react-dom: ^18.2.0 react-ga4: ^2.1.0 @@ -13049,6 +13051,15 @@ __metadata: languageName: node linkType: hard +"react-country-dropdown@npm:^1.1.0": + version: 1.1.0 + resolution: "react-country-dropdown@npm:1.1.0" + peerDependencies: + react: ^16.0.0 + checksum: 6fd0cf121478e9104ba616fb42a7f53fcf8569e2457f0e4a80f9afdd49f537ceac100d881b497e2175b1486fb60da177b715f65d7edb135ce6290153c1f89571 + languageName: node + linkType: hard + "react-countup@npm:^6.4.2": version: 6.4.2 resolution: "react-countup@npm:6.4.2"