favesalon-embed 1.0.16 → 1.0.18

package/dist/custom-elements/index.d.ts

@@ -68,6 +68,36 @@ export const GoogleMap: {
   new (): GoogleMap;
 };
 
+interface IconChecked extends Components.IconChecked, HTMLElement {}
+export const IconChecked: {
+  prototype: IconChecked;
+  new (): IconChecked;
+};
+
+interface IconDate extends Components.IconDate, HTMLElement {}
+export const IconDate: {
+  prototype: IconDate;
+  new (): IconDate;
+};
+
+interface IconLoading extends Components.IconLoading, HTMLElement {}
+export const IconLoading: {
+  prototype: IconLoading;
+  new (): IconLoading;
+};
+
+interface IconLocationMarker extends Components.IconLocationMarker, HTMLElement {}
+export const IconLocationMarker: {
+  prototype: IconLocationMarker;
+  new (): IconLocationMarker;
+};
+
+interface IconPhone extends Components.IconPhone, HTMLElement {}
+export const IconPhone: {
+  prototype: IconPhone;
+  new (): IconPhone;
+};
+
 interface LoginForm extends Components.LoginForm, HTMLElement {}
 export const LoginForm: {
   prototype: LoginForm;

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,6 @@
 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 { I as Inputmask } from './inputmask-afacb9e0.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';
 
@@ -325,7 +326,7 @@ var teConnectJs = createCommonjsModule(function (module, exports) {
 
 const teConnectJs$1 = /*@__PURE__*/getDefaultExportFromCjs(teConnectJs);
 
-const buyGiftcardFormCss = "buy-giftcard-form{display:block;width:100%}.buy-giftcard-form *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}";
+const buyGiftcardFormCss = "buy-giftcard-form{display:block;width:100%}.buy-giftcard-form *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.fs-input--date::-webkit-calendar-picker-indicator{cursor:pointer;background-color:#f00;position:absolute;right:0;top:0;height:48px;width:48px}@media (max-width: 768px){.fs--form--actions{position:fixed;left:0;right:0;bottom:0;padding:16px;-moz-box-shadow:0px 0px 24px rgba(0, 0, 0, 0.25);-webkit-box-shadow:0px 0px 24px rgba(0, 0, 0, 0.25);box-shadow:0px 0px 24px rgba(0, 0, 0, 0.25)}}";
 
 var DeliveryType;
 (function (DeliveryType) {
@@ -362,6 +363,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 +385,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 +400,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 +413,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 +455,7 @@ const BuyGiftcardForm = class {
     this.isInvalidEmails = undefined;
     this.isInvalidPhones = undefined;
     this.selectedStyleId = undefined;
+    this.isDeliveryDoneVisible = undefined;
   }
   async componentDidLoad() {
     const promises = [
@@ -467,7 +491,7 @@ const BuyGiftcardForm = class {
   }
   renderPaymentOnlineDisabled() {
     return (h("div", { style: { paddingTop: '24px', textAlign: 'center' } }, h("div", { style: { fontSize: '24px', fontWeight: '700', lineHeight: '1.4' } }, "Online Gift Card is not available"), h("div", { style: { marginTop: '12px' } }, "Please call us for assistance or visit salon. Thanks!"), h("div", { style: { marginTop: '12px' } }, h("a", { rel: "noopener noreferrer", href: `tel:${this.salonInfo.businessPhone}` }, h("button", { type: "button", style: {
-        background: Colors.Secondary,
+        backgroundColor: Colors.Secondary,
         border: `1px solid ${Colors.Secondary}`,
         borderRadius: '8px',
         color: Colors.White,
@@ -492,63 +516,75 @@ const BuyGiftcardForm = class {
         marginTop: '12px',
       } }, 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}`,
+      return (h("button", { type: "button", key: `gc--recommend-amount--${recommendValue}`, value: recommendValue, onClick: () => {
+          this.selectedAmount = recommendValue;
+          this.customAmount = recommendValue;
+        }, style: {
+          border: `1px solid ${Colors.Gray03}`,
           backgroundColor: Colors.White,
           color: Colors.TextColor,
           borderRadius: '0px',
           cursor: 'pointer',
           height: '48px',
-          minWidth: '64px',
+          minWidth: '48px',
           display: 'flex',
           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' } : {},
-          ...isSelected ? { backgroundColor: Colors.Gray01, fontWeight: '600' } : {},
+          ...isSelected ? { backgroundColor: Colors.Secondary, color: Colors.White, fontWeight: '600' } : {},
         } }, "$", recommendValue));
     })))), acceptCustomAmount && (h("div", { style: { position: 'relative', marginLeft: '16px', maxWith: '160px' } }, h("span", { style: {
+        fontWeight: '600',
         position: 'absolute',
         left: '14px',
         top: '50%',
         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}`,
+      } }, "$"), h("input", { type: "number", placeholder: "Enter a number", min: 1, value: this.customAmount, onInput: (evt) => {
+        this.selectedAmount = null;
+        this.customAmount = evt.target.value;
+      }, style: {
+        border: `1px solid ${Colors.Gray03}`,
         backgroundColor: Colors.White,
         color: Colors.TextColor,
         borderRadius: '8px',
-        padding: '8px 16px 8px 32px',
+        padding: '8px 16px 8px 28px',
         height: '48px',
         width: '100%',
         fontSize: '18px',
         fontWeight: '600',
       } })))), h("div", { style: {
-        borderTop: `1px solid ${Colors.Gray02}`,
+        borderTop: `1px solid ${Colors.Gray03}`,
         marginTop: '24px',
         paddingTop: '16px',
       } }, h("div", { style: { fontSize: '18px' } }, "Recipient name"), h("div", { style: { display: 'flex', alignItems: 'center', marginTop: '12px' } }, h("div", { style: { width: '48%' } }, h("input", { placeholder: "First name", type: "text", value: this.recipientFirstName, onInput: (evt) => {
         this.recipientFirstName = 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%',
+        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: {
-        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%',
+        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 +593,17 @@ const BuyGiftcardForm = class {
         this.recipientEmail = null;
         this.recipientEmailConfirm = null;
         this.deliveryType = DeliveryType.Email;
+        this.isDeliveryDoneVisible = false;
+        if (this.deliveryInput) {
+          this.deliveryInput.placeholder = 'Enter email';
+          Inputmask.remove(this.deliveryInput);
+        }
+        if (this.deliveryReenterInput) {
+          this.deliveryReenterInput.placeholder = 'Re-enter email';
+          Inputmask.remove(this.deliveryReenterInput);
+        }
       } }, h("span", { style: {
-        border: `1px solid ${Colors.Gray02}`,
+        border: `1px solid ${Colors.Gray03}`,
         backgroundClip: 'content-box',
         borderRadius: '50%',
         height: '16px',
@@ -577,8 +622,17 @@ const BuyGiftcardForm = class {
         this.recipientEmail = null;
         this.recipientEmailConfirm = null;
         this.deliveryType = DeliveryType.SMS;
+        this.isDeliveryDoneVisible = false;
+        if (this.deliveryInput) {
+          this.deliveryInput.placeholder = 'Enter phone';
+          Inputmask({ mask: '(999) 999-9999' }).mask(this.deliveryInput);
+        }
+        if (this.deliveryReenterInput) {
+          this.deliveryReenterInput.placeholder = 'Re-enter phone';
+          Inputmask({ mask: '(999) 999-9999' }).mask(this.deliveryReenterInput);
+        }
       } }, h("span", { style: {
-        border: `1px solid ${Colors.Gray02}`,
+        border: `1px solid ${Colors.Gray03}`,
         backgroundClip: 'content-box',
         borderRadius: '50%',
         height: '16px',
@@ -592,23 +646,43 @@ const BuyGiftcardForm = class {
         display: 'flex',
         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}`,
+      } }, h("div", { style: { width: '48%' } }, h("input", { type: "text", ref: el => this.deliveryInput = el, placeholder: isDeliveryEmail ? 'Enter email' : 'Enter phone', onInput: (evt) => this.onChangeEmail(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%',
-      } })), 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", { type: "text", ref: el => this.deliveryReenterInput = el, placeholder: isDeliveryEmail ? 'Re-enter email' : 'Re-enter phone', 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: {
+        backgroundColor: 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() }, "Done")))), this.isInvalidEmails && (h("div", { style: {
         color: Colors.Red03,
         fontSize: '90%',
         marginTop: '16px',
@@ -621,8 +695,8 @@ 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: {
-        borderTop: `1px solid ${Colors.Gray02}`,
+      } }, "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.Gray03}`,
         marginTop: '24px',
         paddingTop: '16px',
       } }, h("div", { style: { fontSize: '18px' } }, "Select Gift Card style"), h("div", { style: { marginTop: '12px' } }, giftCardStyles.map((giftCardStyle, idx) => {
@@ -646,38 +720,56 @@ const BuyGiftcardForm = class {
           alignItems: 'center',
           overflow: 'hidden',
         }, onClick: () => this.selectedStyleId = giftCardStyle.id }, isSelected && (h("div", null, h("div", { style: {
-          backgroundColor: 'rgba(0, 0, 0, 0.25)',
+          backgroundColor: 'rgba(0, 0, 0, 0.35)',
           borderRadius: '8px',
           position: 'absolute',
           inset: '0',
           zIndex: '3',
-        } }), h("i", { class: "ri-checkbox-circle-fill", style: {
+        } }), h("span", { style: {
           position: 'absolute',
           left: '50%',
           top: '50%',
           transform: 'translate(-50%, -50%)',
-          fontSize: '32px',
           zIndex: '5',
-        } }))), h("img", { src: giftCardStyle.imageUrl, alt: `Style ${idx + 1}`, style: { position: 'relative', maxHeight: '100%', maxWidth: '100%', zIndex: '2' } }))));
+        } }, h("icon-checked", null)))), h("img", { src: giftCardStyle.imageUrl, alt: `Style ${idx + 1}`, style: { position: 'relative', maxHeight: '100%', maxWidth: '100%', zIndex: '2' } }))));
     })))), h("div", { style: {
-        borderTop: `1px solid ${Colors.Gray02}`,
+        borderTop: `1px solid ${Colors.Gray03}`,
         marginTop: '24px',
         paddingTop: '16px',
-      } }, h("div", { style: { fontSize: '18px' } }, "Delivery date"), h("div", { style: { marginTop: '12px', maxWidth: '50%' } }, h("input", { type: "date", placeholder: "Today", onInput: (evt) => {
-        this.deliveryDate = evt.target.value.trim();
-      }, style: {
+      } }, h("div", { style: { fontSize: '18px' } }, "Delivery date"), h("div", { style: { marginTop: '12px', maxWidth: '50%', position: 'relative' } }, h("div", { style: {
         backgroundColor: Colors.White,
-        border: `1px solid ${Colors.Gray02}`,
+        border: `1px solid ${Colors.Gray03}`,
         color: Colors.TextColor,
         borderRadius: '8px',
         padding: '8px 16px',
         height: '48px',
         width: '100%',
         fontSize: '18px',
+        display: 'flex',
+        alignItems: 'center',
+      } }, this.deliveryDate || 'Today'), h("span", { style: {
+        color: Colors.Black,
+        position: 'absolute',
+        right: '0',
+        top: '0',
+        zIndex: '2',
+        height: '48px',
+        width: '48px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingTop: '6px',
+      } }, h("icon-date", null)), h("input", { class: "fs-input--date", type: "date", placeholder: "Today", min: dayjs_min().format(dateFormat), onInput: (evt) => {
+        this.deliveryDate = evt.target.value.trim();
+      }, style: {
+        position: 'absolute',
+        inset: '0',
+        opacity: '0',
+        zIndex: '3',
       } })), 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',
@@ -689,7 +781,7 @@ const BuyGiftcardForm = class {
         marginTop: '24px',
         textAlign: 'right',
       } }, h("button", { type: "button", style: {
-        background: Colors.Secondary,
+        backgroundColor: Colors.Secondary,
         border: `1px solid ${Colors.Secondary}`,
         borderRadius: '8px',
         cursor: 'pointer',
@@ -703,11 +795,20 @@ 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: {
+        color: Colors.Success03,
+        alignItems: 'center',
+        justifyContent: 'center',
+        margin: 'auto',
+        display: 'flex',
+        height: '90px',
+        width: '90px',
+      } }, h("icon-checked", { size: 84 })), 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 +825,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,15 +855,14 @@ 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
             ? ((giftCardStyles || []).find(style => style.id === this.selectedStyleId) || {}).imageUrl : '';
           const recipientUserEmail = (this.recipientEmail || '').indexOf('@') > -1 ? this.recipientEmail : '';
           const recipientUserPhone = (this.recipientEmail || '').indexOf('@') === -1 ? this.recipientEmail : '';
-          await HttpService().onBuyGiftCard(this.salonInfo.id, {
-            source: token,
+          const response = await HttpService().onBuyGiftCard(this.salonInfo.id, {
+            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,19 +882,22 @@ 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;
+          const { status, message } = (response.data || {});
+          if (status === true) {
+            this.step = FormStep.PaymentSucceed;
+          }
+          else {
+            this.errorMessage = message || `Something went wrong when sending your gift card`;
+          }
         }
         else {
           this.errorMessage = `Something went wrong with your credit card`;
         }
       }
       catch (error) {
-        this.errorMessage = error.message || (error.error && error.error.message) || get_1(error, 'response.data.message') || `Something went wrong when purchasing your gift card`;
+        this.errorMessage = error.message || (error.error && error.error.message) || get_1(error, 'response.data.message') || `Something went wrong when sending your gift card`;
       }
     }
     this.isSubmitting = false;
@@ -848,9 +915,9 @@ 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("div", { class: "fs--form--actions" }, h("button", { type: "button", disabled: this.isSubmitting, style: {
         border: `1px solid ${Colors.Secondary}`,
-        background: Colors.Secondary,
+        backgroundColor: Colors.Secondary,
         color: Colors.White,
         borderRadius: '8px',
         cursor: 'pointer',
@@ -860,26 +927,33 @@ const BuyGiftcardForm = class {
         paddingRight: '24px',
         height: '44px',
         width: '100%',
-      }, onClick: () => this.onSubmitPaymentForm() }, "Submit")));
+        ...this.isSubmitting ? {
+          color: Colors.TextColor,
+          borderColor: Colors.Gray03,
+          backgroundColor: Colors.Gray03,
+        } : {},
+      }, onClick: () => this.onSubmitPaymentForm() }, "Submit ", this.isSubmitting && (h("span", { style: { marginLeft: '4px' } }, h("icon-loading", null)))), this.errorMessage && (h("div", { style: {
+        color: Colors.Red03,
+        marginTop: '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: {
+      } }, h("span", { style: {
+        color: Colors.Gray05,
         marginRight: '4px',
-        fontSize: '20px',
-      } }), h("div", { style: {
+      } }, h("icon-location-marker", { size: 18 })), h("div", { style: {
         flexGrow: '1',
         flexShrink: '1',
         overflow: 'hidden',
@@ -887,12 +961,11 @@ 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: {
+      } }, h("span", { style: {
+        color: Colors.Gray05,
         marginRight: '4px',
-        fontSize: '20px',
-      } }), h("div", { style: {
+      } }, h("icon-phone", { size: 18 })), h("div", { style: {
         flexGrow: '1',
         flexShrink: '1',
         overflow: 'hidden',