SMSLink integration

CHANGELOG.MD

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- SMSLink integration
+
 ### Fixed
 
 - Update the refundedShippingValue in the front if it was declared via API.

common/constants.ts

@@ -6,6 +6,7 @@ export const SETTINGS_SCHEMA = {
     paymentCard: { type: 'boolean' },
     paymentVoucher: { type: 'boolean' },
     termsUrl: { type: 'string' },
+    allowSMSLinkIntegration: { type: 'boolean' },
     options: {
       type: 'array',
       items: { $ref: '#/$defs/options' },
@@ -29,6 +30,7 @@ export const SETTINGS_SCHEMA = {
   'v-security': {
     allowGetAll: true,
     publicFilter: [
+      'allowSMSLinkIntegration',
       'maxDays',
       'excludedCategories',
       'paymentBank',
@@ -44,6 +46,7 @@ export const SETTINGS_SCHEMA = {
   'v-default-fields': [
     'id',
     'createdIn',
+    'allowSMSLinkIntegration',
     'maxDays',
     'excludedCategories',
     'paymentBank',
@@ -56,6 +59,7 @@ export const SETTINGS_SCHEMA = {
   'v-indexed': [
     'id',
     'createdIn',
+    'allowSMSLinkIntegration',
     'maxDays',
     'excludedCategories',
     'paymentBank',

docs/README.md

@@ -6,13 +6,14 @@ VTEX Return App
 
 - Open the VTEX App Store and install this app on your store, or run the following command on VTEX toolbelt:
 
-> vtex install vtex.return-app@1.x
+> vtex install vtex.return-app@2.x
 
 - From the left side access the `Returns > Requests` page. The first time you access it, the application creates the masterdata schema and settings it needs automatically.
 
 ## Settings
 
 - Go to `Returns > Returns Settings` and fill up the form with the settings you need.
+  - `Enable SMSLink integration`: Allow SMSLink integration. Customers will receive messages when a new return request is registered or the request reaches the states of: picked up, approved or denied. For this option you also need to install `vtex.smslink`.
   - `Max days:` The maximum number of days that customers can request the return of products, from the moment the order was invoiced.
   - `Terms and conditions URL:` The URL of the page with the return terms and conditions. The customer can access this URL from the form they fill out to request a return.
     - If you have the terms on conditions page on `http://example.com/terms-and-conditions` it's enough for you to type just `/terms-and-conditions`
@@ -26,7 +27,7 @@ The return application serves the necessary functionalities for requesting retur
 
 #### Installation and configuration
 
-The application can be installed using the following command in VTEX Toolbelt: `vtex install vtex.return-app@0.x`
+The application can be installed using the following command in VTEX Toolbelt: `vtex install vtex.return-app@2.x`
 
 After the installation you must access the `Returns > Requests` page from the admin menu. At this point, the application creates the masterdata schema and email templates automatically.
 

messages/context.json

@@ -3,6 +3,7 @@
   "navigation.labelRequests": "Requests",
   "navigation.labelSettings": "Returns Settings",
   "settings.updateSchema": "Updating Settings...",
+  "settings.allowSMSLinkIntegration_label": "Enable SMSLink integration",
   "settings.maxDays_label": "Max days:",
   "settings.terms_label": "Terms and conditions URL:",
   "settings.paymentMethods_label": "Available payment methods:",

messages/en.json

@@ -3,6 +3,7 @@
   "navigation.labelRequests": "Requests",
   "navigation.labelSettings": "Returns Settings",
   "settings.updateSchema": "Updating Settings",
+  "settings.allowSMSLinkIntegration_label": "Enable SMSLink integration",
   "settings.maxDays_label": "Max days:",
   "settings.terms_label": "Terms and conditions URL:",
   "settings.paymentMethods_label": "Available payment methods:",

messages/it.json

@@ -3,6 +3,7 @@
   "navigation.labelRequests": "Richieste",
   "navigation.labelSettings": "Impostazioni di reso",
   "settings.updateSchema": "Aggiornamento delle impostazioni in corso",
+  "settings.allowSMSLinkIntegration_label": "Abilita l'integrazione di SMSLink",
   "settings.maxDays_label": "Numero massimo di giorni:",
   "settings.terms_label": "URL dei termini e delle condizioni:",
   "settings.paymentMethods_label": "Metodi di pagamento disponibili:",

messages/ro.json

@@ -3,6 +3,7 @@
   "navigation.labelRequests": "Cereri de retur",
   "navigation.labelSettings": "Setari",
   "settings.updateSchema": "Un moment, facem cateva actualizari pentru tine!",
+  "settings.allowSMSLinkIntegration_label": "Permite integrarea cu SMSLink",
   "settings.maxDays_label": "Numar maxim de zile:",
   "settings.terms_label": "URL pentru termeni si conditii:",
   "settings.paymentMethods_label": "Metode de plata:",

react/admin/ReturnForm.tsx

@@ -94,14 +94,38 @@ class ReturnForm extends Component<any, any> {
       showLabelError: false,
       labelDisabled: false,
       totalAmount: 0,
+      settings: {}
     }
   }
 
   componentDidMount(): void {
     this.getProfile().then()
+    this.getSettings()
     this.getFullData()
   }
 
+  getSettings = async () => {
+    // eslint-disable-next-line react/no-access-state-in-setstate
+    this.setState({ ...this.state, loading: true })
+    await fetch(
+      `${fetchPath.getDocuments + schemaNames.settings}/${
+        schemaTypes.settings
+      }/1`,
+      {
+        method: fetchMethod.get,
+        headers: fetchHeaders,
+      }
+    )
+      .then((response) => {
+        return response.json()
+      })
+      .then((json) => {
+        if (!json?.[0]) return
+        this.setState({settings: json[0] })
+      })
+      .catch((err) => this.setState({ error: err }))
+  }
+
   getGiftCardInfo(request: any) {
     return `RA${request.id.split('-')[0]}`
   }
@@ -405,6 +429,7 @@ class ReturnForm extends Component<any, any> {
       product,
       registeredUser,
       comment,
+      settings
     } = this.state
 
     let requestData = request
@@ -498,6 +523,47 @@ class ReturnForm extends Component<any, any> {
         this.savePartial(schemaNames.request, requestBody)
         this.saveMasterData(schemaNames.history, statusHistoryData)
 
+        if(settings.allowSMSLinkIntegration) {
+          let smsLinkBody: any = {
+            requestId: request.id,
+            orderId: request.orderId,
+            phone: request.phoneNumber
+          }
+
+          let sendSMS = true
+          let SMSLinkEvent = ''
+
+          switch (statusInput) {
+              case requestsStatuses.denied:
+                  SMSLinkEvent =  'request-denied'
+                  break;
+              case requestsStatuses.refunded:
+                  SMSLinkEvent =  'request-finalized'
+                  break;
+              case requestsStatuses.picked:
+                  SMSLinkEvent =  'parcel-received'
+                  break;
+              default:
+                  sendSMS = false
+          }
+
+          if (sendSMS){
+            smsLinkBody = {
+              ...smsLinkBody,
+              event: SMSLinkEvent,
+            }
+            try {
+              fetch(`${fetchPath.sendSMS}`, {
+                method: fetchMethod.post,
+                body: JSON.stringify(smsLinkBody),
+                headers: fetchHeaders,
+              })
+            } catch {
+              // console.log(e)
+            }
+          }
+        }
+
         if (
           request.status === requestsStatuses.picked &&
           statusInput === requestsStatuses.pendingVerification

react/admin/ReturnsSettings.tsx

@@ -10,6 +10,7 @@ import {
   IconClear,
   Button,
   CheckboxGroup,
+  Checkbox,
   IconDeny,
   Table,
   Modal,
@@ -33,6 +34,7 @@ const messages = defineMessages({
   settingsSaved: { id: 'returns.settingsSaved' },
   labelSettings: { id: 'navigation.labelSettings' },
   updateSchema: { id: 'settings.updateSchema' },
+  smsLinkIntegrationLabel: {id: 'settings.allowSMSLinkIntegration_label'},
   maxDaysLabel: { id: 'settings.maxDays_label' },
   termsLabel: { id: 'settings.terms_label' },
   searchCategories: { id: 'settings.searchCategories' },
@@ -61,6 +63,7 @@ class ReturnsSettings extends Component<any, any> {
     this.state = {
       id: '',
       updatingSchema: false,
+      allowSMSLinkIntegration: '',
       maxDays: '',
       termsUrl: '',
       categoryFilterQuery: '',
@@ -161,6 +164,7 @@ class ReturnsSettings extends Component<any, any> {
         }
         this.setState({
           id: json[0].id,
+          allowSMSLinkIntegration: json[0].allowSMSLinkIntegration,
           maxDays: json[0].maxDays,
           termsUrl: json[0].termsUrl,
           paymentBank,
@@ -299,7 +303,7 @@ class ReturnsSettings extends Component<any, any> {
       errorMessage: '',
       loading: true,
     })
-    const { maxDays, excludedCategories, termsUrl, id, payments, options } =
+    const { allowSMSLinkIntegration, maxDays, excludedCategories, termsUrl, id, payments, options } =
       this.state
 
     let hasErrors = false
@@ -346,6 +350,7 @@ class ReturnsSettings extends Component<any, any> {
 
     const postData = {
       id,
+      allowSMSLinkIntegration: allowSMSLinkIntegration,
       maxDays: parseInt(maxDays, 10),
       excludedCategories: JSON.stringify(excludedCategories),
       termsUrl,
@@ -417,6 +422,7 @@ class ReturnsSettings extends Component<any, any> {
 
   render() {
     const {
+      allowSMSLinkIntegration,
       maxDays,
       termsUrl,
       excludedCategories,
@@ -469,6 +475,16 @@ class ReturnsSettings extends Component<any, any> {
             </div>
           ) : (
             <div>
+              <div className="flex flex-row">
+                <div className="mb6 ph1">
+                  <Checkbox
+                      name="smsLinkIntegration"
+                      checked={allowSMSLinkIntegration}
+                      label={formatMessage({ id: messages.smsLinkIntegrationLabel.id })}
+                      onChange={() => this.setState({ allowSMSLinkIntegration: !allowSMSLinkIntegration })}
+                      />
+                </div>
+              </div>
               <div className="flex flex-column">
                 <div className="flex flex-row">
                   <div className="w-50 ph1">

react/common/fetch.tsx

@@ -14,6 +14,7 @@ export const fetchPath = {
   getOrder: '/returns/getOrder/',
   renderTemplates: '/api/template-render/pvt/templates',
   createRefund: '/returns/createRefund/',
+  sendSMS: '/sms-link-app/send-sms',
 }
 
 export const fetchMethod = {

react/store/MyReturnsPageAdd.tsx

@@ -728,6 +728,7 @@ class MyReturnsPageAdd extends Component<any, State> {
       iban,
       accountHolder,
       orderProducts,
+      settings
     } = this.state
 
     orderProducts.forEach((product: any) => {
@@ -776,6 +777,23 @@ class MyReturnsPageAdd extends Component<any, State> {
           })
           .then(() => {
             this.showTable()
+            if(settings.allowSMSLinkIntegration) {
+              let smsLinkBody: any = {
+                requestId: response.DocumentId,
+                orderId: requestData.orderId,
+                phone: requestData.phoneNumber,
+                event: 'request-created'
+              }
+              try {
+                fetch(`${fetchPath.sendSMS}`, {
+                  method: fetchMethod.post,
+                  body: JSON.stringify(smsLinkBody),
+                  headers: fetchHeaders,
+                })
+              } catch {
+                // console.log(e)
+              }
+            }
           })
       } else {
         this.setState({