varnitgoyal95/address-verification-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Empty states

Browse Source 
-Added empty states
-Pressable icons converted to touchableOpacity
-Fixed back arrow icons
-Hardcoded p profile page fix
This commit is contained in:
Aman Chaturvedi
2023-01-02 17:12:43 +05:30
committed by GitHub Enterprise
parent 46cc951f5c 72e426bda2
commit 33c557139a
15 changed files with 484 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
src/assets/icons/EmptyPageCheckIcon.tsx Normal file
View File

@@ -0,0 +1,165 @@
import React from 'react';
import Svg, {Path} from 'react-native-svg';
const EmptyPageCheckIcon = () => (
<Svg width={161} height={116} viewBox="0 0 161 116" fill="none">
<Path
d="M113.614 15.803H41.8793C41.3405 15.803 40.9037 16.2398 40.9037 16.7786V113.905C40.9037 114.444 41.3405 114.881 41.8793 114.881H113.614C114.153 114.881 114.589 114.444 114.589 113.905V16.7786C114.589 16.2398 114.153 15.803 113.614 15.803Z"
fill="#F7F7F7"
stroke="#12183E"
strokeWidth={0.157117}
strokeLinejoin="round"
/>
<Path
d="M110.955 20.5932V107.262C110.955 107.657 110.609 107.976 110.182 107.976H46.1508C45.7234 107.976 45.3775 107.657 45.3775 107.262V20.5932C45.3775 20.1984 45.7234 19.8787 46.1508 19.8787H110.182C110.609 19.8787 110.955 20.1984 110.955 20.5932Z"
fill="#F6F5F5"
stroke="#12183E"
strokeWidth={0.162534}
strokeLinejoin="round"
/>
<Path
d="M103.662 104.838C86.4572 106.388 66.5014 106.952 45.3775 107.099V63.4383L49.678 20.1431L105.839 19.8821H105.845C106.269 19.8821 106.615 20.2018 106.615 20.5967C106.651 54.8047 107.806 95.7278 103.662 104.838Z"
fill="#E1E1E1"
/>
<Path
d="M105.065 102.061C76.9032 106.231 57.923 106.515 42.5352 105.51C42.1045 105.48 41.7815 105.131 41.8207 104.733C43.7653 84.9959 44.5647 52.8075 45.3609 20.58C45.3707 20.1917 45.7133 19.8818 46.1342 19.8818L79.8952 19.9503L110.188 19.8752C110.612 19.8752 110.958 20.1885 110.964 20.5833C111.415 54.439 111.594 87.5605 105.065 102.057V102.061Z"
fill="white"
stroke="#12183E"
strokeWidth={0.162534}
strokeLinejoin="round"
/>
<Path
d="M59.264 36.4216H52.2391C51.7381 36.4216 51.332 36.8277 51.332 37.3287V43.6913C51.332 44.1923 51.7381 44.5984 52.2391 44.5984H59.264C59.765 44.5984 60.1711 44.1923 60.1711 43.6913V37.3287C60.1711 36.8277 59.765 36.4216 59.264 36.4216Z"
stroke="#12183E"
strokeWidth={0.157117}
strokeLinejoin="round"
/>
<Path
d="M55.3358 42.2519L53.4531 40.9076C53.2834 40.7869 53.2541 40.5618 53.3846 40.4051L53.5804 40.1702C53.7109 40.0136 53.9523 39.9842 54.122 40.1049L55.4761 41.074L57.5839 38.8292C57.7242 38.6791 57.9689 38.6628 58.1288 38.7933L58.3703 38.9858C58.5301 39.1163 58.5497 39.3414 58.4094 39.4915L55.8644 42.1997C55.7306 42.3433 55.4989 42.3629 55.3358 42.2487V42.2519Z"
fill="#E1E1E1"
/>
<Path
d="M59.264 50.2234H52.2391C51.7381 50.2234 51.332 50.6295 51.332 51.1305V57.4931C51.332 57.9941 51.7381 58.4002 52.2391 58.4002H59.264C59.765 58.4002 60.1711 57.9941 60.1711 57.4931V51.1305C60.1711 50.6295 59.765 50.2234 59.264 50.2234Z"
stroke="#12183E"
strokeWidth={0.157117}
strokeLinejoin="round"
/>
<Path
d="M55.3358 56.051L53.4531 54.7067C53.2834 54.586 53.2541 54.3608 53.3846 54.2042L53.5804 53.9693C53.7109 53.8127 53.9523 53.7833 54.122 53.904L55.4761 54.8731L57.5839 52.6282C57.7242 52.4781 57.9689 52.4618 58.1288 52.5923L58.3703 52.7849C58.5301 52.9154 58.5497 53.1405 58.4094 53.2906L55.8644 55.9988C55.7306 56.1424 55.4989 56.1619 55.3358 56.0477V56.051Z"
fill="#E1E1E1"
/>
<Path
d="M55.3358 69.5422L53.4531 68.1979C53.2834 68.0772 53.2541 67.852 53.3846 67.6954L53.5804 67.4605C53.7109 67.3039 53.9523 67.2745 54.122 67.3952L55.4761 68.3643L57.5839 66.1194C57.7242 65.9694 57.9689 65.953 58.1288 66.0836L58.3703 66.2761C58.5301 66.4066 58.5497 66.6317 58.4094 66.7818L55.8644 69.49C55.7306 69.6336 55.4989 69.6531 55.3358 69.5389V69.5422Z"
fill="#E1E1E1"
/>
<Path
d="M55.3358 83.6833L53.4531 82.339C53.2834 82.2183 53.2541 81.9931 53.3846 81.8365L53.5804 81.6016C53.7109 81.445 53.9523 81.4156 54.122 81.5363L55.4761 82.5054L57.5839 80.2606C57.7242 80.1105 57.9689 80.0942 58.1288 80.2247L58.3703 80.4172C58.5301 80.5477 58.5497 80.7728 58.4094 80.9229L55.8644 83.6311C55.7306 83.7747 55.4989 83.7943 55.3358 83.6801V83.6833Z"
fill="#E1E1E1"
/>
<Path
d="M59.264 64.0225H52.2391C51.7381 64.0225 51.332 64.4286 51.332 64.9295V71.2922C51.332 71.7931 51.7381 72.1992 52.2391 72.1992H59.264C59.765 72.1992 60.1711 71.7931 60.1711 71.2922V64.9295C60.1711 64.4286 59.765 64.0225 59.264 64.0225Z"
stroke="#12183E"
strokeWidth={0.157117}
strokeLinejoin="round"
/>
<Path
d="M59.264 77.8242H52.2391C51.7381 77.8242 51.332 78.2303 51.332 78.7313V85.0939C51.332 85.5949 51.7381 86.001 52.2391 86.001H59.264C59.765 86.001 60.1711 85.5949 60.1711 85.0939V78.7313C60.1711 78.2303 59.765 77.8242 59.264 77.8242Z"
stroke="#12183E"
strokeWidth={0.157117}
strokeLinejoin="round"
/>
<Path
d="M101.551 37.009H64.8142C64.3998 37.009 64.0638 37.345 64.0638 37.7595V38.4316C64.0638 38.8461 64.3998 39.1821 64.8142 39.1821H101.551C101.966 39.1821 102.302 38.8461 102.302 38.4316V37.7595C102.302 37.345 101.966 37.009 101.551 37.009Z"
fill="#E1E1E1"
/>
<Path
d="M80.6621 41.4497H64.811C64.3983 41.4497 64.0638 41.7842 64.0638 42.1969V42.8625C64.0638 43.2752 64.3983 43.6097 64.811 43.6097H80.6621C81.0747 43.6097 81.4093 43.2752 81.4093 42.8625V42.1969C81.4093 41.7842 81.0747 41.4497 80.6621 41.4497Z"
fill="#E1E1E1"
/>
<Path
d="M101.551 51.4277H64.8142C64.3998 51.4277 64.0638 51.7637 64.0638 52.1782V52.8504C64.0638 53.2648 64.3998 53.6008 64.8142 53.6008H101.551C101.966 53.6008 102.302 53.2648 102.302 52.8504V52.1782C102.302 51.7637 101.966 51.4277 101.551 51.4277Z"
fill="#E1E1E1"
/>
<Path
d="M80.6621 55.8684H64.811C64.3983 55.8684 64.0638 56.2029 64.0638 56.6156V57.2812C64.0638 57.6939 64.3983 58.0284 64.811 58.0284H80.6621C81.0747 58.0284 81.4093 57.6939 81.4093 57.2812V56.6156C81.4093 56.2029 81.0747 55.8684 80.6621 55.8684Z"
fill="#E1E1E1"
/>
<Path
d="M101.551 64.7598H64.8142C64.3998 64.7598 64.0638 65.0958 64.0638 65.5102V66.1824C64.0638 66.5969 64.3998 66.9328 64.8142 66.9328H101.551C101.966 66.9328 102.302 66.5969 102.302 66.1824V65.5102C102.302 65.0958 101.966 64.7598 101.551 64.7598Z"
fill="#E1E1E1"
/>
<Path
d="M80.6621 69.2007H64.811C64.3983 69.2007 64.0638 69.5352 64.0638 69.9479V70.6135C64.0638 71.0262 64.3983 71.3607 64.811 71.3607H80.6621C81.0747 71.3607 81.4093 71.0262 81.4093 70.6135V69.9479C81.4093 69.5352 81.0747 69.2007 80.6621 69.2007Z"
fill="#E1E1E1"
/>
<Path
d="M101.551 79.0105H64.8142C64.3998 79.0105 64.0638 79.3465 64.0638 79.761V80.4331C64.0638 80.8476 64.3998 81.1836 64.8142 81.1836H101.551C101.966 81.1836 102.302 80.8476 102.302 80.4331V79.761C102.302 79.3465 101.966 79.0105 101.551 79.0105Z"
fill="#E1E1E1"
/>
<Path
d="M80.6621 83.4512H64.811C64.3983 83.4512 64.0638 83.7857 64.0638 84.1984V84.864C64.0638 85.2767 64.3983 85.6112 64.811 85.6112H80.6621C81.0747 85.6112 81.4093 85.2767 81.4093 84.864V84.1984C81.4093 83.7857 81.0747 83.4512 80.6621 83.4512Z"
fill="#E1E1E1"
/>
<Path
d="M0.000183105 114.868H160.266"
stroke="#12183E"
strokeWidth={0.157117}
strokeLinejoin="round"
/>
<Path
d="M54.1607 19.898C54.1607 19.898 52.8425 21.6469 53.0089 23.9766C53.0481 24.5379 53.5179 24.9751 54.0791 24.9718L100.432 24.8119C101.208 23.8885 100.901 21.846 100.689 19.8948H54.1607V19.898Z"
fill="#12183E"
/>
<Path
d="M79.0469 13.5975C79.0469 14.3153 78.4661 14.8993 77.745 14.8993C77.0239 14.8993 76.4431 14.3186 76.4431 13.5975C76.4431 13.5224 76.4496 13.4474 76.4627 13.3723C76.5671 13.9857 77.1022 14.4491 77.745 14.4491C78.3878 14.4491 78.9196 13.9857 79.0273 13.3723C79.0404 13.4441 79.0469 13.5191 79.0469 13.5975Z"
fill="#12183E"
/>
<Path
d="M96.5036 16.7789H87.1C87.1 11.6138 82.9137 7.42749 77.7486 7.42749C72.5835 7.42749 68.3972 11.6138 68.3972 16.7789H58.9935C56.5823 16.7789 54.6278 18.7334 54.6278 21.1446V22.6032C54.6278 22.8903 54.8595 23.122 55.1466 23.122H100.357C100.644 23.122 100.876 22.8903 100.876 22.6032V21.1446C100.876 18.7334 98.9214 16.7789 96.5102 16.7789H96.5036ZM76.4663 13.3725C76.5707 12.7623 77.1058 12.2957 77.7486 12.2957C78.3914 12.2957 78.9232 12.759 79.0309 13.3725C79.044 13.4442 79.0505 13.5193 79.0505 13.5976C79.0505 14.3154 78.4697 14.8995 77.7486 14.8995C77.0275 14.8995 76.4467 14.3187 76.4467 13.5976C76.4467 13.5226 76.4532 13.4475 76.4663 13.3725Z"
fill="white"
/>
<Path
d="M100.869 21.8296V22.6029C100.869 22.89 100.637 23.1217 100.35 23.1217H55.1427C54.8556 23.1217 54.6239 22.89 54.6239 22.6029V21.8296H100.872H100.869Z"
fill="#BCBCBC"
/>
<Path
d="M96.5036 16.7789H87.1C87.1 11.6138 82.9137 7.42749 77.7486 7.42749C72.5835 7.42749 68.3972 11.6138 68.3972 16.7789H58.9935C56.5823 16.7789 54.6278 18.7334 54.6278 21.1446V22.6032C54.6278 22.8903 54.8595 23.122 55.1466 23.122H100.357C100.644 23.122 100.876 22.8903 100.876 22.6032V21.1446C100.876 18.7334 98.9214 16.7789 96.5102 16.7789H96.5036ZM76.4663 13.3725C76.5707 12.7623 77.1058 12.2957 77.7486 12.2957C78.3914 12.2957 78.9232 12.759 79.0309 13.3725C79.044 13.4442 79.0505 13.5193 79.0505 13.5976C79.0505 14.3154 78.4697 14.8995 77.7486 14.8995C77.0275 14.8995 76.4467 14.3187 76.4467 13.5976C76.4467 13.5226 76.4532 13.4475 76.4663 13.3725V13.3725Z"
stroke="#12183E"
strokeWidth={0.157117}
strokeLinejoin="round"
/>
<Path
d="M120.07 77.3704C110.12 72.1066 97.786 75.9029 92.5222 85.8534C87.2585 95.804 91.0547 108.138 101.005 113.401C110.956 118.665 123.289 114.869 128.553 104.918C133.817 94.9678 130.021 82.6341 120.07 77.3704Z"
fill="#12183E"
/>
<Path
d="M118.006 77.3704C108.056 72.1066 95.722 75.9029 90.4583 85.8534C85.1945 95.804 88.9908 108.138 98.9413 113.401C108.892 118.665 121.226 114.869 126.489 104.918C131.753 94.9678 127.957 82.6341 118.006 77.3704Z"
fill="white"
stroke="#12183E"
strokeWidth={0.327158}
strokeLinejoin="round"
/>
<Path
d="M119.223 89.5557L104.79 103.989L97.5737 96.7722"
stroke="#0085FF"
strokeWidth={2.61727}
strokeLinecap="round"
strokeLinejoin="round"
/>
<Path
d="M19 5L20.0704 4.41457C21.0603 3.87312 21.8731 3.0603 22.4146 2.07035L23 1L23.5854 2.07035C24.1269 3.0603 24.9397 3.87312 25.9296 4.41457L27 5L25.9296 5.58543C24.9397 6.12688 24.1269 6.9397 23.5854 7.92965L23 9L22.4146 7.92965C21.8731 6.9397 21.0603 6.12688 20.0704 5.58543L19 5Z"
fill="white"
stroke="#001B4B"
strokeWidth={0.101818}
strokeMiterlimit={10}
/>
<Path
d="M33 17.5L35.2745 16.256C37.3781 15.1054 39.1054 13.3781 40.256 11.2745L41.5 9L42.744 11.2745C43.8946 13.3781 45.6219 15.1054 47.7255 16.256L50 17.5L47.7255 18.744C45.6219 19.8946 43.8946 21.6219 42.744 23.7255L41.5 26L40.256 23.7255C39.1054 21.6219 37.3781 19.8946 35.2745 18.744L33 17.5Z"
fill="white"
stroke="#001B4B"
strokeWidth={0.198333}
strokeMiterlimit={10}
/>
</Svg>
);
export default EmptyPageCheckIcon;

