BACKGROUND OF THE STUDY

From the very beginning of our existence, the main goal of human beings is to evolve

and survive. At its very core, this sort nature is hardwired in every known species that seek to

survive and thrive to ultimately achieve purpose in this harsh world. However, the human

species has set itself above others by developing their superior intellectual abilities that enabled

the species to thrive and survive via many tools and techniques that it has developed through

countless generations. This realization eliminated the various threats of extinction which led to

the exploration of other mediums that built the modern sophisticated society we know today.

Human beings began to question their reality through philosophy, to question our existence and

to know the art that surrounds us. As we delve deeper into these arts, the knowledge on what

makes something beautiful became more prevalent ushering the idea of fashion and couture.

Much known in the form of clothing throughout history however in the modern utopia of today,

grooming such as haircuts and beard cuts became a major fashion statement. One of the most

prevalent symbols for cleanliness and prestige, the haircut is a versatile fashion statement that

is not bound by a single design or framework but can be altered to be suitable for its bearer. The

popular styling may be having a resurgence today but this form of fashion has been a relevant

subject since the ancient time as stated by Gibson (2022), the Venus of Willendorf and Venus of

Brassempouy, two statuettes from the Ice Age dated at 30,000BC, show evidence of hairstyling

and braiding. With that, not long after came the rise of the beard cut. A fashionable way to trim

or style the facial hair of men, the beard cut has been around for a long time. Stated by Almanac

(2021), ancient cave paintings often depict men without beards, and suggest that people shaved

or removed unwanted hair with clamshells, which were used like tweezers, or with blades made

of flint.
 A good quality haircut is synonymous to being a well behaved and civilized citizen of

society. However, as time goes on the symbolism of a haircut evolved into a much personal

matter to someone’s ego. Its importance lies in the way it represents one’s personality and

image to the general public like a facial feature would. With this, barbershops and grooming

institutes have become a major industry everywhere. Trafft (2021) estimated that 45.5% of

industry revenue comes from haircutting and styling. A further 17.1% results from hair coloring

and tinting. However, even though garnering a booming economy it has been stopped by a

force no one can ever predict. As the Covid-19 virus pandemic struck the world, all industries

present in the world have come to a major halt. With this, people are forced to live digitally to

avoid contact with the virus. Thus, this predicament led to the lack of haircut and shaving

services for the span of the pandemic.

This pandemic may have been a disaster at large but it gave the world a new channel

and edge in the form of online services. With this new found flatform, the developers intend to

fully digitalize the shaving and grooming industry with the help of our newly developed system,

the “KaVOGUErong Barbero” website.

MATERIALS AND TOOLS

Website making is an amazing feat of technological advancement that evolved through a

painstaking progress since the birth of the internet. Many tools of the trade are utilized today to

develop systems and website in the industry today. This includes the booking and purchasing

system the developers have created. This includes the help of the following building tools used

to create, maintain and innovate the created website we developed. To help ease the

processes, the developers provided ample interpretation of the said tools below:

WIX. An editor that the developers utilized to create the given booking and purchasing

system, WIX is a very powerful and versatile software. The culmination of their technologies
created an environment where newcomers and long-time experts create their own personalized

and professional online presence. It is world-class powerful drag and drop editor that ease its

users by creating webpages with the most simplistic approach into web design.

JavaScript. For a more sophisticated feel and look on the web program that the

developers have created, the implementation of JavaScript within its inner workings is applied.

A popular and dynamic computer programming software that enables its users to implement

complex and fine details into a system being created. JavaScript uses a lightweight

programming language that allows a more client base interaction with the users other that being

a static website.

Cascading Style Sheets (CSS). A primary support programming language used in web

design, the Cascading Style Sheets (CSS) is used by the developers in the web system created

to control and describe the styles of the webpage shown at all times in the screen. This software

fortifies the structuring of the program by neatly laying out the HTML elements which includes

design, display and more to create a fine-tune website.

Hypertext Markup Language (HTML). This mark-up language is used by the developers to

define the structure of the web program. It is one of the most basic and important systems for

tagging all the necessary details needed in the making of the program which include text, color,

graphics and more.

SOURCE CODE

var deferred = [];

__webpack_require__.O = function(result, chunkIds, fn, priority) {

if(chunkIds) {

priority = priority || 0;
 for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--)
deferred[i] = deferred[i - 1];

deferred[i] = [chunkIds, fn, priority];

return;

var notFulfilled = Infinity;

for (var i = 0; i < deferred.length; i++) {

var chunkIds = deferred[i][0];

var fn = deferred[i][1];

var priority = deferred[i][2];

var fulfilled = true;

for (var j = 0; j < chunkIds.length; j++) {

if ((priority & 1 === 0 || notFulfilled >= priority) &&

Object.keys(__webpack_require__.O).every(function(key) { return
__webpack_require__.O[key](chunkIds[j]); })) {

chunkIds.splice(j--, 1);

} else {

fulfilled = false;

if(priority < notFulfilled) notFulfilled = priority;

if(fulfilled) {

deferred.splice(i--, 1)

result = fn();

}
 return result;

};

// getDefaultExport function for compatibility with non-harmony modules

__webpack_require__.n = function(module) {

var getter = module && module.__esModule ?

function() { return module['default']; } :

function() { return module; };

__webpack_require__.d(getter, { a: getter });

return getter;

};

var getProto = Object.getPrototypeOf ? function(obj) { return Object.getPrototypeOf(obj); } :

function(obj) { return obj.__proto__; };

var leafPrototypes;

// create a fake namespace object

// mode & 1: value is a module id, require it

// mode & 2: merge all properties of value into the ns

// mode & 4: return value when already ns object

// mode & 16: return value when it's Promise-like

// mode & 8|1: behave like require

__webpack_require__.t = function(value, mode) {

if(mode & 1) value = this(value);

if(mode & 8) return value;

if(typeof value === 'object' && value) {

if((mode & 4) && value.__esModule) return value;

if((mode & 16) && typeof value.then === 'function') return value;

var ns = Object.create(null);
 __webpack_require__.r(ns);

var def = {};

leafPrototypes = leafPrototypes || [null, getProto({}), getProto([]), getProto(getProto)];

for(var current = mode & 2 && value; typeof current == 'object' && !
~leafPrototypes.indexOf(current); current = getProto(current)) {

Object.getOwnPropertyNames(current).forEach(function(key) { def[key] =
function() { return value[key]; }; });

def['default'] = function() { return value; };

__webpack_require__.d(ns, def);

return ns;

};

var createStylesheet = function(chunkId, fullhref, resolve, reject) {

var createStylesheet = function(chunkId, fullhref, resolve, reject) {

var linkTag = document.createElement("link");

linkTag.rel = "stylesheet";

linkTag.type = "text/css";

var onLinkComplete = function(event) {

// avoid mem leaks.

linkTag.onerror = linkTag.onload = null;

if (event.type === 'load') {

resolve();

} else {

var errorType = event && (event.type === 'load' ? 'missing' : event.type);

var realHref = event && event.target && event.target.href || fullhref;

var err = new Error("Loading CSS chunk " + chunkId + " failed.\n(" +
realHref + ")");
 err.code = "CSS_CHUNK_LOAD_FAILED";

err.type = errorType;

err.request = realHref;

linkTag.parentNode.removeChild(linkTag)

reject(err);

linkTag.onerror = linkTag.onload = onLinkComplete;

linkTag.href = fullhref;

if (linkTag.href.indexOf(window.location.origin + '/') !== 0) {

linkTag.crossOrigin = "anonymous";

document.head.appendChild(linkTag);

return linkTag;

};

var findStylesheet = function(href, fullhref) {

var existingLinkTags = document.getElementsByTagName("link");

for(var i = 0; i < existingLinkTags.length; i++) {

var tag = existingLinkTags[i];

var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");

if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return
tag;

var existingStyleTags = document.getElementsByTagName("style");

for(var i = 0; i < existingStyleTags.length; i++) {

var tag = existingStyleTags[i];

var dataHref = tag.getAttribute("data-href");

 if(dataHref === href || dataHref === fullhref) return tag;

};

var loadStylesheet = function(chunkId) {

return new Promise(function(resolve, reject) {

var href = __webpack_require__.miniCssF(chunkId);

var fullhref = __webpack_require__.p + href;

if(findStylesheet(href, fullhref)) return resolve();

createStylesheet(chunkId, fullhref, resolve, reject);

});

// object to store loaded CSS chunks

var installedCssChunks = {

6658: 0

};

__webpack_require__.f.miniCss = function(chunkId, promises) {

var cssChunks =
{"1344":1,"1407":1,"1475":1,"2081":1,"2262":1,"2395":1,"3749":1,"3973":1,"4102":1,"5246":1,"81
38":1,"8389":1,"9279":1,"9941":1};

if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);

else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {

promises.push(installedCssChunks[chunkId] =
loadStylesheet(chunkId).then(function() {

installedCssChunks[chunkId] = 0;

}, function(e) {

delete installedCssChunks[chunkId];

throw e;
 }));

};

// no hmr

// define getter functions for harmony exports

__webpack_require__.d = function(exports, definition) {

for(var key in definition) {

if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports,

key)) {

Object.defineProperty(exports, key, { enumerable: true, get:

definition[key] });

};

__webpack_require__.f = {};

// This file contains only the entry chunk.

// The chunk loading function for additional chunks

__webpack_require__.e = function(chunkId) {

return Promise.all(Object.keys(__webpack_require__.f).reduce(function(promises, key) {

__webpack_require__.f[key](chunkId, promises);

return promises;

}, []));

};

__webpack_require__.f = {};

// This file contains only the entry chunk.

// The chunk loading function for additional chunks

__webpack_require__.e = function(chunkId) {

return Promise.all(Object.keys(__webpack_require__.f).reduce(function(promises, key) {

__webpack_require__.f[key](chunkId, promises);

return promises;

}, []));

};

// This function allow to reference async chunks

__webpack_require__.u = function(chunkId) {

// return url for filenames not based on template

if (chunkId === 4767) return "bootstrap-features.a5d824a5.bundle.min.js";

if (chunkId === 2081) return "render-indicator.inline.8a3b699a.bundle.min.js";

// return url for filenames based on template

return "" + ({"66":"protectedPages","73":"santa-langs-ko","117":"santa-langs-

ru","263":"widget","356":"autoDisplayLightbox","438":"santa-langs-
hi","506":"browserNotifications","638":"groups-post-index","679":"events-page-structured-data-
index","687":"triggersAndReactions","763":"bookings-service-index","783":"video-component-
index","788":"sosp","819":"richTextBox","872":"componentsqaapi","879":"santa-langs-
he","964":"popups","1140":"ghostRefComp","1193":"addressInput","1218":"wixDomSanitizer","1
220":"santa-langs-
en","1256":"pageTransitions","1344":"Repeater_FluidColumns","1386":"santa-langs-
sl","1398":"editorWixCodeSdk","1407":"TPAModal","1475":"tpaWidgetNativeDeadComp","1477":
"santa-langs-pt","1711":"debug","1954":"santa-langs-sv","2015":"santa-langs-
th","2044":"tpaModuleProvider","2084":"santa-langs-sk","2144":"module-
executor","2192":"ooiTpaSharedConfig","2220":"socialUrl","2262":"TPAPopup","2300":"multiling
ual","2348":"chat","2355":"widgetWixCodeSdk","2395":"ContentReflowBanner","2519":"santa-
langs-
de","2553":"pageAnchors","2646":"coBranding","2700":"loginSocialBar","2750":"headerContaine
r","2896":"fileUploader","2945":"bookings-form-index","3015":"santa-langs-
bg","3048":"seoTpa","3080":"santa-langs-no","3133":"static-page-v2-schema-presets-
index","3184":"tinyMenu","3198":"quickActionBar","3272":"santa-langs-es","3275":"santa-langs-
tl","3366":"passwordProtectedPage","3392":"repeaters","3408":"menuContainer","3639":"busine
ssManager","3679":"cookiesManager","3742":"blog-hashtags-index","3749":"ooi","3756":"static-
page-index","3843":"santa-langs-
da","3955":"TPAWorker","3973":"Repeater_FixedColumns","4102":"AppPart","4152":"santa-
langs-hu","4157":"santa-langs-nl","4222":"challenges-page-
index","4281":"qaApi","4471":"activePopup","4522":"siteMembers","4698":"headerPlaceholderH
eight","4766":"animations-vendors","4792":"safari-browser-
notifications","4813":"wixCustomElementComponent","4919":"stores-product-schema-presets-
index","4932":"santa-langs-vi","5060":"santa-platform-utils","5170":"events-page-
index","5246":"TPAPreloaderOverlay","5262":"wixapps","5535":"contentReflow","5553":"santa-
langs-zh","5573":"currentUrl","5776":"tpaCommons","5805":"hoverBox","5810":"presence-
lazy","5836":"santa-langs-el","5864":"santa-langs-tr","5880":"scrollVar","5921":"reporter-
api","6127":"containerSlider","6173":"santa-langs-fi","6209":"languageSelector","6211":"custom-
elements-polyfill","6428":"santa-langs-ar","6464":"SEO_DEFAULT","6496":"santa-langs-
ca","6499":"blog-tags-index","6506":"santa-langs-pl","6537":"pro-gallery-item-
index","6736":"datePicker","6743":"sliderGallery","6790":"santa-langs-
ja","6805":"editorElementsDynamicTheme","7047":"wix-code-sdk-providers","7122":"seo-api-
converters","7290":"breadcrumbs-component-index","7294":"intersection-observer-
polyfill","7296":"santa-langs-uk","7361":"imageZoom","7482":"url-mapper-
utils","7555":"loginButton","7573":"page-
features","7597":"tpaWorkerFeature","7607":"platformPubsub","7675":"santa-langs-
ms","7678":"fcm-browser-notifications","7698":"SiteStyles","7718":"santa-langs-
lt","7738":"backgroundScrub","7745":"platform","7802":"restaurants-order-page-
index","7858":"members-area-profile-index","7880":"stores-product-index","7935":"santa-langs-
cs","7955":"tpa","7971":"wix-resize-observer-polyfill","8007":"customUrlMapper","8094":"blog-
post-index","8138":"AppPart2","8148":"santa-langs-id","8179":"testApi","8200":"seo-
api","8219":"groups-page-index","8308":"santa-langs-ro","8317":"events-page-calculated-
index","8389":"TPAUnavailableMessageOverlay","8391":"dynamicPages","8392":"blog-archive-
index","8450":"screenIn","8559":"forum-category-
index","8681":"environmentWixCodeSdk","8693":"search-page-
index","8794":"searchBox","8834":"santa-langs-fr","8945":"renderIndicator","9040":"static-page-
v2-index","9110":"forum-post-
index","9210":"breadcrumbs","9227":"welcomeScreen","9279":"FontRulersContainer","9292":"m
obileActionsMenu","9385":"codeEmbed","9487":"bookings-calendar-index","9540":"blog-
category-index","9836":"santa-langs-it","9941":"TPABaseComponent"}[chunkId] || chunkId) + "."
+
{"66":"9a93f372","73":"73135e7a","117":"17523d29","263":"c6019633","356":"16e475c3","438":"
25c099a9","506":"ebe2cfa6","638":"009040af","679":"6070e6e5","687":"7a47307f","763":"dce6e
08e","783":"9247cbf3","788":"709c6b6b","819":"7d293a95","872":"0d95f415","879":"ae7a4be3","
964":"5098a5a3","1140":"63ade940","1193":"b9481254","1218":"57a58b25","1220":"e2e9b5d9",
"1256":"b6566317","1344":"90327f48","1386":"a74664e6","1398":"1f21d9e8","1407":"dd01683d"
,"1475":"87f15e08","1477":"4db7430c","1602":"95e8b027","1711":"a81c55de","1954":"7d4ee3e9
","1969":"a30cae8a","2015":"0c8aad65","2044":"932c0397","2084":"a1a363e4","2144":"18a2501
1","2192":"9087e72f","2220":"48ca4d0c","2262":"340122e6","2300":"7c54dd68","2348":"8abb71
87","2355":"bba33a22","2395":"b65d4571","2519":"406ae6c2","2553":"fd1f203f","2646":"2344a0
1d","2700":"f0038327","2750":"5695c75c","2896":"8ba1989b","2945":"56af2ccf","3015":"6575fd5
3","3048":"7a8c8755","3080":"66aa79ef","3133":"9d0025bb","3184":"c0f87171","3198":"ffb26fff",
"3272":"22ba9a23","3275":"95f38171","3366":"a737eff5","3392":"be021c59","3408":"e49ae7d8",
"3639":"3ea5197c","3679":"6723c46e","3742":"315bd1ea","3749":"10ae0805","3756":"d411be6a
","3843":"ce61f2d0","3955":"c1ef46ed","3973":"04351e29","4102":"57e398e5","4152":"103a30d
8","4157":"b4186ca3","4222":"01f54711","4281":"46138162","4471":"ce7a5657","4522":"cb03ea
5b","4698":"df1b5a63","4766":"37245c1b","4792":"bd460ae2","4813":"39902bc6","4919":"e7857
637","4932":"f2f8fcb8","5060":"5e10b9d7","5170":"052566ec","5246":"77600aa5","5262":"84819
17f","5535":"3f89cfd8","5553":"2c791a94","5573":"2ec4d613","5776":"59a23c41","5805":"4fc48d
6a","5810":"92b53068","5836":"e407eb00","5864":"2b08d2d1","5880":"6d40d651","5921":"8b12
c4c6","6127":"17d4da04","6173":"ae6438be","6209":"f8862827","6211":"b7b34e46","6307":"289
6f830","6428":"c86e16b8","6464":"3ebad75a","6496":"dda2f805","6499":"8894f2b8","6506":"9cb
5a047","6537":"be1d91d4","6736":"88274f29","6743":"dcf98111","6790":"dd5810b5","6805":"b0
84f93b","7047":"f2a953c1","7122":"7b641001","7290":"fa6190ab","7294":"ec3fb8a2","7296":"9d
be9fc3","7361":"17ddf2e3","7482":"0a135e8d","7555":"4393b5eb","7573":"34e433ff","7597":"77
e3336c","7607":"e7ced280","7675":"68d20aad","7678":"f02c685e","7698":"dbb2f29c","7718":"71
48da7f","7738":"79cc5cde","7745":"8addba42","7802":"44eba34f","7858":"2b132725","7880":"32
1a3c74","7935":"1527f7f0","7955":"aa68f9e3","7971":"56f8c1c1","8007":"10ffdbc8","8094":"7f77
18b8","8138":"c39bf5dc","8148":"ed426c37","8179":"409aab02","8200":"8e90e570","8219":"643f
c9eb","8308":"e81d2bf7","8317":"fd55c2de","8389":"d2009b2a","8391":"543f021d","8392":"0eeb
2e85","8450":"35cdb756","8559":"45f7baf7","8681":"e050a1e8","8693":"1171c0ae","8794":"360
a016e","8834":"ad9f7def","8945":"11d9e2b1","9040":"55dbe972","9110":"7398b572","9210":"04
d751a3","9227":"72e61a44","9279":"e6e6359e","9292":"6399f382","9385":"d53a03f1","9487":"b
907f5bd","9540":"b4a99b50","9836":"216bac3e","9941":"811264a5"}[chunkId] + ".chunk.min.js";

};

// This function allow to reference all chunks

__webpack_require__.miniCssF = function(chunkId) {

// return url for filenames not based on template

if (chunkId === 179) return "main.d54c98d0.min.css";

if (chunkId === 2081) return "render-indicator.inline.110b367c.min.css";

// return url for filenames based on template

return "" +
{"1344":"Repeater_FluidColumns","1407":"TPAModal","1475":"tpaWidgetNativeDeadComp","22
62":"TPAPopup","2395":"ContentReflowBanner","3749":"ooi","3973":"Repeater_FixedColumns",
"4102":"AppPart","5246":"TPAPreloaderOverlay","8138":"AppPart2","8389":"TPAUnavailableMe
ssageOverlay","9279":"FontRulersContainer","9941":"TPABaseComponent"}[chunkId] + "." +
{"1344":"6a3d85df","1407":"aa0fdb42","1475":"ff659636","2262":"680b0cf2","2395":"f7ab19eb","
3749":"abdee6a1","3973":"7652ad2e","4102":"2026c7c9","5246":"62c76388","8138":"9da20422"
,"8389":"52d6fb93","9279":"32ec7a2f","9941":"fdd66901"}[chunkId] + ".chunk.min.css";

};

__webpack_require__.g = (function() {

if (typeof globalThis === 'object') return globalThis;

try {

return this || new Function('return this')();

} catch (e) {

if (typeof window === 'object') return window;

})();
__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj,
prop); }

// no baseURI

// object to store loaded and loading chunks

// undefined = chunk not loaded, null = chunk preloaded/prefetched

// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded

var installedChunks = {

6658: 0

};

__webpack_require__.f.j = function(chunkId, promises) {

// JSONP chunk loading for javascript

var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ?

installedChunks[chunkId] : undefined;

if(installedChunkData !== 0) { // 0 means "already installed".

// a Promise means "currently loading".

if(installedChunkData) {

promises.push(installedChunkData[2]);

} else {

if(6658 != chunkId) {

// setup Promise in chunk cache

var promise = new Promise(function(resolve, reject)

{ installedChunkData = installedChunks[chunkId] = [resolve, reject]; });

promises.push(installedChunkData[2] = promise);

// start chunk loading

 var url = __webpack_require__.p +
__webpack_require__.u(chunkId);

// create error before stack unwound to get useful

stacktrace later

var error = new Error();

var loadingEnded = function(event) {

if(__webpack_require__.o(installedChunks,
chunkId)) {

installedChunkData =
installedChunks[chunkId];

if(installedChunkData !== 0)
installedChunks[chunkId] = undefined;

if(installedChunkData) {

var errorType = event &&

(event.type === 'load' ? 'missing' : event.type);

var realSrc = event && event.target

&& event.target.src;

error.message = 'Loading chunk ' +

chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';

error.name = 'ChunkLoadError';

error.type = errorType;

error.request = realSrc;

installedChunkData[1](error);

};

__webpack_require__.l(url, loadingEnded, "chunk-" +

chunkId, chunkId);

} else installedChunks[chunkId] = 0;

}
};

// no prefetching

// no preloaded

// no HMR

// no HMR manifest

__webpack_require__.O.j = function(chunkId) { return installedChunks[chunkId] === 0; };

// install a JSONP callback for chunk loading

var webpackJsonpCallback = function(parentChunkLoadingFunction, data) {

var chunkIds = data[0];

var moreModules = data[1];

var runtime = data[2];

// add "moreModules" to the modules object,

// then flag all "chunkIds" as loaded and fire callback

var moduleId, chunkId, i = 0;

for(moduleId in moreModules) {

if(__webpack_require__.o(moreModules, moduleId)) {

__webpack_require__.m[moduleId] = moreModules[moduleId];

if(runtime) var result = runtime(__webpack_require__);

 if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);

for(;i < chunkIds.length; i++) {

chunkId = chunkIds[i];

if(__webpack_require__.o(installedChunks, chunkId) &&

installedChunks[chunkId]) {

installedChunks[chunkId][0]();

installedChunks[chunkIds[i]] = 0;

return __webpack_require__.O(result);

var chunkLoadingGlobal = self["webpackJsonp__wix_thunderbolt_app"] =

self["webpackJsonp__wix_thunderbolt_app"] || [];

chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));

chunkLoadingGlobal.push = webpackJsonpCallback.bind(null,
chunkLoadingGlobal.push.bind(chunkLoadingGlobal));

var inProgress = {};

var dataWebpackPrefix = "_wix_thunderbolt_app:";

// loadScript function to load a script via script tag

__webpack_require__.l = function(url, done, key, chunkId) {

if(inProgress[url]) { inProgress[url].push(done); return; }

var script, needAttach;

if(key !== undefined) {

var scripts = document.getElementsByTagName("script");

for(var i = 0; i < scripts.length; i++) {

var s = scripts[i];
 if(s.getAttribute("src") == url || s.getAttribute("data-webpack") ==
dataWebpackPrefix + key) { script = s; break; }

if(!script) {

needAttach = true;

script = document.createElement('script');

script.charset = 'utf-8';

script.timeout = 120;

if (__webpack_require__.nc) {

script.setAttribute("nonce", __webpack_require__.nc);

script.setAttribute("data-webpack", dataWebpackPrefix + key);

script.src = url;

if (script.src.indexOf(window.location.origin + '/') !== 0) {

script.crossOrigin = "anonymous";

inProgress[url] = [done];

var onScriptComplete = function(prev, event) {

// avoid mem leaks in IE.

script.onerror = script.onload = null;

clearTimeout(timeout);

var doneFns = inProgress[url];

delete inProgress[url];

script.parentNode && script.parentNode.removeChild(script);

 doneFns && doneFns.forEach(function(fn) { return fn(event); });

if(prev) return prev(event);

var timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target:

script }), 120000);

script.onerror = onScriptComplete.bind(null, script.onerror);

script.onload = onScriptComplete.bind(null, script.onload);

needAttach && document.head.appendChild(script);

};

// define __esModule on exports

__webpack_require__.r = function(exports) {

if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

Object.defineProperty(exports, '__esModule', { value: true });

};

__webpack_require__.nmd = function(module) {

module.paths = [];

if (!module.children) module.children = [];

return module;

};

__webpack_require__.p = "https://static.parastorage.com/services/wix-thunderbolt/dist/"

// install a JSONP callback for chunk loading

function webpackJsonpCallback(data) {

var chunkIds = data[0];

var moreModules = data[1];

 var executeModules = data[2];

// add "moreModules" to the modules object,

// then flag all "chunkIds" as loaded and fire callback

var moduleId, chunkId, i = 0, resolves = [];

for(;i < chunkIds.length; i++) {

chunkId = chunkIds[i];

if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) &&

installedChunks[chunkId]) {

resolves.push(installedChunks[chunkId][0]);

installedChunks[chunkId] = 0;

for(moduleId in moreModules) {

if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {

modules[moduleId] = moreModules[moduleId];

if(parentJsonpFunction) parentJsonpFunction(data);

while(resolves.length) {

resolves.shift()();

// add entry modules from loaded chunk to deferred list

deferredModules.push.apply(deferredModules, executeModules || []);

 // run deferred modules when all chunks ready

return checkDeferredModules();

};

function checkDeferredModules() {

var result;

for(var i = 0; i < deferredModules.length; i++) {

var deferredModule = deferredModules[i];

var fulfilled = true;

for(var j = 1; j < deferredModule.length; j++) {

var depId = deferredModule[j];

if(installedChunks[depId] !== 0) fulfilled = false;

if(fulfilled) {

deferredModules.splice(i--, 1);

result = __webpack_require__(__webpack_require__.s =
deferredModule[0]);

return result;

// The module cache

var installedModules = {};

// object to store loaded and loading chunks

// undefined = chunk not loaded, null = chunk preloaded/prefetched

 // Promise = chunk loading, 0 = chunk loaded

var installedChunks = {

706: 0

};

var deferredModules = [];

// The require function

function __webpack_require__(moduleId) {

// Check if module is in cache

if(installedModules[moduleId]) {

return installedModules[moduleId].exports;

// Create a new module (and put it into the cache)

var module = installedModules[moduleId] = {

i: moduleId,

l: false,

exports: {}

};

// Execute the module function

modules[moduleId].call(module.exports, module, module.exports,

__webpack_require__);

// Flag the module as loaded

module.l = true;
 // Return the exports of the module

return module.exports;

// expose the modules object (__webpack_modules__)

__webpack_require__.m = modules;

// expose the module cache

__webpack_require__.c = installedModules;

// define getter function for harmony exports

__webpack_require__.d = function(exports, name, getter) {

if(!__webpack_require__.o(exports, name)) {

Object.defineProperty(exports, name, { enumerable: true, get: getter });

};

// define __esModule on exports

__webpack_require__.r = function(exports) {

if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

Object.defineProperty(exports, '__esModule', { value: true });

};
 // create a fake namespace object

// mode & 1: value is a module id, require it

// mode & 2: merge all properties of value into the ns

// mode & 4: return value when already ns object

// mode & 8|1: behave like require

__webpack_require__.t = function(value, mode) {

if(mode & 1) value = __webpack_require__(value);

if(mode & 8) return value;

if((mode & 4) && typeof value === 'object' && value && value.__esModule) return
value;

var ns = Object.create(null);

__webpack_require__.r(ns);

Object.defineProperty(ns, 'default', { enumerable: true, value: value });

if(mode & 2 && typeof value != 'string') for(var key in value)

__webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));

return ns;

};

// getDefaultExport function for compatibility with non-harmony modules

__webpack_require__.n = function(module) {

var getter = module && module.__esModule ?

function getDefault() { return module['default']; } :

function getModuleExports() { return module; };

__webpack_require__.d(getter, 'a', getter);

return getter;

};
 // Object.prototype.hasOwnProperty.call

__webpack_require__.o = function(object, property) { return

Object.prototype.hasOwnProperty.call(object, property); };

// __webpack_public_path__

__webpack_require__.p = "https://static.parastorage.com/services/editor-elements/dist/";

var jsonpArray = (typeof self !== 'undefined' ? self : this)

["webpackJsonp__wix_editor_elements_library"] = (typeof self !== 'undefined' ? self : this)
["webpackJsonp__wix_editor_elements_library"] || [];

var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);

jsonpArray.push = webpackJsonpCallback;

jsonpArray = jsonpArray.slice();

for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);

var parentJsonpFunction = oldJsonpFunction;

// add entry module to deferred list

deferredModules.push([4672,0]);

// run deferred modules when ready

return checkDeferredModules();

(function webpackUniversalModuleDefinition(root, factory) {

if(typeof exports === 'object' && typeof module === 'object')

module.exports = factory(require("react"));

else if(typeof define === 'function' && define.amd)

define("rb_wixui.thunderbolt[WPhoto_RoundPhoto]", ["react"], factory);

else if(typeof exports === 'object')

 exports["rb_wixui.thunderbolt[WPhoto_RoundPhoto]"] = factory(require("react"));

else

root["rb_wixui.thunderbolt[WPhoto_RoundPhoto]"] = factory(root["React"]);

})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__0__)

{

Return

import smoothscroll from 'smoothscroll-polyfill'

import { createLogger, createBiReporter } from '@wix/thunderbolt-environment'

import { fixViewport } from './lib/fixViewport'

import { fixBodyClasses } from './lib/bodyClasses'

import './assets/scss/viewer.global.scss' // Only import it so it will be written in manifest.json

import { featuresLoaders } from 'thunderbolt-features-loaders'

import { instance as biInstance } from './bi-module/instance'

import { createDomReadyPromise, IThunderboltClient, getThunderboltInitializer } from 'feature-

thunderbolt-initializer'

import { createFeaturesLoader } from '@wix/thunderbolt-features'

import { clientModuleFetcher, createClientSAC, toClientSACFactoryParams } from 'thunderbolt-

site-assets-client'

import { BeatEventType, ILogger } from '@wix/thunderbolt-symbols'

import { fedopsMetricsReporter, FetchApi, taskify } from '@wix/thunderbolt-commons'

import { Hub } from '@sentry/types'

import type { Environment } from '@wix/thunderbolt-environment'

import { Container } from '@wix/thunderbolt-ioc'

import { ClientRenderResponse } from 'feature-react-renderer'

import { IComponentsRegistrar } from '@wix/thunderbolt-components-loader'

taskify(() => smoothscroll.polyfill())

const { viewerModel, Sentry } = window

const fetchFn = window.fetch

const reportBI = biInstance.reportBI.bind(biInstance)

const sendBeat = biInstance.sendBeat.bind(biInstance)

const setDynamicSessionData = biInstance.setDynamicSessionData.bind(biInstance)

const reportPageNavigation = biInstance.reportPageNavigation.bind(biInstance)

const reportPageNavigationDone = biInstance.reportPageNavigationDone.bind(biInstance)

const getComponentLibraries = async ({ logger }: { logger: ILogger }):

Promise<Array<IComponentsRegistrar>> => {

const { createComponentsRegistryCSR } = await import(

'@wix/thunderbolt-components-registry/client' /* webpackChunkName:
"thunderbolt-components-registry" */

const componentsRegistry = await createComponentsRegistryCSR({

runAndReport: (metric, fn) => {

return logger.runAsyncAndReport(fn, metric)

},

})

return [componentsRegistry.getComponentsLibrariesAPI()]

const runThunderbolt = async () => {

await Promise.resolve(window.onBeforeStart)

const { experiments, viewMode, requestUrl } = viewerModel

 createDomReadyPromise(true).then(() => fixBodyClasses(viewerModel, window))

const logger = await taskify(() =>

createLogger({

sentry: (Sentry as unknown) as Hub,

wixBiSession: biInstance.wixBiSession,

viewerModel,

fetch: fetchFn,

})

logger.phaseStarted('dom_ready')

const biReporter = createBiReporter(

reportBI,

sendBeat,

setDynamicSessionData,

reportPageNavigation,

reportPageNavigationDone

logger.phaseStarted('component_loader')

const componentLibraries: Promise<Array<IComponentsRegistrar>> =

getComponentLibraries({

logger,

})

logger.phaseEnded('component_loader')
 const getWarmupData = () => JSON.parse(document.getElementById('wix-warmup-
data')?.textContent || '{}')

const { siteAssets } = viewerModel

logger.phaseStarted('load_environment')

const environment: Environment = {

wixBiSession: biInstance.wixBiSession,

viewerModel,

biReporter,

siteAssetsClient: createClientSAC(

toClientSACFactoryParams({

viewerModel,

fetchFn,

siteAssetsMetricsReporter: fedopsMetricsReporter(logger),

moduleFetcher: clientModuleFetcher(

fetchFn,

siteAssets.clientTopology,

thunderbolt: siteAssets.manifests,

},

'web'

),

experiments,

})

),

fetchApi: FetchApi(requestUrl, fetchFn),

 specificEnvFeaturesLoaders: createFeaturesLoader(featuresLoaders,
{ experiments, logger }),

componentLibraries,

logger,

experiments,

browserWindow: window,

warmupData: createDomReadyPromise().then(getWarmupData),

const thunderboltInitializer = getThunderboltInitializer(new Container())

thunderboltInitializer.loadEnvironment(environment)

logger.phaseEnded('load_environment')

logger.phaseStarted('load_renderer')

const rendererPromise = taskify(async () => {

return thunderboltInitializer.getRenderer<ClientRenderResponse>()

})

const renderer = await taskify(async () => {

try {

await thunderboltInitializer.loadSiteFeatures()

} catch (e) {

logger.captureError(e, { tags: { phase: 'load_site_features' },

groupErrorsBy: 'values' })

return rendererPromise
 })

logger.phaseEnded('load_renderer')

logger.phaseStarted('tb_client')

const thunderboltClient = await taskify(async () => {

return (await thunderboltInitializer.getThunderboltInvoker<IThunderboltClient>())

()

})

logger.phaseEnded('tb_client')

const { firstPageId } = await taskify(async () => {

try {

logger.phaseStarted('client_render')

await renderer.render()

logger.phaseEnded('client_render')

} catch (e) {

logger.captureError(e, { tags: { phase: 'client_render' }, groupErrorsBy:

'values' })

return taskify(() => thunderboltClient.appDidMount())

})

if (viewMode === 'mobile') {

await taskify(() => fixViewport())

biReporter.sendBeat(BeatEventType.PAGE_FINISH, 'page interactive', { pageId:

firstPageId })
 logger.appLoaded({ paramsOverrides: { pageId: firstPageId } })

runThunderbolt()

const runner = async () => {

if (window.__browser_deprecation__) {

return

await window.externalsRegistry.lodash.loaded

require('./client')

runner()

/**

* Copyright 2019 Google Inc. All Rights Reserved.

* Licensed under the Apache License, Version 2.0 (the "License");

* you may not use this file except in compliance with the License.

* You may obtain a copy of the License at

* http://www.apache.org/licenses/LICENSE-2.0

* Unless required by applicable law or agreed to in writing, software

* distributed under the License is distributed on an "AS IS" BASIS,

* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

* See the License for the specific language governing permissions and

* limitations under the License.

*/
import {

Endpoint,

EventSource,

Message,

MessageType,

PostMessageWithOrigin,

WireValue,

WireValueType,

} from "./protocol";

export { Endpoint };

export const proxyMarker = Symbol("Comlink.proxy");

export const createEndpoint = Symbol("Comlink.endpoint");

export const releaseProxy = Symbol("Comlink.releaseProxy");

const throwMarker = Symbol("Comlink.thrown");

/**

* Interface of values that were marked to be proxied with `comlink.proxy()`.

* Can also be implemented by classes.

*/

export interface ProxyMarked {

[proxyMarker]: true;

}
/**

* Takes a type and wraps it in a Promise, if it not already is one.

* This is to avoid `Promise<Promise<T>>`.

* This is the inverse of `Unpromisify<T>`.

*/

type Promisify<T> = T extends Promise<unknown> ? T : Promise<T>;

/**

* Takes a type that may be Promise and unwraps the Promise type.

* If `P` is not a Promise, it returns `P`.

* This is the inverse of `Promisify<T>`.

*/

type Unpromisify<P> = P extends Promise<infer T> ? T : P;

/**

* Takes the raw type of a remote property and returns the type that is visible to the local thread
on the proxy.

* Note: This needs to be its own type alias, otherwise it will not distribute over unions.

* See https://www.typescriptlang.org/docs/handbook/advanced-types.html#distributive-
conditional-types

*/

type RemoteProperty<T> =

// If the value is a method, comlink will proxy it automatically.

// Objects are only proxied if they are marked to be proxied.

// Otherwise, the property is converted to a Promise that resolves the cloned value.
 T extends Function | ProxyMarked ? Remote<T> : Promisify<T>;

/**

* Takes the raw type of a property as a remote thread would see it through a proxy (e.g. when
passed in as a function

* argument) and returns the type that the local thread has to supply.

* This is the inverse of `RemoteProperty<T>`.

* Note: This needs to be its own type alias, otherwise it will not distribute over unions. See

* https://www.typescriptlang.org/docs/handbook/advanced-types.html#distributive-conditional-
types

*/

type LocalProperty<T> = T extends Function | ProxyMarked

? Local<T>

: Unpromisify<T>;

/**

* Proxies `T` if it is a `ProxyMarked`, clones it otherwise (as handled by structured cloning and
transfer handlers).

*/

export type ProxyOrClone<T> = T extends ProxyMarked ? Remote<T> : T;

/**

* Inverse of `ProxyOrClone<T>`.

*/

export type UnproxyOrClone<T> = T extends RemoteObject<ProxyMarked>

? Local<T>

: T;
/**

* Takes the raw type of a remote object in the other thread and returns the type as it is visible to
the local thread

* when proxied with `Comlink.proxy()`.

* This does not handle call signatures, which is handled by the more general `Remote<T>`
type.

* @template T The raw type of a remote object as seen in the other thread.

*/

export type RemoteObject<T> = { [P in keyof T]: RemoteProperty<T[P]> };

/**

* Takes the type of an object as a remote thread would see it through a proxy (e.g. when
passed in as a function

* argument) and returns the type that the local thread has to supply.

* This does not handle call signatures, which is handled by the more general `Local<T>` type.

* This is the inverse of `RemoteObject<T>`.

* @template T The type of a proxied object.

*/

export type LocalObject<T> = { [P in keyof T]: LocalProperty<T[P]> };

/**

* Additional special comlink methods available on each proxy returned by `Comlink.wrap()`.

*/
export interface ProxyMethods {

[createEndpoint]: () => Promise<MessagePort>;

[releaseProxy]: () => void;

/**

* Takes the raw type of a remote object, function or class in the other thread and returns the
type as it is visible to

* the local thread from the proxy return value of `Comlink.wrap()` or `Comlink.proxy()`.

*/

export type Remote<T> =

// Handle properties

RemoteObject<T> &

// Handle call signature (if present)

(T extends (...args: infer TArguments) => infer TReturn

?(

...args: { [I in keyof TArguments]: UnproxyOrClone<TArguments[I]> }

) => Promisify<ProxyOrClone<Unpromisify<TReturn>>>

: unknown) &

// Handle construct signature (if present)

// The return of construct signatures is always proxied (whether marked or not)

(T extends { new (...args: infer TArguments): infer TInstance }

?{

new (

...args: {

[I in keyof TArguments]: UnproxyOrClone<TArguments[I]>;

}
 ): Promisify<Remote<TInstance>>;

: unknown) &

// Include additional special comlink methods available on the proxy.

ProxyMethods;

/**

* Expresses that a type can be either a sync or async.

*/

type MaybePromise<T> = Promise<T> | T;

/**

* Takes the raw type of a remote object, function or class as a remote thread would see it
through a proxy (e.g. when

* passed in as a function argument) and returns the type the local thread has to supply.

* This is the inverse of `Remote<T>`. It takes a `Remote<T>` and returns its original input `T`.

*/

export type Local<T> =

// Omit the special proxy methods (they don't need to be supplied, comlink adds them)

Omit<LocalObject<T>, keyof ProxyMethods> &

// Handle call signatures (if present)

(T extends (...args: infer TArguments) => infer TReturn

?(

...args: { [I in keyof TArguments]: ProxyOrClone<TArguments[I]> }

) => // The raw function could either be sync or async, but is always proxied automatically

MaybePromise<UnproxyOrClone<Unpromisify<TReturn>>>
 : unknown) &

// Handle construct signature (if present)

// The return of construct signatures is always proxied (whether marked or not)

(T extends { new (...args: infer TArguments): infer TInstance }

?{

new (

...args: {

[I in keyof TArguments]: ProxyOrClone<TArguments[I]>;

): // The raw constructor could either be sync or async, but is always proxied automatically

MaybePromise<Local<Unpromisify<TInstance>>>;

: unknown);

const isObject = (val: unknown): val is object =>

(typeof val === "object" && val !== null) || typeof val === "function";

/**

* Customizes the serialization of certain values as determined by `canHandle()`.

* @template T The input type being handled by this transfer handler.

* @template S The serialized type sent over the wire.

*/

export interface TransferHandler<T, S> {

/**

* Gets called for every value to determine whether this transfer handler
 * should serialize the value, which includes checking that it is of the right

* type (but can perform checks beyond that as well).

*/

canHandle(value: unknown): value is T;

/**

* Gets called with the value if `canHandle()` returned `true` to produce a

* value that can be sent in a message, consisting of structured-cloneable

* values and/or transferrable objects.

*/

serialize(value: T): [S, Transferable[]];

/**

* Gets called to deserialize an incoming value that was serialized in the

* other thread with this transfer handler (known through the name it was

* registered under).

*/

deserialize(value: S): T;

/**

* Internal transfer handle to handle objects marked to proxy.

*/

const proxyTransferHandler: TransferHandler<object, MessagePort> = {

canHandle: (val): val is ProxyMarked =>

isObject(val) && (val as ProxyMarked)[proxyMarker],

 serialize(obj) {

const { port1, port2 } = new MessageChannel();

expose(obj, port1);

return [port2, [port2]];

},

deserialize(port) {

port.start();

return wrap(port);

},

};

interface ThrownValue {

[throwMarker]: unknown; // just needs to be present

value: unknown;

type SerializedThrownValue =

| { isError: true; value: Error }

| { isError: false; value: unknown };

/**

* Internal transfer handler to handle thrown exceptions.

*/

const throwTransferHandler: TransferHandler<

ThrownValue,

SerializedThrownValue

>={
canHandle: (value): value is ThrownValue =>

isObject(value) && throwMarker in value,

serialize({ value }) {

let serialized: SerializedThrownValue;

if (value instanceof Error) {

serialized = {

isError: true,

value: {

message: value.message,

name: value.name,

stack: value.stack,

},

};

} else {

serialized = { isError: false, value };

return [serialized, []];

},

deserialize(serialized) {

if (serialized.isError) {

throw Object.assign(

new Error(serialized.value.message),

serialized.value

);

throw serialized.value;
 },

};

/**

* Allows customizing the serialization of certain values.

*/

export const transferHandlers = new Map<

string,

TransferHandler<unknown, unknown>

>([

["proxy", proxyTransferHandler],

["throw", throwTransferHandler],

]);

export function expose(obj: any, ep: Endpoint = self as any) {

ep.addEventListener("message", function callback(ev: MessageEvent) {

if (!ev || !ev.data) {

return;

const { id, type, path } = {

path: [] as string[],

...(ev.data as Message),

};

const argumentList = (ev.data.argumentList || []).map(fromWireValue);

let returnValue;

try {
const parent = path.slice(0, -1).reduce((obj, prop) => obj[prop], obj);

const rawValue = path.reduce((obj, prop) => obj[prop], obj);

switch (type) {

case MessageType.GET:

returnValue = rawValue;

break;

case MessageType.SET:

parent[path.slice(-1)[0]] = fromWireValue(ev.data.value);

returnValue = true;

break;

case MessageType.APPLY:

returnValue = rawValue.apply(parent, argumentList);

break;

case MessageType.CONSTRUCT:

const value = new rawValue(...argumentList);

returnValue = proxy(value);

break;

case MessageType.ENDPOINT:
 {

const { port1, port2 } = new MessageChannel();

expose(obj, port2);

returnValue = transfer(port1, [port1]);

break;

case MessageType.RELEASE:

returnValue = undefined;

break;

} catch (value) {

returnValue = { value, [throwMarker]: 0 };

Promise.resolve(returnValue)

.catch((value) => {

return { value, [throwMarker]: 0 };

})

.then((returnValue) => {

const [wireValue, transferables] = toWireValue(returnValue);

ep.postMessage({ ...wireValue, id }, transferables);

if (type === MessageType.RELEASE) {

// detach and deactive after sending release response above.

ep.removeEventListener("message", callback as any);

closeEndPoint(ep);
 }

});

} as any);

if (ep.start) {

ep.start();

function isMessagePort(endpoint: Endpoint): endpoint is MessagePort {

return endpoint.constructor.name === "MessagePort";

function closeEndPoint(endpoint: Endpoint) {

if (isMessagePort(endpoint)) endpoint.close();

export function wrap<T>(ep: Endpoint, target?: any): Remote<T> {

return createProxy<T>(ep, [], target) as any;

function throwIfProxyReleased(isReleased: boolean) {

if (isReleased) {

throw new Error("Proxy has been released and is not useable");

}
function createProxy<T>(

ep: Endpoint,

path: (string | number | symbol)[] = [],

target: object = function () {}

): Remote<T> {

let isProxyReleased = false;

const proxy = new Proxy(target, {

get(_target, prop) {

throwIfProxyReleased(isProxyReleased);

if (prop === releaseProxy) {

return () => {

return requestResponseMessage(ep, {

type: MessageType.RELEASE,

path: path.map((p) => p.toString()),

}).then(() => {

closeEndPoint(ep);

isProxyReleased = true;

});

};

if (prop === "then") {

if (path.length === 0) {

return { then: () => proxy };

const r = requestResponseMessage(ep, {

type: MessageType.GET,
 path: path.map((p) => p.toString()),

}).then(fromWireValue);

return r.then.bind(r);

return createProxy(ep, [...path, prop]);

},

set(_target, prop, rawValue) {

throwIfProxyReleased(isProxyReleased);

// FIXME: ES6 Proxy Handler `set` methods are supposed to return a

// boolean. To show good will, we return true asynchronously ¯\_(ツ)_/¯

const [value, transferables] = toWireValue(rawValue);

return requestResponseMessage(

ep,

type: MessageType.SET,

path: [...path, prop].map((p) => p.toString()),

value,

},

transferables

).then(fromWireValue) as any;

},

apply(_target, _thisArg, rawArgumentList) {

throwIfProxyReleased(isProxyReleased);

const last = path[path.length - 1];

if ((last as any) === createEndpoint) {

return requestResponseMessage(ep, {
 type: MessageType.ENDPOINT,

}).then(fromWireValue);

// We just pretend that `bind()` didn’t happen.

if (last === "bind") {

return createProxy(ep, path.slice(0, -1));

const [argumentList, transferables] = processArguments(rawArgumentList);

return requestResponseMessage(

ep,

type: MessageType.APPLY,

path: path.map((p) => p.toString()),

argumentList,

},

transferables

).then(fromWireValue);

},

construct(_target, rawArgumentList) {

throwIfProxyReleased(isProxyReleased);

const [argumentList, transferables] = processArguments(rawArgumentList);

return requestResponseMessage(

ep,

type: MessageType.CONSTRUCT,

path: path.map((p) => p.toString()),

 argumentList,

},

transferables

).then(fromWireValue);

},

});

return proxy as any;

function myFlat<T>(arr: (T | T[])[]): T[] {

return Array.prototype.concat.apply([], arr);

function processArguments(argumentList: any[]): [WireValue[], Transferable[]] {

const processed = argumentList.map(toWireValue);

return [processed.map((v) => v[0]), myFlat(processed.map((v) => v[1]))];

const transferCache = new WeakMap<any, Transferable[]>();

export function transfer(obj: any, transfers: Transferable[]) {

transferCache.set(obj, transfers);

return obj;

export function proxy<T>(obj: T): T & ProxyMarked {

return Object.assign(obj, { [proxyMarker]: true }) as any;

}

export function windowEndpoint(

w: PostMessageWithOrigin,

context: EventSource = self,

targetOrigin = "*"

): Endpoint {

return {

postMessage: (msg: any, transferables: Transferable[]) =>

w.postMessage(msg, targetOrigin, transferables),

addEventListener: context.addEventListener.bind(context),

removeEventListener: context.removeEventListener.bind(context),

};

function toWireValue(value: any): [WireValue, Transferable[]] {

for (const [name, handler] of transferHandlers) {

if (handler.canHandle(value)) {

const [serializedValue, transferables] = handler.serialize(value);

return [

type: WireValueType.HANDLER,

name,

value: serializedValue,

},

transferables,
 ];

return [

type: WireValueType.RAW,

value,

},

transferCache.get(value) || [],

];

function fromWireValue(value: WireValue): any {

switch (value.type) {

case WireValueType.HANDLER:

return transferHandlers.get(value.name)!.deserialize(value.value);

case WireValueType.RAW:

return value.value;

function requestResponseMessage(

ep: Endpoint,

msg: Message,

transfers?: Transferable[]

): Promise<WireValue> {
 return new Promise((resolve) => {

const id = generateUUID();

ep.addEventListener("message", function l(ev: MessageEvent) {

if (!ev.data || !ev.data.id || ev.data.id !== id) {

return;

ep.removeEventListener("message", l as any);

resolve(ev.data);

} as any);

if (ep.start) {

ep.start();

ep.postMessage({ id, ...msg }, transfers);

});

function generateUUID(): string {

return new Array(4)

.fill(0)

.map(() => Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(16))

.join("-");

module.exports = React;

module.exports = ReactDOM;

// expose externals (lodash, react, react dom, ...) libs on the window for chunks to be able to
import them before they are loaded
const { lodash, react, reactDOM } = (window.externalsRegistry = {

lodash: {} as typeof window.externalsRegistry['lodash'],

react: {} as typeof window.externalsRegistry['react'],

reactDOM: {} as typeof window.externalsRegistry['reactDOM'],

})

lodash.loaded = new Promise((resolve) => {

lodash.onload = resolve

})

// @ts-ignore

window.reactDOMReference = window.ReactDOM = { loading: true }

reactDOM.loaded = new Promise((resolve) => {

reactDOM.onload = () => {

// if a chunk that is dependent on react-dom was evaluated prior to evaluating

react-dom,

// we need to override the stale reactDOMReference this chunk holds

// with window.ReactDOM which is overridden by react-dom evaluation.

Object.assign(window.reactDOMReference, window.ReactDOM,
window.preactCompat, { loading: false })

resolve()

})

// @ts-ignore

window.reactReference = window.React = { loading: true }

react.loaded = new Promise((resolve) => {

 react.onload = () => {

// if a chunk that is dependent on react was evaluated prior to evaluating react,

// we need to override the stale reactReference this chunk holds

// with window.React which is overridden by react evaluation.

Object.assign(window.reactReference, window.React, window.preactCompat,

{ loading: false })

resolve()

})

window.reactAndReactDOMLoaded = Promise.all([react.loaded, reactDOM.loaded])

module.exports = window._

import { platformWorkerPromise } from 'thunderbolt-platform/src/client/create-worker'

const { fleetConfig } = window.viewerModel

const TB_PERFORMANCE_TOOL_URL = 'https://apps.wix.com/tb-performance-tool'

const addOpenedMessageListenerToWindow = (

openPerformanceToolWindow: Window | null,

performanceEntries: Array<PerformanceEntry>

) => {

window.addEventListener('message', (msg) => {

if (msg.data === 'opened') {

// @ts-ignore

openPerformanceToolWindow!.postMessage(

{ type: 'performanceData', data:

JSON.parse(JSON.stringify(performanceEntries)) },
 '*'

})

if (fleetConfig.type === 'Canary' || window.location.search.includes('performanceTool=true')) {

// @ts-ignore

window.openPerformanceTool = async () => {

const workerThread = await platformWorkerPromise

const openPerformanceToolWindow =
window.open(TB_PERFORMANCE_TOOL_URL, '_blank')

const performanceEntries = window.performance.getEntries()

// @ts-ignore

if (workerThread) {

// @ts-ignore

workerThread.addEventListener('message', (event) => {

if (event.data?.type === 'workerPerformanceData') {

const workerPerf = event.data.data.performanceEntries

const workerStartTime = event.data.data.workerStartTime

const workerZeroBuffer = workerStartTime -

window.performance.timeOrigin

workerPerf.forEach((entry: any) => {

entry.startTime = entry.startTime +
workerZeroBuffer

entry.worker = 'WORKER'

})
 performanceEntries.push(...workerPerf)

addOpenedMessageListenerToWindow(openPerformanceToolWindow,
performanceEntries)

})

// @ts-ignore

workerThread.postMessage({ type: 'PerformanceTool' })

} else {

addOpenedMessageListenerToWindow(openPerformanceToolWindow,
performanceEntries)

SCREENSHOTS
 Throughout the development of the booking and purchasing web program, the

developers have gone through all painstaking steps to achieve maximum detail and precision

that will create a simple, user-friendly and most importantly, usable website that the masses

would enjoy and would gravitate toward. The “KaVOGUErong Barbero” website is created by

utilizing the latest technological innovation in computer science that combines various

programming languages and software that enables the given website to function quickly and

smoothly.

Now, to further solidify the booking and purchasing web program made by the

developers, here is a brief and detailed evaluation of all the functions controls that the website

has to offer its user.

Figure 1.0 and

Figure 1.1

Log in/ Sign up Page

Figure 1.0 and figure 1.1 showcase the log in or sign in pages of the site. It is used to

indicate and identify a particular customer that wants to access the services or goods that the

business establishment offers. Upon clicking the login button in the top right corner, Figure 1.0
will appear that will give the customers suggestion if they want to connect their presence in the

website to their social media account and if not Figure 1.1 will appear for the customers to sign

in themselves.

Figure 2.0

Figure 2.1

Home/Front Page

One of the most important parts of our website, the home. Being that the web program is

representing a shop with beautification purposes, the developers aim to harness that same

energy into creating a home page that provides an appealing and inviting first impression to its

customers. The home page is composed of the name of the service shop we are representing
which is “KaVOGUErong Barbero, haircutting and grooming services” with a tagline “maker of

true gentlemen”. In Figure 2.0 can also be seen the shortcut button “Book now” that when

pressed, will transport the user to our booking catalog. As the users scroll down, a small

suggestive catalog of our products can be seen with a button below that says “SHOP NOW” that

when pressed will transport the users to our merchandise section.

Figure 3.0

Figure 3.1

Booking/Service Page
 The very heart of this business establishment is its services offered, the booking page of

this web program allows the customers to see and pick out the service that they want to be

provided for them from the wide selection of services and amenities that the business

establishment provides in this page. Primarily, this site was inspired to be created due to the

Covid-19 virus that hindered humanity and made our live mostly digital. Figure 3.0 shows our

first service given, the Supreme Haircut. Figure 3.1 shows our other two services provided, the

Excelsior Beardcut and lastly but not the least the Don’s Enterprise, a combination of our finest

haircut and sublime beardcut to complete the “KaVOGUErong Barbero'' luxury experience.

Figure 4.0

Figure 4.1

Shop/Purchasing Page
It is important to know that the shop is also a brand, “KAVOGUErong Barbero” is a brand that is

synonymous to hair care and luxury which is why the display of our various products are in

order to reflect that same kind of energy to the customers shopping online. As shown in Figure

4.0 and Figure 4.1, upon clicking the quick access button “Shop” on the home page, the users

will be transported into our merchandising aisle where the customers are able see our catalog of

products that are specified. When there, the customers are able to add the items they pick out

to their cart and proceed to the check out.

Figure 5.0

Figure 5.1
 Story/About Us Page

This page is all about what the shop represents to its owners, its legacy to the society it

serves. This page highlights what it means to create and manage a business with heart and

passion, to serve its patrons with utmost dedication and trust that they will receive the

experience of their lifetime. In Figure 5.0, the users will be able to see the story of the shop and

brand that we represent, where our name came from and so on. As the users scroll down,

Figure 5.1 will appear. It is the part that gives the customer a small tip to properly shave and

care for their mustache or beard.

Figure 6.0

Payment Section

Like any other business, revenue is important for the longevity and maintenance of the
business establishment. The payment section gives the customer the option to pay online given
the Gcash QR code of our business establishment is posted in this section as shown in Figure
6.0.
 Figure 7.0

Connect with Us/Customer Service Page

To make the customer feel that they are valued ang heard in our small community, the

developers employ the use of customer services. A way for the customers to connect with the

developers and owners of the establishment to say any feedback or comments about the

services or merchandise being offered. Maybe a technical issue like software malfunction or just

general mistakes, we value our customers input and comment for it is the main reason why we

fix and innovate the system at hand. As seen in Figure 7.0, the developers have put two ways

for the customers to communicate with the owners, first is the standard email messaging and

the our is a quick response chatting widget.

 Figure 8.0

Address and General Contacts/Social Media Section

For the customer to locate and find our main shop and store, the business

establishment’s address is shown with the corresponding contacts including the shop's main

telephone and email address as shown in Figure 8.0. As for social media, being that we are an

online establishment in the form of this website, the developers intend to create a whole online

media persona that will effectively be an active advertisement for people to avail our goods and

services.