Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • components/ofn-rpp
1 result
Show changes
Commits on Source (1)
Hide whitespace changes
Inline Side-by-side
src/components/main.js
View file @ 5d5eba80
......@@ -682,44 +682,40 @@ utils.importCore().then(async (core) => {
</div>
</div>
</div>
<conditional-display
bind-resources=""
condition="dfc-b:supplies">
<h4 id="${this.uniq}-how-to-buy">How to buy</h4>
<div class="row">
<div class="col s12">
<div class="card-panel card-round card-padding">
<div class="row">
<div class="col s12 m3">
<custom-wholesale-buy bind-resources="" uniq="${this.uniq}"></custom-wholesale-buy>
</div>
<div class="col s12 m8 offset-m1">
<h5>Feature products</h5>
<solid-display
bind-resources=""
nested-field="dfc-b:supplies"
fields="set-card-col(set-card-panel(set-card-wrapper(set-image(ofn:image), set-name(dfc-b:name))))"
widget-set-card-row="div"
class-set-card-row="row"
widget-set-card-col="div"
class-set-card-col="col s12 l6 xl4"
widget-set-card-panel="div"
class-set-card-panel="card-panel"
widget-set-card-wrapper="div"
class-ofn:image="img-200"
widget-ofn:image="custom-display-image"
default-ofn:image="https://placehold.co/200"
widget-set-name="div"
class-set-name="row no-margin-bottom"
widget-dfc-b:name="solid-display-value"
class-dfc-b:name="col s12 truncate"
></solid-display>
</div>
<h4 id="${this.uniq}-how-to-buy">How to buy</h4>
<div class="row">
<div class="col s12">
<div class="card-panel card-round card-padding">
<div class="row">
<div class="col s12 m3">
<custom-wholesale-buy bind-resources="" uniq="${this.uniq}"></custom-wholesale-buy>
</div>
<div class="col s12 m8 offset-m1">
<h5>Feature products</h5>
<solid-display
bind-resources=""
nested-field="dfc-b:supplies"
fields="set-card-col(set-card-panel(set-card-wrapper(set-image(ofn:image), set-name(dfc-b:name))))"
widget-set-card-row="div"
class-set-card-row="row"
widget-set-card-col="div"
class-set-card-col="col s12 l6 xl4"
widget-set-card-panel="div"
class-set-card-panel="card-panel"
widget-set-card-wrapper="div"
class-ofn:image="img-200"
widget-ofn:image="custom-display-image"
default-ofn:image="https://placehold.co/200"
widget-set-name="div"
class-set-name="row no-margin-bottom"
widget-dfc-b:name="solid-display-value"
class-dfc-b:name="col s12 truncate"
></solid-display>
</div>
</div>
</div>
</div>
</conditional-display>
</div>
<h4 id="${this.uniq}-about-us">About us</h4>
<div class="row">
<div class="col s12">
......
src/components/partials/contact-form.js
View file @ 5d5eba80
import { LitElement, html, nothing } from "lit";
import { classMap } from "lit/directives/class-map.js";
import { Task } from "@lit/task";
import { importCore, CLIENT_CONTEXT, uniq } from '@helpers/utils';
import { importCore, CLIENT_CONTEXT, uniq } from "@helpers/utils";
importCore().then(core => {
importCore().then((core) => {
customElements.define(
"custom-contact-form",
class extends LitElement {
......@@ -13,7 +14,7 @@ importCore().then(core => {
static properties = {
dataSrc: { attribute: "data-src" },
uniq: { attribute: "uniq" },
}
};
createRenderRoot() {
return this;
......@@ -27,23 +28,30 @@ importCore().then(core => {
*/
async _getProxyValue(resource) {
let response = {
"ofn:Wholesale_enquiry_preferences": await resource["ofn:Wholesale_enquiry_preferences"],
"ofn:Wholesale_enquiry_preferences": await resource[
"ofn:Wholesale_enquiry_preferences"
],
"dfc-b:hasPhoneNumber": await resource["dfc-b:hasPhoneNumber"],
"dfc-b:email": await resource["dfc-b:email"],
"ofn:contact_email_endpoint_uri": await resource["ofn:contact_email_endpoint_uri"],
"ofn:contact_email_endpoint_uri": await resource[
"ofn:contact_email_endpoint_uri"
],
};
return response;
}
_getResource = new Task(this, {
task: async ([dataSrc]) => {
if(!dataSrc) return;
if (!dataSrc) return;
const resource = await core.store.getData(dataSrc, CLIENT_CONTEXT);
let response = await this._getProxyValue(resource);
if (!response["ofn:Wholesale_enquiry_preferences"]) {
response["ofn:Wholesale_enquiry_preferences"] = [];
}
return response;
},
args: () => [this.dataSrc]
})
args: () => [this.dataSrc],
});
/**
* Toggles the valid/invalid class on the target element based on the isValid parameter.
......@@ -52,14 +60,14 @@ importCore().then(core => {
* @param {boolean} [isValid=false] - Indicates whether the class should be valid or invalid
* @return {boolean} - Indicates whether the class was successfully toggled
*/
toggleClass(target, isValid=false) {
if(!target) return false;
if(isValid) {
target.add('valid');
target.remove('invalid');
toggleClass(target, isValid = false) {
if (!target) return false;
if (isValid) {
target.add("valid");
target.remove("invalid");
} else {
target.add('invalid');
target.remove('valid');
target.add("invalid");
target.remove("valid");
}
return true;
}
......@@ -67,24 +75,38 @@ importCore().then(core => {
_submitForm(e) {
let form = this.querySelector("form");
let responseTarget = this.querySelector("form .response");
if(form) {
if (form) {
const formData = new FormData(form);
let from = formData.get('from');
let type = formData.get('type');
this.toggleClass(form.querySelector('#from').classList, /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(from));
this.toggleClass(form.querySelector('.select-wrapper').classList, type !== null);
if(from != "" && type != null) {
let from = formData.get("from");
let type = formData.get("type");
this.toggleClass(
form.querySelector("#from").classList,
/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(from)
);
this.toggleClass(
form.querySelector(".select-wrapper").classList,
type !== null
);
if (from != "" && type != null) {
fetch(form.action, {
method: 'POST',
body: formData
}).then(response => {
if(response.ok) {
window._paq.push(['trackContentInteractionNode', this.querySelector('form'), 'submittedContactForm']);
responseTarget.innerHTML = 'Email submitted successfully';
} else {
responseTarget.innerHTML = 'Email submission failed';
}
}).catch(_ => responseTarget.innerHTML = 'Error submitting email');
method: "POST",
body: formData,
})
.then((response) => {
if (response.ok) {
window._paq.push([
"trackContentInteractionNode",
this.querySelector("form"),
"submittedContactForm",
]);
responseTarget.innerHTML = "Email submitted successfully";
} else {
responseTarget.innerHTML = "Email submission failed";
}
})
.catch(
(_) => (responseTarget.innerHTML = "Error submitting email")
);
}
}
e.preventDefault();
......@@ -95,101 +117,196 @@ importCore().then(core => {
}
render() {
if(!this.dataSrc) return nothing;
if(!this.uniq) this.uniq = uniq();
if (!this.dataSrc) return nothing;
if (!this.uniq) this.uniq = uniq();
return this._getResource.render({
pending: () => html`<div class="progress"><div class="indeterminate"></div></div>`,
pending: () =>
html`<div class="progress"><div class="indeterminate"></div></div>`,
complete: (resource) => {
let render = html``;
if(resource["ofn:Wholesale_enquiry_preferences"]) {
if(resource["ofn:Wholesale_enquiry_preferences"].includes("Email")) {
render = html`
<h4 id="${this.uniq}-contact-producer">Contact Producer</h4>
<div class="row">
<div class="col s12">
<div class="card-panel card-padding">
<div class="row">
<div class="col s12 m3">
${resource["ofn:Wholesale_enquiry_preferences"].includes("Phone") ? html`
<div class="row text-light no-margin-bottom">
<div class="col s12">Phone number</div>
</div>
<div class="row no-margin-bottom valign-wrapper">
<div class="col s12 text-link text-link-red">
<a href="tel:${resource["dfc-b:hasPhoneNumber"]}" target="_blank">${resource["dfc-b:hasPhoneNumber"]}<icon-mdi-phone-in-talk></icon-mdi-phone-in-talk></a>
render = html` <h4 id="${this.uniq}-contact-producer">
Contact Producer
</h4>
<div class="row">
<div class="col s12">
<div class="card-panel card-padding">
<div class="row">
${resource[
"ofn:Wholesale_enquiry_preferences"
].includes("Email") ||
resource["ofn:Wholesale_enquiry_preferences"].includes(
"Phone"
)
? html`
<div class="col s12 m3">
${resource[
"ofn:Wholesale_enquiry_preferences"
].includes("Phone")
? html`
<div
class="row text-light no-margin-bottom"
>
<div class="col s12">Phone number</div>
</div>
<div
class="row no-margin-bottom valign-wrapper"
>
<div
class="col s12 text-link text-link-red"
>
<a
href="tel:${resource[
"dfc-b:hasPhoneNumber"
]}"
target="_blank"
>${resource[
"dfc-b:hasPhoneNumber"
]}<icon-mdi-phone-in-talk
></icon-mdi-phone-in-talk
></a>
</div>
</div>
`
: nothing}
${resource[
"ofn:Wholesale_enquiry_preferences"
].includes("Email")
? html`
<div
class="row text-light no-margin-bottom"
>
<div class="col s12">Email address</div>
</div>
<div
class="row no-margin-bottom valign-wrapper"
>
<div
class="col s12 text-link text-link-red"
>
<a
class="truncate"
href="mailto:${resource[
"dfc-b:email"
]}"
target="_blank"
>${resource[
"dfc-b:email"
]}<icon-mdi-email-outline
></icon-mdi-email-outline
></a>
</div>
</div>
`
: nothing}
</div>
`
: nothing}
<form
class=${classMap({
col: true,
s12: true,
m8:
resource[
"ofn:Wholesale_enquiry_preferences"
].includes("Email") ||
resource[
"ofn:Wholesale_enquiry_preferences"
].includes("Phone"),
})}
action="${resource["ofn:contact_email_endpoint_uri"]}"
method="post"
>
<h5>Contact form</h5>
<div class="row">
<div class="input-field col s12 m6">
<input
id="name"
name="name"
type="text"
class="validate"
/>
<label for="name">Name</label>
</div>
` : nothing}
<div class="row text-light no-margin-bottom">
<div class="col s12">Email address</div>
</div>
<div class="row no-margin-bottom valign-wrapper">
<div class="col s12 text-link text-link-red">
<a class="truncate" href="mailto:${resource["dfc-b:email"]}" target="_blank">${resource["dfc-b:email"]}<icon-mdi-email-outline></icon-mdi-email-outline></a>
</div>
<div class="input-field col s12 m6">
<select id="type" name="type" class="materialize">
<option value="" disabled selected>Type</option>
<option value="B2B / wholesale buyer">
B2B / wholesale buyer
</option>
<option value="household / consumer buyer">
Household / consumer buyer
</option>
<option value="general / other">
General / other
</option>
</select>
<span
class="helper-text"
data-error="You must select a type"
data-success=""
></span>
</div>
</div>
<form class="col s12 m8" action="${resource["ofn:contact_email_endpoint_uri"]}" method="post">
<h5>Contact form</h5>
<div class="row">
<div class="input-field col s12 m6">
<input id="name" name="name" type="text" class="validate">
<label for="name">Name</label>
</div>
<div class="input-field col s12 m6">
<select id="type" name="type" class="materialize">
<option value="" disabled selected>Type</option>
<option value="B2B / wholesale buyer">B2B / wholesale buyer</option>
<option value="household / consumer buyer">Household / consumer buyer</option>
<option value="general / other">General / other</option>
</select>
<span class="helper-text" data-error="You must select a type" data-success=""></span>
</div>
</div>
<div class="row">
<div class="input-field col s12 m6">
<input id="from" name="from" type="email" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" class="validate">
<label for="from">Email address</label>
<span class="helper-text" data-error="Invalid email address" data-success=""></span>
</div>
<div class="row">
<div class="input-field col s12 m6">
<input
id="from"
name="from"
type="email"
pattern="[^@s]+@[^@s]+.[^@s]+"
class="validate"
/>
<label for="from">Email address</label>
<span
class="helper-text"
data-error="Invalid email address"
data-success=""
></span>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="text" name="text" class="materialize-textarea"></textarea>
<label for="text">Message</label>
</div>
</div>
<input name="username" type="text" class="hidden">
<div class="row hide-on-med-and-up right-align">
<div class="col s12">
<button
@click="${this._submitForm}"
class="waves-effect waves-light btn-small"
>Send message</button>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea
id="text"
name="text"
class="materialize-textarea"
></textarea>
<label for="text">Message</label>
</div>
<div class="row hide-on-small-only">
<div class="col s12">
<button
@click="${this._submitForm}"
class="waves-effect waves-light btn-small"
>Send message</button>
</div>
</div>
<input name="username" type="text" class="hidden" />
<div class="row hide-on-med-and-up right-align">
<div class="col s12">
<button
@click="${this._submitForm}"
class="waves-effect waves-light btn-small"
>
Send message
</button>
</div>
<div class="row">
<div class="col s12 response"></div>
</div>
<div class="row hide-on-small-only">
<div class="col s12">
<button
@click="${this._submitForm}"
class="waves-effect waves-light btn-small"
>
Send message
</button>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col s12 response"></div>
</div>
</form>
</div>
</div>
</div>`;
}
}
</div>
</div>`;
return render;
},
error: (e) => html`<p>Error while loading contact form.</p>`
error: (e) => html`<p>Error while loading contact form.</p>`,
});
}
}
......
src/components/partials/wholesale-buy.js
View file @ 5d5eba80
......@@ -52,6 +52,9 @@ importCore().then(core => {
if(!dataSrc) return;
const resource = await core.store.getData(dataSrc, CLIENT_CONTEXT);
let response = await this._getProxyValue(resource);
if(!response["ofn:Wholesale_enquiry_preferences"]) {
response["ofn:Wholesale_enquiry_preferences"] = [];
}
return response;
},
args: () => [this.dataSrc]
......@@ -94,88 +97,85 @@ importCore().then(core => {
</div>
`);
}
if(resource["ofn:Wholesale_enquiry_preferences"]) {
if(resource["ofn:Wholesale_enquiry_preferences"].includes("Email") && resource["ofn:Wholesale_enquiry_preferences"].includes("Phone")) {
this._addToRender(html`
<div class="row">
<div class="col s12">
<a
href="#${this.uniq}-contact-producer"
class="waves-effect waves-light btn-small"
>View contact details</a>
</div>
</div>
`);
if(resource["ofn:Wholesale_enquiry_preferences"].includes("Phone")) {
this._addToRender(html`
<div class="row text-light no-margin-bottom">
<div class="col s12">Phone number</div>
</div>
<div class="row text-link valign-wrapper">
<div class="col s8 truncate">${resource["dfc-b:hasPhoneNumber"]}</div>
<div class="col s4">
<icon-mdi-phone-in-talk></icon-mdi-phone-in-talk>
</div>
</div>
`);
}
// if(resource["ofn:Wholesale_enquiry_preferences"].includes("Email")) {
// this._addToRender(html`
// <div class="row text-light no-margin-bottom">
// <div class="col s12">Email address</div>
// </div>
// <div class="row text-link valign-wrapper">
// <div class="col s8 truncate">${resource["dfc-b:email"]}</div>
// <div class="col s4">
// <icon-mdi-email-outline></icon-mdi-email-outline>
// </div>
// </div>
// `);
// }
if(resource["ofn:Wholesale_enquiry_preferences"].includes("Direct online purchase")) {
if(resource["ofn:Wholesale_URL_1"] && resource["ofn:Wholesale_URL_1_label"]) {
this._addToRender(html`
<div class="row">
<div class="row text-light no-margin-bottom">
<div class="col s12">${resource["ofn:Wholesale_URL_1_label"]}</div>
</div>
<div class="row valign-wrapper">
<div class="col s12">
<a
href="#${this.uniq}-contact-producer"
class="waves-effect waves-light btn-small"
>View contact details</a>
<a href="${resource["ofn:Wholesale_URL_1"]}" target="_blank" class="text-link text-link-red">
Visit website<icon-mdi-open-in-new style="font-size: 18px;"></icon-mdi-open-in-new>
</a>
</div>
</div>
`);
} else if(resource["ofn:Wholesale_enquiry_preferences"].includes("Phone")) {
}
if(resource["ofn:Wholesale_URL_2"] && resource["ofn:Wholesale_URL_2_label"]) {
this._addToRender(html`
<div class="row text-light no-margin-bottom">
<div class="col s12">Phone number</div>
<div class="col s12">${resource["ofn:Wholesale_URL_2_label"]}</div>
</div>
<div class="row text-link valign-wrapper">
<div class="col s8 truncate">${resource["dfc-b:hasPhoneNumber"]}</div>
<div class="col s4">
<icon-mdi-phone-in-talk></icon-mdi-phone-in-talk>
<div class="row valign-wrapper">
<div class="col s12">
<a href="${resource["ofn:Wholesale_URL_2"]}" target="_blank" class="text-link text-link-red">
Visit website<icon-mdi-open-in-new style="font-size: 18px;"></icon-mdi-open-in-new>
</a>
</div>
</div>
`);
}
// if(resource["ofn:Wholesale_enquiry_preferences"].includes("Email")) {
// this._addToRender(html`
// <div class="row text-light no-margin-bottom">
// <div class="col s12">Email address</div>
// </div>
// <div class="row text-link valign-wrapper">
// <div class="col s8 truncate">${resource["dfc-b:email"]}</div>
// <div class="col s4">
// <icon-mdi-email-outline></icon-mdi-email-outline>
// </div>
// </div>
// `);
// }
if(resource["ofn:Wholesale_enquiry_preferences"].includes("Direct online purchase")) {
if(resource["ofn:Wholesale_URL_1"] && resource["ofn:Wholesale_URL_1_label"]) {
this._addToRender(html`
<div class="row text-light no-margin-bottom">
<div class="col s12">${resource["ofn:Wholesale_URL_1_label"]}</div>
</div>
<div class="row valign-wrapper">
<div class="col s12">
<a href="${resource["ofn:Wholesale_URL_1"]}" target="_blank" class="text-link text-link-red">
Visit website<icon-mdi-open-in-new style="font-size: 18px;"></icon-mdi-open-in-new>
</a>
</div>
</div>
`);
}
if(resource["ofn:Wholesale_URL_2"] && resource["ofn:Wholesale_URL_2_label"]) {
this._addToRender(html`
<div class="row text-light no-margin-bottom">
<div class="col s12">${resource["ofn:Wholesale_URL_2_label"]}</div>
</div>
<div class="row valign-wrapper">
<div class="col s12">
<a href="${resource["ofn:Wholesale_URL_2"]}" target="_blank" class="text-link text-link-red">
Visit website<icon-mdi-open-in-new style="font-size: 18px;"></icon-mdi-open-in-new>
</a>
</div>
</div>
`);
}
if(resource["ofn:Wholesale_URL_3"] && resource["ofn:Wholesale_URL_3_label"]) {
this._addToRender(html`
<div class="row text-light no-margin-bottom">
<div class="col s12">${resource["ofn:Wholesale_URL_3_label"]}</div>
</div>
<div class="row valign-wrapper">
<div class="col s12">
<a href="${resource["ofn:Wholesale_URL_3"]}" target="_blank" class="text-link text-link-red">
Visit website<icon-mdi-open-in-new style="font-size: 18px;"></icon-mdi-open-in-new>
</a>
</div>
if(resource["ofn:Wholesale_URL_3"] && resource["ofn:Wholesale_URL_3_label"]) {
this._addToRender(html`
<div class="row text-light no-margin-bottom">
<div class="col s12">${resource["ofn:Wholesale_URL_3_label"]}</div>
</div>
<div class="row valign-wrapper">
<div class="col s12">
<a href="${resource["ofn:Wholesale_URL_3"]}" target="_blank" class="text-link text-link-red">
Visit website<icon-mdi-open-in-new style="font-size: 18px;"></icon-mdi-open-in-new>
</a>
</div>
`);
}
</div>
`);
}
}
......