157
src/assets/icons/EmptyPageWarnIcon.tsx Normal file
View File

@@ -0,0 +1,157 @@
import React from 'react';
import Svg, {Path} from 'react-native-svg';
const EmptyPageWarnIcon = () => (
<Svg width={160} height={109} viewBox="0 0 160 109" fill="none">
<Path
d="M113.138 9.34058H41.7036C41.1671 9.34058 40.7321 9.77554 40.7321 10.3121V107.028C40.7321 107.565 41.1671 108 41.7036 108H113.138C113.674 108 114.109 107.565 114.109 107.028V10.3121C114.109 9.77554 113.674 9.34058 113.138 9.34058Z"
fill="#F7F7F7"
stroke="#12183E"
strokeWidth={0.160846}
strokeLinejoin="round"
/>
<Path
d="M110.49 14.1107V100.416C110.49 100.81 110.145 101.128 109.72 101.128H45.9572C45.5315 101.128 45.1871 100.81 45.1871 100.416V14.1107C45.1871 13.7176 45.5315 13.3992 45.9572 13.3992H109.72C110.145 13.3992 110.49 13.7176 110.49 14.1107Z"
fill="#F6F5F5"
stroke="#12183E"
strokeWidth={0.166393}
strokeLinejoin="round"
/>
<Path
d="M103.228 98.0025C86.0948 99.5459 66.2226 100.108 45.1871 100.254V56.7764L49.4696 13.6625L105.395 13.4026H105.402C105.824 13.4026 106.168 13.721 106.168 14.1142C106.204 48.179 107.354 88.9307 103.228 98.0025Z"
fill="#E1E1E1"
/>
<Path
d="M104.625 95.2371C76.5807 99.3896 57.68 99.6723 42.3567 98.6715C41.9278 98.6423 41.6061 98.2946 41.6451 97.8982C43.5816 78.2437 44.3777 46.1901 45.1705 14.0976C45.1802 13.7109 45.5214 13.4023 45.9406 13.4023L79.5602 13.4705L109.726 13.3958C110.148 13.3958 110.493 13.7077 110.499 14.1008C110.948 47.8147 111.126 80.7975 104.625 95.2338V95.2371Z"
fill="white"
stroke="#12183E"
strokeWidth={0.166393}
strokeLinejoin="round"
/>
<Path
d="M59.7327 30.7178H52.7371C52.2382 30.7178 51.8338 31.1222 51.8338 31.6211V37.957C51.8338 38.4559 52.2382 38.8603 52.7371 38.8603H59.7327C60.2315 38.8603 60.6359 38.4559 60.6359 37.957V31.6211C60.6359 31.1222 60.2315 30.7178 59.7327 30.7178Z"
stroke="#12183E"
strokeWidth={0.160846}
strokeLinejoin="round"
/>
<Path
d="M59.7328 44.4619H52.7372C52.2384 44.4619 51.8339 44.8663 51.8339 45.3652V51.7012C51.8339 52.2 52.2384 52.6045 52.7372 52.6045H59.7328C60.2317 52.6045 60.6361 52.2 60.6361 51.7012V45.3652C60.6361 44.8663 60.2317 44.4619 59.7328 44.4619Z"
stroke="#12183E"
strokeWidth={0.160846}
strokeLinejoin="round"
/>
<Path
d="M59.7328 58.2031H52.7372C52.2384 58.2031 51.8339 58.6075 51.8339 59.1064V65.4424C51.8339 65.9413 52.2384 66.3457 52.7372 66.3457H59.7328C60.2317 66.3457 60.6361 65.9413 60.6361 65.4424V59.1064C60.6361 58.6075 60.2317 58.2031 59.7328 58.2031Z"
stroke="#12183E"
strokeWidth={0.160846}
strokeLinejoin="round"
/>
<Path
d="M59.7328 71.947H52.7372C52.2384 71.947 51.8339 72.3514 51.8339 72.8503V79.1863C51.8339 79.6851 52.2384 80.0896 52.7372 80.0896H59.7328C60.2317 80.0896 60.6361 79.6851 60.6361 79.1863V72.8503C60.6361 72.3514 60.2317 71.947 59.7328 71.947Z"
stroke="#12183E"
strokeWidth={0.160846}
strokeLinejoin="round"
/>
<Path
d="M101.843 31.3027H65.2597C64.847 31.3027 64.5124 31.6373 64.5124 32.0501V32.7194C64.5124 33.1321 64.847 33.4667 65.2597 33.4667H101.843C102.255 33.4667 102.59 33.1321 102.59 32.7194V32.0501C102.59 31.6373 102.255 31.3027 101.843 31.3027Z"
fill="#E1E1E1"
/>
<Path
d="M81.0411 35.7249H65.2564C64.8455 35.7249 64.5124 36.058 64.5124 36.4689V37.1318C64.5124 37.5427 64.8455 37.8758 65.2564 37.8758H81.0411C81.4521 37.8758 81.7852 37.5427 81.7852 37.1318V36.4689C81.7852 36.058 81.4521 35.7249 81.0411 35.7249Z"
fill="#E1E1E1"
/>
<Path
d="M101.843 45.6611H65.2597C64.847 45.6611 64.5124 45.9957 64.5124 46.4085V47.0778C64.5124 47.4905 64.847 47.8251 65.2597 47.8251H101.843C102.255 47.8251 102.59 47.4905 102.59 47.0778V46.4085C102.59 45.9957 102.255 45.6611 101.843 45.6611Z"
fill="#E1E1E1"
/>
<Path
d="M81.0411 50.0833H65.2564C64.8455 50.0833 64.5124 50.4164 64.5124 50.8273V51.4902C64.5124 51.9011 64.8455 52.2342 65.2564 52.2342H81.0411C81.4521 52.2342 81.7852 51.9011 81.7852 51.4902V50.8273C81.7852 50.4164 81.4521 50.0833 81.0411 50.0833Z"
fill="#E1E1E1"
/>
<Path
d="M101.843 58.9375H65.2597C64.847 58.9375 64.5124 59.2721 64.5124 59.6848V60.3542C64.5124 60.7669 64.847 61.1015 65.2597 61.1015H101.843C102.255 61.1015 102.59 60.7669 102.59 60.3542V59.6848C102.59 59.2721 102.255 58.9375 101.843 58.9375Z"
fill="#E1E1E1"
/>
<Path
d="M81.0411 63.3596H65.2564C64.8455 63.3596 64.5124 63.6928 64.5124 64.1037V64.7665C64.5124 65.1775 64.8455 65.5106 65.2564 65.5106H81.0411C81.4521 65.5106 81.7852 65.1775 81.7852 64.7665V64.1037C81.7852 63.6928 81.4521 63.3596 81.0411 63.3596Z"
fill="#E1E1E1"
/>
<Path
d="M101.843 73.1267H65.2597C64.8469 73.1267 64.5123 73.4613 64.5123 73.874V74.5434C64.5123 74.9561 64.8469 75.2907 65.2597 75.2907H101.843C102.255 75.2907 102.59 74.9561 102.59 74.5434V73.874C102.59 73.4613 102.255 73.1267 101.843 73.1267Z"
fill="#E1E1E1"
/>
<Path
d="M81.0411 77.5488H65.2564C64.8455 77.5488 64.5123 77.882 64.5123 78.2929V78.9557C64.5123 79.3667 64.8455 79.6998 65.2564 79.6998H81.0411C81.4521 79.6998 81.7852 79.3667 81.7852 78.9557V78.2929C81.7852 77.882 81.4521 77.5488 81.0411 77.5488Z"
fill="#E1E1E1"
/>
<Path
d="M0 107.987H159.595"
stroke="#12183E"
strokeWidth={0.160846}
strokeLinejoin="round"
/>
<Path
d="M53.9335 13.4185C53.9335 13.4185 52.6208 15.1601 52.7866 17.4801C52.8255 18.0389 53.2934 18.4743 53.8523 18.4711L100.011 18.3119C100.784 17.3923 100.479 15.3583 100.267 13.4153H53.9335V13.4185Z"
fill="#12183E"
/>
<Path
d="M78.7156 7.14387C78.7156 7.8587 78.1373 8.44031 77.4192 8.44031C76.7011 8.44031 76.1227 7.86195 76.1227 7.14387C76.1227 7.06914 76.1292 6.99441 76.1422 6.91968C76.2462 7.53053 76.7791 7.99192 77.4192 7.99192C78.0593 7.99192 78.5889 7.53053 78.6961 6.91968C78.7091 6.99116 78.7156 7.06589 78.7156 7.14387Z"
fill="#12183E"
/>
<Path
d="M96.0992 10.3123H86.7349C86.7349 5.16875 82.5662 1 77.4227 1C72.2791 1 68.1104 5.16875 68.1104 10.3123H58.7461C56.345 10.3123 54.3987 12.2585 54.3987 14.6597V16.1121C54.3987 16.398 54.6294 16.6287 54.9153 16.6287H99.9365C100.222 16.6287 100.453 16.398 100.453 16.1121V14.6597C100.453 12.2585 98.5068 10.3123 96.1057 10.3123H96.0992ZM76.1457 6.92008C76.2497 6.31247 76.7826 5.84783 77.4227 5.84783C78.0627 5.84783 78.5924 6.30922 78.6996 6.92008C78.7126 6.99156 78.7191 7.06629 78.7191 7.14427C78.7191 7.8591 78.1407 8.44071 77.4227 8.44071C76.7046 8.44071 76.1262 7.86235 76.1262 7.14427C76.1262 7.06954 76.1327 6.99481 76.1457 6.92008Z"
fill="white"
/>
<Path
d="M100.446 15.342V16.1121C100.446 16.398 100.215 16.6287 99.9292 16.6287H54.9113C54.6254 16.6287 54.3947 16.398 54.3947 16.1121V15.342H100.449H100.446Z"
fill="#BCBCBC"
/>
<Path
d="M96.0992 10.3123H86.7349C86.7349 5.16875 82.5662 1 77.4227 1C72.2791 1 68.1104 5.16875 68.1104 10.3123H58.7461C56.345 10.3123 54.3987 12.2585 54.3987 14.6597V16.1121C54.3987 16.398 54.6294 16.6287 54.9153 16.6287H99.9365C100.222 16.6287 100.453 16.398 100.453 16.1121V14.6597C100.453 12.2585 98.5068 10.3123 96.1057 10.3123H96.0992ZM76.1457 6.92008C76.2497 6.31247 76.7826 5.84783 77.4227 5.84783C78.0627 5.84783 78.5924 6.30922 78.6996 6.92008C78.7126 6.99156 78.7191 7.06629 78.7191 7.14427C78.7191 7.8591 78.1407 8.44071 77.4227 8.44071C76.7046 8.44071 76.1262 7.86235 76.1262 7.14427C76.1262 7.06954 76.1327 6.99481 76.1457 6.92008V6.92008Z"
stroke="#12183E"
strokeWidth={0.160846}
strokeLinejoin="round"
/>
<Path
d="M119.051 34.688H141.243"
stroke="#12183E"
strokeWidth={0.160846}
strokeLinejoin="round"
/>
<Path
d="M21.9871 51.8569H34.4316"
stroke="#12183E"
strokeWidth={0.160846}
strokeLinejoin="round"
/>
<Path
d="M123.203 65.4689C122.89 64.8824 122.423 64.392 121.853 64.0501C121.283 63.7082 120.63 63.5276 119.965 63.5276C119.301 63.5276 118.648 63.7082 118.078 64.0501C117.508 64.392 117.041 64.8824 116.728 65.4689L97.1947 102.689C96.9061 103.237 96.7656 103.851 96.7873 104.471C96.809 105.09 96.992 105.693 97.3184 106.22C97.6459 106.751 98.1041 107.189 98.6492 107.493C99.1944 107.796 99.8082 107.955 100.432 107.954H139.499C140.123 107.956 140.738 107.797 141.283 107.493C141.829 107.19 142.288 106.751 142.616 106.22C142.941 105.692 143.123 105.089 143.144 104.47C143.165 103.851 143.025 103.237 142.736 102.689L123.203 65.4689Z"
fill="#12183E"
stroke="#12183E"
strokeWidth={0.413832}
strokeLinejoin="round"
/>
<Path
d="M121.697 65.4689C121.384 64.8824 120.917 64.392 120.347 64.0501C119.777 63.7082 119.125 63.5276 118.46 63.5276C117.795 63.5276 117.142 63.7082 116.572 64.0501C116.002 64.392 115.535 64.8824 115.222 65.4689L95.689 102.689C95.4004 103.237 95.2599 103.851 95.2816 104.471C95.3033 105.09 95.4863 105.693 95.8127 106.22C96.1402 106.751 96.5984 107.189 97.1435 107.493C97.6887 107.796 98.3025 107.955 98.9265 107.954H137.993C138.617 107.956 139.232 107.797 139.778 107.493C140.324 107.19 140.782 106.751 141.111 106.22C141.436 105.692 141.618 105.089 141.639 104.47C141.66 103.851 141.519 103.237 141.23 102.689L121.697 65.4689Z"
fill="white"
stroke="#12183E"
strokeWidth={0.413832}
strokeLinejoin="round"
/>
<Path
d="M117.716 91.0144L117.716 77.209"
stroke="#0085FF"
strokeWidth={3.161}
strokeLinecap="round"
strokeLinejoin="round"
/>
<Path
d="M117.938 97.314C117.79 97.3169 117.643 97.3493 117.508 97.4093C117.372 97.4693 117.25 97.5557 117.148 97.6635C117.046 97.7712 116.967 97.8982 116.915 98.0369C116.862 98.1757 116.838 98.3235 116.844 98.4717C116.854 98.7672 116.978 99.0475 117.189 99.2545C117.4 99.4615 117.683 99.5795 117.979 99.584C118.127 99.581 118.273 99.5486 118.409 99.4886C118.544 99.4286 118.667 99.3422 118.768 99.2345C118.87 99.1267 118.95 98.9997 119.002 98.861C119.054 98.7222 119.078 98.5744 119.073 98.4263C119.063 98.1375 118.945 97.863 118.742 97.657C118.54 97.451 118.267 97.3286 117.979 97.314H117.956"
stroke="#0085FF"
strokeWidth={2.14948}
strokeLinecap="round"
strokeLinejoin="round"
/>
</Svg>
);
export default EmptyPageWarnIcon;

