From 8684093cb9e64257db3b6d0b8d692f6210aecf45 Mon Sep 17 00:00:00 2001
From: ennucore <ennucore@gmail.com>
Date: Fri, 16 Dec 2022 22:54:15 +0100
Subject: [PATCH] Checkout, Explore

---
 .idea/workspace.xml             | 29 +++++++++----
 src/components/DomainBar.vue    |  2 +-
 src/components/DomainResult.vue | 75 +++++++++++++++++++++++++++++++++
 src/components/TonButton.vue    |  1 +
 src/result.ts                   | 10 +++++
 src/router/index.ts             | 12 ++++++
 src/views/Checkout.vue          | 29 +++++++++++++
 src/views/Explore.vue           | 31 ++++++++++++++
 src/views/Get.vue               | 10 +++--
 9 files changed, 186 insertions(+), 13 deletions(-)
 create mode 100644 src/components/DomainResult.vue
 create mode 100644 src/views/Checkout.vue
 create mode 100644 src/views/Explore.vue

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 16f3243..e93861c 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -1,12 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Changed zone repr + results, api, and Find">
+    <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Checkout, Explore">
+      <change afterPath="$PROJECT_DIR$/src/components/DomainResult.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/Checkout.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/Explore.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/assets/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/main.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/ZonePricing.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ZonePricing.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/DomainBar.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DomainBar.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/TonButton.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/TonButton.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/result.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/result.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/FindQ.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/FindQ.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/Get.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Get.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -16,8 +20,8 @@
   <component name="FileTemplateManagerImpl">
     <option name="RECENT_TEMPLATES">
       <list>
-        <option value="Vue Single File Component" />
         <option value="TypeScript File" />
+        <option value="Vue Single File Component" />
       </list>
     </option>
   </component>
@@ -74,7 +78,7 @@
       <workItem from="1670927344373" duration="29000" />
       <workItem from="1670927391338" duration="2277000" />
       <workItem from="1671024025708" duration="19806000" />
-      <workItem from="1671204365793" duration="12419000" />
+      <workItem from="1671204365793" duration="14195000" />
     </task>
     <task id="LOCAL-00001" summary="Wrote the landing">
       <created>1670844191163</created>
@@ -132,7 +136,14 @@
       <option name="project" value="LOCAL" />
       <updated>1671225120000</updated>
     </task>
-    <option name="localTasksCounter" value="9" />
+    <task id="LOCAL-00009" summary="Displaying results">
+      <created>1671225896559</created>
+      <option name="number" value="00009" />
+      <option name="presentableId" value="LOCAL-00009" />
+      <option name="project" value="LOCAL" />
+      <updated>1671225896559</updated>
+    </task>
+    <option name="localTasksCounter" value="10" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -158,6 +169,8 @@
     <MESSAGE value="ZoneTable with ZonePricing" />
     <MESSAGE value="/get/:zone/:domain" />
     <MESSAGE value="Changed zone repr + results, api, and Find" />
-    <option name="LAST_COMMIT_MESSAGE" value="Changed zone repr + results, api, and Find" />
+    <MESSAGE value="Displaying results" />
+    <MESSAGE value="Checkout, Explore" />
+    <option name="LAST_COMMIT_MESSAGE" value="Checkout, Explore" />
   </component>
 </project>
\ No newline at end of file
diff --git a/src/components/DomainBar.vue b/src/components/DomainBar.vue
index d8d0f32..2d775cf 100644
--- a/src/components/DomainBar.vue
+++ b/src/components/DomainBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="domain-bar">
+  <div :class="{'domain-bar': true, 'center': !has_button}">
     <div style="display: flex" class="prompt-cont">
       <contenteditable :contenteditable="editable" tag="div" class="prompt" :no-nl="true" v-model="val" :no-html="true" @returned="search()" spellcheck="false"></contenteditable>
       <div class="post-prompt">{{ zone }}</div>
