mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/portal.git
synced 2026-08-19 04:23:59 +00:00
omair saleh
235 lines
34 KiB
Vue
235 lines
34 KiB
Vue
<template>
|
|
<div class="row" v-if="onboarding">
|
|
<div class="col">
|
|
<div class="row no-margin text-center b-a b-success p-b-25 p-l-25 p-r-25 p-t-15">
|
|
<div class="col">
|
|
<i class="fa fa-times fs-10 absolute pointer hide" style="top: 0; right: 0;" @click="onboarding = false"></i>
|
|
<div class="row m-b-20 m-t-10">
|
|
<div class="col">
|
|
<h6 class="semi-bold all-caps m-t-0 m-b-5" style="letter-spacing: 2px;"><i class="fa fa-rocket m-r-5"></i>Getting started</h6>
|
|
<small class="hint-text fs-11">Great to have you on board! Feel free to explore, or get a head start below.</small>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col m-r-15 p-t-15 p-b-30 p-l-20 p-r-20 bg-white parentContainer">
|
|
<div class="row align-items-center" :class="{'hint-text': data.delivery_address}">
|
|
<div class="col all-caps" :class="{'hint-text': data.delivery_address}">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-auto no-padding">
|
|
<i class="fa text-success fs-25" :class="[{'fa-check-circle': data.delivery_address}, {'fa-circle-o': !data.delivery_address}]" style="margin-top: 3px;"></i>
|
|
</div>
|
|
<div class="col-auto">
|
|
<small class="fs-11 bold p-l-5 p-r-5">Step 1: Delivery address</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-5" :class="{'hint-text': data.delivery_address}">
|
|
<div class="col" :class="{'hint-text': data.delivery_address}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
|
width="50" height="50"
|
|
viewBox="0 0 172 172"
|
|
style=" fill:#000000;"><defs><linearGradient x1="86" y1="42.19913" x2="86" y2="52.33638" gradientUnits="userSpaceOnUse" id="color-1_7eb0Q25XxN4Q_gr1"><stop offset="0" stop-color="#8ab4ff"></stop><stop offset="1" stop-color="#e492ff"></stop></linearGradient><linearGradient x1="86" y1="16.75388" x2="86" y2="155.17894" gradientUnits="userSpaceOnUse" id="color-2_7eb0Q25XxN4Q_gr2"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="86" y1="16.75388" x2="86" y2="155.17894" gradientUnits="userSpaceOnUse" id="color-3_7eb0Q25XxN4Q_gr3"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g id="Layer_2"><circle cx="32" cy="18" transform="scale(2.6875,2.6875)" r="2" fill="url(#color-1_7eb0Q25XxN4Q_gr1)"></circle><path d="M142.4375,45.6875h-24.45625c-1.34375,-16.39375 -15.05,-29.5625 -31.98125,-29.5625c-16.93125,0 -30.6375,13.16875 -31.98125,29.5625h-24.45625c-4.56875,0 -8.0625,3.49375 -8.0625,8.0625v94.0625c0,4.56875 3.49375,8.0625 8.0625,8.0625h112.875c4.56875,0 8.0625,-3.49375 8.0625,-8.0625v-94.0625c0,-4.56875 -3.49375,-8.0625 -8.0625,-8.0625zM26.875,126.3125h45.6875c1.6125,0 2.6875,1.075 2.6875,2.6875v10.75h-45.6875c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875zM72.5625,120.9375h-45.6875v-8.0625h118.25v8.0625h-45.6875c-4.56875,0 -8.0625,3.49375 -8.0625,8.0625v10.75h-10.75v-10.75c0,-4.56875 -3.49375,-8.0625 -8.0625,-8.0625zM73.6375,83.85c4.8375,4.8375 9.675,9.675 9.675,12.9v5.375h5.375v-5.375c0,-3.225 4.56875,-7.79375 9.675,-12.9c8.33125,-8.33125 18.54375,-18.54375 19.8875,-32.7875h8.0625v29.5625c0,4.56875 3.49375,8.0625 8.0625,8.0625h10.75v18.8125h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-53.75h8.0625c1.34375,14.24375 11.55625,24.45625 19.8875,32.7875zM96.75,129c0,-1.6125 1.075,-2.6875 2.6875,-2.6875h45.6875v10.75c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-45.6875zM145.125,53.75v29.5625h-10.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-29.5625h10.75c1.6125,0 2.6875,1.075 2.6875,2.6875zM86,21.5c14.78125,0 26.875,12.09375 26.875,26.875c0,13.4375 -10.2125,23.65 -18.275,31.7125c-3.49375,3.49375 -6.45,6.45 -8.6,9.40625c-2.15,-2.95625 -5.10625,-5.9125 -8.6,-9.40625c-8.0625,-8.0625 -18.275,-18.275 -18.275,-31.7125c0,-14.78125 12.09375,-26.875 26.875,-26.875zM26.875,53.75c0,-1.6125 1.075,-2.6875 2.6875,-2.6875h10.75v53.75c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-6.45h-4.3zM142.4375,150.5h-112.875c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-3.225c0.80625,0.26875 1.6125,0.5375 2.6875,0.5375h112.875c1.075,0 1.88125,-0.26875 2.6875,-0.5375v3.225c0,1.6125 -1.075,2.6875 -2.6875,2.6875z" fill="url(#color-2_7eb0Q25XxN4Q_gr2)"></path><path d="M102.125,48.375c0,-8.86875 -7.25625,-16.125 -16.125,-16.125c-8.86875,0 -16.125,7.25625 -16.125,16.125c0,8.86875 7.25625,16.125 16.125,16.125c8.86875,0 16.125,-7.25625 16.125,-16.125zM75.25,48.375c0,-5.9125 4.8375,-10.75 10.75,-10.75c5.9125,0 10.75,4.8375 10.75,10.75c0,5.9125 -4.8375,10.75 -10.75,10.75c-5.9125,0 -10.75,-4.8375 -10.75,-10.75z" fill="url(#color-3_7eb0Q25XxN4Q_gr3)"></path></g></g></svg>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center justify-content-center m-b-15 " :class="{'hint-text': data.delivery_address}">
|
|
<div class="col-10 hint-text">
|
|
<small class="fs-10 hint-text">Setup your primary delivery address for receiving goods</small>
|
|
</div>
|
|
</div>
|
|
<div class="row" :class="{'hint-text': data.delivery_address}">
|
|
<div class="col" :class="{'hint-text': data.delivery_address}">
|
|
<div class="btn btn-xs btn-success btn-block bg-success all-caps b-rad-none p-t-5 p-b-5 requestModal" :class="{'hint-text': data.delivery_address}" data-type="createModal" :style="{'cursor': data.delivery_address ? 'default' : ''}">Create Address</div>
|
|
</div>
|
|
</div>
|
|
<modal-form-component section="addressSection" v-if="!data.delivery_address">
|
|
<template slot="form" slot-scope="{section}">
|
|
<address-form-component v-if="data.id" :section="section" :id="data.id"></address-form-component>
|
|
</template>
|
|
</modal-form-component>
|
|
</div>
|
|
<div class="col m-r-15 p-t-15 p-b-30 p-l-20 p-r-20 bg-white parentContainer">
|
|
<div class="row align-items-center" :class="{'hint-text': data.status === 1 || data.status === 2}">
|
|
<div class="col all-caps" :class="{'hint-text': data.status === 1 || data.status === 2}">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-auto no-padding">
|
|
<i class="fa text-success fs-25" :class="[{'fa-check-circle': data.status === 1 || data.status === 2}, {'fa-circle-o': !data.status === 1 || data.status === 2}]" style="margin-top: 3px;"></i>
|
|
</div>
|
|
<div class="col-auto">
|
|
<small class="fs-11 bold p-l-5 p-r-5">Step 2: Identity Verification</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-5 m-t-10" :class="{'hint-text': data.status === 1 || data.status === 2}">
|
|
<div class="col" :class="{'hint-text': data.status === 1 || data.status === 2}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
|
width="50" height="50"
|
|
viewBox="0 0 172 172"
|
|
style=" fill:#000000;"><defs><linearGradient x1="86" y1="29.05994" x2="86" y2="38.14369" gradientUnits="userSpaceOnUse" id="color-1_44812_gr1"><stop offset="0" stop-color="#8ab4ff"></stop><stop offset="1" stop-color="#e492ff"></stop></linearGradient><linearGradient x1="86" y1="22.17188" x2="86" y2="151.17994" gradientUnits="userSpaceOnUse" id="color-2_44812_gr2"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="110.1875" y1="22.17188" x2="110.1875" y2="151.17994" gradientUnits="userSpaceOnUse" id="color-3_44812_gr3"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="112.875" y1="22.17188" x2="112.875" y2="151.17994" gradientUnits="userSpaceOnUse" id="color-4_44812_gr4"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="86" y1="22.17188" x2="86" y2="151.17994" gradientUnits="userSpaceOnUse" id="color-5_44812_gr5"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="102.125" y1="22.17188" x2="102.125" y2="151.17994" gradientUnits="userSpaceOnUse" id="color-6_44812_gr6"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="118.25" y1="22.17188" x2="118.25" y2="151.17994" gradientUnits="userSpaceOnUse" id="color-7_44812_gr7"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="86" y1="29.05994" x2="86" y2="38.14369" gradientUnits="userSpaceOnUse" id="color-8_44812_gr8"><stop offset="0" stop-color="#8ab4ff"></stop><stop offset="1" stop-color="#e492ff"></stop></linearGradient><linearGradient x1="86" y1="22.17188" x2="86" y2="151.17994" gradientUnits="userSpaceOnUse" id="color-9_44812_gr9"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="110.1875" y1="22.17188" x2="110.1875" y2="151.17994" gradientUnits="userSpaceOnUse" id="color-10_44812_gr10"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="112.875" y1="22.17188" x2="112.875" y2="151.17994" gradientUnits="userSpaceOnUse" id="color-11_44812_gr11"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="86" y1="22.17188" x2="86" y2="151.17994" gradientUnits="userSpaceOnUse" id="color-12_44812_gr12"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="102.125" y1="22.17188" x2="102.125" y2="151.17994" gradientUnits="userSpaceOnUse" id="color-13_44812_gr13"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="118.25" y1="22.17188" x2="118.25" y2="151.17994" gradientUnits="userSpaceOnUse" id="color-14_44812_gr14"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="87.06223" y1="2.79688" x2="87.06223" y2="71.11339" gradientUnits="userSpaceOnUse" id="color-15_44812_gr15"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="87.0625" y1="2.125" x2="87.0625" y2="72" gradientUnits="userSpaceOnUse" id="color-16_44812_gr16"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none" stroke="none"></path><g id="original-icon" stroke="none" opacity="0" visibility="hidden"><path d="M77.9375,29.5625h16.125v8.0625h-16.125z" fill="url(#color-1_44812_gr1)"></path><path d="M142.4375,45.6875h-43v-13.4375c0,-4.44513 -3.61738,-8.0625 -8.0625,-8.0625h-10.75c-4.44513,0 -8.0625,3.61737 -8.0625,8.0625v13.4375h-43c-7.40944,0 -13.4375,6.02806 -13.4375,13.4375v75.25c0,7.40944 6.02806,13.4375 13.4375,13.4375h112.875c7.40944,0 13.4375,-6.02806 13.4375,-13.4375v-75.25c0,-7.40944 -6.02806,-13.4375 -13.4375,-13.4375zM83.3125,56.4375v10.75h-5.375v-24.1875h16.125v24.1875h-5.375v-10.75zM72.5625,67.1875h-2.6875c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h2.6875zM99.4375,61.8125h2.6875c1.4835,0 2.6875,1.204 2.6875,2.6875c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-2.6875zM80.625,29.5625h10.75c1.4835,0 2.6875,1.204 2.6875,2.6875v5.375h-16.125v-5.375c0,-1.4835 1.204,-2.6875 2.6875,-2.6875zM150.5,134.375c0,4.44512 -3.61738,8.0625 -8.0625,8.0625h-112.875c-4.44513,0 -8.0625,-3.61738 -8.0625,-8.0625v-75.25c0,-4.44512 3.61737,-8.0625 8.0625,-8.0625h43v5.375h-2.6875c-4.44513,0 -8.0625,3.61738 -8.0625,8.0625c0,4.44513 3.61737,8.0625 8.0625,8.0625h32.25c4.44512,0 8.0625,-3.61737 8.0625,-8.0625c0,-4.44512 -3.61738,-8.0625 -8.0625,-8.0625h-2.6875v-5.375h43c4.44512,0 8.0625,3.61738 8.0625,8.0625z" fill="url(#color-2_44812_gr2)"></path><path d="M96.75,104.8125h26.875v5.375h-26.875z" fill="url(#color-3_44812_gr3)"></path><path d="M96.75,94.0625h32.25v5.375h-32.25z" fill="url(#color-4_44812_gr4)"></path><path d="M137.0625,77.9375h-102.125c-4.44513,0 -8.0625,3.61737 -8.0625,8.0625v43c0,4.44512 3.61737,8.0625 8.0625,8.0625h102.125c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-43c0,-4.44513 -3.61737,-8.0625 -8.0625,-8.0625zM69.875,112.875c0,4.44512 -3.61737,8.0625 -8.0625,8.0625c-4.44512,0 -8.0625,-3.61738 -8.0625,-8.0625v-5.375c0,-4.44512 3.61738,-8.0625 8.0625,-8.0625c4.44513,0 8.0625,3.61738 8.0625,8.0625zM52.51913,122.53925c2.41606,2.32469 5.68406,3.77325 9.29337,3.77325c3.60931,0 6.87731,-1.44856 9.29337,-3.77325c2.47519,2.38381 3.96675,5.65719 4.10919,9.14825h-26.80513c0.13975,-3.48838 1.634,-6.76175 4.10919,-9.14825zM139.75,129c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-56.47244c-0.1505,-5.25137 -2.5155,-10.15875 -6.40163,-13.57994c0.68263,-1.60981 1.06156,-3.37819 1.06156,-5.23256v-5.375c0,-7.40944 -6.02806,-13.4375 -13.4375,-13.4375c-7.40944,0 -13.4375,6.02806 -13.4375,13.4375v5.375c0,1.85437 0.37894,3.62544 1.06156,5.23525c-3.88613,3.42119 -6.25113,8.32856 -6.40163,13.57725h-8.09744c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875v-43c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h102.125c1.4835,0 2.6875,1.204 2.6875,2.6875z" fill="url(#color-5_44812_gr5)"></path><path d="M96.75,115.5625h10.75v5.375h-10.75z" fill="url(#color-6_44812_gr6)"></path><path d="M112.875,115.5625h10.75v5.375h-10.75z" fill="url(#color-7_44812_gr7)"></path></g><g id="subtracted-icon" stroke="none"><path d="" fill="url(#color-8_44812_gr8)"></path><path d="M155.875,59.125v75.25c0,7.40944 -6.02806,13.4375 -13.4375,13.4375h-112.875c-7.40944,0 -13.4375,-6.02806 -13.4375,-13.4375v-75.25c0,-7.40944 6.02806,-13.4375 13.4375,-13.4375h18.11626c0.40295,1.84154 0.93216,3.63639 1.57806,5.375h-19.69432c-4.44513,0 -8.0625,3.61738 -8.0625,8.0625v75.25c0,4.44512 3.61737,8.0625 8.0625,8.0625h112.875c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-75.25c0,-4.44512 -3.61738,-8.0625 -8.0625,-8.0625l-17.56932,0c0.6459,-1.73861 1.17511,-3.53346 1.57806,-5.375h15.99126c7.40944,0 13.4375,6.02806 13.4375,13.4375zM67.06897,72.05875c-1.04244,-0.38832 -1.98363,-0.98647 -2.77193,-1.74283c0.89851,0.61705 1.82316,1.19867 2.77193,1.74283z" fill="url(#color-9_44812_gr9)"></path><path d="M96.75,110.1875h26.875v-5.375h-26.875z" fill="url(#color-10_44812_gr10)"></path><path d="M96.75,99.4375h32.25v-5.375h-32.25z" fill="url(#color-11_44812_gr11)"></path><path d="M145.125,86v43c0,4.44512 -3.61738,8.0625 -8.0625,8.0625h-102.125c-4.44513,0 -8.0625,-3.61738 -8.0625,-8.0625v-43c0,-4.44513 3.61737,-8.0625 8.0625,-8.0625h102.125c4.44513,0 8.0625,3.61737 8.0625,8.0625zM69.875,107.5c0,-4.44512 -3.61737,-8.0625 -8.0625,-8.0625c-4.44512,0 -8.0625,3.61738 -8.0625,8.0625v5.375c0,4.44512 3.61738,8.0625 8.0625,8.0625c4.44513,0 8.0625,-3.61738 8.0625,-8.0625zM48.40994,131.6875h26.80513c-0.14244,-3.49106 -1.634,-6.76444 -4.10919,-9.14825c-2.41606,2.32469 -5.68406,3.77325 -9.29337,3.77325c-3.60931,0 -6.87731,-1.44856 -9.29337,-3.77325c-2.47519,2.3865 -3.96944,5.65987 -4.10919,9.14825zM139.75,86c0,-1.4835 -1.204,-2.6875 -2.6875,-2.6875h-102.125c-1.4835,0 -2.6875,1.204 -2.6875,2.6875v43c0,1.4835 1.204,2.6875 2.6875,2.6875h8.09744c0.1505,-5.24869 2.5155,-10.15606 6.40163,-13.57725c-0.68263,-1.60981 -1.06156,-3.38088 -1.06156,-5.23525v-5.375c0,-7.40944 6.02806,-13.4375 13.4375,-13.4375c7.40944,0 13.4375,6.02806 13.4375,13.4375v5.375c0,1.85437 -0.37894,3.62275 -1.06156,5.23256c3.88613,3.42119 6.25113,8.32856 6.40163,13.57994h56.47244c1.4835,0 2.6875,-1.204 2.6875,-2.6875z" fill="url(#color-12_44812_gr12)"></path><path d="M96.75,120.9375h10.75v-5.375h-10.75z" fill="url(#color-13_44812_gr13)"></path><path d="M112.875,120.9375h10.75v-5.375h-10.75z" fill="url(#color-14_44812_gr14)"></path></g><g stroke="none"><g id="Layer_1"><path d="M83.03125,50.5c-0.01344,0 -0.02688,0 -0.04031,0c-0.76056,-0.01075 -1.4835,-0.344 -1.98337,-0.91644l-9.40625,-10.75c-0.97556,-1.118 -0.86269,-2.81381 0.25531,-3.79206c1.11262,-0.97825 2.80844,-0.86806 3.79206,0.25262l7.44438,8.50863l15.43969,-16.63025c1.00512,-1.08844 2.71169,-1.15294 3.79744,-0.13975c1.08575,1.0105 1.15025,2.71169 0.13975,3.80013l-17.46875,18.8125c-0.51063,0.54288 -1.22281,0.85462 -1.96994,0.85462z" fill="url(#color-15_44812_gr15)"></path><path d="M87.0625,72c-19.264,0 -34.9375,-15.6735 -34.9375,-34.9375c0,-19.264 15.6735,-34.9375 34.9375,-34.9375c19.264,0 34.9375,15.6735 34.9375,34.9375c0,19.264 -15.6735,34.9375 -34.9375,34.9375zM87.0625,7.5c-16.29969,0 -29.5625,13.26281 -29.5625,29.5625c0,16.29969 13.26281,29.5625 29.5625,29.5625c16.29969,0 29.5625,-13.26281 29.5625,-29.5625c0,-16.29969 -13.26281,-29.5625 -29.5625,-29.5625z" fill="url(#color-16_44812_gr16)"></path></g><g id="Layer_1" fill="#000000" opacity="0"><path d="M87.0625,-3.25c-22.22831,0 -40.3125,18.08419 -40.3125,40.3125c0,22.22831 18.08419,40.3125 40.3125,40.3125c22.22831,0 40.3125,-18.08419 40.3125,-40.3125c0,-22.22831 -18.08419,-40.3125 -40.3125,-40.3125z"></path></g></g><path d="M52.125,72v-69.875h69.875v69.875z" id="overlay-drag" fill="#ff0000" stroke="none" opacity="0"></path></g></svg>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center justify-content-center m-b-15 " :class="{'hint-text': data.status === 1 || data.status === 2}">
|
|
<div class="col-10 hint-text">
|
|
<small class="fs-10 hint-text">Upload identification document to help us verify your identity</small>
|
|
</div>
|
|
</div>
|
|
<div class="row" :class="{'hint-text': data.status === 1 || data.status === 2}">
|
|
<div class="col" :class="{'hint-text': data.status === 1 || data.status === 2}">
|
|
<div class="btn btn-xs btn-success btn-block bg-success all-caps b-rad-none p-t-5 p-b-5 requestModal" ref="uploadDocument" :class="{'hint-text': data.status === 1 || data.status === 2}" data-type="createModal" :style="{'cursor': data.status === 1 || data.status === 2 ? 'default' : ''}">Upload Document</div>
|
|
</div>
|
|
</div>
|
|
<modal-form-component section="documentUploadSection">
|
|
<template slot="form" slot-scope="{section}">
|
|
<company-identification-form-component :section="section" :company="data"></company-identification-form-component>
|
|
</template>
|
|
</modal-form-component>
|
|
</div>
|
|
<div class="col p-t-15 p-b-30 p-l-20 p-r-20 bg-white parentContainer">
|
|
<div class="row align-items-center" :class="{'hint-text': !data.delivery_address || data.status === 0}">
|
|
<div class="col all-caps" :class="{'hint-text': !data.delivery_address || data.status === 0}">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-auto no-padding">
|
|
<i class="fa fa fa-circle-thin text-success fs-25" style="margin-top: 3px;"></i>
|
|
</div>
|
|
<div class="col-auto">
|
|
<small class="fs-11 bold p-l-5 p-r-5">Step 3: New order</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-5" :class="{'hint-text': !data.delivery_address || data.status === 0}">
|
|
<div class="col" :class="{'hint-text': !data.delivery_address || data.status === 0}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
|
width="50" height="50"
|
|
viewBox="0 0 172 172"
|
|
style=" fill:#000000;"><defs><linearGradient x1="114.21875" y1="46.02344" x2="114.21875" y2="55.76563" gradientUnits="userSpaceOnUse" id="color-1_46123_gr1"><stop offset="0" stop-color="#8ab4ff"></stop><stop offset="1" stop-color="#e492ff"></stop></linearGradient><linearGradient x1="129" y1="50.05469" x2="129" y2="133.89663" gradientUnits="userSpaceOnUse" id="color-2_46123_gr2"><stop offset="0" stop-color="#8ab4ff"></stop><stop offset="1" stop-color="#e492ff"></stop></linearGradient><linearGradient x1="47.03125" y1="46.02344" x2="47.03125" y2="55.76563" gradientUnits="userSpaceOnUse" id="color-3_46123_gr3"><stop offset="0" stop-color="#8ab4ff"></stop><stop offset="1" stop-color="#e492ff"></stop></linearGradient><linearGradient x1="102.125" y1="24.1875" x2="102.125" y2="146.46875" gradientUnits="userSpaceOnUse" id="color-4_46123_gr4"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="40.3125" y1="24.1875" x2="40.3125" y2="146.46875" gradientUnits="userSpaceOnUse" id="color-5_46123_gr5"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="38.96875" y1="24.1875" x2="38.96875" y2="146.46875" gradientUnits="userSpaceOnUse" id="color-6_46123_gr6"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="83.3125" y1="24.1875" x2="83.3125" y2="146.46875" gradientUnits="userSpaceOnUse" id="color-7_46123_gr7"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="94.0625" y1="24.1875" x2="94.0625" y2="146.46875" gradientUnits="userSpaceOnUse" id="color-8_46123_gr8"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="104.8125" y1="24.1875" x2="104.8125" y2="146.46875" gradientUnits="userSpaceOnUse" id="color-9_46123_gr9"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><linearGradient x1="80.625" y1="24.1875" x2="80.625" y2="146.46875" gradientUnits="userSpaceOnUse" id="color-10_46123_gr10"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M99.4375,48.375h29.5625v5.375h-29.5625z" fill="url(#color-1_46123_gr1)"></path><path d="M131.6875,126.3125l-5.375,8.0625v-77.9375l5.375,-8.0625z" fill="url(#color-2_46123_gr2)"></path><path d="M32.25,48.375h29.5625v5.375h-29.5625z" fill="url(#color-3_46123_gr3)"></path><path d="M142.4375,26.875h-94.0625v5.375h94.0625c4.44512,0 8.0625,3.61738 8.0625,8.0625v72.5625h5.375v-72.5625c0,-7.40944 -6.02806,-13.4375 -13.4375,-13.4375z" fill="url(#color-4_46123_gr4)"></path><path d="M26.875,129h26.875v5.375h-26.875z" fill="url(#color-5_46123_gr5)"></path><path d="M26.875,118.25h24.1875v5.375h-24.1875z" fill="url(#color-6_46123_gr6)"></path><path d="M80.625,123.625h5.375v10.75h-5.375z" fill="url(#color-7_46123_gr7)"></path><path d="M91.375,123.625h5.375v10.75h-5.375z" fill="url(#color-8_46123_gr8)"></path><path d="M102.125,123.625h5.375v10.75h-5.375z" fill="url(#color-9_46123_gr9)"></path><path d="M139.75,37.625h-92.14094c-1.85706,0 -3.67381,0.64769 -5.10894,1.8275l-23.42694,19.20488c-1.87588,1.53725 -2.94819,3.81087 -2.94819,6.235v72.17013c0,4.44512 3.61737,8.0625 8.0625,8.0625h86c0.18544,0 0.37087,-0.00538 0.55094,-0.01881c3.96675,-0.17738 7.81256,-1.62056 10.91931,-4.10112l20.43575,-16.35075c1.92694,-1.53725 3.0315,-3.83775 3.0315,-6.30756v-75.34675c0,-2.96431 -2.41069,-5.375 -5.375,-5.375zM51.0625,64.5h32.25v13.4375c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-26.60625c-1.54531,0 -2.95625,-1.28194 -2.95625,-2.6875zM85.05669,59.125h-29.09488l19.91169,-16.125h29.33944zM45.90519,43.61006c0.48106,-0.39506 1.08306,-0.61006 1.70388,-0.61006h19.72088l-19.90631,16.125h-20.44113zM110.41863,139.73925c-0.172,0.00806 -0.34131,0.01075 -0.51062,0.01075h-15.8455h-69.875c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875v-72.17012c0,-0.13706 0.06719,-0.258 0.08869,-0.39238h24.09881v13.4375c0,4.36988 3.81625,8.0625 8.33125,8.0625h26.60625c4.44513,0 8.0625,-3.61737 8.0625,-8.0625v-13.4375h24.1875v72.5625c0,1.40287 -1.08038,2.5585 -2.45638,2.67675zM114.87719,59.125h-21.21512l20.15894,-16.125h20.95712l-18.87431,15.10106c-0.387,0.30638 -0.7095,0.66381 -1.02662,1.02394zM139.75,118.34675c0,0.82775 -0.36819,1.59369 -1.01319,2.107l-20.43575,16.35075c-0.01613,0.01344 -0.03494,0.02956 -0.05106,0.043v-72.455c0,-0.81969 0.36819,-1.58025 1.00781,-2.09087l20.49219,-16.39913z" fill="url(#color-10_46123_gr10)"></path></g></g></svg>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center justify-content-center m-b-15" :class="{'hint-text': !data.delivery_address || data.status === 0}">
|
|
<div class="col-10">
|
|
<small class="fs-10 hint-text">Place your first order and start tracking your shipment progress</small>
|
|
</div>
|
|
</div>
|
|
<div class="row" :class="{'hint-text': !data.delivery_address || data.status === 0}">
|
|
<div class="col" :class="{'hint-text': !data.delivery_address || data.status === 0}">
|
|
<div class="btn btn-xs btn-success btn-block all-caps b-rad-none p-t-5 p-b-5 requestModal" :class="{'hint-text': !data.delivery_address || data.status === 0}" data-type="createModal" :style="{'cursor': !data.delivery_address || data.status === 0 ? 'default' : ''}">Place Order</div>
|
|
</div>
|
|
</div>
|
|
<modal-form-component section="orderSection" v-if="data.delivery_address">
|
|
<template slot="form" slot-scope="{section}">
|
|
<order-form-component v-if="data.id" :section="section" :id="data.id"></order-form-component>
|
|
</template>
|
|
</modal-form-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<modal-component type="welcome">
|
|
<div class="row">
|
|
<div class="col p-t-0 p-b-20">
|
|
<div class="row m-b-5">
|
|
<div class="col">
|
|
<div class="font-heading text-success fs-16 bold">Hello There! Welcome To CIEF Shipping</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<div class="font-heading fs-11">First, you are required to set up your primary delivery address for receiving your goods.</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<img src="/images/step_01.png" class="w-100">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</modal-component>
|
|
<modal-component type="identification">
|
|
<div class="row">
|
|
<div class="col p-t-0 p-b-20">
|
|
<div class="row m-b-5">
|
|
<div class="col">
|
|
<div class="font-heading text-success fs-16 bold">Great! You have done the first step.</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<div class="font-heading fs-11">So now, we need you to upload the identification document in order to help us verify your identity.</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<img src="/images/step_02.png" class="w-100">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</modal-component>
|
|
<modal-component type="firstOrder">
|
|
<div class="row">
|
|
<div class="col p-t-0 p-b-20">
|
|
<div class="row m-b-5">
|
|
<div class="col">
|
|
<div class="font-heading text-success fs-16 bold">Great! You have uploaded your document.</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<div class="font-heading fs-11">Now, you can create your first order and download the QR Code for your parcel for your supplier to paste on the parcel before sending it to our warehouse.</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<div class="font-heading fs-10 text-danger">**Gentle reminder, our warehouse will reject any parcel that doesn't contain QR Code.</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<img src="/images/step_03.png" class="w-100">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</modal-component>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
export default {
|
|
props: {
|
|
data:{
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
mounted() {
|
|
// EventBus.$on('uploadDocument', () => {
|
|
// this.$refs.uploadDocument.click()
|
|
// });
|
|
},
|
|
updated (){
|
|
if(!this.data.delivery_address){
|
|
$(this.$el).find('.modalContainer[data-type="welcome"]').modal('show')
|
|
}
|
|
if(this.data.delivery_address && this.data.status === 0){
|
|
$(this.$el).find('.modalContainer[data-type="identification"]').modal('show')
|
|
}
|
|
if(this.data.delivery_address && this.data.status !== 0){
|
|
$(this.$el).find('.modalContainer[data-type="firstOrder"]').modal('show')
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
onboarding: true,
|
|
files: []
|
|
}
|
|
}
|
|
}
|
|
</script> |