6
src/components/form/components/ImageUpload.tsx
View File

@@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
import { Control, Controller } from 'react-hook-form';
import {
ImageBackground,
Pressable,
StyleSheet,
TouchableOpacity,
View
} from 'react-native';
import CameraClickPicture from '../../../../RN-UI-LIB/src/components/camera_click_picture/CameraClickPicture';
@@ -89,11 +89,11 @@ const ImageUpload: React.FC<IImageUpload> = props => {
) : (
<View>
<ImageBackground style={styles.image} source={{uri: image || ''}}>
<Pressable
<TouchableOpacity
onPress={() => setImage('')}
style={styles.deleteButton}>
<DeleteIcon />
</Pressable>
</TouchableOpacity>
</ImageBackground>
</View>
)}

8
src/components/form/index.tsx
View File

@@ -1,6 +1,6 @@
import React, {useState} from 'react';
import {useForm} from 'react-hook-form';
import {Pressable, ScrollView, StyleSheet, View} from 'react-native';
import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import { useNavigationState } from '@react-navigation/native';
import {useDispatch, useSelector} from 'react-redux';
@@ -226,9 +226,9 @@ const Widget: React.FC<IWidget> = props => {
paddingHorizontal: 16,
}}>
<View style={[GenericStyles.row]}>
<Pressable onPress={() => pushToScreen('Home')}>
<CloseIcon color="#ffffff" />
</Pressable>
<TouchableOpacity onPress={() => pushToScreen('Home')}>
<CloseIcon color={COLORS.BACKGROUND.PRIMARY} />
</TouchableOpacity>
<View style={{marginLeft: 16}}>
<Heading
type={'h5'}

2
src/screens/Profile/AccountDetails.tsx
View File

@@ -15,7 +15,7 @@ const AccountDetails = () => {
return (
<View style={[GenericStyles.row, styles.accountDetails]}>
{/* Need URI for the profile pic */}
<Avatar name={'Profile'} dataURI={'uri'} />
<Avatar name={name} dataURI={'uri'} />
<View style={styles.detailsContainer}>
<Heading type="h5" dark bold>
Account Details

10
src/screens/Profile/ProfileHeader.tsx
View File

@@ -1,10 +1,10 @@
import {Pressable, StyleSheet, View} from 'react-native';
import {StyleSheet, TouchableOpacity, View} from 'react-native';
import React from 'react';
import Heading from '../../../RN-UI-LIB/src/components/Heading';
import {GenericStyles} from '../../../RN-UI-LIB/src/styles';
import {COLORS} from '../../../RN-UI-LIB/src/styles/colors';
import {navigateToScreen} from '../../components/utlis/navigationUtlis';
import ArrowBackSmallIcon from '../../../RN-UI-LIB/src/Icons/ArrowBackSmallIcon';
import BackArrowIcon from '../../../RN-UI-LIB/src/Icons/BackArrowIcon';
const ProfileHeader = () => {
const handleBackIconPress = () => {
@@ -17,9 +17,9 @@ const ProfileHeader = () => {
GenericStyles.alignCenter,
styles.header,
]}>
<Pressable onPress={handleBackIconPress}>
<ArrowBackSmallIcon />
</Pressable>
<TouchableOpacity onPress={handleBackIconPress} >
<BackArrowIcon fillColor={COLORS.BACKGROUND.PRIMARY}/>
</TouchableOpacity>
<Heading type="h5" style={styles.headerLabel}>
Profile
</Heading>

6
src/screens/Profile/index.tsx
View File

@@ -1,4 +1,4 @@
import {Alert, Pressable, StyleSheet, View} from 'react-native';
import {Alert, StyleSheet, TouchableOpacity, View} from 'react-native';
import React from 'react';
import {GenericStyles} from '../../../RN-UI-LIB/src/styles';
import Text from '../../../RN-UI-LIB/src/components/Text';
@@ -34,7 +34,7 @@ const Profile = () => {
<View style={GenericStyles.mb24}>
<AccountDetails />
</View>
<Pressable
<TouchableOpacity
onPress={handleLogout}
style={[
GenericStyles.row,
@@ -43,7 +43,7 @@ const Profile = () => {
]}>
<LogoutIcon />
<Text style={styles.logoutText}>Logout</Text>
</Pressable>
</TouchableOpacity>
</View>
</View>
);

170
src/screens/allCases/AllCases.tsx
View File

@@ -12,7 +12,11 @@ import {GenericStyles} from '../../../RN-UI-LIB/src/styles';
import {COLORS} from '../../../RN-UI-LIB/src/styles/colors';
import {RootState} from '../../store/store';
import {CaseStatuses, ICaseItem, CaseTypes} from './interface';
import {COMPLETED_STATUSES, ListHeaderItems} from './contants';
import {
COMPLETED_STATUSES,
EmptyListMessages,
ListHeaderItems,
} from './contants';
import CaseItem from './CaseItem';
import {Search} from '../../../RN-UI-LIB/src/utlis/search';
import CasesActionButtons from './CasesActionButtons';
@@ -24,6 +28,7 @@ import FiltersContainer, {
import TextInput from '../../../RN-UI-LIB/src/components/TextInput';
import SearchIcon from '../../../RN-UI-LIB/src/Icons/SearchIcon';
import FilterIcon from '../../assets/icons/FilterIcon';
import EmptyList from './EmptyList';
export const Separator = () => <View style={styles.separator} />;
@@ -39,74 +44,78 @@ const AllCases = () => {
searchQuery,
} = useSelector((state: RootState) => state.allCases);
const dispatch = useDispatch();
const [pendingCases , setPendingCases] = useState([]);
const [pendingCases, setPendingCases] = useState([]);
useEffect(()=>{
useEffect(() => {
const filteredList = casesList.filter(caseItem => {
return !COMPLETED_STATUSES.includes(caseItem.caseStatus) &&
evaluateFilterForCases(
caseItem,
filters,
selectedFilters,
);
return (
!COMPLETED_STATUSES.includes(caseItem.caseStatus) &&
evaluateFilterForCases(caseItem, filters, selectedFilters)
);
});
console.log('inside useEffect');
// @ts-ignore
setPendingCases(searchQuery.length > 0 ? Search(searchQuery , filteredList || [] , { keys: ['customerInfo.name']}).map(filteredListItem => filteredListItem.obj) : filteredList);
},[casesList , filters , selectedFilters , searchQuery])
setPendingCases(
searchQuery.length > 0
? Search(searchQuery, filteredList || [], {
keys: ['customerInfo.name'],
}).map(filteredListItem => filteredListItem.obj)
: filteredList,
);
}, [casesList, filters, selectedFilters, searchQuery]);
const {compiledList, completedPinnedCasesCount, pendingPinnedCasesCount} =
useMemo(() => {
const pinnedList: Array<ICaseItem> = [];
const otherList: Array<ICaseItem> = [];
const compiledList: Array<ICaseItem> = [];
if (!pendingCases.length) {
return {};
const {
compiledList = [],
completedPinnedCasesCount = 0,
pendingPinnedCasesCount = 0,
} = useMemo(() => {
const pinnedList: Array<ICaseItem> = [];
const otherList: Array<ICaseItem> = [];
const compiledList: Array<ICaseItem> = [];
if (!pendingCases.length) {
return {};
}
// Filter input
// compiledList.push(ListHeaderItems.FILTER as ICaseItem);
//extracting data for todo list and other cases
pendingCases.forEach(caseItem => {
if (caseItem.pinRank === null || caseItem.pinRank === undefined) {
otherList.push({...caseItem, type: CaseTypes.CASE});
} else {
pinnedList.push({...caseItem, type: CaseTypes.TODO});
}
});
// Filter input
// compiledList.push(ListHeaderItems.FILTER as ICaseItem);
if (pinnedList.length) {
// Pinned list header
compiledList.push(ListHeaderItems.PINNED_LIST as ICaseItem);
compiledList.push(...pinnedList);
}
//extracting data for todo list and other cases
pendingCases.forEach(caseItem => {
if (
caseItem.pinRank === null ||
caseItem.pinRank === undefined
) {
otherList.push({...caseItem, type: CaseTypes.CASE});
} else {
pinnedList.push({...caseItem, type: CaseTypes.TODO});
}
});
if (otherList.length) {
// Other cases header
compiledList.push(ListHeaderItems.OTHER_CASES as ICaseItem);
compiledList.push(...otherList);
}
if (pinnedList.length) {
// Pinned list header
compiledList.push(ListHeaderItems.PINNED_LIST as ICaseItem);
compiledList.push(...pinnedList);
let completedPinnedCasesCount = 0;
pinnedList.forEach(todo => {
if (todo.caseStatus === CaseStatuses.CLOSED) {
completedPinnedCasesCount++;
}
});
const pendingPinnedCasesCount =
pinnedList.length - completedPinnedCasesCount;
if (otherList.length) {
// Other cases header
compiledList.push(ListHeaderItems.OTHER_CASES as ICaseItem);
compiledList.push(...otherList);
}
let completedPinnedCasesCount = 0;
pinnedList.forEach(todo => {
if (todo.caseStatus === CaseStatuses.CLOSED) {
completedPinnedCasesCount++;
}
});
const pendingPinnedCasesCount =
pinnedList.length - completedPinnedCasesCount;
return {
compiledList,
pinnedList,
completedPinnedCasesCount,
pendingPinnedCasesCount,
};
}, [pendingCases]);
return {
compiledList,
pinnedList,
completedPinnedCasesCount,
pendingPinnedCasesCount,
};
}, [pendingCases]);
const handleSearchChange = (query: string) => {
// const filterList = query.length > 0 ? Search(query , filteredList || [] , { keys: ['customerInfo.name']}).map(filteredListItem => filteredListItem.obj) : filteredList;
@@ -117,7 +126,7 @@ const AllCases = () => {
React.useState<boolean>(false);
return (
<View style={GenericStyles.fill}>
<View style={[GenericStyles.fill, GenericStyles.whiteBackground]}>
<>
<View
style={[
@@ -151,33 +160,26 @@ const AllCases = () => {
/>
</Modal>
</>
{compiledList ? (
<>
<VirtualizedList
data={compiledList}
stickyHeaderIndices={[0]}
initialNumToRender={4}
renderItem={row => (
<CaseItem
data={row}
completedPinnedCasesCount={
completedPinnedCasesCount
}
pendingPinnedCasesCount={
pendingPinnedCasesCount
}
handleSearchChange={handleSearchChange}
/>
)}
keyExtractor={item => item.caseReferenceId}
getItemCount={item => item.length}
getItem={getItem}
ItemSeparatorComponent={<Separator />}
<VirtualizedList
data={compiledList}
stickyHeaderIndices={[0]}
initialNumToRender={4}
renderItem={row => (
<CaseItem
data={row}
completedPinnedCasesCount={completedPinnedCasesCount}
pendingPinnedCasesCount={pendingPinnedCasesCount}
handleSearchChange={handleSearchChange}
/>
</>
) : (
<Text>Nothing to show</Text>
)}
)}
keyExtractor={item => item.caseReferenceId}
getItemCount={item => item.length}
getItem={getItem}
ListEmptyComponent={
<EmptyList message={EmptyListMessages.NO_PENDING_CASES} />
}
ItemSeparatorComponent={<Separator />}
/>
{newlyPinnedCases || selectedTodoListCount ? (
<CasesActionButtons />
) : (

18
src/screens/allCases/ComplatedCase.tsx
View File

@@ -1,11 +1,12 @@
import {StyleSheet, View, VirtualizedList} from 'react-native';
import React from 'react';
import {CaseStatuses, ICaseItem} from './interface';
import {ICaseItem} from './interface';
import ListItem from './ListItem';
import {COLORS} from '../../../RN-UI-LIB/src/styles/colors';
import {useAppSelector} from '../../hooks';
import { COMPLETED_STATUSES } from './contants';
// import Text from '../../../../RN-UI-LIB/src/components/Text';
import {COMPLETED_STATUSES, EmptyListMessages} from './contants';
import {GenericStyles} from '../../../RN-UI-LIB/src/styles';
import EmptyList from './EmptyList';
const Seperator = () => <View style={styles.seperator} />;
@@ -13,14 +14,14 @@ const getItem = (item: Array<ICaseItem>, index: number) => item[index];
const ComplatedCase = () => {
const data = useAppSelector(state => state.allCases.casesList);
const completed = data.filter(
({caseStatus}) =>
COMPLETED_STATUSES.includes(caseStatus)
const completed = data.filter(({caseStatus}) =>
COMPLETED_STATUSES.includes(caseStatus),
);
return (
<View>
<View style={[GenericStyles.fill, GenericStyles.whiteBackground]}>
<VirtualizedList
data={completed}
contentContainerStyle={GenericStyles.fill}
initialNumToRender={4}
renderItem={row => (
<ListItem caseData={row.item} compleatedList />
@@ -29,6 +30,9 @@ const ComplatedCase = () => {
getItemCount={item => item.length}
getItem={getItem}
ItemSeparatorComponent={<Seperator />}
ListEmptyComponent={
<EmptyList message={EmptyListMessages.NO_COMPLETED_CASES} showWarnSign/>
}
/>
</View>
);

26
src/screens/allCases/EmptyList.tsx Normal file
View File

@@ -0,0 +1,26 @@
import {View} from 'react-native';
import React from 'react';
import EmptyPageWarnIcon from '../../assets/icons/EmptyPageWarnIcon';
import {GenericStyles} from '../../../RN-UI-LIB/src/styles';
import Heading from '../../../RN-UI-LIB/src/components/Heading';
import EmptyPageCheckIcon from '../../assets/icons/EmptyPageWarnIcon';
interface IEmptyList {
message: string;
showWarnSign?: boolean;
}
const EmptyList: React.FC<IEmptyList> = ({showWarnSign, message}) => {
return (
<View style={[GenericStyles.fill, GenericStyles.centerAlignedRow]}>
<View>
{showWarnSign ? <EmptyPageWarnIcon /> : <EmptyPageCheckIcon />}
<Heading dark bold type="h3" style={GenericStyles.mt16}>
{message}
</Heading>
</View>
</View>
);
};
export default EmptyList;

6
src/screens/allCases/ListItem.tsx
View File

@@ -1,4 +1,4 @@
import {Pressable, StyleSheet, View} from 'react-native';
import {Pressable, StyleSheet, TouchableOpacity, View} from 'react-native';
import React from 'react';
import {
CaseStatuses,
@@ -98,7 +98,7 @@ const ListItem: React.FC<IListItem> = props => {
? GenericStyles.silverBackground
: GenericStyles.whiteBackground,
]}>
<Pressable
<TouchableOpacity
style={[styles.avatarContainer, styles.alignSelf]}
onPress={handleAvatarClick}>
{caseSelected ? (
@@ -109,7 +109,7 @@ const ListItem: React.FC<IListItem> = props => {
dataURI={caseData.customerInfo.imageURL}
/>
)}
</Pressable>
</TouchableOpacity>
<View style={[GenericStyles.ml8, styles.fb80]}>
<Heading numberOfLines={1} type={'h5'} bold dark>
{caseData.customerInfo.name}

5
src/screens/allCases/contants.ts
View File

@@ -16,3 +16,8 @@ export const ListHeaderItems = {
caseReferenceId: '-3',
},
};
export const EmptyListMessages = {
NO_COMPLETED_CASES: 'No case completed yet',
NO_PENDING_CASES: 'All cases completed',
};

10
src/screens/allCases/index.tsx
View File

@@ -1,5 +1,5 @@
import React, {useEffect, useMemo} from 'react';
import {Pressable, StyleSheet, View} from 'react-native';
import {StyleSheet, TouchableOpacity, View} from 'react-native';
import Heading from '../../../RN-UI-LIB/src/components/Heading';
import Tabs from '../../../RN-UI-LIB/src/components/tabs/Tabs';
import Text from '../../../RN-UI-LIB/src/components/Text';
@@ -36,9 +36,9 @@ const LogoActions = () => {
const count = newlyPinnedCases || selectedTodoListCount;
return (
<View style={GenericStyles.centerAlignedRow}>
<Pressable onPress={handleBackPressIfTodoSelected}>
<TouchableOpacity onPress={handleBackPressIfTodoSelected}>
<ArrowBackSmallIcon />
</Pressable>
</TouchableOpacity>
<Text style={[styles.text, styles.selectedText]} bold light>
{count} selected
</Text>
@@ -98,9 +98,9 @@ const AllCasesMain = () => {
My allocations
</Heading>
)}
<Pressable onPress={handleProfileIconPress}>
<TouchableOpacity onPress={handleProfileIconPress}>
<AvatarIcon />
</Pressable>
</TouchableOpacity>
</View>
<Tabs
selectedTab="first"

10
src/screens/caseDetails/CaseDetailsHeader.tsx
View File

@@ -1,10 +1,10 @@
import {Pressable, StyleSheet, View} from 'react-native';
import {StyleSheet, TouchableOpacity, View} from 'react-native';
import React from 'react';
import Heading from '../../../RN-UI-LIB/src/components/Heading';
import {GenericStyles} from '../../../RN-UI-LIB/src/styles';
import {COLORS} from '../../../RN-UI-LIB/src/styles/colors';
import {navigateToScreen} from '../../components/utlis/navigationUtlis';
import ArrowBackSmallIcon from '../../../RN-UI-LIB/src/Icons/ArrowBackSmallIcon';
import BackArrowIcon from '../../../RN-UI-LIB/src/Icons/BackArrowIcon';
const CaseDetailsHeader = () => {
const handleBackIconPress = () => {
@@ -17,9 +17,9 @@ const CaseDetailsHeader = () => {
GenericStyles.alignCenter,
styles.header,
]}>
<Pressable onPress={handleBackIconPress}>
<ArrowBackSmallIcon />
</Pressable>
<TouchableOpacity onPress={handleBackIconPress} >
<BackArrowIcon fillColor={COLORS.BACKGROUND.PRIMARY}/>
</TouchableOpacity>
<Heading type="h5" style={styles.headerLabel}>
Customer details
</Heading>

10
src/screens/caseDetails/UserDetailsSection.tsx
View File

@@ -2,9 +2,9 @@ import React, {useCallback, useState} from 'react';
import {
Image,
Modal,
Pressable,
SafeAreaView,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native';
import Avatar from '../../../RN-UI-LIB/src/components/Avatar';
@@ -47,13 +47,13 @@ const UserDetailsSection: React.FC<IUserDetailsSection> = props => {
return (
<View style={[GenericStyles.row, GenericStyles.pb16, styles.container]}>
<Pressable onPress={handleOpenClose}>
<TouchableOpacity onPress={handleOpenClose}>
<Avatar
size={64}
name={customerInfo.customerName}
dataURI={customerInfo.imageURL}
/>
</Pressable>
</TouchableOpacity>
<View style={[styles.infoContainer]}>
<Heading dark type="h3">
{customerInfo.customerName}
@@ -97,9 +97,9 @@ const UserDetailsSection: React.FC<IUserDetailsSection> = props => {
{backgroundColor: COLORS.BACKGROUND.HEADER},
]}>
<View style={GenericStyles.p16}>
<Pressable onPress={handleOpenClose}>
<TouchableOpacity onPress={handleOpenClose}>
<CloseIcon />
</Pressable>
</TouchableOpacity>
</View>
<View
style={[