diff --git a/src/components/DomainResult.vue b/src/components/DomainResult.vue
new file mode 100644
index 0000000..d3e0209
--- /dev/null
+++ b/src/components/DomainResult.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="center" v-if="result === null">
+    <RotateSquare2 style="width: 5rem; height: 5rem; margin-top: 3rem;"/>
+  </div>
+  <GetDomainBtn v-else-if="result.canBuy()"
+                :domain="domain" :price="result.auction_price"
+                @click="$router.push({name: 'Checkout', params: result.getRouteParams()})"/>
+  <!-- todo: differentiate between auction and buy -->
+  <GetDomainBtn v-else-if="result.canAuction()"
+                :domain="domain" :price="result.auction_price"
+                @click="$router.push({name: 'Checkout', params: result.getRouteParams()})"/>
+  <div v-else class="owned" @click="$router.push({name: 'Explore', params: {domain: domain}})">
+    <p class="domain">{{ domain }}</p>
+    <p>is owned.</p>
+    <p>Click here to explore</p>
+  </div>
+</template>
+
+<script>
+import RotateSquare2 from "./RotateSquare2.vue";
+import {get_domain_result} from "../result";
+import GetDomainBtn from "./GetDomainBtn.vue";
+
+export default {
+  name: "DomainResult",
+  components: {GetDomainBtn, RotateSquare2},
+  props: {
+    domain: {
+      type: String,
+    }
+  },
+  data() {
+    return {result: null}
+  },
+  mounted() {
+    this.get_result();
+  },
+  methods: {
+    async get_result() {
+      this.result = await get_domain_result(this.domain);
+    }
+  },
+  watch: {
+    domain: function () {
+      this.result = null;
+      this.get_result();
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.domain {
+  font-family: 'Inconsolata', monospace;
+  font-weight: bold;
+  font-size: 2.5rem;
+}
+
+@media only screen and (max-width: 800px) {
+  .domain {
+    font-size: 1.7rem;
+  }
+}
+
+.owned {
+  border-radius: 1rem;
+  background-color: #363e5e;
+  color: white;
+  font-size: 1.5rem;
+  text-align: center;
+  padding: 2rem;
+  cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/TonButton.vue b/src/components/TonButton.vue
index e475995..360cbe2 100644
--- a/src/components/TonButton.vue
+++ b/src/components/TonButton.vue
@@ -19,6 +19,7 @@ button.b.darkish {
   font-family: 'Inconsolata', monospace;
   font-weight: bold;
   font-size: 1.15rem;
+  cursor: default;
 }
 
 button > img:not(:first-child) {
diff --git a/src/result.ts b/src/result.ts
index b9bd610..151b865 100644
--- a/src/result.ts
+++ b/src/result.ts
@@ -16,6 +16,7 @@ export class Result {
     getRouteParams(): any {
         return {
             domain_init: /* domain up to . */ this.domain.split('.')[0],
+            domain: /* domain up to . */ this.domain.split('.')[0],
             zone: /* domain after . */ this.domain.split('.').slice(1).join('.')
         }
     }
@@ -43,3 +44,12 @@ export async function get_search_results(query: string) {
         new Result(query + '.ton', undefined, undefined, '123')
     ];
 }
+
+export async function get_domain_result(domain: string) {
+    // return await call_api('get/' + domain);
+    await sleep(1000);
+    if (domain === 'test.ton') {
+        return new Result(domain);
+    }
+    return new Result(domain, 5, 3);
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index 61551a9..6203e83 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -48,11 +48,23 @@ const router = createRouter({
             name: 'Find',
             component: () => import('../views/Find.vue')
         },
+        {
+            path: '/checkout/:zone/:domain',
+            name: 'Checkout',
+            component: () => import('../views/Checkout.vue'),
+            props: true
+        },
         {
             path: '/find/:query',
             name: 'FindQ',
             component: () => import('../views/FindQ.vue'),
             props: true
+        },
+        {
+            path: '/explore/:domain',
+            name: 'Explore',
+            component: () => import('../views/Explore.vue'),
+            props: true
         }
     ]
 })
diff --git a/src/views/Checkout.vue b/src/views/Checkout.vue
new file mode 100644
index 0000000..411e6f1
--- /dev/null
+++ b/src/views/Checkout.vue
@@ -0,0 +1,29 @@
+<template>
+  <DarkLayout>
+    <!-- todo: button to go back to Get -->
+    <div class="to-buy">To buy</div>
+    <DomainBar :zone="'.' + zone" :value="domain" :has_button="false" :editable="false"/>
+
+  </DarkLayout>
+</template>
+
+<script>
+import DarkLayout from "../components/DarkLayout.vue";
+import DomainBar from "../components/DomainBar.vue";
+export default {
+  name: "Checkout",
+  components: {DomainBar, DarkLayout},
+  props: {
+    domain: {
+      type: String,
+    },
+    zone: {
+      type: String,
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Explore.vue b/src/views/Explore.vue
new file mode 100644
index 0000000..f146f63
--- /dev/null
+++ b/src/views/Explore.vue
@@ -0,0 +1,31 @@
+<template>
+  <DarkLayout>
+    <DomainBar :value="core_domain" :zone="'.' + zone" :has_button="false" :editable="false"/>
+  </DarkLayout>
+</template>
+
+<script>
+import DarkLayout from "../components/DarkLayout.vue";
+import DomainBar from "../components/DomainBar.vue";
+export default {
+  name: "Explore",
+  components: {DomainBar, DarkLayout},
+  props: {
+    domain: {
+      type: String,
+    }
+  },
+  computed: {
+    core_domain() {
+      return this.domain.split('.')[0];
+    },
+    zone() {
+      return this.domain.split('.').slice(1).join('.');
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Get.vue b/src/views/Get.vue
index 04a75ed..27651d7 100644
--- a/src/views/Get.vue
+++ b/src/views/Get.vue
@@ -1,15 +1,17 @@
 <template>
   <DarkLayout>
-    <router-link :to="{name: 'Find'}"><!-- todo: "All zones" button here --></router-link>
+    <router-link :to="{name: 'Find'}">
+      <!-- todo: "All zones" button here -->
+    </router-link>
     <DomainBar :zone="'.' + zone" :value="domain" @search="search()" @input_d="handle_input($event)"/>
-    <GetDomain :domain="domain + '.' + zone" :price="5"/>
+    <DomainResult :domain="domain + '.' + zone"/>
   </DarkLayout>
 </template>
 
 <script>
 import DarkLayout from "../components/DarkLayout.vue";
 import DomainBar from "../components/DomainBar.vue";
-import GetDomain from "../components/GetDomainBtn.vue";
+import DomainResult from "../components/DomainResult.vue";
 export default {
   name: "Get",
   props: {
@@ -20,7 +22,7 @@ export default {
       type: String,
     }
   },
-  components: {GetDomain, DomainBar, DarkLayout},
+  components: {DomainResult, DomainBar, DarkLayout},
   data() {
     return {
       domain: this.domain_init