Merge branch 'main' into #2

hotwax · Nov 16, 2023 · 7d0e3fc · 7d0e3fc
2 parents b7ebe3b + 9f6d08b
commit 7d0e3fc
Show file tree

Hide file tree

Showing 8 changed files with 842 additions and 1 deletion.
diff --git a/src/components/AddAddressModal.vue b/src/components/AddAddressModal.vue
@@ -0,0 +1,96 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal()">
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Address") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-item>
+      <ion-label>{{ translate("Address line 1") }}</ion-label>
+      <ion-input />
+    </ion-item>
+    <ion-item class="ion-margin-bottom">
+      <ion-label>{{ translate("Address line 2") }}</ion-label>
+      <ion-input />
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ translate("City") }}</ion-label>
+      <ion-input />
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ translate("Country") }}</ion-label>
+      <ion-input />
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ translate("State") }}</ion-label>
+      <ion-input />
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ translate("Zipcode") }}</ion-label>
+      <ion-input />
+    </ion-item>
+  </ion-content>
+
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab-button>
+      <ion-icon :icon="saveOutline" />
+    </ion-fab-button>
+  </ion-fab>
+</template>
+
+<script lang="ts">
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonTitle,
+  IonToolbar,
+  modalController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { closeOutline, saveOutline } from "ionicons/icons";
+import { translate } from '@hotwax/dxp-components'
+  
+export default defineComponent({
+  name: "AddAddressModal",
+  components: {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonTitle,
+    IonToolbar
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss()
+    }
+  },
+  setup() {
+    return {
+      closeOutline,
+      saveOutline,
+      translate
+    };
+  },
+});
+</script>
diff --git a/src/components/AddGeoPointModal.vue b/src/components/AddGeoPointModal.vue
@@ -0,0 +1,88 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal()">
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Latitude & Longitude") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-item class="ion-margin-bottom">
+      <ion-label>{{ "<postal code value>" }}</ion-label>
+      <ion-button fill="outline">
+        {{ translate("Generate") }}
+        <ion-icon slot="end" :icon="colorWandOutline" />
+      </ion-button>
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ translate("Latitude") }}</ion-label>
+      <ion-input />
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ translate("Longitude") }}</ion-label>
+      <ion-input />
+    </ion-item>
+  </ion-content>
+
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab-button>
+      <ion-icon :icon="saveOutline" />
+    </ion-fab-button>
+  </ion-fab>
+</template>
+
+<script lang="ts">
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonTitle,
+  IonToolbar,
+  modalController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { closeOutline, colorWandOutline, saveOutline } from "ionicons/icons";
+import { translate } from '@hotwax/dxp-components'
+  
+export default defineComponent({
+  name: "AddGeoPointModal",
+  components: {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonTitle,
+    IonToolbar,
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss()
+    }
+  },
+  setup() {
+    return {
+      closeOutline,
+      colorWandOutline,
+      saveOutline,
+      translate
+    };
+  },
+});
+</script>
diff --git a/src/components/OpenStorePopover.vue b/src/components/OpenStorePopover.vue
@@ -0,0 +1,46 @@
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-list-header>{{ "NotNaked" }}</ion-list-header>
+      <ion-item button>
+        {{ translate("Make primary") }}
+        <ion-icon slot="end" :icon="starOutline" />
+      </ion-item>
+      <ion-item button lines="none">
+        {{ translate("Unlink") }}
+        <ion-icon slot="end" :icon="removeCircleOutline" />
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonContent,
+  IonList,
+  IonListHeader,
+  IonIcon,
+  IonItem
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { starOutline, removeCircleOutline } from "ionicons/icons";
+import { translate } from "@hotwax/dxp-components";
+
+export default defineComponent({
+  name: "CreateMappingModal",
+  components: {
+    IonContent,
+    IonList,
+    IonListHeader,
+    IonIcon,
+    IonItem
+  },
+  setup() {
+    return {
+      removeCircleOutline,
+      starOutline,
+      translate
+    };
+  }
+});
+</script>
diff --git a/src/components/SelectOperatingTimeModal.vue b/src/components/SelectOperatingTimeModal.vue
@@ -0,0 +1,115 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal"> 
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Select time") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-list>
+      <ion-item lines="none">
+        <ion-label>{{ translate("Opening Time") }}</ion-label>
+        <ion-button color="medium" @click="selectTime">{{ "10:45 am" }}</ion-button>
+      </ion-item>
+      <ion-item lines="none">
+        <ion-label>{{ translate("Closing Time") }}</ion-label>
+        <ion-button color="medium" @click="selectTime">{{ "10:45 am" }}</ion-button>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+
+  <ion-modal class="date-time-modal" :is-open="isTimeModalOpen" @didDismiss="() => isTimeModalOpen = false">
+    <ion-content>
+      <ion-datetime
+        presentation="time"  
+        show-default-buttons
+        hour-cycle="h12"
+      />
+    </ion-content>
+  </ion-modal>
+
+  <ion-footer>
+    <ion-toolbar>
+      <ion-item lines="none">
+        <ion-button color="danger">{{ translate("Reset") }}</ion-button>
+      </ion-item>
+      <ion-item slot="end" lines="none">
+        <ion-button class="ion-margin-end" fill="outline">{{ translate("Cancel") }}</ion-button>
+        <ion-button >{{ translate("Save") }}</ion-button>
+      </ion-item>
+    </ion-toolbar>
+  </ion-footer>
+</template>
+
+<script lang="ts">
+import { 
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonDatetime,
+  IonFooter,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+  modalController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { closeOutline } from "ionicons/icons";
+import { translate } from '@hotwax/dxp-components'
+
+export default defineComponent({
+  name: "SelectOperatingTimeModal",
+  components: { 
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonDatetime,
+    IonFooter,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonModal,
+    IonTitle,
+    IonToolbar,
+  },
+  data() {
+    return {
+      isTimeModalOpen: false
+    }
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss({ dismissed: true});
+    },
+    selectTime() {
+      this.isTimeModalOpen = true
+    }
+  },
+  setup() {
+    return {
+      closeOutline,
+      translate
+    };
+  },
+});
+</script>
+
+<style scoped>
+ion-modal.date-time-modal {
+  --width: 290px;
+  --height: 440px;
+  --border-radius: 8px;
+}
+</style>