Merge pull request #80 from docusign/added-country-tab

Added country fields to support verification

Author: InbarGazit

client/public/locales/en/BuyNewInsurance.json

@@ -74,12 +74,25 @@
   "HealthState": "State of health",
   "Street": "Street",
   "City": "City",
+  "Country": "Country:",
   "State": "State",
   "ZipCode": "Zip code",
   "Options": [
-    { "name": "Car", "detail1": "Car model", "detail2": "Year" },
-    { "name": "Home", "detail1": "Home year", "detail2": "Worth" },
-    { "name": "Life", "detail1": "Age", "detail2": "State of health" }
+    {
+      "name": "Car",
+      "detail1": "Car model",
+      "detail2": "Year"
+    },
+    {
+      "name": "Home",
+      "detail1": "Home year",
+      "detail2": "Worth"
+    },
+    {
+      "name": "Life",
+      "detail1": "Age",
+      "detail2": "State of health"
+    }
   ],
   "Error": {
     "FirstName": "First name is required.",
@@ -89,6 +102,7 @@
     "State": "State is required.",
     "ZipCode": "Zip code is required.",
     "Email": "Email is required.",
+    "Country": "Country is required.",
     "insuranceDetails": "Please provide your insurance details."
   },
   "ApiDecription": {

client/public/locales/en/SubmitClaim.json

@@ -12,6 +12,7 @@
   "Street": "Street:",
   "City": "City:",
   "State": "State:",
+  "Country": "Country:",
   "ZipCode": "Zip code:",
   "DescriptionPlaseholder": "",
   "Date": "Date:",
@@ -96,11 +97,12 @@
     "Street": "Street is required.",
     "City": "City is required.",
     "State": "State is required.",
+    "Country": "Country is required.",
     "ZipCode": "Zip code is required.",
     "Description": "Description is required."
   },
   "ApiDecription": {
     "SeeMore": "- See behind the scenes",
     "CodeFlow": "<p>View source files <a href='https://github.com/docusign/sample-app-mysure-python/blob/master/app/document.py#L26-L132' target='blank' rel='norefferer noopener'>document.py</a> and <a href='https://github.com/docusign/sample-app-mysure-python/blob/master/app/envelope.py#L10-L65' target='blank' rel='norefferer noopener'>envelope.py</a> on GitHub.</p><h3>This sample features:</h3><ul><li>Update recipient information</li><li>Create envelope from HTML Import</li><li>Fill tab data</li><li>Embedded signing (recipient view)</li<li>Optional tab</li><li>Attachment tab></ul><h3>Code flow:</h3><h5>Step 1</h5><p>When the form is submitted, we use the <a target=\"_blank\" href='https://developers.docusign.com/docs/esign-rest-api/reference/Envelopes/Envelopes/create'>Envelopes: create</a> method to send the signature request with the corresponding form information. The envelope we construct contains various data: specifically, a <code>document</code> object, a <code>recipient</code> object with the type <code>signer</code>, and <code>tabs</code> objects, which contain form field information. Since we are using embedded signing, we must also set the <code>clientUserId</code> property on the recipient.</p><p>We place the tabs on the document by specifying a <code>SignHereTab</code> element and an <code>InitialTab</code> element as part of the <code>signer</code> element. The tab elements are positioned using <em>x/y</em> coordinates on the <code>document</code>.</p><p>Last, we include the status \"sent\" in the request so that the envelope is sent for signing.</p><p>The eSignature REST API request is sent to the following endpoint:</p><pre>POST /v2.1/accounts/{accountId}/envelopes</pre><h5>Step 2</h5><p>To enable embedded signing of the envelope inside our application, we next use the <a target=\"_blank\" href='https://developers.docusign.com/docs/esign-rest-api/reference/Envelopes/EnvelopeViews/createRecipient'>EnvelopeViews: createRecipient</a> method to generate a signing URL for the recipient. For this to work, the <code>clientUserId</code> property must be set on the recipient when the envelope is sent during step 1 above.</p><p>Once the envelope is sent, we save the envelope ID and recipient information to our session. Then, we retrieve the envelope ID and recipient info from our session and create the recipient view by generating the URL and displaying the recipient view in a full-width and full-height iframe inside our page.</p><p>To create the recipient view of the envelope, we send an API request to:</p><pre>POST /v2.1/accounts/{accountId}/envelopes/{envelopeId}/views/recipient</pre>"
   }
-}
+}

client/src/pages/buyNewInsurance/components/RequestForm.js

