Skip to content

W
wsi-poc-mfe
Commit 08ef4965 authored by Abdul Moiz Lakhani's avatar Abdul Moiz Lakhani
Browse files
Options

Dynamic component logic

parent dbcc8037
Hide whitespace changes
Inline Side-by-side
Showing with 262 additions and 67 deletions
dynamic-components-poc/ftl/_user-address-info.ftl 0 → 100644
View file @ 08ef4965
[@wsgc.extendTemplate path="common/checkout/_user-address-info.ftl" /]
[#-- TODO: finish consolidating this --]
[#-- Generic Address Display --]
[#macro addressDisplay subOrderDetails showEmail=false]
<div class="address-block">
[#if subOrderDetails.shipTo?? && subOrderDetails.shipTo?starts_with("Registrant")]
[#if subOrderDetails?? && subOrderDetails.shipToName??]
<div id="address-name">${subOrderDetails.shipToName?xhtml} </div>
[/#if]
<div>Address on file </div>
[#else]
[#if subOrderDetails??]
[#if subOrderDetails.fullName??]
<div id="address-name">${subOrderDetails.fullName?xhtml}</div>
[/#if]
[#if subOrderDetails.addrLine1??]
<div>${subOrderDetails.addrLine1?xhtml}</div>
[/#if]
[#if subOrderDetails.addrLine2??]
<div>${subOrderDetails.addrLine2?xhtml}</div>
[/#if]
<div>
[#if subOrderDetails.city??]${subOrderDetails.city?xhtml},[/#if]
[#if subOrderDetails.stateProvince??] ${subOrderDetails.stateProvince?xhtml} [/#if]
[#if subOrderDetails.fullPostalCode??] ${subOrderDetails.fullPostalCode?xhtml}[/#if]
</div>
<div>${subOrderDetails.dayPhone?xhtml}</div>
[#if subOrderDetails.eveningPhone??]
<div>${subOrderDetails.eveningPhone?xhtml}</div>
[/#if]
[/#if]
[#if showEmail || (subOrderDetails.shipTo??&&subOrderDetails.shipTo?lower_case == "you")]
[#if subOrderDetails.plainEmailAddr?? && subOrderDetails.plainEmailAddr != ""]
<div class="review">${subOrderDetails.plainEmailAddr}</div>
[#elseif profileEmail??]
<div class="review">${profileEmail}</div>
[/#if]
[/#if]
[/#if]
</div>
[/#macro]
[#-- Used for Order Difficulties page no-verify.ftl --]
[#macro userInfoNoVerify orderId="0" userDetails="default" shipMethod="default" dcPickUp=false billingAddressUpdate=""]
[#local _billingSameAsShipping = ""]
[#if billingAddressUpdate != ""]
[#local _billingSameAsShipping = "&billingSameAsShipping=" + billingAddressUpdate]
[/#if]
<div class="[#if shipMethod == 1]shipping-address-block[#else]billing-address-block[/#if] " id="estara-payment-info">
<div class="ship-to">
[#if shipMethod == 1]
<p class="label">Shipping Address</p>
[#else]
<p class="label">Billing Address:</p>
[/#if]
[#assign suborderId = "0"/]
[#if userDetails.subOrder??]
[#assign suborderId = "${userDetails.subOrder.subOrderId}"/]
[/#if]
<div class="info">
[#local isRegistrant = false/]
[#if userDetails.shipTo?? && userDetails.shipTo?starts_with("Registrant")]
<p>The address has been provided by the registrant.</p>
[#local isRegistrant = true/]
[/#if]
[#if !isRegistrant]
<ul class="vcard">
[#if userDetails??] [#-- If Shipping Address is available in the SubOrderDisplay directive --]
[#if (userDetails.fullName)?has_content]
<li class="name">${userDetails.fullName?xhtml}</li>
[/#if]
[#if (userDetails.addrLine1)?has_content]
<li class="street-address">${userDetails.addrLine1?xhtml}</li>
[/#if]
[#if (userDetails.addrLine2)?has_content]
<li class="street-address-2">${userDetails.addrLine2?xhtml}</li>
[/#if]
[#if userDetails.city?? && userDetails.stateProvince?? && userDetails.postalCode??]
<li class="locality-region"><span class="locality">${userDetails.city?xhtml}</span>, <span class="region">${userDetails.stateProvince?xhtml}</span> <span class="postal-code">${userDetails.fullPostalCode?xhtml}</span></li>
[/#if]
[#if (userDetails.dayPhone)?has_content]
<li class="phone-number">${userDetails.dayPhone?xhtml}</li>
[/#if]
[#if (userDetails.eveningPhone)?has_content]
<li class="phone-number">${userDetails.eveningPhone?xhtml}</li>
[/#if]
[#if ((shipMethod == 0) || (userDetails.shipTo?lower_case == "you")) && !PAGE_IS_PAYMENT ]
[#if (userDetails.emailAddr)?has_content || (profileEmail)?has_content]
<li>${(userDetails.emailAddr)!profileEmail}</li>
[/#if]
[/#if]
[#if shipMethod == 1 && PAGE_IS_PAYMENT ]
<li class="address-edit"><a href="[@wsgc.secureappurl url='checkout/shipping-edit.html?order=${orderId}&suborder=${suborderId}${_billingSameAsShipping}'/]" id="editOrderButton">Edit</a></li>
[#elseif PAGE_IS_PAYMENT ]
<li class="address-edit"><a href="[@wsgc.secureappurl url='checkout/billing.html?pageMode=edit'/]" id="editOrderButton">Edit</a></li>
[/#if]
[/#if]
</ul>
[/#if]
</div>
</div>
<div class="additional-shipping-detail">
[#if shipMethod == 1]
<div class="shipping-method">
<span class="label">Shipping Method:</span>
<span class="info">
[@super.serviceLevelList subOrderDisplay=userDetails/]
</span>
[#if PAGE_IS_PAYMENT ]
<a class="shipping-edit" href="[@wsgc.secureappurl url='/checkout/shipping-edit.html?order=${orderId}&suborder=${suborderId}${_billingSameAsShipping}'/]">Edit</a>
[/#if]
</div>
[/#if]
[#if userDetails.shipTo?? && userDetails.shipTo!?lower_case != "you"]
<div class="gift-message">
<p class="label">Gift Message:</p>
<p class="info">
[#if userDetails.giftMessage?? && userDetails.giftMessage?size != 0]
[#list userDetails.giftMessage as giftMessage]
<div class="gift-message-text">${giftMessage?j_string}</div>
[/#list]
[#if PAGE_IS_PAYMENT ]
<a class="gift-message-edit" href="[@wsgc.secureappurl url='/checkout/deliveryoptions.html'/]">Edit</a>
[/#if]
[#else]
[#if PAGE_IS_PAYMENT ]
<a class="gift-message-edit" href="[@wsgc.secureappurl url='/checkout/deliveryoptions.html'/]">Add a Gift Message</a>
[/#if]
[/#if]
</p>
</div>
[/#if]
</div>
</div>
[/#macro]
dynamic-components-poc/index.js
View file @ 08ef4965
......@@ -4,8 +4,8 @@ import JSONFile from "./json/test-data.json" assert { type: "json" };
// Function to generate Vue component files
function generateComponentFiles() {
JSONFile.forEach(obj => {
const componentContent = generateComponentContent(obj);
const filePath = `components/${obj.type.toLowerCase().replace(/ /g, "-")}.vue`;
const componentContent = generateComponentContent(obj, false);
const filePath = `components/${obj.name.toLowerCase().replace(/ /g, "-")}.vue`;
fs.writeFileSync(filePath, componentContent);
......@@ -13,28 +13,102 @@ function generateComponentFiles() {
});
}
// Choose HTML Element
// function chooseElement(ele) {
// let el =
// switch (key) {
// case value:
// break;
// default:
// break;
// }
// return el;
// }
// Function to generate Vue component content
function generateComponentContent(obj) {
return `
<template>
<div>
<h2>${obj.heading}</h2>
${obj.link ? `<a href="${obj.link}">${obj.link}</a>` : ""}
${obj.list ? `<ul><li v-for="item in list">{{item}}</li></ul>` : ""}
</div>
</template>
function generateComponentContent(obj, isChild) {
let el = `
<${obj.el}
id="${obj?.id ? obj.id : ""}"
class="${obj?.class ? obj.class : ""}"
${obj?.condition?.if ? `v-if="${obj?.condition?.if}"` : ""}
>
${obj?.children?.length ? obj?.children.map(child => generateComponentContent(child, true)) : ""}
${obj?.text ? obj?.text : ""}
${obj?.d_text ? `{{${obj?.d_text}}}` : ""}
</${obj.el}>
`;
if(!isChild) {
el = `
<template>${el}</template>
<script>
export default {
name: "Template",
name: "${obj.name.replace(/ /g, "")}",
props: ${JSON.stringify(obj.props)},
${obj.data ? `
data() {
return {
list: [${obj.list}]
}
}
return {...${JSON.stringify(obj.data)}}
} ` : ""}
};
</script>
`;
`
}
return el;
}
generateComponentFiles();
\ No newline at end of file
generateComponentFiles();
/*
{
"el": "div",
"id": "address-name",
"text": "SubOrderDetails ShipToName"
},
{
"el": "div",
"text": "Address on file"
},
{
"el": "div",
"id": "address-name",
"text": "SubOrderDetails FullName"
},
{
"el": "div",
"text": "SubOrderDetails AddrLine1"
},
{
"el": "div",
"text": "SubOrderDetails AddrLine2"
},
{
"el": "div",
"text": "SubOrderDetails City, SubOrderDetails StateProvince, SubOrderDetails FullPostalCode"
},
{
"el": "div",
"text": "SubOrderDetails DayPhone"
},
{
"el": "div",
"text": "SubOrderDetails EveningPhone"
},
{
"el": "div",
"class": "review",
"text": "SubOrderDetails PlainEmailAddr"
},
{
"el": "div",
"class": "review",
"text": "profileEmail"
}
*/
\ No newline at end of file
dynamic-components-poc/json/test-data.json
View file @ 08ef4965
[
{
"type": "template",
"heading": "Title 01",
"link": "https://www.google.com",
"list": [1,2,3],
"name": "Generic Address Display",
"el": "div",
"class": "address-block",
"props": {
"addressDisplay": {
"type": "Object"
},
"subOrderDetails": {
"type": "Object",
"default": {
"shipToName": "",
"shipTo": ""
}
},
"showEmail": {
"type": "Boolean",
"default": false
}
},
"data": {
"a": "b"
},
"children": [
{
"type": "assignment",
"variable": "name",
"value": "John"
"el": "div",
"class": "address-name",
"d_text": "subOrderDetails.shipToName",
"condition": {
"if": "subOrderDetails.shipTo && subOrderDetails.shipTo.startsWith('Registrant') && subOrderDetails && subOrderDetails.shipToName"
}
},
{
"type": "conditional",
"condition": "age > 18",
"trueBranch": [
{
"type": "text",
"content": "Welcome, "
},
{
"type": "variable",
"name": "name"
},
{
"type": "text",
"content": "!"
}
],
"falseBranch": [
{
"type": "text",
"content": "You are too young, "
},
{
"type": "variable",
"name": "name"
},
{
"type": "text",
"content": "!"
}
]
"el": "div",
"text": "Address on file",
"condition": {
"if": "subOrderDetails.shipTo && subOrderDetails.shipTo.startsWith('Registrant')"
}
}
]
},
{
"type": "template-2",
"heading": "Title 02"
},
{
"type": "header template",
"heading": "Title 03"
},
{
"type": "footer template",
"heading": "Title 04"
}
]
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment