favesalon-embed 1.0.16 → 1.0.17

package/dist/favesalon-embed/activate-form.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h } from './index-888e99e3.js';
-import { H as HttpService, g as get_1 } from './services-9a686ade.js';
+import { H as HttpService, g as get_1 } from './services-82948efc.js';
 import { C as Colors } from './colors-ea36347a.js';
 import './_commonjsHelpers-9bc404fc.js';
 

package/dist/favesalon-embed/buy-giftcard-form.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h } from './index-888e99e3.js';
-import { _ as _root, i as isSymbol_1, a as isObject_1, H as HttpService, d as dayjs_min, b as dateFormat, g as get_1, s as shortDateFormat, c as getSalonImage, e as getSalonAddress } from './services-9a686ade.js';
+import { _ as _root, i as isSymbol_1, a as isObject_1, H as HttpService, d as dayjs_min, b as dateFormat, g as get_1, s as shortDateFormat, c as getSalonImage, e as getSalonAddress } from './services-82948efc.js';
 import { c as createCommonjsModule, g as getDefaultExportFromCjs } from './_commonjsHelpers-9bc404fc.js';
 import { C as Colors } from './colors-ea36347a.js';
 
@@ -362,6 +362,11 @@ const customStyles = {
 const BuyGiftcardForm = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.onClickDeliveryDone = () => {
+      const targetElement = document.getElementById('page--gift-card-style');
+      targetElement && targetElement.scrollIntoView();
+      this.isDeliveryDoneVisible = false;
+    };
     this.onChangeEmail = debounce_1((recipientEmail) => {
       this.recipientEmail = recipientEmail;
       if (this.recipientEmailConfirm) {
@@ -379,6 +384,7 @@ const BuyGiftcardForm = class {
     }, 300);
     this.onChangeConfirmEmail = debounce_1((recipientEmailConfirm) => {
       this.recipientEmailConfirm = recipientEmailConfirm;
+      this.isDeliveryDoneVisible = !!recipientEmailConfirm;
       if (this.recipientEmail) {
         if (this.deliveryType === DeliveryType.Email) {
           this.isInvalidEmails = recipientEmailConfirm !== this.recipientEmail;
@@ -393,6 +399,7 @@ const BuyGiftcardForm = class {
       }
     }, 300);
     this.onSubmitGiftCardForm = async () => {
+      this.errorMessage = null;
       const recipientEmailStr = String(this.recipientEmail).replaceAll(' ', '');
       const isInvalidEmailFormats = this.deliveryType === DeliveryType.Email && recipientEmailStr.indexOf('@') === -1;
       if (this.deliveryType === DeliveryType.Email && (!recipientEmailStr || isInvalidEmailFormats || this.isInvalidEmails)) {
@@ -405,9 +412,24 @@ const BuyGiftcardForm = class {
           ? 'Inputted phones are invalid'
           : 'Inputted phones are not matched';
       }
-      else if (this.customAmount || this.selectedAmount) {
-        this.step = FormStep.PaymentInfo;
-        setTimeout(() => this.initMagensaPayment(), 350);
+      else {
+        if (this.customAmount || this.selectedAmount) {
+          if (this.recipientFirstName && this.recipientLastName) {
+            if (this.selectedStyleId) {
+              this.step = FormStep.PaymentInfo;
+              setTimeout(() => this.initMagensaPayment(), 350);
+            }
+            else {
+              this.errorMessage = 'Please select a gift card style';
+            }
+          }
+          else {
+            this.errorMessage = 'Please enter your first & last name';
+          }
+        }
+        else {
+          this.errorMessage = 'Please select Gift card amount';
+        }
       }
     };
     this.salonId = undefined;
@@ -432,6 +454,7 @@ const BuyGiftcardForm = class {
     this.isInvalidEmails = undefined;
     this.isInvalidPhones = undefined;
     this.selectedStyleId = undefined;
+    this.isDeliveryDoneVisible = undefined;
   }
   async componentDidLoad() {
     const promises = [
@@ -493,7 +516,7 @@ const BuyGiftcardForm = class {
       } }, totalAmount > 0 && (h("div", null, h("div", { style: { display: 'flex' } }, recommendAmounts.map((recommendValue, idx) => {
       const isSelected = this.selectedAmount === recommendValue;
       return (h("button", { type: "button", key: `gc--recommend-amount--${recommendValue}`, value: recommendValue, onClick: () => this.selectedAmount = recommendValue, style: {
-          border: `1px solid ${Colors.Gray02}`,
+          border: `1px solid ${Colors.Gray03}`,
           backgroundColor: Colors.White,
           color: Colors.TextColor,
           borderRadius: '0px',
@@ -504,6 +527,7 @@ const BuyGiftcardForm = class {
           justifyContent: 'center',
           alignItems: 'center',
           fontSize: '18px',
+          fontWeight: '600',
           padding: '8px 12px',
           ...idx === 0 ? { borderRadius: '8px 0 0 8px', } : {},
           ...idx === (totalAmount - 1) ? { borderRadius: '0 8px 8px 0' } : {},
@@ -516,7 +540,7 @@ const BuyGiftcardForm = class {
         fontSize: '18px',
         transform: 'translate(0, -50%)',
       } }, "$"), h("input", { type: "number", value: this.customAmount, onInput: (evt) => this.customAmount = evt.target.value, style: {
-        border: `1px solid ${Colors.Gray02}`,
+        border: `1px solid ${Colors.Gray03}`,
         backgroundColor: Colors.White,
         color: Colors.TextColor,
         borderRadius: '8px',
@@ -539,6 +563,8 @@ const BuyGiftcardForm = class {
         padding: '8px 16px',
         height: '48px',
         width: '100%',
+        fontSize: '18px',
+        fontWeight: '600',
       } })), h("div", { style: { width: '48%', marginLeft: '4%' } }, h("input", { placeholder: "Last name", type: "text", value: this.recipientLastName, onInput: (evt) => {
         this.recipientLastName = evt.target.value.trim();
       }, style: {
@@ -549,6 +575,8 @@ const BuyGiftcardForm = class {
         padding: '8px 16px',
         height: '48px',
         width: '100%',
+        fontSize: '18px',
+        fontWeight: '600',
       } })))), h("div", { style: { marginTop: '24px' } }, h("div", { style: { fontSize: '18px' } }, "Delivery method?"), h("div", { style: { display: 'flex', marginTop: '12px' } }, h("div", { style: {
         cursor: 'pointer',
         display: 'flex',
@@ -557,8 +585,9 @@ const BuyGiftcardForm = class {
         this.recipientEmail = null;
         this.recipientEmailConfirm = null;
         this.deliveryType = DeliveryType.Email;
+        this.isDeliveryDoneVisible = false;
       } }, h("span", { style: {
-        border: `1px solid ${Colors.Gray02}`,
+        border: `1px solid ${Colors.Gray03}`,
         backgroundClip: 'content-box',
         borderRadius: '50%',
         height: '16px',
@@ -577,8 +606,9 @@ const BuyGiftcardForm = class {
         this.recipientEmail = null;
         this.recipientEmailConfirm = null;
         this.deliveryType = DeliveryType.SMS;
+        this.isDeliveryDoneVisible = false;
       } }, h("span", { style: {
-        border: `1px solid ${Colors.Gray02}`,
+        border: `1px solid ${Colors.Gray03}`,
         backgroundClip: 'content-box',
         borderRadius: '50%',
         height: '16px',
@@ -593,22 +623,42 @@ const BuyGiftcardForm = class {
         alignItems: 'center',
         marginTop: '24px',
       } }, h("div", { style: { width: '48%' } }, h("input", { placeholder: isDeliveryEmail ? 'Enter email' : 'Enter phone', type: "text", value: this.recipientEmail, onInput: (evt) => this.onChangeEmail(evt.target.value.trim()), style: {
-        border: `1px solid ${Colors.Gray02}`,
+        border: `1px solid ${Colors.Gray03}`,
         backgroundColor: Colors.White,
         color: Colors.TextColor,
         borderRadius: '8px',
         padding: '8px 16px',
         height: '48px',
         width: '100%',
-      } })), h("div", { style: { width: '48%', marginLeft: '4%' } }, h("input", { placeholder: isDeliveryEmail ? 'Re-enter email' : 'Re-enter phone', type: "text", value: this.recipientEmailConfirm, onInput: (evt) => this.onChangeConfirmEmail(evt.target.value.trim()), style: {
-        border: `1px solid ${Colors.Gray02}`,
+        fontSize: '18px',
+        fontWeight: '600',
+      } })), h("div", { style: { width: '48%', marginLeft: '4%', position: 'relative' } }, h("input", { placeholder: isDeliveryEmail ? 'Re-enter email' : 'Re-enter phone', type: "text", value: this.recipientEmailConfirm, onInput: (evt) => this.onChangeConfirmEmail(evt.target.value.trim()), style: {
+        border: `1px solid ${Colors.Gray03}`,
         backgroundColor: Colors.White,
         color: Colors.TextColor,
         borderRadius: '8px',
         padding: '8px 16px',
         height: '48px',
         width: '100%',
-      } }))), this.isInvalidEmails && (h("div", { style: {
+        fontSize: '18px',
+        fontWeight: '600',
+      } }), this.isDeliveryDoneVisible && (h("button", { type: "button", style: {
+        background: Colors.Secondary,
+        border: `1px solid ${Colors.Secondary}`,
+        borderRadius: '8px',
+        cursor: 'pointer',
+        color: Colors.White,
+        fontSize: '16px',
+        fontWeight: '700',
+        paddingLeft: '24px',
+        paddingRight: '24px',
+        height: '48px',
+        position: 'absolute',
+        marginTop: '2px',
+        top: '100%',
+        right: '0',
+        zIndex: '10',
+      }, onClick: () => this.onClickDeliveryDone() }, "Next")))), this.isInvalidEmails && (h("div", { style: {
         color: Colors.Red03,
         fontSize: '90%',
         marginTop: '16px',
@@ -621,7 +671,7 @@ const BuyGiftcardForm = class {
         backgroundColor: Colors.Info01,
         marginTop: '16px',
         padding: '16px',
-      } }, "Gift card info will send to your email once it cannot delivery to recipient")), giftCardStyles.length > 0 && (h("div", { style: {
+      } }, "Gift card info will send to your email once it cannot delivery to recipient")), h("div", { id: "page--gift-card-style" }), giftCardStyles.length > 0 && (h("div", { style: {
         borderTop: `1px solid ${Colors.Gray02}`,
         marginTop: '24px',
         paddingTop: '16px',
@@ -667,7 +717,7 @@ const BuyGiftcardForm = class {
         this.deliveryDate = evt.target.value.trim();
       }, style: {
         backgroundColor: Colors.White,
-        border: `1px solid ${Colors.Gray02}`,
+        border: `1px solid ${Colors.Gray03}`,
         color: Colors.TextColor,
         borderRadius: '8px',
         padding: '8px 16px',
@@ -677,7 +727,7 @@ const BuyGiftcardForm = class {
       } })), h("div", { style: { marginTop: '16px' } }, h("textarea", { rows: 4, placeholder: "Include a message...", onInput: (evt) => {
         this.recipientMessage = evt.target.value.trim();
       }, style: {
-        border: `1px solid ${Colors.Gray02}`,
+        border: `1px solid ${Colors.Gray03}`,
         background: Colors.White,
         color: Colors.TextColor,
         padding: '16px',
@@ -703,11 +753,22 @@ const BuyGiftcardForm = class {
         backgroundColor: Colors.Red01,
         border: `1px solid ${Colors.Red02}`,
         marginBottom: '24px',
+        marginTop: '24px',
         padding: '16px',
       } }, this.errorMessage))));
   }
   renderPaymentSucceed() {
-    return (h("div", { style: { paddingTop: '24px', textAlign: 'center' } }, h("div", { style: { fontSize: '24px', fontWeight: '700', lineHeight: '1.4' } }, "Thank you!"), h("div", { style: { marginTop: '12px' } }, "Your gift card has been purchased successfully")));
+    return (h("div", { style: { paddingTop: '24px', textAlign: 'center' } }, h("div", { style: {
+        backgroundColor: Colors.Success01,
+        color: Colors.White,
+        borderRadius: '50%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        margin: 'auto',
+        display: 'flex',
+        height: '84px',
+        width: '84px',
+      } }, h("i", { class: "ri-check-fill", style: { fontSize: '32px', color: Colors.Success03 } })), h("div", { style: { fontSize: '24px', fontWeight: '700', lineHeight: '1.4', marginTop: '24px' } }, "Thank you!"), h("div", { style: { marginTop: '12px' } }, "Your gift card has been purchased successfully")));
   }
   async createCardPayment() {
     try {
@@ -724,49 +785,13 @@ const BuyGiftcardForm = class {
   async processCardToken(Token) {
     const defaultErrorMessage = 'Something went wrong when creating payment transaction';
     try {
-      const { MPPGv4WSFault, TransactionOutput } = await HttpService().magensaProcessToken({
+      const { MPPGv4WSFault, TransactionOutput } = await HttpService().magensaProcessToken(Number(this.salonId), {
         raw_data: [{
             Token,
-            Authentication: {
-              CustomerCode: this.magensaCredentials.customerCode,
-              Username: this.magensaCredentials.username,
-              Password: this.magensaCredentials.password,
-            },
             TransactionInput: {
               TransactionType: 1,
               ProcessorName: this.magensaCredentials.processorName,
-              Amount: this.customAmount || this.selectedAmount || 1,
-            },
-          }],
-      });
-      if (!MPPGv4WSFault && TransactionOutput && TransactionOutput.TransactionID) {
-        return Promise.resolve({ transactionID: TransactionOutput.TransactionID });
-      }
-      let message = MPPGv4WSFault && MPPGv4WSFault.FaultReason;
-      if (!message && TransactionOutput && TransactionOutput.TransactionMessage) {
-        message = TransactionOutput.TransactionMessage;
-      }
-      return Promise.reject({ message: message || defaultErrorMessage });
-    }
-    catch (res) {
-      return Promise.reject({ message: res.error || defaultErrorMessage });
-    }
-  }
-  async voidPaymentRequest(ReferenceTransactionID) {
-    const defaultErrorMessage = 'Something went wrong when updating payment transaction status';
-    try {
-      const { MPPGv4WSFault, TransactionOutput } = await HttpService().magensaConfirmTransaction({
-        raw_data: [{
-            Authentication: {
-              CustomerCode: this.magensaCredentials.customerCode,
-              Username: this.magensaCredentials.username,
-              Password: this.magensaCredentials.password,
-            },
-            TransactionInput: {
-              ReferenceTransactionID,
-              TransactionType: 4,
-              ProcessorName: this.magensaCredentials.processorName,
-              Amount: this.customAmount || this.selectedAmount || 1,
+              Amount: Number(this.customAmount || this.selectedAmount || 1).toFixed(2),
             },
           }],
       });
@@ -790,7 +815,6 @@ const BuyGiftcardForm = class {
       try {
         const { token } = await this.createCardPayment();
         const { transactionID } = await this.processCardToken(token);
-        await this.voidPaymentRequest(transactionID);
         if (token) {
           const { giftCardStyles } = this.giftCardSettings || {};
           const selectedGiftCardStyle = this.selectedStyleId
@@ -798,7 +822,7 @@ const BuyGiftcardForm = class {
           const recipientUserEmail = (this.recipientEmail || '').indexOf('@') > -1 ? this.recipientEmail : '';
           const recipientUserPhone = (this.recipientEmail || '').indexOf('@') === -1 ? this.recipientEmail : '';
           await HttpService().onBuyGiftCard(this.salonInfo.id, {
-            source: token,
+            source: '',
             amount: this.customAmount || this.selectedAmount || '',
             gift_card_style: selectedGiftCardStyle || '',
             delivery_date: this.deliveryDate ? dayjs_min(this.deliveryDate).format(dateFormat) : dayjs_min().format(dateFormat),
@@ -818,9 +842,6 @@ const BuyGiftcardForm = class {
             payment_valid: {
               type: 'magensa',
               magensa_transaction_id: transactionID,
-              magensa_user: this.magensaCredentials.username,
-              magensa_password: this.magensaCredentials.password,
-              magensa_customer_code: this.magensaCredentials.customerCode,
             },
           });
           this.step = FormStep.PaymentSucceed;
@@ -848,7 +869,7 @@ const BuyGiftcardForm = class {
         fontSize: '18px',
         fontWeight: '700',
         marginLeft: '6px',
-      } }, this.deliveryDate ? dayjs_min(this.deliveryDate).format(shortDateFormat) : 'Today')), h("div", { style: { fontSize: '18px', marginTop: '24px' } }, "Payment"), h("div", { style: { marginTop: '8px', marginLeft: '-6px' } }, h("credit-card-types", null)), h("div", { id: "buy-giftcard--payment", style: { height: '300px', maxWidth: '400px', marginTop: '24px' } }), h("button", { type: "button", disabled: this.isSubmitting, style: {
+      } }, this.deliveryDate ? dayjs_min(this.deliveryDate).format(shortDateFormat) : 'Today')), h("div", { style: { fontSize: '18px', marginTop: '24px' } }, "Payment"), h("div", { style: { marginTop: '8px', marginLeft: '-6px' } }, h("credit-card-types", null)), h("div", { id: "buy-giftcard--payment", style: { height: '300px', maxWidth: '400px', marginTop: '24px' } }), h("button", { type: "button", disabled: (2 > 1 || this.isSubmitting), style: {
         border: `1px solid ${Colors.Secondary}`,
         background: Colors.Secondary,
         color: Colors.White,
@@ -860,23 +881,29 @@ const BuyGiftcardForm = class {
         paddingRight: '24px',
         height: '44px',
         width: '100%',
-      }, onClick: () => this.onSubmitPaymentForm() }, "Submit")));
+      }, onClick: () => this.onSubmitPaymentForm() }, "Submit ", (2 > 1 || this.isSubmitting) && (h("span", { class: "fs-spin", style: { marginLeft: '4px' } }, h("i", { class: "ri-loader-4-line" })))), this.errorMessage && (h("div", { style: {
+        backgroundColor: Colors.Red01,
+        border: `1px solid ${Colors.Red02}`,
+        marginBottom: '24px',
+        marginTop: '24px',
+        padding: '16px',
+      } }, this.errorMessage))));
   }
   renderSalonInfo() {
     const salonImageUrl = getSalonImage(this.salonInfo);
     return (h("div", { style: {
         backgroundColor: Colors.White,
-        border: `1px solid ${Colors.Gray02}`,
+        border: `1px solid ${Colors.Gray03}`,
         borderRadius: '8px',
         padding: '24px',
       } }, h("div", { style: { display: 'flex' } }, salonImageUrl && (h("div", { style: { marginRight: '24px' } }, h("img", { src: salonImageUrl, alt: this.salonInfo.businessName, style: { maxWidth: '84px' } }))), h("div", { style: { flexGrow: '1', flexShrink: '1' } }, h("div", { style: {
         fontSize: '24px',
         lineHeight: '1.3',
       } }, this.salonInfo.businessName), h("div", { style: {
-        color: Colors.Gray05,
         display: 'flex',
         marginTop: '4px',
       } }, h("i", { class: "ri-map-pin-line", style: {
+        color: Colors.Gray05,
         marginRight: '4px',
         fontSize: '20px',
       } }), h("div", { style: {
@@ -887,9 +914,9 @@ const BuyGiftcardForm = class {
       } }, getSalonAddress(this.salonInfo))), h("div", { style: {
         display: 'flex',
         alignItems: 'center',
-        color: Colors.Gray05,
         marginTop: '4px',
       } }, h("i", { class: "ri-phone-line", style: {
+        color: Colors.Gray05,
         marginRight: '4px',
         fontSize: '20px',
       } }), h("div", { style: {