ok

src/components/TablesPage.js

@@ -29,6 +29,7 @@ const SetPaymentQr = ({ shop }) => {
   const [bgImageUrl, setBgImageUrl] = useState(getImageUrl(shop.qrBackground));
   const qrBackgroundInputRef = useRef(null);
 
+  const [cafeIdentifyNameDefault, setCafeIdentifyNameDefault] = useState(shop.cafeIdentifyName);
   const [cafeIdentifyNameUpdate, setCafeIdentifyNameUpdate] = useState(shop.cafeIdentifyName);
   const shopUrl = window.location.hostname + "/" + cafeIdentifyNameUpdate;
 
@@ -350,7 +351,7 @@ const SetPaymentQr = ({ shop }) => {
                     }}
                     onBlur={() => {
                       setIsConfigCafeIdentityName(false); // Set the state to false when input loses focus
-                      setCafeIdentifyNameUpdate(shop.cafeIdentifyName)
+                      setCafeIdentifyNameUpdate(cafeIdentifyNameDefault)
                     }} // Handle blur event to reset the state
                   />
                 </div>
@@ -617,7 +618,8 @@ const SetPaymentQr = ({ shop }) => {
       >
         Ganti alamat kedai
       </div> : (
-        <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', 
+        marginBottom: '10px' }}>
           <div
             onClick={() => setIsConfigCafeIdentityName(false)} // Close the config modal
             style={{
@@ -636,8 +638,10 @@ const SetPaymentQr = ({ shop }) => {
 
           <div
             onClick={() => {
+              setCafeIdentifyNameDefault(cafeIdentifyNameUpdate)
               // Handle save functionality here
               setIsConfigCafeIdentityName(false); // Close after saving
+              
             }}
             style={{
               backgroundColor: '#303034',
@@ -951,7 +955,7 @@ const styles = {
   },
   qrCodeContainer: {
     backgroundColor: '#999999',
-    borderRadius: '20px',
+    borderRadius: '8px',
     position: "relative",
     width: "100%",
     height: "200px",