@social-mail/social-mail-client 1.2.351 → 1.2.352

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.2.351",
+  "version": "1.2.352",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/public/contact-us/ContactUsApp.tsx

@@ -0,0 +1,93 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
+import styled from "@web-atoms/core/dist/style/styled";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import Form from "@web-atoms/web-controls/dist/basic/Form";
+import FormField from "@web-atoms/web-controls/dist/basic/FormField";
+import { EmailIconTextButton } from "../../common/controls/buttons/IconButton";
+import Pack from "@web-atoms/core/dist/Pack";
+import Action from "@web-atoms/core/dist/view-model/Action";
+
+    styled.css `
+    `.installGlobal("contact-us");
+
+@Pack
+export default class ContactUsApp extends AtomControl {
+
+    model = {
+        captcha: null,
+        name: "",
+        email: "",
+        phone: "",
+        subject: "",
+        countryCode: "",
+        description: ""
+    };
+
+    constructor(app, e = document.createElement("contact-us")) {
+        super(app, e);
+        this.runAfterInit(() => this.app.runAsync(() => this.init()));
+    }
+
+    async init() {
+
+        const captcha = this.model.captcha = await FetchBuilder.put("/api/users/captcha")
+            .responseAsJson<any>();
+
+        captcha.code = "";
+
+        this.renderer = <div>
+            <Form>
+                <FormField label="Your Name"
+                    error={Bind.oneWay(() => (this.model.name) ? "" : "Name is required")}>
+                    <input value={Bind.twoWaysImmediate(() => this.model.name)}/>
+                </FormField>
+                <FormField
+                    label="Your Email"
+                    error={Bind.oneWay(() => (this.model.email || this.model.phone) ? "" : "Email or Phone is required")}>
+                    <input value={Bind.twoWaysImmediate(() => this.model.email)}/>
+                </FormField>
+                <FormField label="Your Phone"
+                    error={Bind.oneWay(() => (this.model.email || this.model.phone) ? "" : "Email or Phone is required")}>
+                    <input value={Bind.twoWaysImmediate(() => this.model.phone)}/>
+                </FormField>
+                <FormField label="Subject"
+                    error={Bind.oneWay(() => (this.model.name) ? "" : "Name is required")}>
+                    <input value={Bind.twoWaysImmediate(() => this.model.subject)}/>
+                </FormField>
+                <FormField label="Questions">
+                    <textarea
+                        rows="8"
+                        value={Bind.twoWaysImmediate(() => this.model.subject)}/>
+                </FormField>
+                <FormField
+                    label="Verify Code"
+                    error={Bind.oneWay(() => this.model.captcha.code ? "" : "Code is required")}>
+                    <div data-layout="vertical-flex">
+                        <img src={`/api/users/captcha/${this.model.captcha.id}/${this.model.captcha.accessCode}`} />
+                        <input type="tel" value={Bind.twoWaysImmediate(() => this.model.captcha.code)}/>
+                    </div>
+                </FormField>
+                <FormField label="">
+                    <EmailIconTextButton
+                        data-submit-event="send-email"
+                        text="Send Email"
+                        />
+                </FormField>
+            </Form>
+        </div>;
+    }
+
+    @Action({
+        onEvent: "send-email",
+        success: "Email sent successfully."
+    })
+    async sendEmail() {
+        await FetchBuilder.post("/api/site/contact")
+            .jsonBody(this.model)
+            .responseAsJson<any>();
+        await this.init();
+    }
+
+}