@@ -164,7 +164,7 @@ export const RequestForm = ({
               error={errors.city}
             />
             <div className="row">
-              <div className="col-md-6">
+              <div>
                 <InputSelect
                   name="state"
                   label={t("State")}
@@ -176,6 +176,13 @@ export const RequestForm = ({
                   error={errors.state}
                 />
               </div>
+              <InputText
+                name="country"
+                label={t("Country")}
+                value={request.country}
+                onChange={onChange}
+                error={errors.country}
+              />
               <div className="col-md-6">
                 <InputText
                   name="zipCode"

client/src/pages/buyNewInsurance/index.js

@@ -23,7 +23,8 @@ const initialState = {
     name: "",
     value: "",
     detail1: "",
-    detail2: ""
+    detail2: "",
+    country: ""
   }
 };
 
@@ -63,7 +64,8 @@ export const BuyNewInsurance = () => {
         street: request.street,
         city: request.city,
         state: request.state,
-        zip_code: request.zipCode
+        zip_code: request.zipCode,
+        country: request.country
       },
       useWithoutExtension: useWithoutExtension,
       insurance: {
@@ -146,6 +148,7 @@ export const BuyNewInsurance = () => {
       street,
       state,
       city,
+      country,
       zipCode,
       detail1,
       detail2
@@ -172,6 +175,9 @@ export const BuyNewInsurance = () => {
     if (!zipCode) {
       errors.zipCode = t("Error.ZipCode");
     }
+    if (!country) {
+      errors.country = t("Error.Country");
+    }
     if (!detail1 || !detail2) {
       errors.insuranceDetails = t("Error.insuranceDetails");
     }

client/src/pages/submitClaim/components/RequestForm.js

@@ -176,7 +176,7 @@ export const RequestForm = ({
                 error={errors.city}
               />
               <div className="row">
-                <div className="col-md-6">
+                <div>
                   <InputSelect
                     name="state"
                     label={t("State")}
@@ -188,6 +188,13 @@ export const RequestForm = ({
                     error={errors.state}
                   />
                 </div>
+                <InputText
+                  name="country"
+                  label={t("Country")}
+                  value={request.country}
+                  onChange={onChange}
+                  error={errors.country}
+                />
                 <div className="col-md-6">
                   <InputText
                     name="zipCode"

client/src/pages/submitClaim/index.js

@@ -21,7 +21,8 @@ const initialState = {
     zipCode: "",
     email: "",
     type: "",
-    description: ""
+    description: "",
+    country: ""
   }
 };
 
@@ -62,6 +63,7 @@ export const SubmitClaim = () => {
         street: request.street,
         city: request.city,
         state: request.state,
+        country: request.country,
         zip_code: request.zipCode,
         type: option.name,
         timestamp: date.toGMTString(),
@@ -145,6 +147,9 @@ export const SubmitClaim = () => {
     if (!state) {
       errors.state = t("Error.State");
     }
+    if (!state) {
+      errors.country = t("Error.Country");
+    }
     if (!city) {
       errors.city = t("Error.City");
     }

server/app/document.py

@@ -41,7 +41,7 @@ def _render_claim_template(cls, tpl, claim, remove_white_styles=False):
 
         if remove_white_styles:
             # Fields that should be replaced
-            fields_to_replace = ['zip_code', 'street', 'city', 'state']
+            fields_to_replace = ['zip_code', 'street', 'city', 'state', 'country']
             for field in fields_to_replace:
                 pattern = rf'<span[^>]*style="color:\s*white"[^>]*>\s*/{field}/\s*</span>'
                 replacement = f'<span class="user-info">{{{{ {field} }}}}</span>'
@@ -55,6 +55,7 @@ def _render_claim_template(cls, tpl, claim, remove_white_styles=False):
             street=claim['street'],
             city=claim['city'],
             state=claim['state'],
+            country=claim['country'],
             zip_code=claim['zip_code'],
             type=claim['type'],
             timestamp=claim['timestamp'],
@@ -154,8 +155,9 @@ def create_claim(cls, tpl, claim, envelope_args, extensions):
         # Address fields mapping
         address_fields = {
             "street": "VerifyPostalAddressInput[0].street1",
-            "city": "VerifyPostalAddressInput[0].subdivision",
-            "state": "VerifyPostalAddressInput[0].countryOrRegion",
+            "city": "VerifyPostalAddressInput[0].locality",
+            "state": "VerifyPostalAddressInput[0].subdivision",
+            "country": "VerifyPostalAddressInput[0].countryOrRegion",
             "zip_code": "VerifyPostalAddressInput[0].postalCode",
         }
 
@@ -407,14 +409,16 @@ def create_with_payment(cls, tpl, user, insurance_info, envelope_args, extension
         render_context = dict(
             user_name=f"{user['first_name']} {user['last_name']}",
             user_email=user['email'],
-            address=f"{user['street']}, {user['city']}, {user['state']}",
+            street=user['street'],
+            city=user['city'],
+            state=user['state'],
+            country=user['country'],
             zip_code=user['zip_code'],
             detail_1=insurance_info['detail1']['name'],
             detail_2=insurance_info['detail2']['name'],
             value_detail_1=insurance_info['detail1']['value'],
             value_detail_2=insurance_info['detail2']['value']
         )
-        user['address'] = f"{user['street']}, {user['city']}, {user['state']}"
 
         content_bytes = cls._read_and_render_template(tpl, render_context)
         base64_file_content = base64.b64encode(content_bytes.encode('utf-8')).decode('ascii')
@@ -449,7 +453,10 @@ def create_with_payment(cls, tpl, user, insurance_info, envelope_args, extension
 
         # Address text tabs
         address_fields = {
-            "address": "VerifyPostalAddressInput[0].street1",
+            "street": "VerifyPostalAddressInput[0].street1",
+            "city": "VerifyPostalAddressInput[0].locality",
+            "state": "VerifyPostalAddressInput[0].subdivision",
+            "country": "VerifyPostalAddressInput[0].countryOrRegion",
             "zip_code": "VerifyPostalAddressInput[0].postalCode",
         }
         text_tabs = []
@@ -495,15 +502,18 @@ def create_with_payment_without_extension(cls, tpl, user, insurance_info, envelo
         render_context = dict(
             user_name=f"{user['first_name']} {user['last_name']}",
             user_email=user['email'],
-            address=f"{user['street']}, {user['city']}, {user['state']}",
+            street=user['street'],
+            city=user['city'],
+            state=user['state'],
+            country=user['country'],
             zip_code=user['zip_code'],
             detail_1=insurance_info['detail1']['name'],
             detail_2=insurance_info['detail2']['name'],
             value_detail_1=insurance_info['detail1']['value'],
             value_detail_2=insurance_info['detail2']['value']
         )
 
-        fields_to_replace = ['address', 'zip_code', 'user_email']
+        fields_to_replace = ['street', 'city', 'country', 'state', 'zip_code', 'user_email']
         content_bytes = cls._read_and_render_template(tpl, render_context, fields_to_replace)
         base64_file_content = base64.b64encode(content_bytes.encode('utf-8')).decode('ascii')
 

server/app/templates/new-insurance.html

@@ -255,9 +255,29 @@ <h3 class="info-title">Ordered by</h3>
                     <span class="label">Name:</span>
                     <span class="user-info">{{ user_name }}</span>
                 </div>
-                <div class="line">
-                    <span class="label">Address:</span>
-                    <span style="color: white" class="user-info">/address/</span>
+                <h3 class="info-title">Address details</h3>
+                <div style="display: flex; justify-content: row;">
+                    <div style="display: flex; flex-direction: column; gap: 8px; width: 45%;">
+                        <div class="line">
+                            <span class="label">Street:</span>
+                            <span style="color: white" class="user-info">/street/</span>
+                        </div>
+                        <div class="line">
+                            <span class="label">City:</span>
+                            <span style="color: white" class="user-info">/city/</span>
+                        </div>
+                    </div>
+
+                    <div style="display: flex; flex-direction: column; gap: 8px; width: 45%;">
+                        <div class="line">
+                            <span class="label">State:</span>
+                            <span style="color: white" class="user-info">/state/</span>
+                        </div>
+                        <div class="line">
+                            <span class="label">Country:</span>
+                            <span style="color: white" class="user-info">/country/</span>
+                        </div>
+                    </div>
                 </div>
                 <div class="line">
                     <span class="label">Zip code:</span>
@@ -304,7 +324,7 @@ <h3 style="margin-top:3em;">Agreed: <span style="color:white;">/sn1/</span></h3>
             </section>
         </form>
     </main>
-    <br /><br /><br />
+    <br />
     <p>Use this credit card number for testing purposes - 4242-4242-4242-4242 (with any date and code).</p>
 </body>
 

server/app/templates/submit-claim.html

@@ -292,6 +292,10 @@ <h3 class="info-title">Address details</h3>
                     <span class="label">State:</span>
                     <span style="color: white" class="user-info">/state/</span>
                 </div>
+                <div class="line">
+                    <span class="label">Country:</span>
+                    <span style="color: white" class="user-info">/country/</span>
+                </div>
                 <div class="line">
                     <span class="label">Zip code:</span>
                     <span style="color: white" class="user-info">/zip_code/</span>